[+] Profil picture in home

contact.html

@@ -10,7 +10,7 @@
     <header>
         <nav>
             <ul>
-                <li><a href="index.html">Accueil</a></li>
+                <li><a href="home.html">Accueil</a></li>
                 <li><a href="portfolio.html">Portfolio</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>

index.html → home.html

@@ -10,15 +10,19 @@
     <header>
         <nav>
             <ul>
-                <li><a href="index.html">Accueil</a></li>
+                <li><a href="home.html">Accueil</a></li>
                 <li><a href="portfolio.html">Portfolio</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
     </header>
-    <main>
-        <h1>Bienvenue, je suis Funiclem</h1>
-        <p>Étudiant en première année à Epitech Strasbourg, passionné de VTT, sport et informatique.</p>
+    <main class="profile">
+        <img src="img/photo-profil.jpg" alt="Photo de Funiclem" class="profile-pic">
+        <div class="profile-info">
+            <h1>Clément DORGE</h1>
+            <p>19 ans</p>
+            <p>Étudiant à Epitech Strasbourg, 2ème année, promo 2028</p>
+        </div>
     </main>
     <script src="script.js"></script>
 </body>

portfolio.html

@@ -10,7 +10,7 @@
     <header>
         <nav>
             <ul>
-                <li><a href="index.html">Accueil</a></li>
+                <li><a href="home.html">Accueil</a></li>
                 <li><a href="portfolio.html">Portfolio</a></li>
                 <li><a href="contact.html">Contact</a></li>
             </ul>

styles.css

@@ -2,13 +2,20 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
 }
 
 header {
     background-color: #333;
     color: #fff;
     padding: 10px 0;
     text-align: center;
+    width: 100%;
+    position: absolute;
+    top: 0;
 }
 
 nav ul {
@@ -26,29 +33,28 @@ nav ul li a {
     text-decoration: none;
 }
 
-main {
-    padding: 20px;
-}
-
-form {
+main.profile {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    width: 80%;
 }
 
-form label {
-    margin-top: 10px;
+.profile-pic {
+    border-radius: 50%;
+    width: 33vw;
+    height: 33vw;
+    object-fit: cover;
+    margin-right: 20px;
 }
 
-form input, form textarea {
-    padding: 5px;
-    margin-top: 5px;
+.profile-info h1 {
+    margin: 0;
+    padding: 0;
 }
 
-form button {
-    margin-top: 10px;
-    padding: 10px;
-    background-color: #333;
-    color: #fff;
-    border: none;
-    cursor: pointer;
+.profile-info p {
+    margin: 5px 0;
+    padding: 0;
 }