Crea curvas con HTML & CSS (SASS)

Crea curvas para tu sitio web, con HTML y CSS (SASS). El proyecto 51 parte del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Work It I 

DESAFÍOS

En este ejercicio estaré trabajando con una curva inferior en la cabecera. Para lograr esto, los estilos se basarán en hacer un círculo y posicionarlo de tal manera que se use la curvatura inferior, aquí encontré el ejemplo de cómo lograrlo. 

PROCESO

Paleta de colores y estilos

Paleta de colores: 20073B 82FCA9 F9F9F9

Tipografía de Google Fonts:

Mockup (Bosquejo)

Esta es la realización de bosquejo en Figma

HTML y CSS

Primero hacemos la maquinación con HTML, y posteriormente empezamos a trabajar los estilos completamente con el pre-procesador SASS.

Sitio web responsivo

Por último dejamos el sitio listo para móviles.

Publicación del sitio

Consulta el código del sitio en Github 

Puedes visualizar el sitio en: Work It 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

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...