-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (99 loc) · 6.65 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="diseño web, codigo, programacion, html, css, javascript, tutoriales">
<meta name="description" content="Ejemplo Layout Web">
<meta name="author" content="Ivan Atanel Sanchez Galicia">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/estilos.css">
<title>Layout Básica</title>
</head>
<body>
<div class="contenedor">
<header>
<nav>
<ul>
<li> <a href="#">Inicio</a></li>
<li> <a href="#">Acerca de</a></li>
<li> <a href="#">Productos</a></li>
<li> <a href="#">Contacto</a></li>
</ul>
</nav><!--Fin del nav-->
</header><!--Fin del header-->
<section class="principal">
<div class="imagen">
<img src="img/bg.jpg" alt="Imagen del Sitio">
</div><!--Fin del div.imagen-->
<section class="posts">
<article>
<h2>Título del Artículo</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus in ratione excepturi commodi, inventore dolor recusandae atque nemo maiores, libero alias est dolores sunt. Labore deleniti ratione nisi voluptatibus minus!
Possimus quasi numquam consequuntur! Voluptatem, architecto! Consequatur repellat provident error iste, ex voluptate consequuntur quisquam exercitationem quod voluptatem necessitatibus. Amet fugiat quasi est. Error laborum dolor quae ullam soluta ducimus!
Beatae, nesciunt laudantium optio totam officiis id quam eius excepturi dolorem, culpa consectetur. Tempore, nobis sed asperiores inventore, consectetur necessitatibus ullam quod voluptatem quas ducimus aperiam omnis aliquam hic adipisci?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus in ratione excepturi commodi, inventore dolor
recusandae atque nemo maiores, libero alias est dolores sunt. Labore deleniti ratione nisi voluptatibus minus!
Possimus quasi numquam consequuntur! Voluptatem, architecto! Consequatur repellat provident error iste, ex voluptate
consequuntur quisquam exercitationem quod voluptatem necessitatibus. Amet fugiat quasi est. Error laborum dolor quae
ullam soluta ducimus!
Beatae, nesciunt laudantium optio totam officiis id quam eius excepturi dolorem, culpa consectetur. Tempore, nobis
sed asperiores inventore, consectetur necessitatibus ullam quod voluptatem quas ducimus aperiam omnis aliquam hic
adipisci?
</p>
</article><!--Fin del article1-->
<article>
<h2>Título del Artículo</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus in ratione excepturi commodi, inventore dolor
recusandae atque nemo maiores, libero alias est dolores sunt. Labore deleniti ratione nisi voluptatibus minus!
Possimus quasi numquam consequuntur! Voluptatem, architecto! Consequatur repellat provident error iste, ex
voluptate consequuntur quisquam exercitationem quod voluptatem necessitatibus. Amet fugiat quasi est. Error
laborum dolor quae ullam soluta ducimus!
Beatae, nesciunt laudantium optio totam officiis id quam eius excepturi dolorem, culpa consectetur. Tempore,
nobis sed asperiores inventore, consectetur necessitatibus ullam quod voluptatem quas ducimus aperiam omnis
aliquam hic adipisci?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus in ratione excepturi commodi, inventore dolor
recusandae atque nemo maiores, libero alias est dolores sunt. Labore deleniti ratione nisi voluptatibus minus!
Possimus quasi numquam consequuntur! Voluptatem, architecto! Consequatur repellat provident error iste, ex
voluptate consequuntur quisquam exercitationem quod voluptatem necessitatibus. Amet fugiat quasi est. Error
laborum dolor quae ullam soluta ducimus!
Beatae, nesciunt laudantium optio totam officiis id quam eius excepturi dolorem, culpa consectetur. Tempore,
nobis sed asperiores inventore, consectetur necessitatibus ullam quod voluptatem quas ducimus aperiam omnis
aliquam hic adipisci?
</p>
</article><!--Fin del article2-->
</section><!--Fin de section.post-->
</section><!--Fin del section.principal-->
<aside>
<div class="widget">
<h3 class="titulo">Artículos Desctacados</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></li>
</ul>
</div><!--Fin de div.widget (Articulos Destacados)-->
<div class="widget">
<h3 class="titulo">Información</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde accusantium ipsa non, maiores nulla hic necessitatibus ipsum? Ipsum explicabo pariatur recusandae repellat natus quod perferendis porro reprehenderit tempore nesciunt?Itaque asperiores odio neque. Consectetur nostrum labore, repellendus vitae omnis exercitationem soluta quia, a quos ab sed! Optio molestiae dolorum error? Magni inventore dolore quibusdam laudantium voluptate quaerat! Repudiandae, voluptates?
</p>
</div><!--Fin de div.widget (Información)-->
</aside> <!--Fin de aside-->
<footer>
<p>© 2007–2019 Destruction Information. All rights reserved.</p>
</footer><!--Fin del footer-->
</div>
<!--Fin del div.contenedor ancho 1000px-->
</body><!--Fin del body-->
</html><!--Fin del html-->