-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathArticles.html
150 lines (125 loc) · 5.25 KB
/
Articles.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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Articles</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="Images/Logo-site.ico" />
</head>
<body>
<header>
<nav class="haut" style="position: fixed; z-index: 1;">
<div class="logo">
<a href="index.html">
<img src="Images/Logo site.png" alt="Logo site">
</a>
</div>
<div class="Hautdroit">
<ul>
<li><a href="Articles.html" class="lien">Articles</a></li>
<li><a href="Ampoule.html" class="lien">Ampoule</a> </li>
<li><a href="Apropos.html" class="lien"> A propos</a></li>
</ul>
</div>
</nav>
</header>
<img src="Images/bannière-article.jpg" alt="Bannière de la page">
<div class="titre-article">
<h1>
Mes articles
</h1>
</div>
<section class="ligne1">
<a class="lienampoule" href="Ampoule.html" alt="Page des ampoules">
<section class="colonne1">
<img class="premiereimage" src="Images/Hue lampe.jpg" alt="Image ampoule">
<div class="premierarticle">
<h1>
Les ampoules connectées
</h1>
<p>
Nous voilà enfin, là où le savoir va naître. Philips nous en fait voir de tous les couleurs.
C’est le cas de le dire puisque Philips sort le grand jeu en mettant en vente des ampoules connectées soit
diffusant un éclairage blanc, chaud ou froid, soit un éclairage en couleur.
On trouvera différents culots pour s’adapté aux différentes tailles de douilles...
</p>
</div>
</section>
</a>
<a class="lienampoule" href="">
<section class="colonne2">
<img class="deuxiemeimage" src="Images/Plafonnier.jpg" alt="image plafonnier">
<div class="deuxiemearticle">
<h1>
Un plafonnier
</h1>
<p>
Cet article n'est pas encore disponible, n'hésitez pas à aller voir notre premier article déjà sorti sur les ampoules connectées
</p>
</div>
</section>
</a>
</section>
<section class="ligne2">
<a class="lienampoule" href="">
<section class="colonne3">
<img class="troisiemeimage" src="Images/lightstrip.jpg" alt="image lightstrip">
<div class="troisiemearticle">
<h1>
Un ruban connnecté
</h1>
<p>
Cet article n'est pas encore disponible, n'hésitez pas à aller voir notre premier article déjà sorti sur les ampoules connectées
</p>
</div>
</section>
</a>
<a class="lienampoule" href="">
<section class="colonne4">
<img class="quatriemeimage" src="Images/Hueplay.jpg" alt="image travaux">
<div class="quatriemearticle">
<h1>
Hue Play
</h1>
<p>
Cet article n'est pas encore disponible, n'hésitez pas à aller voir notre premier article déjà sorti sur les ampoules connectées
</p>
</div>
</section>
</a>
</section>
<footer>
<section class="footer">
<div class="reseaux">
<p>
Cela vous a plu ? N'hésitez pas à m'envoyer un mail ou à me retrouver sur les réseaux sociaux :
</p>
</div>
<div class="icones">
<ul class="icone">
<li>
<a href="https://www.linkedin.com/in/antoineschmerberperraud/">
<img width="50px" height="50px" src="Images/Linkedin logo.png" alt="Site linkedin">
</a>
</li>
<li>
<a href="https://www.instagram.com/antoines.p/">
<img width="50px" height="50px" src="Images/Instagram-logo.jpg" alt="Site Instagram">
</a>
</li>
<li>
<a href="mailto:antoine.schmerber-perraud@edu.devinci.fr">
<img width="64px" height="64px" src="Images/logo mail.png" alt="Mail">
</a>
</li>
</ul>
</div>
<div class="right">
<p>© 2022, Antoine Schmerber-Perraud. All rights reserved.</p>
</div>
</section>
</footer>
</body>
</html>