Skip to content

Commit aa5956f

Browse files
programmerprogrammer
authored
Create blogs-fr.html
1 parent 61216de commit aa5956f

File tree

1 file changed

+187
-0
lines changed

1 file changed

+187
-0
lines changed

‎blogs-fr.html‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Blogue PointA (FR)</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="styles.css" />
11+
</head>
12+
<body>
13+
<div class="background-glow"></div>
14+
<header class="site-header">
15+
<div class="brand">PointA</div>
16+
<nav class="nav-links">
17+
<a href="index-fr.html#histoires">Guides</a>
18+
<a href="blogs-fr.html">Blogues</a>
19+
<a href="#contact-fr">Contact</a>
20+
</nav>
21+
<div class="lang-toggle" aria-label="Bascule de langue">
22+
<a class="pill pill--ghost" href="blogs.html">English</a>
23+
<a class="pill is-active" href="blogs-fr.html">Français</a>
24+
</div>
25+
<a class="pill" href="#contact-fr">Discutons</a>
26+
</header>
27+
28+
<main>
29+
<section class="hero" data-animate>
30+
<div class="hero__copy">
31+
<p class="eyebrow">Blogue PointA</p>
32+
<h1>Articles en français à adapter.</h1>
33+
<p class="lede">Servez-vous de cette version pour traduire ou réécrire vos billets : chaque carte, lien et bouton peut être modifié.</p>
34+
<div class="hero__cta">
35+
<a class="pill pill--primary" href="#articles-fr">Voir les articles</a>
36+
<a class="pill pill--ghost" href="index-fr.html#histoires">Guides FR</a>
37+
</div>
38+
</div>
39+
<figure class="hero__visual" data-pop>
40+
<img src="greta-600x.png" alt="Collage pour le blogue" />
41+
<div class="floating-tag">idées</div>
42+
<div class="floating-tag floating-tag--alt">parcours</div>
43+
</figure>
44+
</section>
45+
46+
<section class="grid" id="articles-fr" data-animate>
47+
<div class="grid__header">
48+
<p class="eyebrow">Articles récents</p>
49+
<h2>Six cartes prêtes à renommer</h2>
50+
<p class="lede">Changez les titres, les catégories ou les durées pour refléter vos traductions et votre ton.</p>
51+
</div>
52+
<div class="grid__items">
53+
<article class="card" data-pop>
54+
<div class="card__media">
55+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
56+
</div>
57+
<div class="card__body">
58+
<p class="eyebrow">Planification</p>
59+
<h3>Organiser son trimestre</h3>
60+
<p>Mettez ici vos conseils pratiques en français : routines hebdomadaires, jalons, ou ressources utiles.</p>
61+
<div class="post-meta">
62+
<span>4 min</span>
63+
<span>Texte modifiable</span>
64+
</div>
65+
</div>
66+
</article>
67+
68+
<article class="card" data-pop>
69+
<div class="card__media">
70+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
71+
</div>
72+
<div class="card__body">
73+
<p class="eyebrow">Admissions</p>
74+
<h3>Ce qu’on changerait</h3>
75+
<p>Insérez vos anecdotes ou conseils sur les demandes d’admission, les lettres et les références.</p>
76+
<div class="post-meta">
77+
<span>6 min</span>
78+
<span>Libre à modifier</span>
79+
</div>
80+
</div>
81+
</article>
82+
83+
<article class="card" data-pop>
84+
<div class="card__media">
85+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
86+
</div>
87+
<div class="card__body">
88+
<p class="eyebrow">Vie étudiante</p>
89+
<h3>Se créer un réseau</h3>
90+
<p>Ajoutez vos astuces pour rencontrer des pairs, trouver des mentors et rejoindre des clubs.</p>
91+
<div class="post-meta">
92+
<span>5 min</span>
93+
<span>Texte de remplacement</span>
94+
</div>
95+
</div>
96+
</article>
97+
98+
<article class="card" data-pop>
99+
<div class="card__media">
100+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
101+
</div>
102+
<div class="card__body">
103+
<p class="eyebrow">Rédaction</p>
104+
<h3>Lettre en un week-end</h3>
105+
<p>Personnalisez cette description pour détailler votre méthode de rédaction express.</p>
106+
<div class="post-meta">
107+
<span>4 min</span>
108+
<span>À éditer</span>
109+
</div>
110+
</div>
111+
</article>
112+
113+
<article class="card" data-pop>
114+
<div class="card__media">
115+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
116+
</div>
117+
<div class="card__body">
118+
<p class="eyebrow">Aide financière</p>
119+
<h3>Faire durer son budget</h3>
120+
<p>Remplacez par vos rappels de bourses, vos modèles de budget ou vos idées d’emplois étudiants.</p>
121+
<div class="post-meta">
122+
<span>7 min</span>
123+
<span>Informations à adapter</span>
124+
</div>
125+
</div>
126+
</article>
127+
128+
<article class="card" data-pop>
129+
<div class="card__media">
130+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
131+
</div>
132+
<div class="card__body">
133+
<p class="eyebrow">Équilibre</p>
134+
<h3>Garder le rythme</h3>
135+
<p>Décrivez comment concilier ambition et repos pendant les périodes chargées.</p>
136+
<div class="post-meta">
137+
<span>3 min</span>
138+
<span>Modifiez la tonalité</span>
139+
</div>
140+
</div>
141+
</article>
142+
</div>
143+
</section>
144+
145+
<section class="contact" id="contact-fr" data-animate>
146+
<div class="contact__copy">
147+
<p class="eyebrow">Une idée d’article ?</p>
148+
<h2>Envoyez votre suggestion</h2>
149+
<p>Personnalisez ce formulaire ou gardez-le tel quel pour recueillir des demandes en français.</p>
150+
<form class="contact__form">
151+
<label>
152+
Nom
153+
<input type="text" placeholder="Votre nom" required />
154+
</label>
155+
<label>
156+
Courriel
157+
<input type="email" placeholder="vous@example.com" required />
158+
</label>
159+
<label>
160+
Sujet du blogue
161+
<textarea placeholder="Sur quoi devrions-nous écrire ?" rows="3"></textarea>
162+
</label>
163+
<button type="submit" class="pill pill--primary">Envoyer</button>
164+
</form>
165+
</div>
166+
<div class="contact__aside">
167+
<div class="sticky-note" data-pop>
168+
<p>« Cette section blogue en français est prête pour vos mots. »</p>
169+
<span>Lecteur PointA</span>
170+
</div>
171+
<img src="ricky-600x.png" alt="Collage étudiant" class="contact__img" />
172+
</div>
173+
</section>
174+
</main>
175+
176+
<footer class="site-footer">
177+
<p>Accompagner les étudiants. © 2024 PointA</p>
178+
<div class="socials">
179+
<a href="https://www.instagram.com" target="_blank" rel="noreferrer">IG</a>
180+
<a href="https://www.vimeo.com" target="_blank" rel="noreferrer">Vimeo</a>
181+
<a href="mailto:hello@pointa.test">Email</a>
182+
</div>
183+
</footer>
184+
185+
<script src="script.js"></script>
186+
</body>
187+
</html>

0 commit comments

Comments
 (0)