Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

practicas

Referente al curso HTML y CSS: Clases, Posicionamiento y Flexbox, en el capítulo Selectores y posicionamiento y actividad Haga lo que hicimos

por Bianca Perrotta
| 20.4k xp | 16 posts
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practica</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1 class="titulo-blog">Ejercicio 1</h1>
    <p class="texto-destacado">Este es un ejercicio de practica</p>

    <h1 class="titulo-blog">Blog personal</h1>
    <p class="urgente">¡¡¡Atencion, este es el ejercicio numero 3!!!.</p>
</body>

</html>

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #FDB393;
}

.texto-destacado{
    color: #996644;
}

.titulo-blog{
    margin: 10px;
    color: #8A442E;
}

.urgente{
    color: red;
}

p {
    margin: 20px;
    border: 2px solid black;
    padding: 5px;
 }
1 respuesta
por Germaini33
| 35.6k xp | 65 posts
Tecnico

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio html</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>Desafio de información</header>
    <main>
        <h1>German muñoz</h1>
        
        <img src="descarga.jpg" alt="Diseño realizado por mi" style="height: 50%"><br>
        <button>Instagram</button>
        <p>
            Este ejercicio es para presentar la informacion personal, en este caso dejo mis redes sociales para el conocimiento de los diseños que realizo en caligraffitti<br>
            <span class="texto-destacado">Noticias</span>
        
        </p>
    </main>
    <footer>
        <p class="urgente">German eliecer muñoz montes / HTML y CSS: ambientes de desarrollo, estructura de archivos y tags</p>
    </footer>
</body>
</html>

style css

* {
    margin: 0;
    padding: 0;
}
/* Fondo con degradado azul a blanco */
body {
    background: linear-gradient(to bottom, #4A90E2, #FFFFFF);
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

/* Estilo para el header */
header {
    background-color: #2A5D87;
    color: white;
    font-weight: bold;
    padding: 20px;
    font-size: 24px;
    width: 100%;
    text-align: center;
}

/* Estilo para los botones */
button {
    background: linear-gradient(45deg, purple, green);
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    opacity: 0.8;
}

/* Estilo para la imagen con sombra degradada */
img {
    width: 300px;
    height: auto;
    box-shadow: 10px 10px 20px rgba(128, 128, 128, 0.5);
    border-radius: 10px;
    margin-top: 20px;
}

/* Estilo para los párrafos */
p {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 18px;
    color: #333;
    padding: 10px;
    max-width: 800px;
    margin: auto;
}

/* Estilo para el footer */
footer {
    background-color: #1F4B6E;
    color: white;
    padding: 15px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}

/* clase personaliza */
.texto-destacado{
    color:white;
    font-size: large;
}

h1{
    color: #1F4B6E;
    font-size: x-small;
}

.urgente{
    color: red;
}