-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (121 loc) · 6.78 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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Maxime et Marjorie">
<meta name="description" content="La blog des Avengers">
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="../images/favicon.ico" type="image/icon">
<script src="https://kit.fontawesome.com/455d0daaed.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=open-sans:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i"
rel="stylesheet" />
<title>Les Avengers</title>
</head>
<body>
<header>
<div aria-label="titre-et-logo" class="header">
<h1 class="header__titre">Les</h1>
<img src="./images/logo.png" alt="logo Avengers" class="header__logo">
<h1 class="header__titre">: héros et protecteurs !</h1>
</div>
<nav class="header__nav">
<ul class="header__nav--link">
<li><a href="#">À propos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="header__nav--icon">
<li><a href="#"><img src="./images/twitter_icon.png" alt="icon twitter"
class="header__nav--icon-img"></a></li>
<li><a href="#"><img src="./images/facebook_icon.png" alt="icon facebook"
class="header__nav--icon-img"></a></li>
</ul>
</nav>
</header>
<section class="section__un">
<h2 class="section__un--titre">Les <span class="section__un--titre-avengers">Avengers</span>,
les meilleurs amis des citoyens du monde</h2>
<dfn class="section__un--dfn">Les Avengers sont une équipe de super-héros exceptionnels qui travaillent ensemble pour protéger
le monde des menaces intérieures et extérieures. Ils sont incroyablement puissants, mais ils ont
également un sens de l'humour et une humanité qui les rendent attachants.
Lorsque les Avengers sont en action, vous savez que tout va bien se passer !</dfn>
<div aria-label="Contenant photo" class="section__un--container">
<div aria-label="Photo Iron-Man" class="section__un--container-photo"></div>
<div aria-label="titre pour la photo Iron-Man" class="section__un--container-iron-man"><p> Le super-héros de la semaine ♡</p></div>
</div>
</section>
<section class="section__deux">
<article class="section__deux--article">
<div aria-label="Contenant section deux" class="section__deux--article-container">
<figure class="section__deux--article-container-img une">
<img src="./images/captain-america.jpg" alt="Captain America en action">
</figure>
<figure class="section__deux--article-container-img deux">
<img src="./images/thor.jpg" alt="Thor en action">
</figure>
<figure class="section__deux--article-container-img trois">
<img src="./images/hulk.jpg" alt="Hulk en action">
</figure>
<figure class="section__deux--article-container-img quatre">
<img src="./images/black-widow.jpg" alt="Black-Window en action">
</figure>
<figure class="section__deux--article-container-img cinq">
<img src="./images/hawkeye.jpg" alt="Hawkeye en action">
</figure>
<figure class="section__deux--article-container-img six">
<img src="./images/scarlet-witch.jpg" alt="Scarlet Witch en action">
</figure>
<figure class="section__deux--article-container-img sept">
<img src="./images/vision.jpg" alt="Vision en action">
</figure>
<figure class="section__deux--article-container-img huit">
<img src="./images/antman.jpg" alt="Antman en action">
</figure>
<figure class="section__deux--article-container-img neuf">
<img src="./images/falcon.jpg" alt="Falcon en action">
</figure>
<figure class="section__deux--article-container-img dix">
<img src="./images/war-machine.jpg" alt="War Machine en action">
</figure>
<figure class="section__deux--article-container-img onze">
<img src="./images/spiderman.jpg" alt="Spiderman en action">
</figure>
<figure class="section__deux--article-container-img douze">
<img src="./images/doctor-strange.jpg" alt="Docteur Strange en action">
</figure>
<figure class="section__deux--article-container-img treize">
<img src="./images/black-panther.jpg" alt="Black Panther en action">
</figure>
<figure class="section__deux--article-container-img quatorze">
<img src="./images/captain-marvel.jpg" alt="Captain Marvel en action">
</figure>
<figure class="section__deux--article-container-img quinze">
<img src="./images/winter-soldier.jpg" alt="Winter Soldier en action">
</figure>
<figure class="section__deux--article-container-img seize">
<img src="./images/star-lord.jpg" alt="Star Lord en action">
</figure>
<figure class="section__deux--article-container-img dixsept">
<img src="./images/nick-fury.jpg" alt="Nick Fury en action">
</figure>
<aside>
<div aria-label="contenant Aside" class="aside__container">
<h3 class="aside__container--titre">Avengers Rassemblement!</h3>
<p class="aside__container--paragraphe">Vous avez des compétences hors du commun et vous souhaitez sauver
le monde aux côtés des plus grands héros de la planète ?</p>
<a href="#" class="aside__container--ancre">Soumettez votre candidature</a>
<h3 class="aside__container--titre">Restez informé des dernières aventures des Avengers</h3>
<p class="aside__container--paragraphe">Abonnez-vous à notre newsletter et ne manquez aucune mission !</p>
<a href="#" class="aside__container--ancre">S'abonner</a>
</div>
</aside>
</div>
</article>
</section>
<footer>
Copyright © 2023 | <i class="fa-solid fa-heart"></i> Avengers
</footer>
</body>
</html>