Landing Page:
Qué es landing page?
Una landing page o página de aterrizaje (en español también mola); es un instrumento de marketing digital. Una herramienta diseñada con un único fin, generar una acción.
Una acción por parte del usuario digital, ese que por un tiempo muy limitado se convierte en visitante de tu web. Y que como marca “deseamos” que pase de visitante a contacto.
Un contacto o lead, Si has leído bien. Porque no solo uso la cookie para hacer remarketing; sino porque quiero que sea él mismo, el usuario, el que deje su email. El que me proporcione los datos o información que necesito para poder trabajar en marketing online.
Por tanto toda landing es una página web o “one page”, con un objetivo definido de conversión que busca vincular al usuario con la marca.
HTML: Etiquetas de html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Condensed" rel="stylesheet">
<body>
<!-- HEADER -->
<header class="header">
<h1>
<a id="irainicio"></a><img src="imagenes/logo.png" alt="Fazt Logo">
</h1>
</header>
<!--navegador-->
<nav class="navbar">
<a href="#">Inicio</a>
<a href="#">Quienes Somos</a>
<a href="#servicios">Servicios</a>
<a href="#TARIFA">Tarifas</a>
<a href="#localizacion">Localización</a>
</nav>
<!--quienes somos-->
<section class="content who">
<h2 class="title">Quienes Somos</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!--servicios-->
<section class="content services">
<h2 class="title"><a name="servicios" id="servicios"></a></h2>
<h2 class="title">Servicios</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis obcaecati dolores, vel iusto perspiciatis voluptates quasi quam mollitia reiciendis porro.</p>
<p> </p>
<ul class="list-services">
<li>
<figure>
<img src="imagenes/ico1.png" alt="">
<figcaption>Angular</figcaption>
</figure>
</li>
<li>
<figure>
<img src="imagenes/ico2.png" alt="">
<figcaption>React</figcaption>
</figure>
</li>
<li>
<figure>
<img src="imagenes/ico3.png" alt="">
<figcaption>Vuejs</figcaption>
</figure>
</li>
</ul>
<p> </p>
<p> </p>
</section>
<section class="content tarifas">
<article class="contain">
<h2 class="title"><a id="TARIFA"></a></h2>
<h2 class="title">Tarifas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="" class="btn">Contactanos</a>
</article>
</section>
<section class="content localization">
<h2 class="title"><a name="localizacion" id="localizacion"></a>Localización</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quas molestias quibusdam cum corrupti deserunt, explicabo ipsam id, itaque iste!</p>
<p> </p>
<p> </p>
<figure class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5839.485743603989!2d-57.57755298926508!3d-25.253960762391568!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x945da65ce826e075%3A0xc6658dd148540f4d!2sMUSA-Museo+de+Sillas+Asunci%C3%B3n!5e0!3m2!1ses-419!2spy!4v1531237875053" width="1600" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</figure>
</section>
<P><a href="#irainicio"> ir a inicio</a></P>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Condensed" rel="stylesheet">
<body>
<!-- HEADER -->
<header class="header">
<h1>
<a id="irainicio"></a><img src="imagenes/logo.png" alt="Fazt Logo">
</h1>
</header>
<!--navegador-->
<nav class="navbar">
<a href="#">Inicio</a>
<a href="#">Quienes Somos</a>
<a href="#servicios">Servicios</a>
<a href="#TARIFA">Tarifas</a>
<a href="#localizacion">Localización</a>
</nav>
<!--quienes somos-->
<section class="content who">
<h2 class="title">Quienes Somos</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!--servicios-->
<section class="content services">
<h2 class="title"><a name="servicios" id="servicios"></a></h2>
<h2 class="title">Servicios</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis obcaecati dolores, vel iusto perspiciatis voluptates quasi quam mollitia reiciendis porro.</p>
<p> </p>
<ul class="list-services">
<li>
<figure>
<img src="imagenes/ico1.png" alt="">
<figcaption>Angular</figcaption>
</figure>
</li>
<li>
<figure>
<img src="imagenes/ico2.png" alt="">
<figcaption>React</figcaption>
</figure>
</li>
<li>
<figure>
<img src="imagenes/ico3.png" alt="">
<figcaption>Vuejs</figcaption>
</figure>
</li>
</ul>
<p> </p>
<p> </p>
</section>
<section class="content tarifas">
<article class="contain">
<h2 class="title"><a id="TARIFA"></a></h2>
<h2 class="title">Tarifas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="" class="btn">Contactanos</a>
</article>
</section>
<section class="content localization">
<h2 class="title"><a name="localizacion" id="localizacion"></a>Localización</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quas molestias quibusdam cum corrupti deserunt, explicabo ipsam id, itaque iste!</p>
<p> </p>
<p> </p>
<figure class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5839.485743603989!2d-57.57755298926508!3d-25.253960762391568!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x945da65ce826e075%3A0xc6658dd148540f4d!2sMUSA-Museo+de+Sillas+Asunci%C3%B3n!5e0!3m2!1ses-419!2spy!4v1531237875053" width="1600" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</figure>
</section>
<P><a href="#irainicio"> ir a inicio</a></P>
</body>
</html>
CSS: Etiquetas de css
@import url("../webfonts/Roboto_Condensed1/stylesheet.css");
/*
STYLES GUIDE:
0. RESET
1. LAYOUT
2. GENERIC ITEMS
3. PARTS OF WEB
4. LIST
5. FORM
5. ANIMATIONS
----------
COLORS:
color1 => #2c3e50;
color2 => #34495e;
color3 => #3498db;
color4 => #fff;
*/
/* 0 RESET */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
font-family: "Roboto Condensed1";
color: #FFF;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 1 LAYOUT */
body {
text-align: center; font-family: "roboto 3"; font-size: 20px; line-height: 1.7; font-weight: 00; }
.header { display: flex; justify-content: center; align-items: center; }
.navbar { display: flex; justify-content: center; align-items: center; background: #abcdef; }
.tarifas { text-align: left; }
.list-services {display: flex; align-items: center; justify-content: center;}
.list-services figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}
/* 2 GENERIC ITEMS */
.header {
height: 450px;
background-size: cover;
background-image: url(../imagenes/dummy-header.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.navbar { height: 63px; background: #2c3e50; border-bottom: 1px dashed #3498db;}
.navbar a { padding: 0 20px; color: #fff; text-decoration: none; text-transform: uppercase; font: 20px 'Stint Ultra Condensed';}
.title {
margin-bottom: 40px;
font: 60px 'Stint Ultra Condensed';
text-transform: uppercase;
font-family: "Stint Ultra Condensed";
}
p {
margin-bottom: 40px;
color: #FFFFFF;
}
.btn { border: 2px solid #fff; padding: 10px 40px; display: inline-block; text-decoration: none; color: #fff;}
/* 3 PARTS OF WEB */
.content { padding: 80px 0;}
.who {background: #2c3e50; color: #fff;}
.who p { max-width: 1055px; margin: 0 auto;}
.services {background: #00495e;color: #fff;}
.tarifas {
background-size: cover;
color: #fff;
background-image: url(../imagenes/dummy-tarifas.jpg);
background-repeat: no-repeat;
background-position: center top;}
.contain {max-width: 1055px; margin: 0 auto;}
.tarifas p {max-width: 450px;
text-align: left; }
.localization {
color: #FFFFFF;
padding-bottom: 0;
right: 0px;
left: 100px;
}
.localization .map img {max-width: 100%; width: 100%;}
/* 3 LIST */
.list-services figure { position: relative; width: 150px; height: 190px;}
.list-services figure:after {content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; z-index: 0; background: #fff; width: 150px; height: 150px;}
.list-services img {position: relative; z-index: 3;}
.list-services li { padding: 0 30px; }
.list-services figcaption { position: relative; left: 0; right: 0; bottom: -40px;}
/* 3 ANIMATIONS */
.navbar a {
font-family: "Roboto Condensed1";
}
#textoizquierda {
left: 1px;
position: relative;
clip: rect(auto,auto,auto,1000);
}
/*
STYLES GUIDE:
0. RESET
1. LAYOUT
2. GENERIC ITEMS
3. PARTS OF WEB
4. LIST
5. FORM
5. ANIMATIONS
----------
COLORS:
color1 => #2c3e50;
color2 => #34495e;
color3 => #3498db;
color4 => #fff;
*/
/* 0 RESET */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
font-family: "Roboto Condensed1";
color: #FFF;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 1 LAYOUT */
body {
text-align: center; font-family: "roboto 3"; font-size: 20px; line-height: 1.7; font-weight: 00; }
.header { display: flex; justify-content: center; align-items: center; }
.navbar { display: flex; justify-content: center; align-items: center; background: #abcdef; }
.tarifas { text-align: left; }
.list-services {display: flex; align-items: center; justify-content: center;}
.list-services figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}
/* 2 GENERIC ITEMS */
.header {
height: 450px;
background-size: cover;
background-image: url(../imagenes/dummy-header.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.navbar { height: 63px; background: #2c3e50; border-bottom: 1px dashed #3498db;}
.navbar a { padding: 0 20px; color: #fff; text-decoration: none; text-transform: uppercase; font: 20px 'Stint Ultra Condensed';}
.title {
margin-bottom: 40px;
font: 60px 'Stint Ultra Condensed';
text-transform: uppercase;
font-family: "Stint Ultra Condensed";
}
p {
margin-bottom: 40px;
color: #FFFFFF;
}
.btn { border: 2px solid #fff; padding: 10px 40px; display: inline-block; text-decoration: none; color: #fff;}
/* 3 PARTS OF WEB */
.content { padding: 80px 0;}
.who {background: #2c3e50; color: #fff;}
.who p { max-width: 1055px; margin: 0 auto;}
.services {background: #00495e;color: #fff;}
.tarifas {
background-size: cover;
color: #fff;
background-image: url(../imagenes/dummy-tarifas.jpg);
background-repeat: no-repeat;
background-position: center top;}
.contain {max-width: 1055px; margin: 0 auto;}
.tarifas p {max-width: 450px;
text-align: left; }
.localization {
color: #FFFFFF;
padding-bottom: 0;
right: 0px;
left: 100px;
}
.localization .map img {max-width: 100%; width: 100%;}
/* 3 LIST */
.list-services figure { position: relative; width: 150px; height: 190px;}
.list-services figure:after {content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; z-index: 0; background: #fff; width: 150px; height: 150px;}
.list-services img {position: relative; z-index: 3;}
.list-services li { padding: 0 30px; }
.list-services figcaption { position: relative; left: 0; right: 0; bottom: -40px;}
/* 3 ANIMATIONS */
.navbar a {
font-family: "Roboto Condensed1";
}
#textoizquierda {
left: 1px;
position: relative;
clip: rect(auto,auto,auto,1000);
}
Imagenes:
Comentarios
Publicar un comentario