El objetivo de este post es crear una landing page potente, impactante. Una Landing para que puedas mostrarla en tu portafolio, o para que puedas utilizarla en tu propia página web, incluso en tu negocio. En definitiva, para cualquiera de tus proyectos.
Ya que una Landing Page (o página de aterrizaje) es uno de los mejores instrumentos para vender en Internet.
Y ojo, no solamente veremos aspectos técnicos de HTML y CSS, sino que también veremos algunos aspectos de Marketing, de SEO y un montón de cosas para que puedas crear una Landing del copón.
Además, en esta ocasión, aprovechamos el mismo formulario de contacto que vimos en el anterior post.
Y además, también usaremos el mismo alojamiento, para integrar la Landing en la misma página que creó ChatGPT anteriormente. Como puedes ver ¡Aquí se aprovecha todo!
Cómo crear una Landing Page
Haciendo un poco de resumen, vamos a dividir esta tarea en varias partes.
Primero, haremos el diseño de la maqueta o Mockup con AdobeXD. Si, ya sé que la gente más guay utiliza figma.
Puedes ver como he realizado el esbozo (de forma simple) en el vídeo.
Una vez tengamos el esbozo del proyecto ya podremos empezar con la parte del HTML. Luego pintaremos y maquetamos con CSS toda la LandingPage y como se muestra en el vídeo, subiremos el proyecto a nuestro alojamiento.
Creación de MockUp para Landing Page
En vez de hacer el MockUp en lápiz y papel, como suelo hacerlo a veces, lo he hecho con AdobeXD de forma muy sencilla, para saber donde va cada cosa (muy importante).
La creación de una maqueta o MockUp nos ahorrará muchísimo tiempo a la hora de ejecutar un proyecto desde cero, por muy pequeño que sea.
Creación de Landing Page
Una vez ya tenemos el proyecto “planificado” y plasmado, ya podemos empezar a crear la estructura HTML.
Va a ser una estructura muy fácil. Ya hemos visto estructuras similares cuando creamos La página web de un restaurante o cuando utilizamos chat gpt para crear una página web pero como se suele decir en estos casos ¡Si funciona bien no lo toques!
HTML de Landing Page
Vamos a empezar con el HTML de la página, haremos toda la página dividida en secciones. De esta forma, podremos reutilizar cada sección en otras partes de nuestra página web si fuera necesario.
Hemos creado un header (muy minimalista), una sección hero, una sección de “logos” donde colocaremos los logos de las marcas con las que hayamos “trabajado”.
Luego crearemos una sección donde enumeramos todos los servicios que ofrecemos. Aquí también pueden ir las categorías por ejemplo.
Acto seguido, crearemos una sección con dos columnas. En una columna colocaremos una imagen y en la otra columna pondremos algo de texto, enumerando alguna característica importante, por ejemplo.
Para ir acabando, crearemos un formulario de contacto, aunque realmente, lo vamos a copiar del anterior post donde vimos como ChatGPT creaba un formulario de contacto en PHP.
Y finalmente, crearemos un footer, también bastante minimalista. Con alguna información importante, como el menú (que debería ir en el header) y las pestañas legales.
Aquí te dejo todo el código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-landing">
<div class="wrap-logo">
<img src="/img/logo-dropcoding.svg" alt="" class="logo-header">
</div>
</header>
<section class="hero-section">
<div class="wrap-hero-section">
<h1>Landing Page DropCoding</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quae illo repellat tempora voluptates, reprehenderit quos nam repellendus aspernatur corrupti perspiciatis beatae quo ipsum delectus?</p>
<div class="wrap-cta">
<a href="/" class="cta-a">Llamada a la acción</a>
</div>
</div>
</section>
<section class="section logos-section">
<div class="wrap-logos-section">
<img src="img/logo-Google.png" alt="" class="logo-brand">
<img src="img/ikea-logo.jpg" alt="" class="logo-brand">
<img src="img/mercedes-logo.svg" alt="" class="logo-brand">
<img src="img/Apple-logo.svg" alt="" class="logo-brand">
<img src="img/zara-logo.jpg" alt="" class="logo-brand">
</div>
</section>
<section class="section servicios-section">
<div class="wrap-title-section">
<h2>Categorías de Servicios</h2>
</div>
<div class="wrap-servicios-section">
<a href="" class="item-servicios-section">
<img src="img/1.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/2.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/3.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/4.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/5.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/3.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/1.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/2.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
<a href="" class="item-servicios-section">
<img src="img/3.jpg" alt="">
<p>Item categoría</p>
</img>
</a>
</div>
</section>
<section class="section two-column-section">
<div class="wrap-title-section">
<h2>Características de nuestros Servicios</h2>
</div>
<div class="wrap-two-column">
<div class="wrap-img_two-column">
<img src="img/disenador-trabajando.jpeg" alt="">
</div>
<div class="wrap-img_two-column">
<div class="wrap-text-column">
<h3>Más Características</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur facilis, nemo distinctio beatae quod molestiae illo dolores voluptas quae, autem corrupti maiores similique earum eaque aliquam at modi doloribus. Nam officiis sequi modi! Ipsum, vel!</p>
<div class="wrap-cta">
<a href="/" class="cta-a">Llamada a la acción</a>
</div>
</div>
</div>
</div>
</section>
<section class="section two-column-section form">
<div class="wrap-title-section">
<h2>Formulario de Contacto</h2>
</div>
<div class="wrap-two-column">
<div class="wrap-img_two-column">
<div class="wrap-text-column">
<h3>Contacta con nosotros</h3>
<form action="procesar_formulario.php" method="post" class="form">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" required="">
<br><br>
<label for="asunto">Asunto:</label>
<input type="text" name="asunto" id="asunto" required="">
<br><br>
<label for="mensaje">Mensaje:</label>
<br>
<textarea name="mensaje" id="mensaje" rows="4" cols="40" required=""></textarea>
<br><br>
<input type="submit" value="Enviar" class="cta-a">
</form>
</div>
</div>
<div class="wrap-img_two-column">
<img src="img/disenador-trabajando2.jpeg" alt="">
</div>
</div>
</section>
<footer class="footer-section">
<div class="wrap-footer-section">
<div class="wrap-social-logos">
<ul>
<li>
<a href="">
<img src="img/facebook.svg" alt="" class="social-logo">
</a>
</li>
<li>
<a href="">
<img src="img/twitter.svg" alt="" class="social-logo">
</a>
</li>
<li>
<a href="">
<img src="img/youtube.svg" alt="" class="social-logo">
</a>
</li>
<li>
<a href="">
<img src="img/instagram.svg" alt="" class="social-logo">
</a>
</li>
</ul>
</div>
</div>
<div class="menu-footer-section">
<div class="wrap-menu-footer-section">
<ul>
<li><a href=""></a>Inicio</li>
<li><a href=""></a>Servicios</li>
<li><a href=""></a>Quienes Somos</li>
<li><a href=""></a>Blog</li>
<li><a href=""></a>Contacto</li>
</ul>
</div>
</div>
<div class="menu-footer-section">
<div class="footer-creds">
<p>©copytight 2023 - dropcoding.com - Todos los derechos reservados.</p>
</div>
</div>
</footer>
</body>
</html>Ahora que ya tenemos todo el código HTML, vamos a pasar a maquetar con CSS.
CSS de Landing Page
Para hacer el CSS también lo vamos a “dividir en secciones”. De esta forma tenemos el código CSS un poco más ordenado (o por lo menos lo intentamos).
A continuación, adjunto todo el código CSS de la Landing Page:
:root{
--main-c:#fdd72d;
--border-r:.2rem;
}
/** Estilos Generales **/
html *{
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p{
font-size: 1.1rem;
}
a{
text-decoration: none;
}
ul, li{
list-style: none;
}
.wrap-cta{
padding: 1.5rem 0;
}
.cta-a{
color: #fff;
font-weight: bold;
font-size: 1.2rem;
background-color: var(--main-c);
padding: .5rem 1rem;
border-radius: var(--border-r);
}
h1{
font-size: 2.8rem;
}
h2{
font-size: 2.5rem;
}
h3{
font-size: 2.2rem;
}
/** Header **/
.header-landing{
display: flex;
justify-content: center;
background: #f2f2f2;
padding: 0.25rem;
}
.logo-header{
max-width: 35px;
height: 100%;
width: 100%;
}
/** Hero Section **/
.hero-section{
height: 90vh;
background: url(img/img-hero-agencia.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(106, 141, 163, 0.7);
background-blend-mode: multiply;
display: flex;
align-items: center;
}
.wrap-hero-section{
max-width: 600px;
color: #fff;
padding: 15%;
}
/** Logo Brand Section **/
.secetion{
margin: 5rem 0;
}
.section h2{
padding: 2rem 0;
}
.wrap-logos-section{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.logo-brand{
width: 200px;
padding: 1rem 2rem;
filter: grayscale(1);
}
/** Wrap Title **/
.wrap-title-section{
display: flex;
justify-content: center;
margin: 3rem 1rem;
}
/** Servicios Section **/
.wrap-servicios-section{
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item-servicios-section{
padding: 1rem;
}
.item-servicios-section img{
width: 300px;
height: 225px;
}
/** Two Columns Section **/
.wrap-two-column{
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1200px;
margin: 0 auto;
}
.wrap-img_two-column{
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.wrap-text-column h3{
padding: 2rem 0;
}
.wrap-text-column p{
padding-bottom: 1rem;
}
/** Form Section **/
section.two-column-section.form{
background-color: #f2f2f2;
padding: 3rem 0;
}
.form input, .form textarea{
display: flex;
width: 100%;
line-height: 1.75rem;
border: 1.5px solid #fff;
border-radius: var(--border-r);
}
.form textarea{
min-height: 200px;
}
input[type="submit"]{
border: 0;
display: inline;
cursor: pointer;
}
/** Footer **/
.footer-section{
max-width: 1200px;
margin: 0 auto;
}
.menu-footer-section{
padding: 1rem 0;
}
.wrap-social-logos ul, .wrap-menu-footer-section ul{
display: flex;
justify-content: center;
}
.social-logo{
max-width: 75px;
width: 100%;
padding: 1rem;
}
.wrap-menu-footer-section ul li{
font-size: 1.1rem;
padding: 1.5rem;
}
.footer-creds{
display: flex;
justify-content: center;
}Ya tenemos nuestra Landing Page completada, ahora ya la podríamos subir a nuestro hosting. Incluso podríamos incluirla dentro de nuestra página, eso ya te lo dejo a ti.
Recuerda que si tienes cualquier duda o cualquier sugerencia puedes dejarla en los comentarios ¡Hasta luegor!