Formulario Demo

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

https://bit.ly/irimaya023

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?

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado