-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (174 loc) · 8.51 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
<!DOCTYPE html>
<html lang="fr">
<head><!-- Partie invisible | C'est le cerveau, là où on fait toutes les connexions et chargement de fichier (CSS, libraries)-->
<meta charset="UTF-8"> <!-- C'est l'encryptage de l'écriture (si c'est une langue latine ou non) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- C'est des options d'affichage en fonctione de notre appareil -->
<meta name="description" content="Album de Tyler "><!-- C'est la description pour les moteurs de recherche -->
<meta name="keywords" content="Music, Musique, Tyler the creator"><!-- Mots clés pour le référencement SEO -->
<meta name="author" content="Nicolas Rollinger"><!-- Auteur du site -->
<title>Chromatopia - Jukebox La Toile</title><!-- C'est le titre de la page / onglet -->
<link rel="icon" type="image/x-icon" href="https://latoile.em-lyon.com/files/2022/05/cropped-logo-latoilewidget-192x192.png"> <!-- C'est le favicon (petit logo) -->
<link rel="stylesheet" href="style.css"><!-- C'est le lien pour venir charger le CSS -->
</head>
<body>
<header></header>
<nav>
<ul>
<li>
<a href="https://rllngr.github.io/La-Toile-Jukebox-Code-Makers/">accueil</a>
</li>
<li>
<a href="https://latoile.em-lyon.com/" target="_blank">formation</a>
</li>
<li>
<a href="https://em-lyon.com/" target="_blank">em lyon</a>
</li>
</ul>
</nav>
<!-- Partie visible | C'est là où on met tout le contenu du site -->
<!-- Cover de l'album -->
<div id="header">
<div id="image">
<img src="https://images.squarespace-cdn.com/content/v1/65d18db5d662de7fdc85c087/e196939b-2c0e-44d7-9231-3d6c7de70794/x02.jpg?format=2500w" alt="Chromakopia album cover tyler the creator">
</div>
<div id="text">
<h1>Chromakopia</h1>
<!-- Nom de l'artiste -->
<h2>Tyler, the Creator - 2024</h2>
<!-- Tracklist (liste des chansons de l'album)
1.
2.
3.
...
-->
<h4>Tracklist</h4>
<ol>
<li>
<a href="https://www.youtube.com/watch?v=gkZ4dLMH-B8&ab_channel=Tyler%2CTheCreator" target="_blank">St. Chroma <i>featuring Daniel Caesar</i></a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Rah Tah Tah
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Noid
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Hey Jane
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
I Killed You <i>featuring Childish Gambino</i>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Judge Judy <i>featuring Childish Gambino</i>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Sticky <i>featuring GloRilla, Lil Wayne and Sexyy Red</i>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Take Your Mask Off <i>featuring Daniel Caesar</i>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Kathryn ThomasGregory Cook
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Tomorrow
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Thought I Was Dead
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Like Him
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Balloon
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
I Hope You Find Your Way Home
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Mother
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=hCcwCv3G1FQ&list=OLAK5uy_nt1Nw4wT6I7VlzNknxTiIz3hfED0ttO8Q" target="_blank">
Darling, I
</a>
</li>
</ol>
</div>
</div>
<div id="discographie">
<!-- Discographie (Autres albums de l'artiste (Cover + Titre)) -->
<h4>Autres albums</h4>
<ul id="other-albums">
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=4QjcYIJBfnc&list=OLAK5uy_ndlS8umsmnPbeH-OhDU_1V9E5qy3OA1bE" target="_blank">
<img src="https://m.media-amazon.com/images/I/61dWF4b9O3L._SX300_SY300_QL70_ML2_.jpg" alt="album cover">
<h5>Goblin</h5>
</a>
</li>
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=AknjeiApwhg&list=PL8YH4mOwWryUDIn7cIJ7kyJTQwZfsdPZ-" target="_blank">
<img src="https://m.media-amazon.com/images/I/51NTj05bWxL._SX300_SY300_QL70_ML2_.jpg" alt="album cover">
<h5>Wolf</h5>
</a>
</li>
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=CNff5wlHSgw&list=PL1Tx_5tVnHqC9_AapsWDws5L6E9duo6gj" target="_blank">
<img src="https://www.mowno.com/wp-content/uploads/2015/04/tyler1.jpg" alt="album cover">
<h5>Cherry Bomb</h5>
</a>
</li>
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=MvEtKc8-n3s&list=PLcSxundcwECqb7nA_6wTUwUGHhkFb7XRs" target="_blank">
<img src="https://cdns-images.dzcdn.net/images/cover/a7a16b8f63b1ec0e9fbd327619966737/0x1900-000000-80-0-0.jpg" alt="album cover">
<h5>Flower Boy</h5>
</a>
</li>
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=6S20mJvr4vs&list=PLRwfuN7siOr7p044Iw_7jfEhGPgfVdST-" target="_blank">
<img src="https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/0c/06/05/0c060581-6242-6a2a-a677-20170f2cf8da/886447710180.jpg/1200x1200bb.jpg" alt="album cover">
<h5>Igor</h5>
</a>
</li>
<li class="carte-album">
<a href="https://www.youtube.com/watch?v=aktRqdBmrf4&list=PLfiMjLyNWxebu5tK9xUbPKcVeVpOwc8QI" target="_blank">
<img src="https://media.pitchfork.com/photos/60cb72ddadc2201193add729/master/pass/Tyler-the-Creator.jpg
" alt="album cover">
<h5>Call Me If You Get Lost</h5>
</a>
</li>
</ul>
</div>
<footer>
<p>© CodeMakers 2024</p>
</footer>
</body>
</html>