Sitio web para pequeña empresa – Serie 3

Sitio web para pequeña empresa de la serie 3, construido con HTML y CSS. El proyecto 23 del reto #100sitioswebchallenge

Puedes visualizar el sitio en: BizThird

DESAFÍOS

Implementando el proceso de hacer el sitio estilo One Page. En donde los estilos de la cabecera se ve de esta manera

/* Header */

#mainheader {

  height: 100vh;

  padding-top: 50px;

}


/* Navbar */

#mainnavbar {

  overflow: auto;

}


#mainnavbar a {

  color: #6C757D;

}


#mainnavbar .logo {

  float: left;

  padding-top: 30px;

  font-size: 28px;

  text-transform: uppercase;

}


#mainheader .logo a {

  color: #000;

}


#mainnavbar ul {

  list-style: none;

  float: right;

  text-transform: uppercase;

}

#mainnavbar ul li {

  float: left;

}

#mainnavbar ul li a {

  display: block;

  padding: 40px 30px;

  text-align: center;

}

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF F9F9F9 000000

Tipografía:

Mockup (Bosquejo)

Primero preparamos el bosquejo del sitio. En este caso usando Figma para hacerlo.

HTML y CSS

Con el bosquejo a un lado, empezamos la maquetación del sitio con HTML y finalmente los estilos CSS.

Sitio web responsivo

Por último nos asseguramos que el sitio sea responsivo por médio de queries, observa el archivo mobile.css para esto.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: BizThird

Información técnica

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

Recursos

Unsplash

Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado