Sitio web con CSS Flex

Este es un sitio web one page maquetado con HTML y CSS Flex. El sitio número 36 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Events

DESAFÍOS

Para hacer este sitio me basé en el template Eventup, quise practicar el uso de flex. La ventaja del uso de flex es cómo con el uso de una sola propiedad puedes cambiar la estructura de una sección del sitio. Aquí puedes ver cómo aplico Flex a la sección de Speakers

Esta es la aplicación en HTML

  <section id="speakers">

    <div class="container">

      <h2 class="txt-red">Speakers</h2>

      <div class="speakers-box">

        <div class="sbox">

          <img src="img/speaker-1.jpg" alt="">

          <h4>Jhoanna Doe</h4>

          <p>Web Developer</p>

        </div>

        <div class="sbox">

          <img src="img/speaker-2.jpg" alt="">

          <h4>Eric Green</h4>

          <p>Web Designer</p>

        </div>

        <div class="sbox">

          <img src="img/speaker-3.jpg" alt="">

          <h4>Ana Wilson</h4>

          <p>Web Marketer</p>

        </div>

        <div class="sbox">

          <img src="img/speaker-4.jpg" alt="">

          <h4>Maria Andes</h4>

          <p>Web Developer</p>

        </div>

      </div>

    </div>

  </section>

Y así el uso de estilos y Flex en esa sección

/* Speakers */

#speakers {

  padding: 80px 0;

}

#speakers h2 {

  text-align: center;

  padding-bottom: 60px;

}

#speakers .speakers-box {

  display: flex;

}

#speakers .speakers-box img {

  width: 100%;

}

#speakers .sbox {

  margin: 10px;

  text-align: center;

}

PROCESO

Paleta de colores y estilos

Paleta de colores: E0333C B32830 FFFFFF 000000

Tipografía:

HTML y CSS

El sitio es maquetado en HTML, y posteriormente trabajo con los estilos con CSS.

Sitio web responsivo

Y por último me aseguro que el sitio sea responsivo a móviles. Aquí se puede ver cómo se vería si la pantalla fuera más angosta.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Events

Información técnica

  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (Flex)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Unsplash

Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado