-
Notifications
You must be signed in to change notification settings - Fork 0
/
landing.html
156 lines (153 loc) · 6.14 KB
/
landing.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<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>Alberto Silva Alarm.com Art Test</title>
<link rel="stylesheet" href="stylesheets/landing.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
</head>
<body>
<main>
<header class="site__header">
<nav class="nav--secondary">
<div class="container">
<ul class="nav__list">
<li class="nav__item hide--tablet"><a href="" class="nav__link">asociarse con nosotros</a></li>
<li class="nav__item hide--tablet"><a href="" class="nav__link">contáctenos</a></li>
<li class="nav__item"><a href="" class="nav__link">login</a></li>
<li class="nav__item--search"><input class="nav__search" type="text" placeholder="buscar"></li>
</ul>
</div>
</nav>
<nav class="nav--primary">
<div class="container">
<figure class="nav__logo">
<img src="img/landing/logo--horizontal.png" alt="Alarm.com Horizontal Logo">
<!-- <img class="nav__logo-s" src="img/landing/logo--symbol.png" alt="Alarm.com Horizontal Logo"> -->
</figure>
<ul class="nav__list">
<li class="nav__item--collapsed">
<a class="nav__link collapsed" data-toggle="collapse" data-target="#nav">Menu</a>
</li>
<ul id="nav" class="nav__list--collapse collapse">
<li class="nav__item"><a href="" class="nav__link">soluciones</a></li>
<li class="nav__item"><a href="" class="nav__link">productos y servicios</a></li>
<li class="nav__item"><a href="" class="nav__link">acerca de</a></li>
<li class="nav__item"><a href="" class="nav__link">socios</a></li>
<li class="nav__item"><a href="" class="nav__link">empezar</a></li>
</ul>
</ul>
</div>
</nav>
</header>
<article class="site__content">
<section class="hero">
<div class="hero__banner FlexEmbed FlexEmbed--4by3"></div>
<div class="hero__container container">
<div class="grid">
<aside class="hero__aside grid__col--">
<h2 class="heading">Mantenga a Su Familia Seguro</h2>
<p class="h4 heading heading--adjust">Con Alertas Comunal Apoyado por el National Crime Prevention Council.</p>
<p><a href="#hero__anchor" class="h4 btn">aprende más</a></p>
</aside>
</div>
</div>
</section>
<div id="hero__anchor"></div>
<header class="header container--center">
<img class="image--logo-v" src="img/landing/logo--criminal.jpg" alt="Alarm.com Vertical Logo">
<h2 class="heading--secondary">Alertas Comunal<sup>™</sup></h2>
<h2 class="heading--primary"><sup>*</sup>Averiguar Sobre:</h2>
</header>
<section class="container">
<div class="grid">
<div class="grid__col--3">
<div class="media">
<div class="media__image">
<img class="image--icon" src="img/landing/icon--alerts.png" alt="">
</div>
<div class="media__content">
<h3 class="heading--primary heading--adjust">Alertas de Crimen<br>en Tiempo Real</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="grid__col--3">
<div class="media">
<div class="media__image">
<img class="image--icon" src="img/landing/icon--arrests.png" alt="">
</div>
<div class="media__content">
<h3 class="heading--primary heading--adjust">Detenciones<br>en Su Ciudad</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col--3">
<div class="media">
<div class="media__image">
<img class="image--icon" src="img/landing/icon--rates.png" alt="">
</div>
<div class="media__content">
<h3 class="heading--primary heading--adjust">Índices de Criminalidad<br>en Su Ciudad</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="grid__col--3">
<div class="media">
<div class="media__image">
<img class="image--icon" src="img/landing/icon--offenders.png" alt="">
</div>
<div class="media__content">
<h3 class="heading--primary heading--adjust">Delincuentes Sexual<br>Registrados en Su
Comunidad</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</section>
<section class="site__action">
<div class="container--center">
<h3 class="heading">
<a class="btn--primary" href="">Suscríbase Hoy!</a>
</h3>
</div>
</section>
</article>
<footer class="site__footer">
<div class="container">
<div class="grid">
<div class="grid__col--2">
<ul class="list--inline">
<li><a href=""><img src="img/landing/icon--facebook.png" alt="Facebook Icon"></a></li>
<li><a href=""><img src="img/landing/icon--twitter.png" alt="Twitter Icon"></a></li>
<li><a href=""><img src="img/landing/icon--youtube.png" alt="Youtube Icon"></a></li>
</ul>
</div>
<div class="grid__col--4">
<nav>
<ul class="list--inline">
<li><a href="">Terms & Conditions</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<p>Copyright © 2000-2015, Alarm.com. All rights reserved.<br>Alarm.com and the Alarm.com Logo are registered trademarks of Alarm.com.</p>
</div>
</div>
</div>
</footer>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>