Agregando clases a nuestros elementos

← Diseño Web ⌂ Home

Para aplicar estilos a los componentes html, lo más común y recomendable es hacerlo a través de clases que se asignan al elemento html mediante el atributo class. Un elemento html puede tener varias clases, se deben indicar en el mismo atributo class pero separadas por un espacio en blanco.

Al escoger los nombres de clases, debemos tener en cuenta que se pudieran aplicar a muchos elementos, o a elementos particulares, así que la claridad y precisión en su identificación facilitará la contextualización y mantenibilidad en el futuro.

Retomando nuestro código agregaremos las siguientes clases correspondientes a cada una de las secciones que teníamos.

Para la sección del header:

 <header class="header">
    <figure class="logo">
        <img src="img/tshirt.png" alt="Logo" width="40px">
    </figure>
    <nav class="menu">
        <ol>
            <li>
                <a href="#inicio" class="link">Inicio</a>
            </li>
            <li>
                <a href="#mas-vendidas" class="link">Las más vendidas</a>
            </li>
            <li>
                <a href="#promociones" class="link">Promociones</a>
            </li>
            <li>
                <a href="#mas-modelos" class="link">Más modelos</a>
            </li>
            <li>
                <a href="#preguntas-frecuentes" class="link">Preguntas frecuentes</a>
            </li>
            <li>
                <a href="#contacto" class="link">Contacto</a>
            </li>
        </ol>
    </nav>
</header>

Para la sección principal:

 <section id="inicio" class="hero">
    <h1>Playeras con diseños para Geeks, programadores y diseñadores.</h1>
    <h3>
        ¡Tenemos 3x2 en todas las playeras!
    </h3>
</section>

Para la sección de las más vendidas:

<section id="mas-vendidas" class="tshirts">
    <h2>Las más vendidas</h2>

    <!-- Playera 1 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de Star Wars</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-starwars.png" alt="Playera Star Wars" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $300.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-starwars.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

    <!-- Playera 2 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de Batman</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-batman.png" alt="Playera Batman" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $350.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-batman.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

    <!-- Playera 3 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de NASA</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-nasa.png" alt="Playera NASA" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $350.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-nasa.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

</section>

Nota: observar que la imagen se puso dentro de las etiquetas <figure>

Para la sección de promociones:

<section id="promociones" class="promotions">
    <h2 class="promotions-title">Promociones</h2>
    <p class="promotions-subtitle">
        En la compra de 2 playeras llévate la tercera <strong>¡GRATIS!</strong>
    </p>
</section>

Para la sección de más modelos sería la misma idea que la sección de más vendidas. Se deja como ejercicio completar esta sección.

Para la sección de preguntas frecuentes:

<section id="preguntas-frecuentes" class="faq">
    <h2 class="faq-title">Preguntas frecuentes</h2>
    <ul class="faq-list">
        <li class="faq-element">
            <strong>¿En cuánto tiempo llega mi playera? </strong>
            <p>De 3 a 5 días hábiles.</p>
        </li>
        <li class="faq-element">
            <strong>¿Haces envíos a todo México?</strong>
            <p>Sí, hacemos envios a todo México</p>
        </li>
        <li class="faq-element">
            <strong>¿Puedo cambiar la playera?</strong>
            <p>Sí, enviala de regreso.</p>
        </li>
    </ul>
</section>

Y para finalizar la sección de contacto

<footer id="contacto" class="contact">
    <p>Puedes encontrarnos en los teléfonos: 1234-1234 y 4321-4321</p>
    <form action="https://formspree.io/hola@alejandrozepeda.mx" method="POST" class="contact-form">
        <label for="correo">Correo</label>
        <input id="correo" type="email" name="email" placeholder="correo@ejemplo.com">

        <label for="comentario">Comentario</label>
        <input id="comentario" type="text" name="message" placeholder="Dudas o comentarios">

        <input type="submit" value="Enviar">
    </form>
    <p>
        <small>Todos los derechos reservados. 2019. Playeras Geek.</small>
    </p>
</footer>