Sitio con radius en background con HTML y CSS (SASS) – Serie: Digital I

Este es un sitio sencillo con radius en las esquinas del background de la portada, hecho con HTML y CSS (SASS). El proyecto número 56 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Serie: Digital I

DESAFÍOS

Inspirada en el portafolio de Solution Hive quise hacer este proyecto. Como tenía poco tempo para terminar los 100 sitios en un año, decidí hacer esta serie donde sólo cambiaba el estilo de los colores para el mismo template.

Para este proyecto trabajando con SASS puedo darme cuenta de todo el teimpo que puedo ahorrar al estar trabajando con los estilos.

PROCESO

Paleta de colores y estilos

Paleta de colores: EC5C2C F18C6B 29285A F5C774 F9E0B0

Tipografía:

Poppins de Google Fonts

Mockup (Bosquejo)

Primero empecé a recrear el bosquejo del sitio em Figma, com estilos e íconos que descargué de Canva.

HTML y CSS

Primero empecé la maquetación del sitio en HTML, para posteriormente terminar con los estilos.


Sitio web responsivo

Y esta es la vista del sitio com CSS

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Serie: Digital I

Información técnica

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

Recursos

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