-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (124 loc) · 5.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iron Maiden</title>
<style>
body {font-family: Arial, Helvetica, sans-serif; background: #f1f1f1; max-width: 75%; margin: auto;}
header {margin:16px}
a, a:visited {text-decoration: none; color: black;}
a:hover {color: blue;}
li {list-style: none; display: inline-block; width: 19%;}
div, section, header, footer{border: 0 solid black; text-align: center;}
p {max-width: 90%; margin: 6px auto; }
#members {text-align: center;}
#member_images {width: auto;}
.member_img {max-width: 100%;}
.member_div {max-width: 32%; display: inline-block; margin: 2px 0;}
.member_div div {max-width:100%; font-size: small;}
.social_icons {width: 20px; margin-top: 0;}
h5 {margin-bottom: 0;}
nav {border: 1px solid grey;}
nav div {display: inline; margin: 0 25px 0 25px}
hr {margin-top: 26px;}
img {max-width: 25% ;}
.img_gallery, .img_header {max-width: 99%;}
</style>
</head>
<body>
<!--Nombre, integrantes, breve reseña, discos, link web oficial, imagenes, Spotify player-->
<header id="header">
<img class="img_header" src="imgs/Iron_Maiden_Logo.png" alt="Iron Maiden">
</header>
<nav>
<ol>
<li><a href="#bio">Reseña</a></li>
<li><a href="#members">Miembros</a></li>
<li><a href="#albums">Discografía</a></li>
<li><a href="#images">Imágenes</a></li>
<li><a href="#spotify_player">Escuchalos</a></li>
</ol>
</nav>
<section id="bio">
<h3>Reseña</h3>
<p>Iron Maiden es una banda británica de heavy metal fundada en 1975 por el bajista Steve Harris.
Es considerada una de las bandas más importantes de todos los tiempos en este género. </p>
<p>Ha vendido más de 100 millones de discos en todo el mundo, a pesar de haber contado con poco apoyo
de la radio y la televisión comercial durante la mayor parte de su carrera. </p>
<p>Sin embargo, la banda basó su éxito en llegar directamente a los aficionados, grabando discos de
alta calidad y realizando destacadas actuaciones en vivo.</p>
</section>
<hr>
<section id="members">
<h3>Miembros</h3>
<div id="member_images">
<div class="member_div">
<img class="member_img" src="imgs/BruceDickinson_02.jpg" alt="">
<div>Bruce Dickinson</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/SteveHarris_01.jpg" alt="">
<div>Steve Harris</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/DaveMurray_01.jpg" alt="">
<div>Dave Murray</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/AdrianSmith_01.jpg" alt="">
<div>Adrian Smith</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/NickoMcBrian_01.jpg" alt="">
<div>Nicko McBrian</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/JanickGers_01.jpg" alt="">
<div>Janick Gers</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/Eddie_01.jpg" alt="">
<div>Eddie</div>
</div>
<div class="member_div">
<img class="member_img" src="imgs/EdForceOne_05.png" alt="">
<div>Ed Force One</div>
</div>
</div>
</section>
<hr>
<section id="albums">
<h3>Discografía</h3>
<img src="imgs/albums/Powerslave.jpg" alt="">
<img src="imgs/albums/Flight666.jpg" alt="">
<img src="imgs/albums/ARealLiveOne.jpg" alt="">
<img src="imgs/albums/NumberOfTheBeast.jpg" alt="">
<img src="imgs/albums/Iron_Maiden_A_Real_Dead_One.jpg" alt="">
<img src="imgs/albums/TheBookOfSouls.png" alt="">
</section>
<hr>
<section id="images">
<h3>Imágenes</h3>
<img class="img_gallery" src="imgs/gallery/126794_widescreen.jpg" alt="">
<img class="img_gallery" src="imgs/gallery/bruce-dickinson-iron-maiden-cancer.jpg" alt="">
<img class="img_gallery" src="imgs/gallery/Iron_Maiden_Barclays_Center_2019-1.jpg" alt="">
<img class="img_gallery" src="imgs/gallery/Iron_Maiden_in_the_Palais_Omnisports_of_Paris-Bercy_(France).jpg" alt="">
</section>
<hr>
<section id="spotify_player">
<h3>Escuchalos acá</h3>
<div>
<iframe src="https://open.spotify.com/embed/track/1IEBIDO1jcXRgzYXlW4qOz" width="400" height="80"
frameborder="0" allowtransparency="false" allow="encrypted-media">
</iframe>
</div>
</section>
<hr>
<footer>
<h5>Ale Zuvic - 2020</h5>
<a href="https://www.linkedin.com/in/alejandro-l-zuvic-9a201518/" target="_blank"><img src="imgs/linkedin_logo.svg" class="social_icons" alt=""></a>
<a href="mailto:[email protected]" target="_blank"><img src="imgs/email_logo.png" class="social_icons" alt=""></a>
</footer>
</body>
</html>