<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portfolio</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
body{
background:#f4f4f4;
color:#333;
/* MENU */
header{
background:#222;
color:white;
padding:20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
nav h1{
font-size:28px;
nav ul{
display:flex;
list-style:none;
nav ul li{
margin-left:20px;
nav ul li a{
color:white;
text-decoration:none;
transition:0.3s;
}
nav ul li a:hover{
color:#00bcd4;
/* SECTION ACCUEIL */
.hero{
height:90vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
background:linear-gradient(to right,#00bcd4,#2196f3);
color:white;
.hero h2{
font-size:50px;
margin-bottom:10px;
.hero p{
font-size:22px;
}
/* A PROPOS */
.about{
padding:60px 20px;
text-align:center;
.about h2{
margin-bottom:20px;
font-size:35px;
/* PROJETS */
.projects{
padding:60px 20px;
background:white;
.projects h2{
text-align:center;
margin-bottom:40px;
font-size:35px;
}
.project-container{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
.card{
background:#f4f4f4;
width:300px;
border-radius:10px;
overflow:hidden;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.3s;
.card:hover{
transform:translateY(-10px);
.card img{
width:100%;
height:200px;
object-fit:cover;
}
.card-content{
padding:20px;
.card-content h3{
margin-bottom:10px;
/* CONTACT */
.contact{
padding:60px 20px;
text-align:center;
.contact h2{
margin-bottom:20px;
font-size:35px;
.contact a{
text-decoration:none;
color:white;
background:#2196f3;
padding:12px 25px;
border-radius:5px;
display:inline-block;
margin-top:15px;
/* FOOTER */
footer{
background:#222;
color:white;
text-align:center;
padding:20px;
/* RESPONSIVE */
@media(max-width:768px){
.hero h2{
font-size:35px;
nav{
flex-direction:column;
nav ul{
margin-top:10px;
</style>
</head>
<body>
<!-- MENU -->
<header>
<nav>
<h1>Mon Portfolio</h1>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- ACCUEIL -->
<section class="hero">
<h2>Bonjour, je suis Noel</h2>
<p>Étudiant en Génie Civil & Développeur Web</p>
</section>
<!-- A PROPOS -->
<section class="about">
<h2>À propos</h2>
<p>
Je suis passionné par le développement web,
le design et les projets numériques.
</p>
</section>
<!-- PROJETS -->
<section class="projects">
<h2>Mes Projets</h2>
<div class="project-container">
<div class="card">
<img src="[Link]
<div class="card-content">
<h3>Projet 1</h3>
<p>Site web moderne en HTML et CSS.</p>
</div>
</div>
<div class="card">
<img src="[Link]
<div class="card-content">
<h3>Projet 2</h3>
<p>Application responsive simple.</p>
</div>
</div>
<div class="card">
<img src="[Link]
<div class="card-content">
<h3>Projet 3</h3>
<p>Interface design moderne.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="contact">
<h2>Contact</h2>
<p>Email : noel@[Link]</p>
<a href="#">Me Contacter</a>
</section>
<!-- FOOTER -->
<footer>
<p>© 2026 - Mon Portfolio</p>
</footer>
</body>
</html>