-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
244 lines (232 loc) · 15.1 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="es" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Descubre a la mítica banda de rock | U2"/>
<meta property="og:url" content="https://lucapandolfelli.github.io/U2-Pandolfelli"/>
<meta property="og:image" content="https://lucapandolfelli.github.io/U2-Pandolfelli/assets/img/banner.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="El sitio web no oficial de U2 con las últimas noticias, videos, audio, fotos, e información de la banda."/>
<meta property="og:type" content="website"/>
<meta name="keywords" content="u2, U2, bono, the edge, larry mullen jr, adam clayton, boy, october, war, under a blood red sky, the unforgettable fire, wide awake in america, the joshua tree, rattle and hum, achtung baby, zooropa, pop, all that you can´t leave behind, how to dismantle an atomic bomb, no line in the horizon, songs of innocence, songs of experience, spotify">
<meta name="description" content="El sitio web no oficial de U2 con las últimas noticias, videos, audio, fotos, e información de la banda.">
<title>U2</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> -->
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="navbar-container">
<div class="navbar-logo">
<a href="./index.html"><img src="./assets/img/logo.png" alt="Logo U2"></a>
</div>
<ul class="navbar-menu" id="menu">
<li class="navbar-item"><a class="navbar-link" href="./index.html" data-type="navbar-active">Inicio</a></li>
<li class="navbar-item"><a class="navbar-link" href="./pages/noticias.html">Noticias</a></li>
<li class="navbar-item"><a class="navbar-link" href="./pages/discografia.html">Discografia</a></li>
<li class="navbar-item"><a class="navbar-link" href="./pages/miembros.html">Miembros</a></li>
<li class="navbar-item"><a class="navbar-link" href="./pages/sobre-nosotros.html">Sobre Nosotros</a></li>
<li class="navbar-item"><a class="navbar-link" href="./pages/contacto.html">Contacto</a></li>
</ul>
<button id="btn-toggle" class="navbar-btn">
<div class="navbar-btn--container">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</nav>
<!-- Bootstrap Carrousel -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/img/banner.jpg" class="d-block w-100 carousel__image" alt="Banner de U2 1">
<div class="carousel-caption">
<h3>U2 ACHTUNG BABY 30 - LIVE</h3>
<p>Treinta años de vida... y quizás alguna que otra sorpresa.</p>
<a href="./pages/noticias.html">Ver más</a>
</div>
</div>
<div class="carousel-item">
<img src="./assets/img/banner2.jpg" class="d-block w-100 carousel__image" alt="Banner de U2 2">
<div class="carousel-caption">
<h3>'A CELEBRATION'</h3>
<p>Lanzamiento 40 aniversario en vinilo de 12" de edición limitada.</p>
<a href="./pages/noticias.html">Ver más</a>
</div>
</div>
<div class="carousel-item">
<img src="./assets/img/banner3.jpg" class="d-block w-100 carousel__image" alt="Banner de U2 3">
<div class="carousel-caption">
<h3>Bono y The Edge junto a Taras Topolia</h3>
<p>Sorpresa para los ucranianos en el metro de Kiev.</p>
<a href="./pages/noticias.html">Ver más</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</header>
<main>
<!-- Last News Section -->
<section class="last-news-section" id="last-news">
<h1 class="last-news-section__title" data-aos="zoom-in" data-aos-duration="1500">Noticias</h1>
<div class="last-news-section__container" data-aos="fade-right" data-aos-duration="2000">
<!-- Card #1 -->
<div class="news-card">
<div class="news-card__image">
<img src="./assets/img/article1.jpg" alt="'Your Song Saved My Life' nueva canción de U2 para Sing 2">
</div>
<div class="news-card__body">
<h1>'Your Song Saved My Life' nueva canción de U2 para Sing 2</h1>
<p>U2 anunció de forma oficial su colaboración en la Banda Sonora Original de "Sing 2"...</p>
<a class="main_btn news-card__body--btn" href="./pages/noticias.html">Ver mas</a>
</div>
</div>
<!-- Card #2 -->
<div class="news-card">
<div class="news-card__image">
<img src="./assets/img/article2.jpg" alt="Se cumplen 20 años del inolvidable Super Bowl XXXVI">
</div>
<div class="news-card__body">
<h1>Se cumplen 20 años del inolvidable Super Bowl XXXVI</h1>
<p>El 3 de febrero de 2002 U2 realizó el espectáculo del descanso dela Superbowl XXXVI en el...</p>
<a class="main_btn news-card__body--btn" href="./pages/noticias.html">Ver mas</a>
</div>
</div>
<!-- Card #3 -->
<div class="news-card">
<div class="news-card__image">
<img src="./assets/img/article3.jpg" alt="Hace 24 años terminaba una de las mejores giras de U2">
</div>
<div class="news-card__body">
<h1>Hace 24 años terminaba una de las mejores giras de U2</h1>
<p>El 21 de marzo de 1998, la banda irlandesa daba por finalizada una de sus mejores giras, el Popmart tour...</p>
<a class="main_btn news-card__body--btn" href="./pages/noticias.html">Ver mas</a>
</div>
</div>
<!-- Card #4 -->
<div class="news-card">
<div class="news-card__image">
<img src="./assets/img/banner3.jpg" alt="Bono y The Edge junto a Taras Topolia">
</div>
<div class="news-card__body">
<h1>Bono y The Edge junto a Taras Topolia</h1>
<p>Los históricos miembros de U2 tocaron junto al líder de la banda ucraniana “Antytila” Taras Topolia, quien tras la invasión de Putin se alistó en el ejército para defender a...</p>
<a class="main_btn news-card__body--btn" href="./pages/noticias.html">Ver mas</a>
</div>
</div>
<!-- Card #5 -->
<div class="news-card">
<div class="news-card__image">
<img src="./assets/img/banner2.jpg" alt="A CELEBRATION">
</div>
<div class="news-card__body">
<h1>'A CELEBRATION'</h1>
<p>Lanzamiento 40 aniversario en vinilo de 12" de edición limitada.</p>
<a class="main_btn news-card__body--btn" href="./pages/noticias.html">Ver mas</a>
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section class="about-section">
<div class="container" data-aos="fade-left" data-aos-duration="2000">
<div class="row flex-column-reverse flex-lg-row">
<div class="col-sm-12 col-lg-4 p-4 bg-light">
<h2>U2</h2>
<p>¿Sabías que la lengendaria banda irlandesa vendió más discos que artistas coomo Justin Bieber, Britney Spears o la mismísima Tina Turner? Conocé más acerca de U2:</p>
<a class="main_btn" href="./pages/sobre-nosotros.html">Conocenos mas</a>
</div>
<div class="col p-0">
<img class="about-section__image" src="./assets/img/about-us.jpg" alt="About U2">
</div>
</div>
</div>
</section>
<!-- Separator -->
<section class="separator">
<div class="separator__image" style="background: linear-gradient(0deg, rgba(19,20,22,1) 0%, rgba(19,20,22,0.6222689759497548) 16%, rgba(19,20,22,0) 46%), url('./assets/img/separator.jpg'); background-size: cover;"></div>
<div class="separator__container">
<h3 class="separator__container--text">Descubre nuestra discografía</h3>
<a href="./pages/discografia.html" class="separator__container--btn">Click aquí</a>
</div>
</section>
<!-- Spotify Section -->
<section class="spotify-section">
<div class="spotify-section__container">
<div class="spotify-section__image">
<a href="https://open.spotify.com/artist/51Blml2LZPmy7TTiAg47vQ" target="_blank"><img src="./assets/img/spotify-banner.jpg" alt="Spotify U2 Banner"></a>
</div>
<div class="spotify-section__text">
<h1 class="spotify-section__text--title">Encuentranos en <span class="spotify-section__text--spotify"><i class="fa-brands fa-spotify"></i>Spotify</span></h1>
<p class="spotify-section__text--content">U2 ha pasado la mayor parte de su carrera como la banda de rock & roll más grande del mundo, un título...</p>
<ul class="spotify-section__text--list">
<li>9.507.470 <span class="spotify-section__text--span">de </span>Seguidores</li>
<li>17.148.884 <span class="spotify-section__text--span">Oyentes </span>Mensuales</li>
<li>374.127 <span class="spotify-section__text--span">Oyentes en </span>Mexico City, MX</li>
<li>362.260 <span class="spotify-section__text--span">Oyentes en </span>São Paulo, BR</li>
<li>331.174 <span class="spotify-section__text--span">Oyentes en </span>Santiago, CL</li>
<li>274.577 <span class="spotify-section__text--span">Oyentes en </span>London, GB</li>
<li>240.467 <span class="spotify-section__text--span">Oyentes en </span>Sydney, AU</li>
</ul>
<a class="spotify-section__text--btn" href="https://open.spotify.com/artist/51Blml2LZPmy7TTiAg47vQ" target="_blank">Ver Spotify</a>
<div class="spotify-section__text--top">
<img src="./assets/img/top-number.png" alt="Top Number">
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-content__social-media">
<ul>
<a href="https://www.facebook.com/u2" class="footer-content__social-media--icons" target="_blank"><li class="footer-content__social-media--icons"><i class="fa-brands fa-facebook"></i></li></a>
<a href="https://www.instagram.com/u2/" class="footer-content__social-media--icons" target="_blank"><li class="footer-content__social-media--icons"><i class="fa-brands fa-instagram"></i></li></a>
<a href="https://www.youtube.com/u2" class="footer-content__social-media--icons" target="_blank"><li class="footer-content__social-media--icons"><i class="fa-brands fa-youtube"></i></li></a>
<a href="https://twitter.com/u2" class="footer-content__social-media--icons" target="_blank"><li class="footer-content__social-media--icons"><i class="fa-brands fa-twitter"></i></li></a>
<a href="https://open.spotify.com/artist/51Blml2LZPmy7TTiAg47vQ" class="footer-content__social-media--icons" target="_blank"><li class="footer-content__social-media--icons"><i class="fa-brands fa-spotify"></i></li></a>
</ul>
</div>
<hr class="footer-content__divider">
<div class="footer-content__info">
<ul class="footer-content__info--menu">
<a href="#"><li>Ayuda</li></a>
<a href="#"><li>Privacidad</li></a>
<a href="#"><li>T&C</li></a>
</ul>
</div>
</div>
<div class="copyright-section">
<p>© Copyright 2022 - U2 | Diseñada por <a href="https://lucapandolfelli.github.io" target="_blank">Luca Pandolfelli</a></p>
</div>
</footer>
<script src="./assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script> -->
</body>
</html>