Blog sencillo hecho SASS y Flex

Blog sencillo hecho con SASS y Flex. El proyecto 37 parte del reto #100sitioswebchallenge

Puedes visualizar el sitio en: Working Blog

DESAFÍOS

Para este proyecto quise hacer algo al revés de lo que venía haciendo con los proyectos anteriores. Si te fijas cuando pasas el mouse por algunos de los bloques de texto verás que ahora aparece una imagen con un botón.

Anteriormente lo venía haciendo de manera contraría, pero me pareció interesante ahora hacerlo de esta manera.

<div class="box">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempor, turpis sit eget tortor. Gravida venenatis tellus ut ante quam purus quisque nunc. Dignissim magna pellentesque id orci dignissim. A mauris in augue aenean feugiat cras. A interdum nunc, justo ac faucibus donec. Diam vitae felis quam amet. Varius egestas pellentesque vivamus non facilisis sed odio nunc pulvinar.</p>

<div class="overlay">

<div class="img-1">

<a href="post-1.html" class="btn btn-light">Read More</a>

</div>

</div>

</div>

PROCESO

Paleta de colores y estilos

Paleta de colores: 000000 FFFFFF

Tipografía: Montserrat de Google Fonts

Mockup (Bosquejo)

Esta es una imagen sacada desde mi repositorio de Figma, donde hago mis bosquejos antes de empezar a maquetar.

HTML y CSS

Con la ayuda de Visual Studio Code como mi editor ahora brinco a pasarlo todo a HTML y SASS. Donde SASS como pre-procesador posteriormente convertirá los estilos a CSS.

Sitio web responsivo

Y por último la visualización del sitio de manera responsiva, para ser visto en aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Working Blog

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (SASS, Flex)
  • 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...