-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (147 loc) · 6.77 KB
/
index.html
File metadata and controls
154 lines (147 loc) · 6.77 KB
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
<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Mi página de inicio</title>
</head>
<body style="font-family: 'Roboto', sans-serif;">
<header class="header">
<h1 class="title">Batman</h1>
<!-- <img class="title-img" src="./images/batman.jpg" alt="Foto de batman"> -->
<div class="title-image"></div>
<p class="title-cite">"Él puede tomar la decisión que nadie más puede, la decisión correcta"</p>
</header>
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item active">
<a href>Inicio</a>
</li>
<li class="navbar-item">
<a href>Quien soy</a>
</li>
<li class="navbar-item">
<a href>Equipo</a>
</li>
<li class="navbar-item">
<a href>Transporte</a>
</li>
<li class="navbar-item">
<a href>Contacto</a>
</li>
<li class="navbar-item">
<a href>Tareas</a>
</li>
</ul>
</nav>
<main>
<section class="about-me">
<div class="batman-video">
<video src="video/batman.mp4" width="300" height="200" controls>
</video>
</div>
<div class="batman-info">
<h2>Quien soy</h2>
<strong>Batman: </strong>
<span class="batman-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit corporis dolorem repellendus voluptas, fugit assumenda illum asperiores, culpa consequatur repudiandae, similique hic libero qui inventore doloribus. Dolor sunt ullam inventore.</span>
</div>
</section>
<section class="team">
<div>
<div>
<article class="team-member">
<header>
<h3>
Alfred Pennyworth
<span class="real-name">(Michael Caine)</span>
</h3>
<h4 class="position">Mayordomo</h4>
</header>
<figure class="team-member-photo">
<img src="./images/alfred.jpg" alt="Alfred">
<figcaption class="photo-name">
Alfred Pennyworth
</figcaption>
</figure>
<p class="bio">
"¿Por qué caemos, señor? Para que aprendamos a levantarnos" - <cite>Batman Begins</cite>
</p>
</article>
</div>
<div>
<article class="team-member">
<header>
<h3>
Harvey Dent
<span class="real-name">(Aaron Eckhart)</span>
</h3>
<h4 class="position">Fiscal del distrito</h4>
</header>
<figure class="team-member-photo">
<figcaption class="photo-name">
Harvey Dent
</figcaption>
</figure>
<p class="bio">
"O mueres como un héroe, o vives lo suficiente como para convertirte en el villano” - <cite>Batman El Caballero Oscuro</cite>
</p>
</article>
</div>
<div>
<article class="team-member">
<header>
<h3>
James Gordon
<span class="real-name">(Gary Oldman)</span>
</h3>
<h4 class="position">Policia</h4>
</header>
<figure class="team-member-photo">
<img src="./images/gordon.jpg" alt="James Gordon">
<figcaption class="photo-name">
James Gordon
</figcaption>
</figure>
<p class="bio">
"Él es el héroe que Gotham merece, pero no el que necesita en este momento" - <cite>Batman El Caballero Oscuro</cite>
</p>
</article>
</div>
</div>
</section>
<section class="transport">
<div>
<div class="transport-item">
<figure>
<img class="transport-img" src="./images/car.jpg" alt="Coche batman">
<figcaption>
Coche de Batman
</figcaption>
</figure>
<p class="transport-info">
Fabricado en el año <time datetime="2005">2005</time> y se uso durante toda la trilogía.
</p>
</div>
<div class="transport-item">
<figure>
<img class="transport-img" src="./images/moto.jpg" alt="Moto batman">
<figcaption>
Moto de Batman
</figcaption>
</figure>
<p class="transport-info">
Fabricado en el año <time datetime="2005">2005</time> y se uso durante toda la trilogía.
</p>
</div>
</div>
</section>
</main>
<footer class="footer">
Isaac Díaz © 2017 KeepCoding
</footer>
</body>
</html>