generated from factoriaf5-p8/toquen-el-dom
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
116 lines (114 loc) · 4.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toquen el DOM</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<div class="boxlogo boxmenuhamb">
<img class="logo" src="./assets/images/LOGO.png" alt="logo" />
</div>
<!-- Empieza menu nav -->
<input type="checkbox" id="toggle-menu" />
<!-- Contenedor del menú -->
<div class="menu-container">
<!-- Botón de hamburguesa -->
<label for="toggle-menu" class="menu-icon"></label>
<div id="menu">
<div class="menu-item"><a href="#">Home</a></div>
<div class="menu-item">
<a href="pages/instruments.html">Instrumentos</a>
</div>
<div class="menu-item"><a href="pages/about.html">Nosotros</a></div>
<div class="menu-item">
<a href="pages/resources.html">Recursos</a>
</div>
</div>
</div>
<div class="containerheroimage">
<img
class="heroimage"
src="assets/images/Captura de pantalla (239) 1.png"
alt="heroimage"
/>
<div class="textoheader">
<h1>Toquen el <br /><span>DOM</span></h1>
<p>
“Dame una guitarra, dame un piano, dame una escoba y una cuerda. No
me aburriría en ningún lado”<br />
<span class="keithRichards">Keith Richards</span>
</p>
</div>
</div>
</header>
<main>
<section>
<h2>Instrumentos</h2>
<img class="pianorelative" src="assets/images/PIANO.png" alt="piano" />
<button class="pianoabsolute">
<a href="pages/piano.html">Piano</a>
</button>
<img
class="guitarrelative"
src="assets/images/GUITARRA.png"
alt="guitarra"
/>
<button class="guitarabsolute">
<a href="pages/guitarra.html">Guitarra</a>
</button>
<img class="bajorelative" src="assets/images/BASS.png" alt="bajo" />
<button class="bajoabsolute"><a href="pages/bajo.html">Bajo</a></button>
</section>
<section class="componentes">
<h2>Componentes</h2>
<div class="cardComponents">
<img src="assets/images/belen.png" alt="Miembro de equipo" />
<div class="texto-card">
<p>Belén</p>
<p class="texto-componentes">
Aprende a dominar la guitarra eléctrica con la mítica Belén "Mikbe", autora de clásicos como "Clean Coding in the Free World".</p>
</div>
</div>
<div class="cardComponents">
<img src="assets/images/jose.png" alt="Miembro de equipo" />
<div class="texto-card">
<p>Jose</p>
<p class="texto-componentes">Descubre el poder de las notas más graves con el bajista de renombre Jose
The Black Arm, conocido por el éxito “I don’t want to test no more”.</p>
</div>
</div>
<div class="cardComponents">
<img src="assets/images/laura.png" alt="Miembro de equipo" />
<div class="texto-card">
<p>Laura</p>
<p class="texto-componentes">Empápate con las maravillas del piano de las manos de Laura “Buqui
Rockstar”, famosa por haber introducido el uso de pianos y teclados en míticos grupos
como KISS o Bruce Springsteen and The E Street Band.</p>
</div>
</div>
<div class="cardComponents">
<img src="assets/images/will.png" alt="Miembro de equipo" />
<div class="texto-card">
<p>Wil</p>
<p class="texto-componentes">Aprende a componer los mejores solos de guitarra, con el famoso multinstrumentista Willpipe,
conocido por éxitos como "My CSS is better than yours".</p>
</div>
</div>
</section>
</main>
<footer>
<div class="address">
<img src="assets/images/logo footer.png" alt="logofooter" />
<address>
Calle Pasadena, 3.14 00666 <br />
Kuzrapali, País de las maravillas
</address>
<img class="rrssImage" src="assets/images/rrss.png" alt="logorrss" />
</div>
<img src="assets/images/copyright.png" alt="copyright" />
</footer>
</body>
</html>