Tabla de contenidos
Introducción
Este es un sitio web estilo One Page maquetado con HTML, estilizado con CSS y con contador creado con Javascript. El sitio número 14, parte del reto personal #100sitioswebchallenge
Puedes visualizar el sitio en: Olympics México
Desafíos
Con el propósito de celebrar las olimpiadas quise crear este sitio, muy sencillo, donde pudiera mostrarse un poco una breve descripción del país, los deportes más importantes de ese país y un medallero. El contador fue extraído de W3School, y sólo lo apliqué.
Proceso
Paleta de colores y estilos
Paleta de colores: #000000 #FFFFFF #194B5F
Tipografía:
Mockup (Bosquejo)
Aquí podemos ver el proceso de la creación del borrador del bosquejo, hecho en Figma
![](https://i0.wp.com/www.irinadelgado.com/wp-content/uploads/2024/07/414-image-1.png?resize=500%2C867&ssl=1)
HTML, CSS y Javascript
A continuación podemos ver el proceso de la maquetación del sitio con HTML, posteriormente vemos la parte del script y los estilos finales.
![](https://i0.wp.com/www.irinadelgado.com/wp-content/uploads/2024/07/414-image-2.png?resize=500%2C376&ssl=1)
![](https://i0.wp.com/www.irinadelgado.com/wp-content/uploads/2024/07/414-image-3.png?resize=500%2C418&ssl=1)
![](https://i0.wp.com/www.irinadelgado.com/wp-content/uploads/2024/07/414-image-4.png?resize=500%2C867&ssl=1)
Sitio web responsivo
Aquí se observa el sitio de manera responsiva.
![](https://i0.wp.com/www.irinadelgado.com/wp-content/uploads/2024/07/414-image-5.png?resize=483%2C963&ssl=1)
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Olympics México
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS (Flex)
- Javascript
- Sitio responsivo
- Github
- Netlify
Recursos
Deja tus comentarios y sugerencias.