Esta es una Landing Page con uso de una imagen en 3D en showcase y un botón que abre un módulo con formulario. El proyecto 85 parte del reto personal #100sitioswebchallenge
Puedes visualizar el sitio en: APP
DESAFÍOS
En este proyecto podemos ver como la Landing Page está dividida en dos donde muestra el texto y una imagen. Pero lo que agrega más a este proyecto es el uso de transform skewY de CSS para lograr el efecto inferior. Aquí te muestro exactamente los estilos que logran ese efecto.
.showcase-bottom::after {
content: '';
position: absolute;
height: 200px;
bottom: -70px;
right: 0;
left: 0;
background: #fff;
transform: skewY(5deg);
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
}PROCESO
Paleta de colores y estilos
Colores
- Uso de colores Bootstrap 5 predeterminados (Light)
- Otros (#A6A19B, #B48E6F)
Tipografía
- Uso de font predeterminado de Bootstrap 5: Native Font Stack
Mockup (Bosquejo)
Este es el proceso inicial del proyecto donde se construye el bosquejo.
HTML y CSS (Bootstrap)
El proceso de HTML y CSS con Bootstrap es simultaneo.
Sitio web responsivo
Vista del sitio web de manera responsivo
Publicación del sitio
Consulta el código del sitio en: Github
Puedes visualizar el sitio en: APP
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS
- Bootstrap 5
- Sitio responsivo
- Github
- Netlify
RECURSOS
Freepik
-
Image by Ekayasa.Design on Freepik
Deja tus comentarios y sugerencias.
