Este es un sitio web estilo One Page para negocios llamado May-o. Este el sitio número siete del reto personal #100sitioswebchallenge.
Puedes encontrar el proyecto en línea: Maya Business Website.
DESAFÍOS
Este es el segundo proyecto parte de los sitios web que he hecho hasta el momento para este reto en donde uso una imagen como background para toda la sección de la cabecera.
Esto incluye que dentro de la etiqueta de la cabecera <header> uso la sección de “navegador” <nav> donde pongo el logo y el menú y otra sección llamada “showcase” <div id=”showcase”>.
Y de esta manera las características del estilo de la imagen como background que uso en el inicio del sitio web se ve de esta manera:
header {
background-image: url('../img/home.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Estipulando la altura de todo el header, dentro del nav y showcase que están anidados dentro de la cabecera:
#navbar {
height: 10vh;
}
#showcase {
height: 90vh;
}
PROCESO
Paleta de colores y estilos
Paleta de colores: 674A40 50A3A4 FCAF38 F95335
A pesar de que algunas veces no uso todos los colores, para mantener el diseño del sitio lo más limpio posible, lo dejo como registro para futuras actualizaciones que pueda hacer.
La paleta de colores me inspiro en las publicadas por colours.cafe en su cuenta de Instagram.
Tipografía: Montserrat de Google Fonts
Íconos: de Font Awesome
Mockup (Bosquejo)
Aunque visualmente no es un bosquejo de la idea muy atractivo, siempre empiezo a aterrizar la idea en un cuaderno. Consulto otras plantillas de sitios web para posteriormente crear mi propia versión.
HTML y CSS
Esta es la visualización del sitio sólo con HTML
Aquí una vez que CSS entra al juego, vaya que hace mucha diferencia.
Sitio web responsivo
Una vez que el sitio está listo, dentro de otra hoja de estilos llamado mobile.css pongo todos los estilos que sustituirán a la hoja style.css una vez que cumpla la condición de que el sitio web se está visualizando en una pantalla con menos de 700p pixeles de ancho.
Publicación del sitio
Puedes consultar el código en mi repositorio de Github
Y consultar el sitio vía Netlify en: Mayo Business Website
Información técnica
- Figma – Diseño de bosquejo
- VS Code
- HTML5 (Semántico)
- CSS
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Pexels
Deja tus comentarios y sugerencias, para saber que te parecio el sitio web estilo One Page para negocios llamado May-o.
