-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (96 loc) · 4.75 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>
<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" 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="/">
<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 Grano de Café</h3>
<p>Sed laoreet, lorem et varius lacinia, massa leo mattis erat, sit amet fermentum ante turpis eget diam. Proin vulputate porta dolor, eu ullamcorper justo. Morbi suscipit vestibulum pellentesque. Nunc id erat tincidunt, semper ante eu, pulvinar neque.</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>Sed laoreet, lorem et varius lacinia, massa leo mattis erat, sit amet fermentum ante turpis eget diam. Proin vulputate porta dolor, eu ullamcorper justo. Morbi suscipit vestibulum pellentesque. Nunc id erat tincidunt, semper ante eu, pulvinar neque.</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>Sed laoreet, lorem et varius lacinia, massa leo mattis erat, sit amet fermentum ante turpis eget diam. Proin vulputate porta dolor, eu ullamcorper justo. Morbi suscipit vestibulum pellentesque. Nunc id erat tincidunt, semper ante eu, pulvinar neque.</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">Técnicas 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="cursos.html" class="btn btn-secundario">Más Información</a>
</li>
<li class="curso">
<h4 class="no-margin">4 Recetas de café para principiantes</h4>
<p class="no-margin">Precio: <span>Gratis</span> </p>
<p class="no-margin">Cupo: <span>20</span> </p>
<a href="cursos.html" class="btn btn-secundario">Más Información</a>
</li>
</ul>
</aside>
</div><!--contenido-principal-->
<footer class="site-footer">
<div class="contenedor">
<div class="barra">
<p class="no-margin">Blog<span>DeCafé</span></p>
<nav class="navegacion">
<a href="nosotros.html">Nosotros</a>
<a href="cursos.html">Cursos</a>
<a href="contacto.html">Contacto</a>
</nav>
</div>
</div>
</footer>
</body>
</html>