-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (119 loc) · 7.35 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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<title>oNews</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marjorie MARCOS">
<meta name="author" content="Maxime CAFFIN">
<meta name="description" content="News">
<!-- Reboot.css est un reset amélioré (avec des valeurs par défaut standardisées) https://getbootstrap.com/docs/4.1/content/reboot/ -->
<link rel="stylesheet" href="./css/reboot.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/onews.svg" type="image/icon">
<script src="https://kit.fontawesome.com/455d0daaed.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="partie__un">
<header>
<div aria-label="titre de la page et logo" class="header">
<img src="./images/onews.svg" alt="Logo de O'Clock">
<h1>O'CLOCK <br>STUDENTS <br>NEWS</h1>
</div>
</header>
<section class="main__titre">
<h2>Latest news <span class="main__titre-italic">from our students</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque
suscipit nibh quis porttitor. Integer iaculis mi urna, a pulvinar quam adipiscing ut.
<br>Vivamus vel vestibulum mauris.</p>
</section>
<footer class="navigation">
<nav class="navigation__nav">
<ul class="navigation__detail">
<li><i class="fa-solid fa-house"></i>Plan du site</li>
<li><i class="fa-solid fa-circle-down"></i>Mentions légales</li>
<li><i class="fa-solid fa-file-signature"></i>Contact</li>
</ul>
</nav>
</footer>
</section>
<section class="partie__deux">
<div aria-label="Contenant de la partie 2" class="partie-deux--container">
<h2 class="partie__deux--titre">Latest news</h2>
<div class="article__contain">
<article class="article">
<em class="article__balise news">NEWS</em>
<h3 class="article__titre">Lorem ipsum dolor sit amet</h3>
<div aria-label="icon de l'article" class="article__icon">
<img src="./images/icon-john.png" alt="icon de john">
<div aria-label="nom de l'auteur" class="article__autreur">John Marchill<span class="article__date">le 21 Juillet 2015</></div>
</div>
<p class="article__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque suscipit
nibh quis porttitor. Voilà, je tenais à le dire </p>
<a class="article__reading" href="#">Continue reading</a>
</article>
<article class="article">
<em class="article__balise team">TEAM</em>
<h3 class="article__titre">Le pair programming pour les n00bs</h3>
<div aria-label="icon de l'article" class="article__icon">
<img src="./images/icon-dar.png" alt="icon de dar">
<div aria-label="nom de l'auteur" class="article__autreur">Paul Darson<span class="article__date">le 2 Août 2019</span></div>
</div>
<p class="article__description">Le pair programming pour les dévs, c'est un peu comme certains fromages:
c'est mieux à deux </p>
<a class="article__reading" href="#">Continue reading</a>
</article>
</div>
<div class="article__contain">
<article class="article">
<em class="article__balise work">WORK</em>
<h3 class="article__titre">Pourquoi j'aime PHP</h3>
<div aria-label="icon de l'article" class="article__icon">
<img src="./images/icon-ohz.png" alt=" icon de ohz">
<div aria-label="nom de l'auteur" class="article__autreur">Bruce Ékoute<span class="article__date"> 7 Août 2019</span></div>
</div>
<p class="article__description">PHP est le langage le plus répandu dans le Web. Je vous propose de faire le tour
de toutes ces petites choses simples qui lui donnent une saveur si unique </p>
<a class="article__reading" href="#">Continue reading</a>
</article>
<article class="article">
<em class="article__balise team">TEAM</em>
<h3 class="article__titre">La situation de scribe</h3>
<div aria-label="icon de l'article" class="article__icon">
<img src="./images/icon-spr.png" alt=" icon de spr">
<div aria-label="nom de l'auteur" class="article__autreur">Ottis <span class="article__date">le 5 Septembre 2019</span></div>
</div>
<p class="article__description">Mais, vous savez, moi je ne crois pas qu'il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd'hui avec vous,
je dirais que c'est d'abord des rencontres, des gens qui m'ont tendu la main, peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi.
Et c'est assez curieux de se dire que les hasards, les rencontres</p>
<a class="article__reading" href="#">Continue reading</a>
</article>
</div>
<div class="article__contain">
<article class="article">
<em class="article__balise news">NEWS</em>
<h3 class="article__titre">Pourquoi commencer le Dev</h3>
<div aria-label="icon de l'article" class="article__icon">
<img src="./images/icon-tr.png" alt=" icon de ohz">
<div aria-label="nom de l'auteur" class="article__autreur">Trice Racoon<span class="article__date"> 31 Août 2019</span></div>
</div>
<p class="article__description">Métier d’avenir, la développeuse ou développeur web est responsable de la création de sites et d’applications web et web mobiles.
C’est le métier technique central du secteur du numérique, qui évolue très rapidement au rythme de </p>
<a class="article__reading" href="#">Continue reading</a>
</article>
<article class="article">
<em class="article__balise work">WORK</em>
<h3 class="article__titre">Quelle formation choisir pour se reconvertir ? </h3>
<div class="article__icon">
<img src="./images/icon-tre.png" alt=" icon de spr">
<div aria-label="icon de l'article" class="article__autreur">Marjorie Marcos <span class="article__date">le 17 juillet 2019</span></div>
</div>
<p class="article__description">Étant donné cette vitesse d’évolution, les formations longues de 2 à 5 ans sont rapidement obsolètes.
Il peut etre avantageux de débuter une formation courte mais intensive. En effet, désormais beaucoup d'école proposent des</p>
<a class="article__reading" href="#">Continue reading</a>
</article>
</div>
<div>
</section>
</body>
</html>