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.
