<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lycée Victor Hugo - Accueil</title>
<link rel="stylesheet" href="[Link]
[Link]">
<style>
/* Reset et styles de base */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
body {
line-height: 1.6;
color: #333;
a{
text-decoration: none;
color: #0056b3;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
.btn {
display: inline-block;
background: #0056b3;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background 0.3s;
.btn:hover {
background: #003d82;
/* Header */
header {
background: #0056b3;
color: white;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
.logo img {
height: 60px;
margin-right: 15px;
.logo h1 {
font-size: 1.5rem;
}
nav ul {
display: flex;
list-style: none;
nav ul li {
margin-left: 20px;
nav ul li a {
color: white;
font-weight: 500;
transition: color 0.3s;
nav ul li a:hover {
color: #ffd700;
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
background: none;
border: none;
color: white;
cursor: pointer;
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 84, 180, 0.7), rgba(0, 84, 180, 0.7)),
url('[Link] no-repeat
center center/cover;
color: white;
text-align: center;
padding: 100px 20px;
.hero h2 {
font-size: 2.5rem;
margin-bottom: 20px;
.hero p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 30px;
/* Actualités */
.news {
padding: 60px 0;
background: #f8f9fa;
.section-title {
text-align: center;
margin-bottom: 40px;
color: #0056b3;
position: relative;
.section-title:after {
content: '';
display: block;
width: 80px;
height: 3px;
background: #0056b3;
margin: 10px auto;
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.news-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
.news-card:hover {
transform: translateY(-5px);
.news-card img {
width: 100%;
height: 200px;
object-fit: cover;
.news-content {
padding: 20px;
.news-date {
color: #666;
font-size: 0.9rem;
/* Sections importantes */
.features {
padding: 60px 0;
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
.feature-card {
text-align: center;
padding: 30px;
border-radius: 8px;
background: #f8f9fa;
transition: transform 0.3s;
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
color: #0056b3;
margin-bottom: 20px;
/* Emploi du temps */
.schedule {
padding: 60px 0;
background: #f8f9fa;
.schedule-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
.schedule-table th, .schedule-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
.schedule-table th {
background: #0056b3;
color: white;
.schedule-table tr:hover {
background: #f1f1f1;
/* Footer */
footer {
background: #003366;
color: white;
padding: 40px 0 20px;
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
position: relative;
.footer-section h3:after {
content: '';
display: block;
width: 40px;
height: 2px;
background: #ffd700;
margin-top: 10px;
.footer-links {
list-style: none;
.footer-links li {
margin-bottom: 10px;
.footer-links a {
color: #ccc;
transition: color 0.3s;
.footer-links a:hover {
color: white;
.social-links {
display: flex;
gap: 15px;
margin-top: 15px;
.social-links a {
color: white;
font-size: 1.2rem;
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
color: #ccc;
}
/* Responsive */
@media (max-width: 768px) {
.header-container {
flex-direction: column;
text-align: center;
nav ul {
margin-top: 15px;
flex-direction: column;
align-items: center;
nav ul li {
margin: 10px 0;
.mobile-menu-btn {
display: block;
position: absolute;
top: 20px;
right: 20px;
}
.hero h2 {
font-size: 2rem;
.hero p {
font-size: 1rem;
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container header-container">
<div class="logo">
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHd
pZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHJlY3QgeD0iMTAiIHk9Ij
EwIiB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZGMwMCIgc3Ryb2tlLX
dpZHRoPSIyIi8+PHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjAiIG
ZpbGw9IiMwMDU2YjMiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUi
PkxWSDwvdGV4dD48L3N2Zz4=" alt="Logo Lycée Victor Hugo">
<h1>Lycée Victor Hugo</h1>
</div>
<button class="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Le Lycée</a></li>
<li><a href="#">Formations</a></li>
<li><a href="#">Vie Scolaire</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h2>Bienvenue au Lycée Victor Hugo</h2>
<p>Un établissement d'excellence qui prépare les leaders de demain à travers un enseignement
de qualité et un environnement stimulant.</p>
<a href="#" class="btn">Découvrir notre établissement</a>
</div>
</section>
<!-- Actualités -->
<section class="news">
<div class="container">
<h2 class="section-title">Actualités</h2>
<div class="news-grid">
<div class="news-card">
<img src="[Link]
4.0.3&auto=format&fit=crop&w=600&q=80" alt="Réunion des parents">
<div class="news-content">
<span class="news-date">12 Septembre 2023</span>
<h3>Réunion des parents d'élèves</h3>
<p>La réunion des parents d'élèves se tiendra le 25 septembre à 18h dans l'amphithéâtre
principal.</p>
<a href="#">Lire la suite →</a>
</div>
</div>
<div class="news-card">
<img src="[Link]
4.0.3&auto=format&fit=crop&w=600&q=80" alt="Projet scientifique">
<div class="news-content">
<span class="news-date">5 Septembre 2023</span>
<h3>Projet scientifique gagnant</h3>
<p>Félicitations à nos élèves qui ont remporté le premier prix du concours régional de
sciences.</p>
<a href="#">Lire la suite →</a>
</div>
</div>
<div class="news-card">
<img src="[Link]
4.0.3&auto=format&fit=crop&w=600&q=80" alt="Journée portes ouvertes">
<div class="news-content">
<span class="news-date">28 Août 2023</span>
<h3>Journée Portes Ouvertes</h3>
<p>Notre journée portes ouvertes aura lieu le 15 octobre. Venez découvrir nos formations
et rencontrer nos équipes.</p>
<a href="#">Lire la suite →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Sections importantes -->
<section class="features">
<div class="container">
<h2 class="section-title">Notre établissement</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h3>Formations</h3>
<p>Découvrez nos filières générales, technologiques et professionnelles pour construire
votre avenir.</p>
<a href="#" class="btn">En savoir plus</a>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-book-open"></i>
</div>
<h3>Pédagogie</h3>
<p>Une approche pédagogique innovante centrée sur la réussite de chaque élève.</p>
<a href="#" class="btn">En savoir plus</a>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-calendar-alt"></i>
</div>
<h3>Vie scolaire</h3>
<p>Un environnement éducatif riche avec de nombreux clubs, activités et projets.</p>
<a href="#" class="btn">En savoir plus</a>
</div>
</div>
</div>
</section>
<!-- Emploi du temps -->
<section class="schedule">
<div class="container">
<h2 class="section-title">Emploi du temps</h2>
<table class="schedule-table">
<thead>
<tr>
<th>Heure</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td>8h-9h</td>
<td>Mathématiques</td>
<td>Physique</td>
<td>Histoire</td>
<td>EPS</td>
<td>Philosophie</td>
</tr>
<tr>
<td>9h-10h</td>
<td>Français</td>
<td>Mathématiques</td>
<td>SVT</td>
<td>Anglais</td>
<td>Mathématiques</td>
</tr>
<tr>
<td>10h-11h</td>
<td>Anglais</td>
<td>Français</td>
<td>Physique</td>
<td>Histoire</td>
<td>EPS</td>
</tr>
<tr>
<td>11h-12h</td>
<td>Philosophie</td>
<td>SVT</td>
<td>Français</td>
<td>Mathématiques</td>
<td>Anglais</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3>Lycée Victor Hugo</h3>
<p>123 Avenue de l'Éducation<br>75000 Paris<br>Tél: 01 23 45 67 89</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-section">
<h3>Liens rapides</h3>
<ul class="footer-links">
<li><a href="#">Accueil</a></li>
<li><a href="#">Le Lycée</a></li>
<li><a href="#">Formations</a></li>
<li><a href="#">Vie Scolaire</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Ressources</h3>
<ul class="footer-links">
<li><a href="#">Espace élèves</a></li>
<li><a href="#">Espace parents</a></li>
<li><a href="#">Espace professeurs</a></li>
<li><a href="#">Mentions légales</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 Lycée Victor Hugo - Tous droits réservés</p>
</div>
</div>
</footer>
<script>
// Script pour le menu mobile
[Link]('.mobile-menu-btn').addEventListener('click', function() {
[Link]('nav ul').[Link]('show');
});
</script>
</body>
</html>