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

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...