Este sitio es una landing page sencilla con un formulario demo. El sitio número 23 del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Demo Request
DESAFÍOS
A partir de este proyecto empecé a usar el procesador de CSS llamado SASS (Syntactically Awesome Style Sheets). Aunque este sitio es muy pequeño sin duda sirve mucho para proyectos muy grandes.
Básicamente me ayuda a ahorrar el número de líneas al escribir en SCSS (Sassy Cascading Style Sheet), lo cual automáticamente pasará a CSS.
Yo escribí los estilos en un archivo scss/style.scss
// Variables
$font-main: 'Montserrat', sans-serif;
$main-color: #141A74;
$secondary-color: #1D5C97;
$third-color: #49C6B7;
$fourth-color: #CFF8B9;
$fifth-color: #ee6a59;
// Root
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
// Main Styling
html,
body {
font-family: $font-main;
}
h1,
h3,
p {
margin-bottom: 10px;
font-weight: lighter;
}
h1 {
font-size: 2.441rem;
}
h3 {
font-size: 1.563rem;
}
p {
font-size: 1rem;
}
// Utilities Classes
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
.large {
font-size: 1.3rem;
}
// Demoreq
demoreq {
background: linear-gradient(to bottom right, $main-color, $secondary-color, $third-color, $fourth-color);
height: 100vh;
padding-top: 150px;
.demoreq-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5em;
&-content {
text-align: left;
img {
height: 50px;
margin-top: 30px;
margin-bottom: 30px;
}
h1,
p.large {
color: $third-color;
}
h1 {
margin-bottom: 10px;
}
p.large {
margin-bottom: 40px;
}
p {
color: #fff;
margin-bottom: 30px;
}
} //End &-content
&-form {
color: #4d4d4d;
background: #fff;
border-radius: 3px;
padding: 50px;
h3 {
padding-bottom: 30px;
}
form {
label,
input {
margin-bottom: 20px;
}
label {
display: block;
text-transform: uppercase;
}
input {
padding: 10px;
border: none;
border-bottom: 2px #ddd solid;
width: 100%;
}
button {
display: inline-block;
font-size: 18px;
background: $fifth-color;
color: #fff;
border: none;
border-radius: 5px;
padding: 13px 20px;
width: 80%;
margin: 40px;
}
} //End form
} //End &-form
} //End .demoreq-wrap
} //End #demoreq
Y el compilador de SASS lo pasa al archivo de CSS, sin que yo lo haya tocado css/style.css (El archivo style.css se creo automáticamente).
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: "Montserrat", sans-serif;
}
h1,
h3,
p {
margin-bottom: 10px;
font-weight: lighter;
}
h1 {
font-size: 2.441rem;
}
h3 {
font-size: 1.563rem;
}
p {
font-size: 1rem;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 0 20px;
}
.large {
font-size: 1.3rem;
}
demoreq {
background: linear-gradient(to bottom right, #141A74, #1D5C97, #49C6B7, #CFF8B9);
height: 100vh;
padding-top: 150px;
}
demoreq .demoreq-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5em;
}
demoreq .demoreq-wrap-content {
text-align: left;
}
demoreq .demoreq-wrap-content img {
height: 50px;
margin-top: 30px;
margin-bottom: 30px;
}
demoreq .demoreq-wrap-content h1,
demoreq .demoreq-wrap-content p.large {
color: #49C6B7;
}
demoreq .demoreq-wrap-content h1 {
margin-bottom: 10px;
}
demoreq .demoreq-wrap-content p.large {
margin-bottom: 40px;
}
demoreq .demoreq-wrap-content p {
color: #fff;
margin-bottom: 30px;
}
demoreq .demoreq-wrap-form {
color: #4d4d4d;
background: #fff;
border-radius: 3px;
padding: 50px;
}
demoreq .demoreq-wrap-form h3 {
padding-bottom: 30px;
}
demoreq .demoreq-wrap-form form label,
demoreq .demoreq-wrap-form form input {
margin-bottom: 20px;
}
demoreq .demoreq-wrap-form form label {
display: block;
text-transform: uppercase;
}
demoreq .demoreq-wrap-form form input {
padding: 10px;
border: none;
border-bottom: 2px #ddd solid;
width: 100%;
}
demoreq .demoreq-wrap-form form button {
display: inline-block;
font-size: 18px;
background: #ee6a59;
color: #fff;
border: none;
border-radius: 5px;
padding: 13px 20px;
width: 80%;
margin: 40px;
}
La ventaja es que me ahorra tiempo y energía en líneas de estilos.
PROCESO
Paleta de colores y estilos
Paleta de colores: CFF8B9 49C6B7 1D5C97 141A74
Tipografía: Montserrat de Google Fonts
Mockup (Bosquejo)
Así queda el bosquejo hecho en Figma. Que por cierto esta herramienta me ahorra mucho tiempo para cuando brinco a la maquetación del sitio.
HTML y CSS
Una vez hecho el bosquejo empezamos a maquetar con HTML y dar estilos con CSS.
Checa este video y ve qué diferente se ve el sitio con CSS y sin CSS.
Sitio web responsivo
Una vez terminado el sitio, agregamos una última parte en los estilos para que pueda verse en aparatos móviles.
Checa como al mover la pantalla el sitio responde de manera que no altera la visualización del contenido.
VIDEO 3
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Demo Request
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (SASS, Grid)
- Sitio responsivo
- Github
- Netlify
Deja tus comentarios y sugerencias para la landing page sencilla con un formulario demo. ¿Qué otro sitio te gustaría ver?
