diff --git a/index.html b/index.html
index 1297c21..673cd2c 100644
--- a/index.html
+++ b/index.html
@@ -4,140 +4,159 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- Le titre de la page  -->
-  <title>Cours HTML</title>
-  <!-- Icone de l'onglet -->
+  <title>Cours HTML - Version Avancée</title>
   <link rel="shortcut icon" href="html-logo.png" />
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-  <header>
-    <h1>Texte - Titre H1</h1>
-    <p>
-      <em>em pour mettre en italique</em>,
-      <strong>strong pour mettre en gras</strong>
-      <span>L'élement en span ne revient pas à la ligne</span>.
-    </p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
-      cumque ratione veniam officiis nulla a debitis at facilis sed
-      dignissimos.
-    </p>
-  </header>
-
-  <section>
-    <div>
-      <h2>Photo - Titre H2</h2>
-      <img src="./img-1.jpg" alt="image-arbre" height="200" />
-    </div>
 
-    <div>
-      <h3>Liste - Titre H3</h3>
-      <ul>
-        <li>UL = unordered list</li>
-        <li>UL = unordered list</li>
-        <li>UL = unordered list</li>
-      </ul>
-      <ol>
-        <li>OL = ordered list</li>
-        <li>OL = ordered list</li>
-        <li>OL = ordered list</li>
-      </ol>
-    </div>
+<!-- ================= NAVBAR ================= -->
+<nav>
+  <div class="logo">Cours HTML</div>
+  <ul>
+    <li><a href="#texte">Texte</a></li>
+    <li><a href="#media">Media</a></li>
+    <li><a href="#formulaire">Formulaire</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+</nav>
+
+<!-- ================= HEADER ================= -->
+<header id="texte">
+  <h1 class="fade">Texte - Titre H1</h1>
+
+  <p>
+    <em>em pour mettre en italique</em>,
+    <strong>strong pour mettre en gras</strong>
+    <span class="highlight">L'élement en span ne revient pas à la ligne</span>.
+  </p>
+
+  <!-- Added multiple paragraphs -->
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+</header>
+
+<!-- ================= MEDIA SECTION ================= -->
+<section id="media">
+
+  <h2>Galerie Photo</h2>
+
+  <div class="gallery">
+    <img src="./img-1.jpg" alt="image1">
+    <img src="./img-1.jpg" alt="image2">
+    <img src="./img-1.jpg" alt="image3">
+    <img src="./img-1.jpg" alt="image4">
+  </div>
+
+  <h3>Liste Améliorée</h3>
+
+  <ul class="styled-list">
+    <li>HTML Structure</li>
+    <li>CSS Styling</li>
+    <li>JavaScript Interaction</li>
+  </ul>
+
+  <h4>Table Améliorée</h4>
+
+  <table class="modern-table">
+    <thead>
+      <tr>
+        <th>Col 1</th>
+        <th>Col 2</th>
+        <th>Col 3</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td rowspan="2">Row 1</td>
+        <td>Data</td>
+        <td>Data</td>
+      </tr>
+      <tr>
+        <td>Data</td>
+        <td>Data</td>
+      </tr>
+      <tr>
+        <td colspan="3">Large Cell</td>
+      </tr>
+    </tbody>
+  </table>
 
-    <div>
-      <h4>Tableaux - Titre H4</h4>
-      <table border="4" cellpadding="10" cellspacing="4" style="text-align: center">
-        <thead>
-          <tr>
-            <th>Col 1</th>
-            <th>Col 2</th>
-            <th>Col 3</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td rowspan="2">Row 1 Cell 1</td>
-            <td>Row 1 Cell 2</td>
-            <td>Row 1 Cell 3</td>
-          </tr>
-          <tr>
-            <td>Row 2 Cell 2</td>
-            <td>Row 2 Cell 3</td>
-          </tr>
-          <tr>
-            <td colspan="3">Row 3 Cell 1</td>
-          </tr>
-        </tbody>
-      </table>
+</section>
+
+<!-- ================= CARDS SECTION ================= -->
+<section>
+  <h2>Cartes d'Information</h2>
+
+  <div class="cards">
+    <div class="card">
+      <i class="fas fa-code"></i>
+      <h3>HTML</h3>
+      <p>Langage de structure pour le web.</p>
     </div>
 
-    <div>
-      <h5><span>&#9814;</span> Liens - Titre H5</h5>
-      <a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a>
-      <br />
-      <a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a>
+    <div class="card">
+      <i class="fas fa-paint-brush"></i>
+      <h3>CSS</h3>
+      <p>Langage de style et design.</p>
     </div>
 
-    <div>
-      <h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6>
-      <video src="video.mp4" height="150" autoplay loop muted></video>
+    <div class="card">
+      <i class="fas fa-bolt"></i>
+      <h3>JavaScript</h3>
+      <p>Langage d'interaction.</p>
     </div>
-  </section>
-  <br />
-  <!-- Formulaires en HTML -->
-  <section>
-    <h2>Formulaire</h2>
-    <form action="/action.php" method="post">
-      <label for="name">Nom</label>
-      <input id="name" type="text" placeholder="Entrez votre nom" /><br />
-
-      <label for="number">Entrez votre age</label>
-      <input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value">
-      <input type="range" id="range-age" min="0" max="100"
-        oninput="document.getElementById('number-age').value=this.value"><br />
-
-      <!-- Input select -->
-      <label for="gender">Genre</label>
-      <select id="gender">
-        <option selected="selected" value="Homme">Homme</option>
-        <option value="Femme">Femme</option>
-      </select><br />
-
-      <!-- Input radio -->
-      <div>
-        <input type="radio" name="type" id="human" checked />
-        <label for="human">Humain</label>
-
-        <input type="radio" name="type" id="dog" />
-        <label for="dog">Chien</label>
-
-        <input type="radio" name="type" id="cat" />
-        <label for="cat">Chat</label>
-      </div>
-
-      <textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br />
-
-      <!-- Input Checkbox -->
-      <label><input type="checkbox" />Accepter les CGV</label> <br />
-      <input type="submit" value="Submit" />
-    </form>
-  </section>
-  <br />
-  <!-- Mail & envoi de fichiers -->
-  <footer>
-    <a href="mailto:fs@gmail.com">Ecrivez-moi !</a>
-    <br />
-    <a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a>
-    <details>
-      <summary>Plus d'infos</summary>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum,
-        repellendus.
-      </p>
-    </details>
-  </footer>
-</body>
+  </div>
+</section>
+
+<!-- ================= FORM SECTION ================= -->
+<section id="formulaire">
+  <h2>Formulaire</h2>
+
+  <form class="modern-form">
+    <input type="text" placeholder="Nom">
+    <input type="email" placeholder="Email">
+    <textarea placeholder="Votre message"></textarea>
+    <button type="submit">Envoyer</button>
+  </form>
+</section>
+
+<!-- ================= FAQ SECTION ================= -->
+<section>
+  <h2>FAQ</h2>
 
+  <details>
+    <summary>Qu'est-ce que HTML ?</summary>
+    <p>HTML est un langage de balisage.</p>
+  </details>
+
+  <details>
+    <summary>Qu'est-ce que CSS ?</summary>
+    <p>CSS permet de styliser une page web.</p>
+  </details>
+
+  <details>
+    <summary>Qu'est-ce que JavaScript ?</summary>
+    <p>JavaScript ajoute de l'interactivité.</p>
+  </details>
+</section>
+
+<!-- ================= FOOTER ================= -->
+<footer id="contact">
+  <p>© 2026 Cours HTML - Version Professionnelle</p>
+  <a href="mailto:prajyothraib@gmail.com">prajyoth rai b</a>
+</footer>
+
+<script src="script.js"></script>
+</body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..400fafe
--- /dev/null
+++ b/style.css
@@ -0,0 +1,108 @@
+body {
+  font-family: Arial;
+  margin: 0;
+  background: #f4f6f9;
+}
+
+nav {
+  background: #222;
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+  color: white;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+}
+
+header {
+  padding: 40px;
+  background: linear-gradient(120deg,#667eea,#764ba2);
+  color: white;
+}
+
+.highlight {
+  background: yellow;
+  color: black;
+  padding: 5px;
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
+  gap: 15px;
+  padding: 20px;
+}
+
+.gallery img {
+  width: 100%;
+  border-radius: 10px;
+  transition: 0.4s;
+}
+
+.gallery img:hover {
+  transform: scale(1.1);
+}
+
+.cards {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  padding: 40px;
+}
+
+.card {
+  background: white;
+  padding: 25px;
+  width: 250px;
+  text-align: center;
+  border-radius: 15px;
+  transition: 0.4s;
+}
+
+.card:hover {
+  transform: translateY(-10px);
+}
+
+.modern-table {
+  width: 80%;
+  margin: 20px auto;
+  border-collapse: collapse;
+}
+
+.modern-table th,
+.modern-table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+}
+
+.modern-form {
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  margin: auto;
+  gap: 15px;
+}
+
+.modern-form button {
+  padding: 10px;
+  background: #667eea;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+footer {
+  background: #222;
+  color: white;
+  text-align: center;
+  padding: 20px;
+}
\ No newline at end of file

Col 1	Col 2	Col 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1