BlogDeCafe/cursos.html at main · oserranom/BlogDeCafe · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BlogDeCafé</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header class="header">
        <div class="contenedor">
            <div class="barra">
                <a class="logo" href="index.html">
                    <h1 class="logo__nombre no-margin centrar-texto">Blog<span class="logo__bold">DeCafé</span></h1>
                </a> <!--Logo con enlace-->

                <nav class="navegacion">
                    <a href="nosotros.html" class="navegacion__enlace">Nosotros</a>
                    <a href="cursos.html" class="navegacion__enlace">Cursos</a>
                    <a href="contacto.html" class="navegacion__enlace">Contacto</a>
                </nav>
            </div> <!--Barra de navegación con 3 enlaces-->
        </div>

        <div class="header__texto">
            <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>
    </header> <!--Background image con barra de navegación y logo-->

    <main class="contenedor">
        <h3 class="centrar-texto">Nuestros cursos y talleres</h3>

        <div class="curso">
            <div class="curso__imagen">
                <img src="img/curso1.jpg" alt="imagen curso">
            </div>

            <div class="curso__informacion">
            <h4 class="no-margin">Técnicas de extracción de café</h4>
            <p class="widget-curso__label">Precio: <span class="widget-curso__info">Gratis</span></p>
            <p class="widget-curso__label">Aforo: <span class="widget-curso__info">20</span></p>
            <p class="curso__descripcion">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus porta leo at rutrum.
                    Ut ipsum orci, luctus quis ex eu, suscipit porttitor elit. Ut vulputate orci et tortor iaculis,
                    ac molestie diam vestibulum. Etiam et semper neque, eget placerat nisl.
            </p>
            </div> <!--curso__informacion-->
        </div> <!--.curso-->

        <div class="curso">
            <div class="curso__imagen">
                <img src="img/curso2.jpg" alt="imagen curso">
            </div>

            <div class="curso__informacion">
            <h4 class="no-margin">4 Recetas para principiantes</h4>
            <p class="widget-curso__label">Precio: <span class="widget-curso__info">Gratis</span></p>
            <p class="widget-curso__label">Aforo: <span class="widget-curso__info">20</span></p>
            <p class="curso__descripcion">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus porta leo at rutrum.
                    Ut ipsum orci, luctus quis ex eu, suscipit porttitor elit. Ut vulputate orci et tortor iaculis,
                    ac molestie diam vestibulum. Etiam et semper neque, eget placerat nisl.
            </p>
            </div> <!--curso__informacion-->
        </div> <!--.curso-->

        <div class="curso">
            <div class="curso__imagen">
                <img src="img/curso3.jpg" alt="imagen curso">
            </div>

            <div class="curso__informacion">
            <h4 class="no-margin">Consigue hacer un café de barista experto</h4>
            <p class="widget-curso__label">Precio: <span class="widget-curso__info">20€</span></p>
            <p class="widget-curso__label">Aforo: <span class="widget-curso__info">10</span></p>
            <p class="curso__descripcion">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus porta leo at rutrum.
                    Ut ipsum orci, luctus quis ex eu, suscipit porttitor elit. Ut vulputate orci et tortor iaculis,
                    ac molestie diam vestibulum. Etiam et semper neque, eget placerat nisl.
            </p>
            </div> <!--curso__informacion-->
        </div> <!--.curso-->


    </main>

    <footer class="footer">
        <div class="contenedor"> <!--Este div es necesario para que cuando demos estilo los elementos no vayan demasiado a los extremos-->
            <div class="barra">
                <a class="logo" href="index.html">
                    <h1 class="logo__nombre no-margin centrar-texto">Blog<span class="logo__bold">DeCafé</span></h1>
                </a> <!--Logo con enlace-->

                <nav class="navegacion">
                    <a href="nosotros.html" class="navegacion__enlace">Nosotros</a>
                    <a href="cursos.html" class="navegacion__enlace">Cursos</a>
                    <a href="contacto.html" class="navegacion__enlace">Contacto</a>
                </nav>
            </div> <!--Barra de navegación con 3 enlaces-->
        </div>
    </footer> <!--Fin footer-->

</body>
</html>