Newer
Older
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/blog.css">
<link rel="icon" href="../images/logo.png" type="image/icon">
<title>Université en mouvement !</title>
</head>
<body>
<nav>
<a href="https://iut.univ-lyon1.fr/"><img src="../images/logo.png" alt="logo" width="50" height="50"></a>
<a class="nav" href="../index.html">Accueil</a>
<a class="nav" id="active" href="blog.html">Blog</a>
<a class="nav" href="propos.html">A Propos</a>
</nav>
<main>
<h1>Naviguer le campus en harmonie avec l'écologie</h1>
<header>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 1</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 2</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 3</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 4</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 5</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
<section class="article">
<img src="../images/ecolo.jpg" width="100" height="50">
<h3>Titre article 6</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
</section>
</header>
<h1>Conseils par les utilisateurs pour les utilisateurs</h1>
<table id="table">
<tr>
<th>Nom d'utilisateur</th>
<th>type commentaire</th>
<th>commentaire</th>
</tr>
<tr>
<td>Fernandes Mathias</td>
<td>conseille</td>
<td>Pour éviter les embouteillages sur le campus, j'ai découvert que partir un peu
plus tôt ou attendre un peu après l'heure de pointe rend vraiment mes trajets
plus rapides et moins stressants.
</td>
</tr>
<tr>
<td>Ilyes</td>
<td>conseille</td>
<td>Les vélos ou les trottinettes électriques disponibles en libre-service sont super
pratiques pour se déplacer rapidement d'un bout à l'autre du campus. C'est cool,
écolo et ça permet d'arriver à temps en cours!
</td>
</tr>
<tr>
<td>Mekidesh Nouh</td>
<td>conseille</td>
<td>Pour économiser du temps entre les cours, essayez de prévoir vos itinéraires à l'avance.
Cela évite de se retrouver à courir partout et permet d'arriver détendu en classe.
</td>
</tr>
<tr>
<td>Haidara Mohamed</td>
<td>conseille</td>
<td>Si vous utilisez les transports en commun, essayez de télécharger les applications de suivi
des horaires. Cela vous évitera d'attendre inutilement aux arrêts de bus ou de tram, specialement
TCL Live car parfois les bus arrive plus tôt ou plus tard que prevu ;-).
</td>
</tr>
</table>
<h3 class="titre">VOTRE AVIS COMPTE</h3>
<h2>Contribuez à des déplacements intelligents</h2>
<form method="post" action="https://perso.liris.cnrs.fr/pierre-antoine.champin/enseignement/intro-web/_static/formproc/debug">
<label>Pseudo*</label><input type="text" name="pseudo" placeholder="Pseudo">
<label>Date de naissance facultatif</label><input type="date" name="date" placeholder="jj/mm/aaaa">
<label>Adresse Electronique**</label><input name="mail" placeholder="Adresse@Example.com">
<label>Développer votre idée*</label><textarea name="idées" placeholder="Partagez vos idées et conseils pour des déplacements plus intélligents sur le campus !"></textarea>
<p class="commentaires">*Les éléments sont obligatoire</p>
<p class="commentaires">**L'adresse mail ne sera pas publié</p>
<button id="envoyer">Envoyer</button>
</form>
<p id="comme">Nous vous invitons à remplir ce formulaire pour nous faire part
de vos retours, astuces et suggestions. Ensemble, construisons
un environnement de mobilité qui répond à vos besoins.</p>
</main>
<footer>
<a href="https://iut.univ-lyon1.fr/"><img src="../images/logo.png" img="imgfooter" alt="logo" width="50" height="50"></a>
<section>
<p class="comm">Contactez-nous :</p>
<p>01 23 45 67 89</p>
<p>octosudo@outlook.com</p>
</section>
<section>
<p class="comm">Soutenez-nous : </p>
<a href="https://www.paypal.com/paypalme/newininternet/" target="_blank">paypal.me/newininternet</a>
<p>patreon.com/example</p>
</section>
</footer>
</body>
</html>