Skip to content

Commit 04b1ad6

Browse files
programmerprogrammer
authored
Create blogs.html
1 parent 5ac5e26 commit 04b1ad6

File tree

1 file changed

+327
-0
lines changed

1 file changed

+327
-0
lines changed

‎blogs.html‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
</head>
2+
<body>
3+
<div class="background-glow"></div>
4+
<header class="site-header">
5+
<div class="brand">PointA</div>
6+
<nav class="nav-links">
7+
<a data-href-en="index.html#stories" data-href-fr="index.html#histoires" data-label-en="Guides" data-label-fr="Guides" href="index.html#stories">Guides</a>
8+
<a data-href-en="blogs.html" data-href-fr="#articles-fr" data-label-en="Blogs" data-label-fr="Blogues" href="blogs.html">Blogs</a>
9+
<a data-href-en="#contact" data-href-fr="#contact-fr" data-label-en="Contact" data-label-fr="Contact" href="#contact">Contact</a>
10+
</nav>
11+
<div class="lang-toggle" aria-label="Language toggle">
12+
<button type="button" class="pill is-active" data-lang="en">English</button>
13+
<button type="button" class="pill pill--ghost" data-lang="fr">Français</button>
14+
</div>
15+
<a class="pill" href="#contact">Let’s talk</a>
16+
</header>
17+
18+
<main>
19+
<div class="lang-view is-active" data-lang="en">
20+
<section class="hero" data-animate>
21+
<div class="hero__copy">
22+
<p class="eyebrow">PointA perspectives</p>
23+
<h1>Stories, reflections, and advice from the team.</h1>
24+
<p class="lede">Browse our latest blog posts for behind-the-scenes thinking, student stories, and practical tips you can adapt to your own journey.</p>
25+
<div class="hero__cta">
26+
<a class="pill pill--primary" href="#posts">Read the blog</a>
27+
<a class="pill pill--ghost" href="index.html#stories">See tutorials</a>
28+
</div>
29+
</div>
30+
<figure class="hero__visual" data-pop>
31+
<img src="greta-600x.png" alt="Collage for blog feature" />
32+
<div class="floating-tag">fresh ideas</div>
33+
<div class="floating-tag floating-tag--alt">student voices</div>
34+
</figure>
35+
</section>
36+
37+
<section class="grid" id="posts" data-animate>
38+
<div class="grid__header">
39+
<p class="eyebrow">Latest blogs</p>
40+
<h2>Six posts you can rename and edit</h2>
41+
<p class="lede">Use these starting points to share program highlights, application advice, or personal stories—swap the headlines and blurbs to fit your voice.</p>
42+
</div>
43+
<div class="grid__items">
44+
<article class="card" data-pop>
45+
<div class="card__media">
46+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
47+
</div>
48+
<div class="card__body">
49+
<p class="eyebrow">Planning</p>
50+
<h3>Mapping out your semester with confidence</h3>
51+
<p>Break down your goals, set weekly checkpoints, and build a routine that keeps your stress low and momentum high.</p>
52+
<div class="post-meta">
53+
<span>4 min read</span>
54+
<span>Update headline + summary as needed</span>
55+
</div>
56+
</div>
57+
</article>
58+
59+
<article class="card" data-pop>
60+
<div class="card__media">
61+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
62+
</div>
63+
<div class="card__body">
64+
<p class="eyebrow">Applications</p>
65+
<h3>What we’d change about our first applications</h3>
66+
<p>Honest lessons learned from alumni about essays, references, and how to advocate for yourself without overselling.</p>
67+
<div class="post-meta">
68+
<span>6 min read</span>
69+
<span>Easily replace this blurb and timing</span>
70+
</div>
71+
</div>
72+
</article>
73+
74+
<article class="card" data-pop>
75+
<div class="card__media">
76+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
77+
</div>
78+
<div class="card__body">
79+
<p class="eyebrow">Student Life</p>
80+
<h3>Building community when you are new on campus</h3>
81+
<p>Simple ways to meet people, find mentors, and join groups that match your interests without overcommitting.</p>
82+
<div class="post-meta">
83+
<span>5 min read</span>
84+
<span>Edit the description to fit your story</span>
85+
</div>
86+
</div>
87+
</article>
88+
89+
<article class="card" data-pop>
90+
<div class="card__media">
91+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
92+
</div>
93+
<div class="card__body">
94+
<p class="eyebrow">Essays</p>
95+
<h3>Drafting a personal statement in one weekend</h3>
96+
<p>A repeatable sprint: gather examples, draft fast, then revise with a checklist that keeps your writing honest.</p>
97+
<div class="post-meta">
98+
<span>4 min read</span>
99+
<span>Swap in your own template or notes</span>
100+
</div>
101+
</div>
102+
</article>
103+
104+
<article class="card" data-pop>
105+
<div class="card__media">
106+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
107+
</div>
108+
<div class="card__body">
109+
<p class="eyebrow">Financial Aid</p>
110+
<h3>Stretching your budget without missing out</h3>
111+
<p>Practical budgeting, part-time work ideas, and scholarship reminders you can tailor to your own situation.</p>
112+
<div class="post-meta">
113+
<span>7 min read</span>
114+
<span>Replace with notes or links you prefer</span>
115+
</div>
116+
</div>
117+
</article>
118+
119+
<article class="card" data-pop>
120+
<div class="card__media">
121+
<a class="media-placeholder" href="#" aria-label="Placeholder for blog visual">Placeholder</a>
122+
</div>
123+
<div class="card__body">
124+
<p class="eyebrow">Mindset</p>
125+
<h3>Balancing ambition with rest during deadlines</h3>
126+
<p>How to pace yourself, protect focus blocks, and recover when application season gets hectic.</p>
127+
<div class="post-meta">
128+
<span>3 min read</span>
129+
<span>Feel free to update tone and details</span>
130+
</div>
131+
</div>
132+
</article>
133+
</div>
134+
</section>
135+
136+
<section class="contact" id="contact" data-animate>
137+
<div class="contact__copy">
138+
<p class="eyebrow">Want us to cover something?</p>
139+
<h2>Tell us what topics you need next</h2>
140+
<p>Share a prompt, question, or experience you want us to unpack. We’ll use your input to shape the next posts.</p>
141+
<form class="contact__form">
142+
<label>
143+
Name
144+
<input type="text" placeholder="Your name" required />
145+
</label>
146+
<label>
147+
Email
148+
<input type="email" placeholder="you@example.com" required />
149+
</label>
150+
<label>
151+
Blog request
152+
<textarea placeholder="What should we write about?" rows="3"></textarea>
153+
</label>
154+
<button type="submit" class="pill pill--primary">Send</button>
155+
</form>
156+
</div>
157+
<div class="contact__aside">
158+
<div class="sticky-note" data-pop>
159+
<p>"I keep coming back to the blog when I need calm, clear answers."</p>
160+
<span>PointA reader</span>
161+
</div>
162+
<img src="ricky-600x.png" alt="Student collage" class="contact__img" />
163+
</div>
164+
</section>
165+
</div>
166+
167+
<div class="lang-view" data-lang="fr" id="articles-fr">
168+
<section class="hero" data-animate>
169+
<div class="hero__copy">
170+
<p class="eyebrow">Blogue PointA</p>
171+
<h1>Articles en français à adapter.</h1>
172+
<p class="lede">Servez-vous de cette version pour traduire ou réécrire vos billets : chaque carte, lien et bouton peut être modifié.</p>
173+
<div class="hero__cta">
174+
<a class="pill pill--primary" href="#articles-fr">Voir les articles</a>
175+
<a class="pill pill--ghost" href="index.html#histoires">Guides FR</a>
176+
</div>
177+
</div>
178+
<figure class="hero__visual" data-pop>
179+
<img src="greta-600x.png" alt="Collage pour le blogue" />
180+
<div class="floating-tag">idées</div>
181+
<div class="floating-tag floating-tag--alt">parcours</div>
182+
</figure>
183+
</section>
184+
185+
<section class="grid" data-animate>
186+
<div class="grid__header">
187+
<p class="eyebrow">Articles récents</p>
188+
<h2>Six cartes prêtes à renommer</h2>
189+
<p class="lede">Changez les titres, les catégories ou les durées pour refléter vos traductions et votre ton.</p>
190+
</div>
191+
<div class="grid__items">
192+
<article class="card" data-pop>
193+
<div class="card__media">
194+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
195+
</div>
196+
<div class="card__body">
197+
<p class="eyebrow">Planification</p>
198+
<h3>Organiser son trimestre</h3>
199+
<p>Mettez ici vos conseils pratiques en français : routines hebdomadaires, jalons, ou ressources utiles.</p>
200+
<div class="post-meta">
201+
<span>4 min</span>
202+
<span>Texte modifiable</span>
203+
</div>
204+
</div>
205+
</article>
206+
207+
<article class="card" data-pop>
208+
<div class="card__media">
209+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
210+
</div>
211+
<div class="card__body">
212+
<p class="eyebrow">Admissions</p>
213+
<h3>Ce qu’on changerait</h3>
214+
<p>Insérez vos anecdotes ou conseils sur les demandes d’admission, les lettres et les références.</p>
215+
<div class="post-meta">
216+
<span>6 min</span>
217+
<span>Libre à modifier</span>
218+
</div>
219+
</div>
220+
</article>
221+
222+
<article class="card" data-pop>
223+
<div class="card__media">
224+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
225+
</div>
226+
<div class="card__body">
227+
<p class="eyebrow">Vie étudiante</p>
228+
<h3>Se créer un réseau</h3>
229+
<p>Ajoutez vos astuces pour rencontrer des pairs, trouver des mentors et rejoindre des clubs.</p>
230+
<div class="post-meta">
231+
<span>5 min</span>
232+
<span>Texte de remplacement</span>
233+
</div>
234+
</div>
235+
</article>
236+
237+
<article class="card" data-pop>
238+
<div class="card__media">
239+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
240+
</div>
241+
<div class="card__body">
242+
<p class="eyebrow">Rédaction</p>
243+
<h3>Lettre en un week-end</h3>
244+
<p>Personnalisez cette description pour détailler votre méthode de rédaction express.</p>
245+
<div class="post-meta">
246+
<span>4 min</span>
247+
<span>À éditer</span>
248+
</div>
249+
</div>
250+
</article>
251+
252+
<article class="card" data-pop>
253+
<div class="card__media">
254+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
255+
</div>
256+
<div class="card__body">
257+
<p class="eyebrow">Aide financière</p>
258+
<h3>Faire durer son budget</h3>
259+
<p>Remplacez par vos rappels de bourses, vos modèles de budget ou vos idées d’emplois étudiants.</p>
260+
<div class="post-meta">
261+
<span>7 min</span>
262+
<span>Informations à adapter</span>
263+
</div>
264+
</div>
265+
</article>
266+
267+
<article class="card" data-pop>
268+
<div class="card__media">
269+
<a class="media-placeholder" href="#" aria-label="Espace visuel">Ajouter votre visuel</a>
270+
</div>
271+
<div class="card__body">
272+
<p class="eyebrow">Équilibre</p>
273+
<h3>Garder le rythme</h3>
274+
<p>Décrivez comment concilier ambition et repos pendant les périodes chargées.</p>
275+
<div class="post-meta">
276+
<span>3 min</span>
277+
<span>Modifiez la tonalité</span>
278+
</div>
279+
</div>
280+
</article>
281+
</div>
282+
</section>
283+
284+
<section class="contact" id="contact-fr" data-animate>
285+
<div class="contact__copy">
286+
<p class="eyebrow">Une idée d’article ?</p>
287+
<h2>Envoyez votre suggestion</h2>
288+
<p>Personnalisez ce formulaire ou gardez-le tel quel pour recueillir des demandes en français.</p>
289+
<form class="contact__form">
290+
<label>
291+
Nom
292+
<input type="text" placeholder="Votre nom" required />
293+
</label>
294+
<label>
295+
Courriel
296+
<input type="email" placeholder="vous@example.com" required />
297+
</label>
298+
<label>
299+
Sujet du blogue
300+
<textarea placeholder="Sur quoi devrions-nous écrire ?" rows="3"></textarea>
301+
</label>
302+
<button type="submit" class="pill pill--primary">Envoyer</button>
303+
</form>
304+
</div>
305+
<div class="contact__aside">
306+
<div class="sticky-note" data-pop>
307+
<p>« Cette section blogue en français est prête pour vos mots. »</p>
308+
<span>Lecteur PointA</span>
309+
</div>
310+
<img src="ricky-600x.png" alt="Collage étudiant" class="contact__img" />
311+
</div>
312+
</section>
313+
</div>
314+
</main>
315+
316+
<footer class="site-footer">
317+
<p>Helping students move forward. © 2024 PointA</p>
318+
<div class="socials">
319+
<a href="https://www.instagram.com" target="_blank" rel="noreferrer">IG</a>
320+
<a href="https://www.vimeo.com" target="_blank" rel="noreferrer">Vimeo</a>
321+
<a href="mailto:hello@pointa.test">Email</a>
322+
</div>
323+
</footer>
324+
325+
<script src="script.js"></script>
326+
</body>
327+
</html>

0 commit comments

Comments
 (0)