-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (223 loc) · 10.4 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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Boostrap css and my styles -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/7f01ac1c36.js" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
<title>Página de startup</title>
</head>
<body>
<header>
<div class="container">
<div class="row contenedor-logo-menu">
<div class="logo col-12 col-lg-6">
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<div class="menu col-12 col-lg-6">
<!-- No entiendo por qué no se usa nav -->
<a href="#">Productos</a>
<a href="#">Precio</a>
<a href="#">Contacto</a>
</div>
</div>
<div class="row textos">
<!-- Aquí la practica usa col-md-12 no veo el razonamiento de eso -->
<div class="col-12">
<h2 class="primera-linea">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h2>
<h3 class="segunda-linea">Lorem ipsum dolor sit amet consectetur.</h3>
<div class="contenedor-btns">
<a href="#">Características</a>
<a href="#">Comprar Ahora</a>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="caracteristicas">
<div class="container">
<div class="row">
<!-- Aquí la practica usa col-md-12 no veo el razonamiento de eso -->
<div class="col-12">
<h3 class="titulo">Características</h3>
</div>
</div>
<div class="row">
<!-- No entiendo el comportamiento de los breakpoints en esta sección -->
<div class="col-md-4 caracteristica">
<img src="img/icono1.png" alt="" class="icono">
<h4 class="primera-linea">Lorem, ipsum.</h4>
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia </p>
</div>
<div class="col-md-4 caracteristica">
<img src="img/icono2.png" alt="" class="icono">
<h4 class="primera-linea">Aenean rhoncus augue</h4>
<p class="parrafo">Curabitur nisi enim, placerat ac convallis id, posuere vehicula ligula.</p>
</div>
<div class="col-md-4 caracteristica">
<img src="img/icono3.png" alt="" class="icono">
<h4 class="primera-linea">Praesent</h4>
<p class="parrafo">Nulla diam mi, pharetra eget mattis sed, mollis non ligula.</p>
</div>
</div>
</div>
</section>
<section class="fotos">
<div class="container">
<div class="row foto">
<div class="col-4 thumb">
<img src="img/thumb1.jpg" alt="">
</div>
<div class="col-8 texto">
<h2 class="titulo azul">Lorem ipsum dolor sit amet consectetur.</h2>
<p class="parrafo"> Aenean rhoncus augue nec finibus malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec diam odio, dictum non gravida in, suscipit id est.</p>
</div>
</div>
<div class="row foto">
<div class="col-8 texto">
<h2 class="titulo naranja derecha">Aliquam ligula erat, porttitor</h2>
<p class="parrafo derecha">Nunc a semper felis. Ut at tellus massa. Nulla sit amet massa blandit, accumsan orci in, gravida massa. Sed mollis, est at porttitor volutpat, est augue molestie mi, ut pretium quam nunc sed dui. Nunc sed purus nunc.</p>
</div>
<div class="col-4 thumb">
<img src="img/thumb2.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="clientes">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="titulo">Nuestros Clientes</h3>
</div>
</div>
<div class="row">
<div class="cliente col-6 col-md-3">
<a href="#"><img src="img/cliente1.png" alt=""></a>
</div>
<div class="cliente col-6 col-md-3">
<a href="#"><img src="img/cliente2.png" alt=""></a>
</div>
<div class="cliente col-6 col-md-3">
<a href="#"><img src="img/cliente3.png" alt=""></a>
</div>
<div class="cliente col-6 col-md-3">
<a href="#"><img src="img/cliente4.png" alt=""></a>
</div>
</div>
</div>
</section>
<section class="precios">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="titulo">Precios</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 precio">
<div class="plan verde">
<p class="nombre">Básico</p>
<p class="precio">$9</p>
<ul class="caracteristicas">
<li>1 Cuenta </li>
<li>10 GB de espacio</li>
<li>Dominio Personal</li>
</ul>
<a href="" class="btn">Contratar ahora</a>
</div>
</div>
<div class="precio col-md-4">
<div class="plan active">
<p class="nombre">Standard</p>
<p class="precio">$19</p>
<ul class="caracteristicas">
<li>5 Cuenta </li>
<li>50 GB de espacio</li>
<li>Dominio Personal</li>
</ul>
<a href="#" class="btn">Contratar Ahora</a>
</div>
</div>
<div class="precio col-md-4">
<div class="plan naranja">
<p class="nombre">Premium</p>
<p class="precio">$99</p>
<ul class="caracteristicas">
<li>Cuentas Ilimitadas</li>
<li>500 GB de espacio</li>
<li>Dominios Ilimitados</li>
</ul>
<a href="#" class="btn">Contratar Ahora</a>
</div>
</div>
</div>
</div>
</section>
<section class="reviews">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="titulo">Lo que nuestros clientes dicen:</h3>
</div>
</div>
<div class="row cliente izquierda">
<div class="col-3 col-md-2 foto">
<img src="img/foto1.jpg" alt="">
</div>
<div class="col-9 col-md-10 review">
<p class="texto">“Cras hendrerit lectus massa, at vulputate nibh varius quis. Sed ac consequat ipsum.”</p>
<p class="nombre">- Carlos Arturo</p>
</div>
</div>
<div class="row cliente derecha">
<div class="col-9 col-md-10 review">
<p class="texto">“Proin semper sem sed quam semper mollis. Curabitur a purus a augue pulvinar viverra vel quis augue. Donec cursus sit amet lectus maximus tempor”</p>
<p class="nombre">- Jhon Doe</p>
</div>
<div class="col-3 col-md-2 foto">
<img src="img/foto2.jpg" alt="">
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="direccion">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<h4 class="titulo">Contacto</h4>
<p class="calle">364 Delaware Avenue <br />Massapequa Park, NY 11762</p>
<p class="telefono">(140) 322-0934</p>
<p class="correo">contacto [arroba] correo.com</p>
</div>
<div class="col-12 col-md-4 logo">
<img src="img/logo.png" alt="" class="logo">
</div>
</div>
</div>
</div>
<div class="social">
<div class="container">
<div class="row">
<div class="col-12">
<a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>