Estilizando nuestro sitio web: FAQs

← Diseño Web ⌂ Home

Preguntas frecuentes

Lo siguiente será estilizar la sección de preguntas frecuentes. Empezaré por agregar algunas preguntas más, con el propósito de tener más información y dividirlo en varias columnas y un wrapper para poder usar flex:

<section id="preguntas-frecuentes" class="faq">
    <h2 class="faq-title">Preguntas frecuentes</h2>
    <div class="faq-wrapper">
        <ul class="faq-list">
            <li class="faq-element">
                <strong>¿Cuánto tarda/cuesta el envío?</strong>
                <p>
                    Envío Estándar ($89 pesos): El tiempo de envío estándar a toda la República Mexicana es de 3 a 5 días hábiles. Se envía por FedEx e incluye guía de rastreo para que puedas ver dónde va tu pedido.
                </p>
            </li>
            <li class="faq-element">
                <strong>¿Tienen algún local?</strong>
                <p>No contamos aún con local físico, somos una tienda 100% en línea con envíos garantizados a toda la República Mexicana y política de cambios. De esa manera podemos mantener precios bajos y ofrecerte nuevas variedades de productos.</p>
            </li>
        </ul>
        <ul class="faq-list">
            <li class="faq-element">
                <strong>¿En dónde se ubican?</strong>
                <p>Somos de la Ciudad de México. Todos los materiales y diseños son 100% hechos en México. Como te comentamos en la respuesta anterior, aún no contamos con locales físicos.</p>
            </li>
            <li class="faq-element">
                <strong>¿Qué pasa si no me queda o viene dañado mi pedido?</strong>
                <p>Te ofrecemos garantía de 30 días naturales para cualquier cambio o defecto. El cambio no tiene ningún costo, solo te pedimos que nos envíes por Correos de México tu prenda y te enviamos la nueva prenda.</p>
            </li>
        </ul>
        <ul class="faq-list">
            <li class="faq-element">
                <strong>¿Qué formas de pago manejan?</strong>
                <p>Pago por PayPal con tarjeta de crédito o débito Visa, MasterCard o American Expres.</p>
            </li>
            <li class="faq-element">
                <strong>¿Cómo lavar las playeras?</strong>
                <p>Nuestras playeras son pre encogidas y además usamos tintas y métodos de impresión muy duraderos.</p>
            </li>
        </ul>
    </div>
</section>

Y posterior a eso darle un padding lateral

.faq {
    padding: 20px;
}

Y como ya hemos visto anteriormente, usaremos flex y un wrapper para empezar a alinear de forma horizontal:

.faq-wrapper {
    display: flex;
    justify-content: space-around;
}

Y con el fin de que se vea distribuido el espacio vamos a darle un tamaño fijo a cada contenedor de las preguntas:

.faq-list {
    width: 350px;
    height: 350px;
}