En estos últimos posts sobre la serie de como crear una página web de restaurante, hemos visto de todo. Hemos visto cómo crear unas tarjetas de comida en HTML y CSS, hemos hecho la carta de nuestro restaurante, hemos creado un menú y hemos hecho el Header y el Footer de nuestra página también.
Y para que esta página esté completa, ya solo queda crear la página de contacto del restaurante. Donde el usuario puede reservar una mesa o puede contactar con nosotros.
Para hacer este post, reutilizaremos el header de nuestro restaurante y el footer para ahorrar tiempo. Y por si fuera poco, haremos también un formulario de contacto maquetado en HTML y CSS.
Aquí te dejo el vídeo por si le queres echar un vistazo.
Así que sin más rollo, vamos a crear nuestra página de contacto.
Estructura de página de contacto en HTML
Lo primero que haremos es el Doctype, como ya hemos hecho tantas veces. Recuerda enlazar la hoja de estilos css con el archivo html.
Después empezaremos con la parte del contenido. Para ello empezaremos creando la etiqueta <main> donde pondremos todo el contenido (valga la redundancia).
Esta etiqueta irá dentro del body, entre las etiquetas </header> y <footer>.
Crearemos una sección de introducción, que será un hero diferente al que ya teníamos. Este será más pequeño y lo usaremos para hacer una pequeña sección de introducción de la página de contacto.
Repartiremos el contenido en dos columnas, esta vez lo haremos con CSS grid, en vez de hacerlo con Flexbox como de costumbre.
En la parte izquierda colocaremos un poco de contenido. Utilizaremos un poco de Lorem ipsum, para no complicarnos la vida.
Y en la parte derecha haremos el formulario de contacto en HTML. Un formulario simple, que consta solo de inputs y añadiremos los placeholders correspondientes para que sea más intuitivo y sugerente.
Te dejo el código HTML por aquí:
<main>
<section class="hero-page">
<div class="wrap-hero-page">
<h1>Página de reservas</h1>
</div>
</section>
<section class="section">
<div class="wrap-two-column">
<div class="column-half">
<h2>Reserva una mesa</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente est dignissimos incidunt asperiores maiores optio dolor sit blanditiis qui minus explicabo labore facilis, enim corporis, veritatis porro voluptatum, reprehenderit officia exercitationem. Aliquid nam, optio magni hic labore pariatur consectetur molestias et dolorum incidunt minima id! Est deleniti impedit ea.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi iure voluptates vel debitis, dolores perferendis dignissimos temporibus! Architecto non voluptates necessitatibus delectus eligendi! Itaque, ad.</p>
</div>
<div class="column-half">
<h3>Formulario de Contacto</h3>
<p>* campos requeridos</p>
<form action="" class="formulario">
<input type="text" placeholder="TU NOMBRE *">
<input type="text" placeholder="ASUNTO">
<input type="text" placeholder="TU EMAIL *">
<textarea name="" id="" cols="30" rows="10" placeholder="DETALLES"></textarea>
<button type="submit">Enviar</button>
</form>
</div>
</div>
</section>
</main>¿¿Pero David dónde está el código del header y del footer??
Tranqui! Te dejo por aquí el código del header del restaurante y también te dejo el código del footer en html y css para que puedas copiar y pegar, pillín/a 😉
También puedes ver el vídeo si lo prefieres.
Maquetación de página de contacto en CSS
Empezaremos con los estilos CSS por la parte del Hero. Para maquetar esta sección utilizaremos un efecto que mola mucho que vimos en el vídeo de Cómo poner texto sobre imagen en CSS.
Luego maquetamos la parte del contenido, dividiremos el contenido y el formulario de contacto en columnas diferentes con CSS grid (como hemos dicho anteriormente).
Te dejo el código CSS por aquí para que le puedas echar un vistazo.
/* Página de Contacto */
.hero-page{
background: linear-gradient(to bottom, rgb(0 0 0 / .5), rgb(0 0 0 / .5)), url(img/restaurante-page-bg.jpg) center;
background-size: cover;
height: 200px;
margin-top: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap-hero-page{
color: #fff;
padding: 1rem;
}
.section{
max-width: 1200px;
margin: 3rem auto;
padding: 1rem;
}
.wrap-two-column{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 4rem;
}
/* Formulario */
.formulario{
display: flex;
flex-flow: column;
}
.formulario input, .formulario textarea{
margin: .5rem 0;
padding: .5rem .2rem;
}
.formulario button{
width: fit-content;
border: none;
padding: .5rem 1rem;
background-color: #FFC300;
color: #fff;
font-size: 1.1rem;
}También te dejo por aquí el post donde puedes encontrar el CSS del footer del restaurante.
Tienes el vídeo también por si te interesa otro formato.
Y ahora solo faltaría una cosa, transformar el diseño en responsive.
Adaptación de Página de contacto (diseño responsive)
Para adaptar este diseño y transformarlo en Responsive, para que se vea bien en cualquier pantalla (por muy pequeña que sea) utilizaremos tan solo un par de líneas de código.
Pero bueno, que no es ningún secreto a estas alturas que utilizamos las media queries para hacer responsive nuestros diseños.
Vamos con el código:
@media (max-width:640px){
.wrap-two-column{
grid-template-columns: 1fr;
}
}Y hasta aquí este post, en el que hemos visto cómo crear nuestra página de contacto de un restaurante en HTML y CSS. ¡Pero ojo! Este diseño puede servirte para cualquier página web que requiera una sección de contacto. Puede servirte para cualquier página informativa o corporativa.
Y bueno, hasta aquí el tutorial. Si te has quedado con alguna pregunta o tienes alguna sugerencia ya sabes que me puedes dejar tu comentario más abajo o en cualquier vídeo de Youtube, un saludo!