-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (103 loc) · 4.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>InboundCycle</title>
<!-- Googles fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700" rel="stylesheet">
<!-- Css scripts -->
<link href="css/reset.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="headerMenu container">
<!-- Logotype -->
<img src="img/inboundcycle-logo.png" class="logotype" alt="InboundCycle">
<!-- Social Icons -->
<ul class="social-icons">
<li>
<a href="https://www.facebook.com/InboundCycle" target="_blank" title="Visita nuestra cuenta de Facebook de InboundCycle">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://twitter.com/inboundcycle" target="_blank" title="Visitar el Twitter de InboundCycle">
<i class="fa fa-twitter-square"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/2387654" target="_blank" title="Visitar el LinkedIn de InboundCycle">
<i class="fa fa-linkedin-square"></i>
</a>
</li>
</ul>
</div>
</header>
<!-- Separator Image -->
<div class="separator-image"></div>
<!-- Container -->
<div class="wrapper container">
<section>
<!-- Ebook -->
<img src="img/ebook.png" class="ebook" alt="E-book genérico de InboundCycle">
<!-- Titles -->
<h1>Lorem ipsum dolor sit amet elit consectetur adipiscing eu ipsum porttitor ligula donec</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit eu porttitor ligula donec</h2>
<!-- Body text -->
<p>Duis blandit tempor facilisis. Curabitur ipsum turpis, <a href="#" title="Enlace de prueba">venenatis</a> et massa id, congue dignissim nibh. Praesent vitae justo vel metus faucibus vehicula. Donec vitae semper eros, et viverra leo. Quisque maximus semper mi, sit amet vehicula quam ultricies eu. Nullam euismod orci sed erat blandit vulputate nec vitae arcu. Integer nec imperdiet sem. Nullam a nibh rhoncus, tincidunt arcu eu, porta erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae semper eros, et viverra leo.</p>
<!-- Emphasizes -->
<div class="emphasizes">
Rellena el formulario para descargar la guía <i class="fa fa-long-arrow-right"></i>
</div>
</section>
<!-- Aside -->
<aside>
<!-- Download form -->
<form action="post "id="form">
<h3>Descargar e-book gratis</h3>
<fieldset>
<input type="text" name="name" required placeholder="Nombre">
<input type="text" name="surname" required placeholder="Apellidos">
<input type="email" name="email" required placeholder="Email">
</fieldset>
<fieldset class="formCheck">
<input type="checkbox" required id="checkbox" name="legal"><label for="checkbox">Acepto la <a href="#" title="Lea nuestra política de privacidad">política de privacidad</a>*</label>
<input type="checkbox" id="checkbox2" name="subscription"><label for="checkbox2">Suscríbeme al blog</label>
</fieldset>
<button type="submit">Descargar</button>
</form>
</aside>
</div>
<!-- Footer -->
<footer>
<div class="footer-frame container">
<!-- Logotype -->
<img src="img/inboundcycle-logo-small.png" class="logotype" alt="InboundCycle">
<div class="footerRightContainer">
<!-- Copyright -->
<small>InboundCycle © 2015</small>
<!-- Legal menu -->
<nav>
<ul>
<li><a href="#" title="Lea nuestra política de privacidad">Política de Privacidad</a></li>
<li><a href="#" title="Lea el aviso legal">Aviso Legal</a></li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- Pop-up -->
<div class="popup">
<div class="caption">
<i class="fa fa-times"></i>
<p>Thank you very much for sending your application! See you soon!</p>
</div>
</div>
<!-- JS Scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>