Ejercicio 1 - Profesora Particular

Ejercicio para practicar habilidades de HTML y CSS. Nos concentraremos en distintas aplicaciones del clip-path y el uso de archivos SVG en las uniones de secciones.

Podés visitar el sitio que desarrollaremos aquí ↩

◆ Ver explicación en video de youtube. ◆ Descargar Imágenes (.zip) ◆ Descargar código fuente (.zip)

● Preparación

  • ◆ Creamos una carpeta y la abrimos con Visual Studio Code.
  • ◆ Generamos el archivo index.html y style.css.
  • ◆ Los conectamos en el index.html con las etiquetas link.
  • ◆ Creamos la carpeta imagenes y descargamos desde https://codigoenweb.com/ejercicioshtml/00-documento-web-profesora las imágenes.
  • ◆ Descomprimimos el archivo y copiamos las mismas en dicha carpeta.
  • ◆ Correjimos el lenguaje.
  • ◆ Escribimos el título que se verá en la pestaña superior.
  • ◆ Agregamos las etiquetas meta según nuestro objetivo con los buscadores y la difusión de este sitio en redes.
  • ◆ Desde el sitio https://cdnjs.com/libraries/font-awesome/7.0.1 copiamos el link para usar los íconos.
  • ◆ Desde https://fonts.google.com descargamos el link del tipo de letra llamado ‘Montserrat’.
  • ◆ Desde el mismo sitio descargamos el link para posteriormente usar algunos íconos.
  • ◆ Iniciamos con la estructura general del body.

Nos quedaría el siguiente index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Profesora particular de primaria y secundaria. Me especializo en matemáticas, aritmética y geometría.">
    <!-- Para buscadores -->
     <meta name="robots" content="index, follow">
     <!-- Para redes sociales -->
    <meta property="og:title" content="Sofía Rivero - Profesora particular.">
    <meta property="og:description" content="Profesora particular de primaria y secundaria. Me especializo en matemáticas, aritmética y geometría.">
    <meta property="og:image" content="https://clases.caterinaweb.net/imagenes/foto-profesora.jpg">
    <meta property="og:url" content="https://clases.caterinaweb.net">
    <!-- Para X - ex twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://clases.caterinaweb.net/imagenes/foto-profesora.jpg">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="style.css">
    <title>Sofía Rivero - Profesora</title>
</head>
<body>

    <header></header>
    <main></main>
    <footer></footer>
    
</body>
</html>

Activamos el Live Server y el Live Preview

● Header

1- Desarrollamos el HTML del encabezado.

    <header>
        <nav>
            <a href="#inicio" class="logo"><i class="fas fa-briefcase"> </i>Clases particulares</a>
            <ul class="opciones">
                <label class="fas fa-xmark" id="cerrar-btn"></label>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobremi">Sobre mí</a></li>
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#contacto">Contacto</a></li>
                <li><a href="#blogs">Blogs</a></li>
            </ul>
            <label id="menu-btn" class="fas fa-bars-staggered"></label>
        </nav>
    </header>

2- Desarrollamos el CSS

/* Determinamos valores para tener uniformidad y para un fácil cambio. */
:root{
    --color-texto:#292930;
    --color-texto-claro:#6c6c6b;
    --color-principal:orange;
    --color-principal-claro:gold;
    --color-fondo:#f3f3f3;
    --color-blanco:#fff;

    --sombra:0 0.2rem 0.2rem rgba(0,0,0,0.1);

}
/* Configuración general */
/* Aplica a todas las etiquetas */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Aplica a las propiedades heredables */
body{
    font-family: "Montserrat", sans-serif;;
}

/* Clase que se usa en varias etiquetas */
.contenedor{
    max-width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
     /* arriba y abajo */
    padding-block: 1.5rem;
}
#menu-btn, #cerrar-btn{
    display: none;
}
header nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
header nav ul{
    display: flex;
    gap:1rem;
    list-style: none;
}
header nav a{
    text-decoration: none;
    color: inherit;
    white-space:nowrap;
}

@media (max-width:978px) {
    header nav ul.opciones{
        position: fixed;
        top:0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        padding-top: 10rem;
        align-items: center;
        width: 50%;
        background-color: var(--color-texto);
        color: var(--color-blanco);       
    }
    header nav ul.opciones  a {
        color: var(--color-blanco);   
    }
    /* En celulares no funciona- Pero a veces en computadora uno achica las pantallas */
     header nav ul.opciones  a:hover {
        font-weight: 600;      
    }
}

@media (max-width:450px) {
    header nav ul.opciones{
          width: 80%;
    }
}
header nav .logo{
    font-size: 1.25rem;
    color: var(--color-texto);
    font-weight: bold;
}
header nav .logo i{
    margin-right: 0.5rem;
    color: var(--color-principal);
    text-shadow: var(--sombra);
}

● Menú lateral

En el HTML agregamos los input que nos van a permitir controlar la apertura y cierre. Y los conectamos con sus correspondientes label a través del atributo for

    <header>
        <nav class="contenedor">
            <input type="radio"  name="abrir-cerrar-menu" id="abrir-menu">
            <input type="radio"  name="abrir-cerrar-menu" id="cerrar-menu">
            <a href="#inicio" class="logo"><i class="fas fa-briefcase"> </i>Clases particulares</a>

            <ul class="opciones">
                <label for="cerrar-menu" class="fas fa-xmark" id="cerrar-btn"></label>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#sobremi">Sobre mí</a></li>
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#contacto">Contacto</a></li>
                <li><a href="#blogs">Blogs</a></li>
            </ul>
            <label for="abrir-menu" id="menu-btn" class="fas fa-bars-staggered"></label>
        </nav>
    </header>

Aplicamos los estilos en el CSS 1- Para que no se vean los input, que solo sirven para controlarlos con los label

#menu-btn, #cerrar-btn, input[type='radio']{
    display: none;
}

2- En pantallas chicas, mostramos los íconos que nos sirven para controlar si queremos abrir o cerrar el menú y le aplicamos el estilo correspondiente.

#menu-btn, #cerrar-btn, input[type='radio']{
    display: none;
}
#cerrar-btn{
    position: absolute;
    top:2rem;
    left:2rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.5s ease;
}
#cerrar-btn:hover{
    transform: rotate(360deg);
}
#menu-btn{
    font-size: 1.5rem;
    cursor: pointer;
}
...
@media (max-width:978px) {
    ...
     #menu-btn, #cerrar-btn{
    display: block;
    }  
}

3- Controlamos la apertura y cierre enviando a una posición original fuera de la pantalla y solo si se presiona el ícono menú lo ubicamos en pantalla

@media (max-width:978px) {

    header nav .opciones{
        ...
        right:-125%;
        ...     
    }
    
    #abrir-menu:checked ~ .opciones{
        right: 0;
    }
}

● Sección Inicio

1- En primera instancia, tendremos 2 partes:

    <section class="contenedor" id="inicio">
        <div class="contenido"></div>
        <div class="imagen"></div>
    </section>

2- Desarrollando cada una:

    <section class="contenedor" id="inicio">
        <div class="contenido">
            <span>Hola, mi nombre es</span>
            <h1><em>Sofía</em> Rivero</h1>
            <h3>Soy profesora de Matemáticas</h3>
            <p>Te puedo ayudar con los ejercicios de matemática, para que puedas resolverlos fácilmente.</p>
            <a href="#" class="btn">Contactarse <span class="icono material-symbols-outlined">perm_phone_msg</span></a>
        </div>
        <div class="imagen">
            <img src="/imagenes/foto13.png" alt="Estudiante"  >
        </div>
    </section>

3- Aplicamos estilos para ubicar

section#inicio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
section#inicio .contenido,section#inicio .imagen {
     /* El elemento puede crecer, el elemento puede encogerse. La medida base normal 25rem que aqui son 400px (25rem * 16px) */
    flex: 1 1 25rem;
}
section#inicio .imagen img{
    /*  La imagen con medida en % hace que sea adaptable. */
    width: 100%;
   object-fit: cover;
}

4- Agregamos los estilos para el diseño:

/*  para diseño de sus contenido */
section#inicio .contenido span{
    font-size: 1.15rem;
    color: var(--color-texto);
    border-radius: 3rem;
    padding: 0.5rem 1.5rem;
}
section#inicio .contenido h1{
    font-size: 3.75rem;
    margin: 1rem 0;
    color: var(--color-texto);
}
section#inicio .contenido h1 em{
    color: var(--color-principal);
    text-shadow: var(--sombra);
}
section#inicio .contenido h3{
    color:var(--black);
    font-size: 1.25rem;
}
section#inicio .contenido p{
    color:var(--color-texto-claro);
    font-size: 1rem;
    line-height: 1.2;
    margin: 1rem 0;   
}

● Clase para los botones

Para tener un diseño uniforme, crearemos una clase .btn general , como la de .contenedor para aplicarsela a todas las etiquetas que cumplan la función de botón en nuestro sitio.

.btn{
    text-decoration: none;
    display: inline-block;
    /* arriba - derecha - abajo - izquierda */
    padding: 0.3rem 0.3rem 0.3rem 1.2rem;
    margin-top: 0.6rem;
    font-size: 1.1rem;
    background-color: var(--color-principal);
    color: var(--color-texto);
    border-radius: 3rem;
    display: inline-flex;
    justify-content:center;
    align-items: center;
     cursor: pointer;
    overflow:hidden;
    transition: 0.2s linear;
    position: relative;
    z-index: 0;
}
.btn span.icono{
    font-size: 1.5rem !important;
    color: green !important;
}
.btn::before{
    content: "";
    position: absolute;
    top:0; right:0;
    height: 100%;
    width: 0%;
    background-color: var(--color-texto);
    border-radius: 5rem;
    z-index: -1;
    transition: 0.2s ease-out;

}
.btn:hover{
    color: var(--color-blanco);
}
.btn:hover::before{
    left: 0%;
    width: 100%;

}
.btn:hover span.icono{
    color: chartreuse !important;
}

● Sección habilidades

Armo la estructura general de la sección

    <section id="habilidades">
        <div class="contenedor">
            <div class="titulo"></div>
            <div class="tarjetas">
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
            </div>
        </div>
    </section>

1- Desarrollamos el título como clase general para usarlo en todas las secciones que necesitemos. Para la uniformidad del sitio web

    <div class="titulo">
        <span>Mis Habilidades y</span>
        <h3>Dominio Técnico</h3>
    </div>

2- Aplicamos estilos

    /* titulo*/
    .titulo{
        text-align: center;
        margin-bottom: 1rem;
    }
    .titulo span{
        padding:0.5rem 1.5rem;
        color: var(--color-texto);
        border-radius: 3rem;
        font-size: 1.8rem;
    }
    .titulo h3{
        font-size: 1.5rem;
        margin-top: 0.5rem;
        color: var(--color-texto);
    }

● Tarjeta de habilidades

1- Desarrollamos la tarjeta individual de esta sección

    <div class="tarjeta">
        <span class="material-symbols-outlined">calculate</span>
        <h3>Matemáticas</h3>
        <p>Problemas, ejercicios básicos y avanzados. Desde primer grado a Sexto año secundario.</p>
    </div>

2- Aplicamos estilo a la tarjeta. Provisoriamente comentamos las vacías.

/* Sección habilidades */
    section#habilidades{
        background-color: var(--color-texto);
    }
    section#habilidades .tarjetas{
    display: grid;
    grid-template-columns: repeat(auto-fit,22rem);
    gap:1.2rem;
    align-items: flex-start;
    justify-content: center;
    }

    section#habilidades .tarjetas .tarjeta{
    text-align: center;
    padding: 0.5rem;
    z-index: 0;
    position: relative;
    }
    section#habilidades .tarjetas .tarjeta::before{
        content: "";
        position: absolute;
        bottom:0; right: 0; left: 0;
        background: var(--color-blanco);
        height: 10rem;
        z-index: -1;
        clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0% 38%);

    }
    section#habilidades .tarjetas .tarjeta span{
        width: 3.5rem;
        height: 3.5rem;
        font-size: 3.2rem;
        background-color: var(--color-principal);
        color: var(--color-texto-claro);
        border-radius: 1rem 0 1rem 0;
        padding: 0.5rem;
        transition: 0.2s linear;
    }
    section#habilidades .tarjetas .tarjeta:hover span{
        transform: translateY(-1rem);
    }
    section#habilidades .tarjetas .tarjeta h3{
        font-size: 1.25rem;
        color: var(--color-texto);
        padding:0.5rem 0;
    }
    section#habilidades .tarjetas .tarjeta p{
        font-size: 0.9rem;
        color: var(--color-texto-claro);
        padding: 1rem 0;
        line-height: 1.2;

    }

3- Completamos todas las tarjetas

    <section id="habilidades">
        <div class="contenedor">
            <div class="titulo">
                <span>Mis Habilidades y</span>
                <h3>Dominio Técnico</h3>
            </div>
            <div class="tarjetas">
                <div class="tarjeta">
                    <span class="material-symbols-outlined">calculate</span>
                    <h3>Matemáticas</h3>
                    <p>Problemas, ejercicios básicos y avanzados. Desde primer grado a Sexto año secundario.</p>
                </div>
                <div class="tarjeta">
                    <span class="material-symbols-outlined">check_circle</span>
                    <h3>Aritmética</h3>
                    <p>Operaciones básicas, fracciones, porcentajes y proporciones. Plroblemática aplicada.</p>
                </div>
                <div class="tarjeta">
                    <span class="material-symbols-outlined">design_services</span>
                    <h3>Geometría</h3>
                    <p>Estudio de figuras, propiedades y relaciones espaciales. Ejercicios</p>
                </div>
                <div class="tarjeta">
                    <span class="material-symbols-outlined">rotate_90_degrees_ccw</span>
                    <h3>Trigonometría</h3>
                    <p>Relaciones entre ángulos y lados de triángulos.Teórico y práctico.</p>
                </div>
                <div class="tarjeta">
                    <span class="material-symbols-outlined">graphic_eq_off</span>
                    <h3>Álgebra</h3>
                    <p>Estudio de variables, ecuaciones y propiedades numéricas.Teórico y práctico.</p>
                </div>
                <div class="tarjeta">
                    <span class="material-symbols-outlined">clarify</span>
                    <h3>Exámenes</h3>
                    <p>Preparación específica en temas puntuales requeridos. Aprobá tu examen con seguridad.</p>
                </div>             
            </div>
        </div>
    </section>

4- En esta sección como el fondo es de color oscuro, cambiamos el color del título

section#habilidades .titulo span{

    color: var(--color-principal);
}
section#habilidades .titulo h3{
   color: var(--color-blanco);
}

● Unión de secciones

    <div style="margin-bottom: -5px; margin-top: -200px; " >
        <img src="/imagenes/wave.svg" alt="onda" style="width: 100%;">
    </div>
@media (max-width:978px) {
    section#habilidades{
            padding-top: 100px;
        }
}
...
section#inicio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
}
...

● Sección Sobre mí

1- Como siempre desarrollamos primero el html

    <section id="sobremi" class="contenedor">
        <div class="imagen">
            <img src="imagenes/foto-profesora.jpg" alt="profesora">
        </div>
        <div class="contenido">
            <div class="titulo">
                <span>Sobre mí</span>
                <h3>Mi educación</h3>
            </div>
            <p  class="descripcion"></p>
            <div class="info"></div>
        </div>
    </section>

2- Vamos aplicando el estilo, para ubicar las divisiones

    section#sobremi{
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: center;
    }
    section#sobremi .imagen, section#sobremi .contenido {
        flex: 1 1 25rem;
    }
    section#sobremi .imagen img{
        width: 100%;
    }

3- Estilamos primero los efectos de la imagen

    section#sobremi .imagen img{
        margin: 0 auto;
        width: 100%;
        border-radius: 50%;
        transition: 0.3s linear;
    }
    section#sobremi .imagen{
        border-radius: 50%;
        background-color: var(--color-principal);
        border: 0.3rem solid var(--color-texto);
        padding: 0.2rem 0.2rem 0.1rem;
        overflow: hidden;
        transition: 0.3s linear;
    }
    section#sobremi .imagen img:hover{
        /* Al hacer hover, la imagen se agranda y el padding del fondo no se ve. */
        transform: scale(1.1);
    }

4- Continuamos con el HTML del contenido

    <section id="sobremi" class="contenedor">
        <div class="imagen">
            <img src="imagenes/foto-profesora.jpg" alt="profesora">
        </div>
        <div class="contenido">
            <div class="titulo">
                <span>Sobre mí</span>
                <h3>Mi educación</h3>
            </div>
            <p  class="descripcion">Profesora graduada de FAMAF (UNC) con 15 años de experiencia. Enseño matemática aplicada a la vida real. ¡Aprobá sin estrés!</p>
            <div class="info">
                <h3>Información personal</h3>
                <div class="flex">
                    <p><span>Nombre: </span> Sofía Rivero</p>
                    <p><span>Edad: </span> 43 años</p>
                    <p><span>Profesión: </span> Profesora</p>
                    <p><span>Dominio: </span> Matemáticas</p>
                    <p><span>Experiencia: </span> 14+ años</p>
                    <p><span>Idioma: </span> Español</p>
                </div>
            </div>
        </div>
    </section>

5- y su css

    section#sobremi .contenido .descripcion{
        line-height: 1.5;
        text-align: center;
        color: var(--color-texto-claro);
        font-size: 1rem;
        padding-bottom: 0.5rem;
    }

    section#sobremi .contenido .info{
        margin: 1rem 0;
    }
    section#sobremi .contenido .info h3{
        font-size: 1.2rem;
        color: var(--color-texto);
        background: var(--color-principal);
        padding: 1rem 2rem;
        display: inline-block;
    }
    section#sobremi .contenido .info .flex{
        background: var(--color-fondo);
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.5rem;

    }
    section#sobremi .contenido .info .flex p{
        color: var(--color-texto);
        font-size: 1rem;
        flex: 1 1 15rem;
    }
    section#sobremi .contenido .info .flex p span{
    color:var(--color-texto-claro)
    }

● Sección Sobre mí

1- Armamos el HTML general

    <section id="servicios">
        <div class="contenedor">
            <div class="titulo"></div>
            <div class="tarjetas">
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
                <div class="tarjeta"></div>
            </div>
        </div>
    </section>

2-Completamos

    <section id="servicios">          
        <div class="contenedor">
            <div class="titulo">
                <span>Mis servicios</span>
                <h3>¿En qué puedo ayudarte?</h3>
            </div>
            <div class="tarjetas">
                <div class="tarjeta">
                    <div class="icon">
                        <img src="/imagenes/f1.png" alt="">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3>Clases por hora</h3>
                    <p>Agendadas durante la semana.</p>
                </div>
                <div class="tarjeta">
                    <div class="icon">
                        <img src="/imagenes/f3.png" alt="">
                        <i class="fas fa-calendar"></i>
                    </div>
                    <h3>Clases semanales</h3>
                    <p>Con turnos fijos ya determinados.</p>
                </div>
                <div class="tarjeta">
                    <div class="icon">
                        <img src="/imagenes/f2.png" alt="">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3>Contrato anual</h3>
                    <p>Horarios fijos para todo el año.</p>
                </div>
            </div>
        </div>
    </section>

3- Aplicamos los estilos

    section#servicios{
        background-color: var(--color-texto);
        margin-top: 2rem;
    }
    section#servicios .contenedor .tarjetas{
        padding-top: 8rem;
        display: grid;
        grid-template-columns: repeat(auto-fit,22rem);
        gap: 1rem;
        align-items: flex-start;
        justify-content: center;
    }
    section#servicios .contenedor .tarjetas .tarjeta{
    
        padding: 1.5rem;
        border: 0.1rem solid rgba(255,255,255,0.2);
        border-top-right-radius: 3rem;
        cursor: default;
    }


    section#servicios .contenedor .tarjetas .tarjeta:hover{
        border-style: dashed;
    }
    section#servicios .contenedor .tarjetas .tarjeta .icon{
        position: relative;
        display: inline-block;
        margin-bottom: 0.5rem;
    }
    section#servicios .contenedor .tarjetas .tarjeta .icon img{
        height: 5rem;
        width: 5rem;
        transition: 0.2s linear;
    }
    section#servicios .contenedor .tarjetas .tarjeta:hover .icon img{
        transform: rotate(90deg);
    }
    section#servicios .contenedor .tarjetas .tarjeta .icon i{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 1.5rem;
        color: var(--color-fondo);
    }
    section#servicios .contenedor .tarjetas .tarjeta h3 {
        font-size: 1.2rem;
        color: var(--color-blanco);
        margin: 0.5rem 0;
    }
    section#servicios .contenedor .tarjetas .tarjeta  p {
        line-height: 1.4;
        font-size: 0.9rem;
        color: var(--color-principal-claro);
    }

4- Ajustamos el título

    section#servicios{
        position: relative;
    }
    /*  titulo de servicios */
    section#servicios .titulo{
        padding-top: 2rem;
        position: absolute;
        top:0;
        left:50%;
        transform: translate(-50%,-35%);
    }

    section#servicios  .titulo span{
        background-color: var(--color-texto); 
        white-space:nowrap;
    }
    section#servicios  .titulo h3{
        margin-top: 2rem;
    
    }

    section#servicios  .titulo :where(span,h3){
        color:var(--color-blanco);
    }

● Fijamos el Header

header{
    position: sticky;
    top:0; left:0; right:0;
    z-index: 100;
    box-shadow: var(--sombra);
    background-color: var(--color-blanco);
}

● Suavizamos scroll y otros

html{
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: hidden;
}
::-webkit-scrollbar{
    width: 0.5rem;
}
::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb{
    background:var(--color-texto);
}
::selection{
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
}

● Sección Contacto

1- Armo la estructura general

    <section id="contacto" class="contenedor">
        <div class="formulario">
            <div class="titulo">
                <span></span>
                <h3></h3>
            </div>
            <form action=""></form>
        </div>
        <div class="tarjetas">
            <div class="tarjeta"></div>
            <div class="tarjeta"></div>
            <div class="tarjeta"></div>
        </div>
    </section>

2- Desarrollo las partes

    <section id="contacto" class="contenedor">
        <div class="formulario">
            <div class="titulo">
                <span>Contactate</span>
                <h3>¡ Estemos en contacto !</h3>
            </div>
            <form action="#">
                <div class="flex">
                    <input type="text" class="input" placeholder="Tu nombre">
                    <input type="email" class="input" placeholder="Tu email">
                </div>
            <textarea name="" class="input" placeholder="Tu mensaje"></textarea>
            <input type="submit" class="btn" value="Enviar mensaje">
            </form>
        </div>
        <div class="tarjetas">
            <div class="tarjeta">
                <i class="fas fa-phone"></i>
                <div class="">
                    <h3>Mi teléfono: </h3>
                    <a href="tel:351152076899">351- 152076899</a>
                </div>
            </div>
            <div class="tarjeta">
                <i class="fas fa-envelope"></i>
                <div class="">
                    <h3>Mi email: </h3>
                    <a href="mailto:info@gmail.com">info@gmail.com</a>
                </div>
            </div>
            <div class="tarjeta">
                <i class="fas fa-map-marker-alt"></i>
                <div class="">
                    <h3>Mi domicilio: </h3>
                    <a href="#">San Luis, Argentina</a>
                </div>
            </div>
        </div>
    </section>

3- Aplico CSS

        /* Sección Contacto */
    section#contacto{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap:2rem;
    }
    section#contacto .formulario{
        flex: 1 1 auto;
        text-align: center;
    }
    section#contacto .formulario .flex{
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    } catea
    section#contacto .formulario .flex .input{
        flex: 1 1 15rem;
    }
    section#contacto .formulario .input{
        background-color: var(--color-fondo);
        border-radius: 0.5rem;
        text-transform: none;
        color: var(--color-texto);
        font-size: 1rem;
        padding: 0.8rem 1rem;
        border: 0.1rem solid rgba(0,0,0,0.1);
    }
    section#contacto .formulario .input:focus{
        border: 0.1rem solid var(--color-principal);
        background-color: var(--color-blanco);
    }
    section#contacto .formulario textarea{
        height: 8rem;
        width: 95%;
        resize: none;
        margin-top: 1rem;
    }
    section#contacto .formulario .btn{
        border: none;
        padding: 0.5rem 1.5rem;
    }
    section#contacto .formulario .btn:hover{
        background: var(--color-texto);
    }

    section#contacto .tarjetas{
        flex:1 1 15rem;
        margin-top: 5rem;
        display: grid;
        place-items: center;
    
    }
    section#contacto .tarjetas .tarjeta{
        display: flex;
        gap:2rem;
        align-items: center;
        width: fit-content;
    
    
    }
    section#contacto .tarjetas .tarjeta:nth-child(2){
        margin: 2rem 0;
    }
    section#contacto .tarjetas .tarjeta i{
        height: 3rem;
        width: 3rem;
        line-height: 3rem;
        font-size: 2rem;
        background: var(--color-principal);
        color: var(--color-texto);
        border-radius: 0.3rem;
        text-align: center;
    }
    section#contacto .tarjetas .tarjeta h3{
        font-size: 1.2rem;
        color: var(--color-texto);

    }
    section#contacto .tarjetas .tarjeta a{
        text-decoration: none;
        display: block;
        font-size: 1rem;
        color: var(--color-texto-claro);
    }

● Sección Blogs

1- Desarrollamos el HTML general

    <section id="blogs" class="contenedor">
        <div class="titulo">
            <span></span>
            <h3></h3>
        </div>
        <div class="tarjetas">
            <div class="tarjeta"></div>
            <div class="tarjeta"></div>
            <div class="tarjeta"></div>
        </div>
    </section>

2- Lo completamos con los datos

    <section id="blogs" class="contenedor">
        <div class="titulo">
            <span>Mis Blogs</span>
            <h3>Últimos publicados</h3>
        </div>
        <div class="tarjetas">
            <div class="tarjeta">
                <div class="imagen">
                    <img src="/imagenes/blog-1.jpg" alt="">
                    <div class="flex">
                        <span>Por Sofía</span>
                        <span>5 de enero 2026</span>
                    </div>
                    </div>
                <div class="contenido">
                    <h3><a href="#">Matemática aplicada</a></h3>
                    <p>La matemática aplicada nos permite resolver situaciones que aparecen en nuestra vida cotidiana.</p>
                    <a href="#" class="btn">Leer más</a>
                </div>
            </div>
            <div class="tarjeta">
                <div class="imagen">
                    <img src="/imagenes/blog-2.jpg" alt="">
                    <div class="flex">
                        <span>Por Sofía</span>
                        <span>7 de febrero 2026</span>
                    </div>
                </div>
                <div class="contenido">
                    <h3><a href="#">Ejercitación</a></h3>
                    <p>La ejercitación repetida busca desarrollar la agilidad mental y afianzar la resolución de problemas.</p>
                    <a href="#" class="btn">Leer más</a>
                </div>                
            </div>
            <div class="tarjeta">
                <div class="imagen">
                    <img src="/imagenes/blog-3.jpg" alt="">
                    <div class="flex">
                        <span>Por Sofía</span>
                        <span>9 de marzo 2026</span>
                    </div>
                </div>
                <div class="contenido">
                        <h3><a href="#">Álgebra fácil</a></h3>
                        <p>Con el enfoque adecuado y la construcción progresiva, cualquier estudiante puede dominar el álgebra sin frustración.</p>
                        <a href="#" class="btn">Leer más</a>
                </div>
            </div>
        </div>
    </section>

2- Aplicamos los estilos

/* Blogs */
    section#blogs .tarjetas{
        display: grid;
        grid-template-columns: repeat(auto-fit,23rem);
        gap: 2rem;
        align-items: flex-start;
        justify-content: center;
    }
    section#blogs .tarjetas .imagen{
        height: 25rem;
        margin-bottom: 2.5rem;
        position: relative;
        
    }
    section#blogs .tarjetas .tarjeta .imagen img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
        filter: grayscale(1);
        transition: 0.2s linear;
    }
    section#blogs .tarjetas .tarjeta:hover .imagen img{
        transform: translateY(-1rem);
        filter: grayscale(0);
        box-shadow: var(--sombra);
    }

    section#blogs .tarjetas .tarjeta .imagen .flex{
        width: 70%;
        position: absolute;
        left:50%;
        transform: translate(-50%,50%);
        bottom: 0;
    box-shadow: var(--sombra);
        border-radius: 0.5rem;
        background-color: var(--color-fondo);
        border: 0.1rem solid var(--color-texto-claro);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        z-index: 1;
    }
    section#blogs .tarjetas .tarjeta .imagen .flex span{
        color: var(--color-texto-claro);
        font-size: 1rem;
    }
    section#blogs .tarjetas .tarjeta .contenido{
        text-align: center;
        margin-top: 1.5rem;
    }
    section#blogs .tarjetas .tarjeta .contenido h3{
        margin-bottom: 0.5rem;
    }
    section#blogs .tarjetas .tarjeta .contenido h3 a{
        text-decoration: none;
        font-size: 1.1rem;
        color: var(--color-texto);
    }
    section#blogs .tarjetas .tarjeta .contenido h3 a:hover{
        text-decoration: underline;
    }
    section#blogs .tarjetas .tarjeta .contenido p{
        font-size: 0.9rem;
        color: var(--color-texto-claro);
        line-height: 1.5;
    }
    section#blogs .btn{
        padding: 0.5rem 1.5rem;
    }

● Footer

   <footer>
        <div class="contenedor">
            <div class="redes">
            <a href="#" class="fab fa-youtube"></a>
            <a href="#" class="fab fa-whatsapp"></a>
            <a href="#" class="fab fa-linkedin"></a>
            <a href="#" class="fab fa-github"></a>
        </div>
        <div class="creditos">Traducido al español por <span>caterinaweb.net</span> | Mr Web Designer. </div>
        </div>
   </footer>
/* footer */
    footer{
        background: var(--color-texto);
    }
    footer .contenedor{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap:2rem;
    }
    footer .contenedor .redes a{
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 0.5rem;
        line-height: 2.5rem;
        font-size: 1.2rem;
        background-color: var(--color-blanco);
        color:var(--color-texto);
        text-align: center;
        margin-right: 0.5rem;
    }
    footer .contenedor .redes a:hover{
        background-color: var(--color-principal);
    }
    footer .contenedor .creditos{
        color:var(--color-blanco);
        font-size: 1rem;
    }
    footer .contenedor .creditos span{
    color: var(--color-principal);
    }

● Envío del mensaje

Para que el mensaje se envíe por whatsapp, modificamos los campos del formulario, agregando name y agregamos en la parte inferior del body el siguiente script.

    <form id="formulario-contacto">
        <div class="flex">
            <input type="text" class="input" placeholder="Tu nombre" name="nombre">
            <input type="email" class="input" placeholder="Tu email" name="email">
        </div>
        <textarea  class="input" placeholder="Tu mensaje" name="mensaje"></textarea>
        <input type="submit" class="btn" value="Enviar mensaje">
    </form>
<script>
    const formulario = document.querySelector("#formulario-contacto");

    formulario.addEventListener("submit", function (event) {
        event.preventDefault();
        console.log(formulario.nombre.value)
        const nombre = formulario.nombre.value;
        const email = formulario.email.value;
        const mensaje = formulario.mensaje.value;
  
        const texto = `Hola, soy ${nombre}.
        Mi email es: ${email}.
        Mi mensaje:${mensaje}`;

        // Reemplazá este número por tu número de WhatsApp
        const telefono = "549XXXXXXXXXX";

        const url = `https://wa.me/${telefono}?text=${encodeURIComponent(texto)}`;

        window.open(url, "_blank");
    });
</script>

Para enviarlo por email, necesitamos aprender backend, lo cual se hará al estudiar NodeJs.

Yogamanía→