-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (98 loc) · 5.47 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blog de Café</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/Normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<div class="contenedor">
<div class="barra">
<a href="index.html">
<h1 class="no-margin"> Blog<span>DeCafé</span> </h1>
</a>
<nav class="navegacion">
<a href="nosotros.html">Nosotros</a>
<a href="Cursos.Html">Cursos</a>
<a href="Contacto.html">Contacto</a>
</nav>
</div> <!--Barra-->
<div class="texto-header">
<h2 class="no-margin">Blog de Café con consejos y Cursos</h2>
<p class="no-margin">Aprende de los expertos con las mejores recetas y consejos</p>
</div>
</div><!--Contenedor-->
</header>
<div class="contenido-principal contenedor">
<main class="blog">
<h2>Nuestro Blog</h2>
<article class="entrada-blog">
<div class="imagen">
<img src="img/blog1.jpg" alt="Imagen Blog">
</div><!--Imagen-->
<div class="contenido-blog">
<h3 class="no-margin">Tipos de Granos de Café</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate viverra lectus, non fringilla ipsum laoreet at. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse porta, augue interdum laoreet sagittis, nunc metus porttitor est, ut convallis est lectus ac orci. </p>
<a href="entrada.html" class="btn btn-primario">Leer entrada</a>
</div>
</article>
<article class="entrada-blog">
<div class="imagen">
<img src="img/blog2.jpg" alt="Imagen Blog">
</div><!--Imagen-->
<div class="contenido-blog">
<h3 class="no-margin">3 Deliciosas recetas para Café</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate viverra lectus, non fringilla ipsum laoreet at. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse porta, augue interdum laoreet sagittis, nunc metus porttitor est, ut convallis est lectus ac orci. Pellentesque eget enim tellus. Fusce at lacus luctus, dapibus purus vitae, luctus ex. Donec aliquam ex arcu, eu interdum ex imperdiet et.</p>
<a href="entrada.html" class="btn btn-primario">Leer entrada</a>
</div>
</article>
<article class="entrada-blog">
<div class="imagen">
<img src="img/blog3.jpg" alt="Imagen Blog">
</div><!--Imagen-->
<div class="contenido-blog">
<h3 class="no-margin">Beneficios del café</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate viverra lectus, non fringilla ipsum laoreet at. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse porta, augue interdum laoreet sagittis, nunc metus porttitor est, ut convallis est lectus ac orci. Pellentesque eget enim tellus. Fusce at lacus luctus, dapibus purus vitae, luctus ex. Donec aliquam ex arcu, eu interdum ex imperdiet et. </p>
<a href="entrada.html" class="btn btn-primario">Leer entrada</a>
</div>
</article>
</main>
<aside class="cursos">
<h2>Nuestros Cursos y Talleres</h2>
<ul class="cursos-lista">
<li class="curso">
<h4 class="no-margin">Tecnicas de extracción de Café</h4>
<p class="no-margin">Precio: <span>Gratis</span></p>
<p class="no-margin">Cupo: <span>20</span></p>
<a href="entrada.html" class="btn btn-secundario">Mas Información</a>
</li>
<li class="curso">
<h4 class="no-margin">4 Recetas de cafe para principiantes</h4>
<p class="no-margin">Precio: <span>Gratis</span></p>
<p class="no-margin">Cupo: <span>20</span></p>
<a href="entrada.html" class="btn btn-secundario">Mas Información</a>
</li>
</ul>
</aside>
</div> <!-- Contenido Principal-->
<footer class="site-footer">
<div class="contenedor">
<div class="barra">
<a href="index.html">
<p class="no-margin">Blog<span>DeCafé</span></p>
</a>
<nav class="navegacion">
<a href="nosotros.html">Nosotros</a>
<a href="Cursos.Html">Cursos</a>
<a href="Contacto.html">Contacto</a>
</nav>
</div> <!--Barra-->
</div>
</footer>
</body>
</html>