Sitio Web One Page para Negocios – Mayo

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

Font Awesome License

Deja tus comentarios y sugerencias, para saber que te parecio el sitio web estilo One Page para negocios llamado May-o.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Este es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...