Landing page – do pobrania bezpłatnie
Szablon strony lądującej, landing page. Idealny do prostych kampanii reklamowych, których celem jest zbieranie adresów emailowych.
Oto mój prosty projekt landing page, czyli klasyczna strona lądująca mająca na celu zbieranie adresów email. Do pobrania za darmo. Prosty formularz z elementem graficznym, jak masz ochotę to śmiało modyfikuj. Przydatny do prostych zastosowania z zakresu product launch. Oparłem go na CSS3, z Googlowskimi fontami by ładniej się prezentował. Korzystajcie do woli :) Poniżej kod. Na końcu do pobrania paczka z plikami do wgrania na serwer. Pamiętaj tylko o zmodyfikowaniu inputów i podpięcia swojego systemu do zbierania maili.
Kod HTML landing page
<!doctype html><html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Sing up form</title>
<meta name=”description” content=”The HTML5 Herald”>
<meta name=”author” content=”SitePoint”>
<link rel=”stylesheet” href=”css/reset.css”>
<link rel=”stylesheet” href=”css/styles.css”>
<link href=’https://fonts.googleapis.com/css?family=Roboto+Condensed’ rel=’stylesheet’ type=’text/css’>
</head>
<body>
<div id=”wrapper”>
<h1>Download free ebook</h1>
<h2>Na ekranie zostanie wyświetlone okno, które służy do automatycznej konfiguracji nowego konta zewnętrznego.</h2>
<img id=”book_img” src=”img/book.png”>
<form>
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</p>
<div class=”form_field”>
<label for=”formName”>Email:</label>
<input id=”formName” value=”example@example.com” type=”email” name=”formName” required />
<label for=”formName”>Password:</label>
<input id=”formName” type=”password” name=”formName” required />
<label for=”formName”>Confirm password:</label>
<input id=”formName” type=”password” name=”formName” required />
</div>
<p>*Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony</p>
</form>
<div class=”bottom”>
<p id=”back_tekst” >Back to the website</p>
<input id=”send_button” type=”submit” value=”Download” />
</div>
<!– proszę zostaw mojego referalla, to nic nie zaszkodzi Twojej stronie a mi będzie miło :) –>
</div>
<p id=”footer”>Formularz został zaprojektowany przez <a href src=”https://ux.marszalkowski.org/”>ux.marszalkowski.org</a></p>
</body>
</html>
Landing Page Style CSS
Najpierw reset styli przeglądarki (reset.css):
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%;
font: inherit;
vertical-align: baseline;
font-family: 'Raleway’, sans-serif;
line-height: 25px;
}
/* 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;
}
button {
outline:0 !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
A potem style landing page (style.css):
* {
box-sizing: border-box;
}
body {
background: #024359;
margin: 10;
}
div#wrapper {
background: #42ADE3;
margin: 0 auto;
width: 700px;
height: 100%;
border-radius: 2px;
}
#websiteLogo {
padding: 20px;
}
header {
display:block;
}
.button-login{
padding: 25px 20px 20px 20px;
line-height: 40px;
cursor: pointer;
float: right;
}
form{
width: 450px;
}
h1{
font-family: 'Roboto Condensed’, sans-serif;
color:#F7F7F7;
font-size: 32px;
padding-top: 20px;
padding-bottom: 5px;
margin: 0;
text-align: center;
}
h2{
font-family: 'Roboto Condensed’, sans-serif;
color:#F7F7F7;
font-size: 16px;
padding: 14px;
margin: 0;
text-align: center;
}
.form_field{
padding-left: 20px;
padding-bottom: 5px;
}
label{
font-family: 'Roboto Condensed’, sans-serif;
color:#F7F7F7;
font-size: 18px;
margin-top: 12px;
display: block;
}
#formName{
background: #024359;
border: 0;
font-family: 'Roboto Condensed’, sans-serif;
color:#F7F7F7;
padding: 10px;
width: 380px;
margin-top: 10px;
font-size: 15px;
}
p{
padding-left: 20px;
padding-right: 30px;
padding-bottom: 5px;
font-family: 'Roboto Condensed’, sans-serif;
color:#B3E3F2;
font-size: 15px;
text-align: justify;
}
.bottom{
background: white;
padding: 25px;
height: 90px;
border-radius: 2px;
}
#send_button{
font-family: 'Roboto Condensed’, sans-serif;
float: right;
background: #42BA1A;
color:white;
font-size: 20px;
border: 0;
width: 240px;
padding: 10px;
}
#back_tekst{
font-family: 'Roboto Condensed’, sans-serif;
color:#5B9EB5;
font-size: 17px;
float: left;
}
#footer{
font-family: 'Roboto Condensed’, sans-serif;
color:#5B9EB5;
font-size: 13px;
text-align: center;
}
#book_img{
float: right;
padding-top: 6%;
padding-right: 4%
}
a {
color: cadetblue;
text-decoration: none;
}
View Comments
5 metod rekomendowanych przez ekspertów UX
Oto mój prosty projekt landing page, czyli klasyczna strona lądująca mająca na celu...