En este tutorial, aprenderemos a construir una Landing page o página de aterrizaje, sencilla, desde cero, para una lavandería utilizando HTML y CSS. Esta página web será diseñada para una lavandería autoservicio llamada «Lavandería ABC». Exploraremos cómo estructurar la página, incorporar imágenes desde Iconfinder, y aplicar estilos para lograr un diseño atractivo y funcional.
Estructura Básica HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Lavandería ABC</title> <!-- Estilos en línea --> <style> /* Estilos CSS aquí */ </style> </head> <body> <!-- Contenido de la página aquí --> </body> </html>
Estilos Generales
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f8f8; /* Fondo gris claro */ }
Encabezado
header { background-color: #3498db; /* Azul */ color: #fff; padding: 20px 0; text-align: center; }
Logo y Título
h1 { margin: 0; display: flex; align-items: center; justify-content: center; } h1 img { margin-right: 10px; max-width: 80px; }
Contenido Principal
main { padding: 20px; }
Destacado
p.highlight { background-color: #fff; padding: 15px; border-radius: 10px; margin-bottom: 15px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */ }
Lista de Servicios
ul { list-style-type: none; padding: 0; display: flex; justify-content: space-between; margin-bottom: 20px; } li { width: 25%; margin-bottom: 5px; text-align: center; }
Tabla de Precios
table { width: 80%; margin: 0 auto; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }
Imágenes
img { max-width: 100%; height: auto; }
Botones de Acción
a.button { display: block; width: 80%; margin: 10px auto; text-decoration: none; padding: 10px; background-color: #3498db; color: #fff; text-align: center; border-radius: 5px; } a.button:hover { background-color: #2980b9; }
Títulos y Separadores
h2 { color: #333; text-align: center; } hr { margin: 20px 0; border: 0; border-top: 1px solid #ddd; }
Sección de Testimonios
section.testimonials { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
Pie de Página
footer { background-color: #333; color: #fff; padding: 20px; text-align: center; }
Este código combina HTML y CSS para estructurar y estilizar una página web de lavandería. Los estilos están integrados directamente en el archivo HTML usando la etiqueta <style> en la sección <head>. Puedes personalizar las imágenes y textos según tus necesidades.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Lavandería ABC</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8; /* Fondo gris claro */
}
header {
background-color: #3498db; /* Azul */
color: #fff;
padding: 20px 0;
text-align: center;
}
h1 {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
h1 img {
margin-right: 10px;
max-width: 80px;
}
main {
padding: 20px;
}
p.highlight {
background-color: #fff;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
li {
width: 25%;
margin-bottom: 5px;
text-align: center;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
img {
max-width: 100%;
height: auto;
}
a.button {
display: block;
width: 80%;
margin: 10px auto;
text-decoration: none;
padding: 10px;
background-color: #3498db;
color: #fff;
text-align: center;
border-radius: 5px;
}
a.button:hover {
background-color: #2980b9;
}
h2 {
color: #333;
text-align: center;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #ddd;
}
section.testimonials {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1><img src="https://cdn2.iconfinder.com/data/icons/hotel-service-34/32/laundry_clothing_clean_washing_wind-256.png" alt="Logotipo Lavandería" width="80"> Lavandería ABC</h1>
</header>
<main>
<p class="highlight">Lavandería ABC es una lavandería autoservicio que ofrece los siguientes servicios:</p>
<ul>
<li><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-03-2-256.png" alt="Icono Lavandería" width="64" height="64"> <br>Lavandería</li>
<li><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-02-512.png" alt="Icono Lavandería" width="64" height="64"> <br>Secado</li>
<li><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/Ironing-256.png" alt="Icono Lavandería" width="64" height="64"> <br>Planchado</li>
<li><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/perfume-512.png" alt="Icono Lavandería" width="64" height="64"> <br>Limpieza de alfombras</li>
</ul>
<h2>Nuestros precios son los siguientes:</h2>
<hr>
<table>
<tr>
<th>Servicio</th>
<th>Precio</th>
<th> </th>
</tr>
<tr>
<td>Lavandería</td>
<td>$10 por carga</td>
<td><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-03-2-256.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Secado</td>
<td>$5 por carga</td>
<td><img src="https://cdn2.iconfinder.com/data/icons/laundry-18/64/Laundry-02-512.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Planchado</td>
<td>$10 por prenda</td>
<td><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/Ironing-256.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
<tr>
<td>Limpieza de alfombras</td>
<td>$20 por metro cuadrado</td>
<td><img src="https://cdn4.iconfinder.com/data/icons/laundry-time/100/perfume-512.png" alt="Icono Lavandería" width="64" height="64"></td>
</tr>
</table></br>
<h2>Estamos ubicados en la siguiente dirección:</h2>
<hr>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td><img src="https://cdn1.iconfinder.com/data/icons/freeline/32/gps_location_map_marker-512.png" alt="Icono Ubicación" width="68"></td>
<td>Calle 123, número 456</td>
</tr>
</table></br>
<h2>Nuestros horarios de atención son los siguientes:</h2>
<hr>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td><img src="https://cdn2.iconfinder.com/data/icons/jumpicon-education-line/32/1_Clock-256.png" alt="Icono Reloj" width="68"></td>
<td>Lunes a viernes de 8:00 a 20:00 horas</td>
</tr>
<tr>
<td></td>
<td>Sábados de 9:00 a 14:00 horas</td>
</tr>
</table></br>
<hr>
<a href="contacto.html" class="button">Contacto</a>
<a href="precios.html" class="button">Precios</a>
</main>
<section class="testimonials">
<h2>Testimonios</h2>
<p>Aquí puedes agregar algunos testimonios de clientes satisfechos con tu servicio.</p>
</section>
<footer>
<p>© 2023 Lavandería ABC. Todos los derechos reservados.</p>
</footer>
</body>
</html>
