HTML preparat preparado para el css

projecte-final/main/indexSAD.html

@@ -35,43 +35,52 @@
     </header>
 
     <main class="content">
-      <section class="topSales">
-        <h2 class="sectionTitle">Top 3 vendes</h2>
-            <div class="cardsContainer">
-              <article class="gameCard">
-                <div class="cardImage">
-                  <img src="assets/img/" alt="">
-                  <h3>juego 1</h3>
-                  <p>"opinion"</p>
+
+      <section class="top-sales-section">
+        <h2 class="section-title">Top 3 vendes</h2>
+
+            <div class="ranking-grid">
+
+              <article class="rank-card rank-1">
+                <div class="cardImage">#1</div>
+                  <img src="assets/img/elden_ring.jpg" alt="Elden Ring">
+                  <div class="card-content">
+                    <span class="genre-tag">RPG / Acció</span>
+                  <h3>Elden Ring</h3>
+                  <p class="description">L'obra mestra de món obert. Un món vast i perillós on cada racó amaga un nou desafiament.</p>
                 </div>
               </article>
 
-              <article class="gameCard">
-                <div class="cardImage">
-                  <img src="assets/img/" alt="">
-                  <h3>juego 2</h3>
-                  <p>"opinion"</p>
+              <article class="rank-card rank-2">
+                <div class="cardImage">#2</div>
+                  <img src="assets/img/fc24.jpg" alt="EA FC 24">
+                  <div class="card-content">
+                    <span class="genre-tag">Esports / Simulació</span>
+                  <h3>EA FC 24</h3>
+                  <p class="description">El rei del futbol torna. Realisme pur amb HyperMotionV i integració total del futbol femení.</p>
                 </div>
               </article>
 
-              <article class="gameCard">
-                <div class="cardImage">
-                  <img src="assets/img/" alt="">
-                  <h3>juego 3</h3>
-                  <p>"opinion"</p>
+              <article class="rank-card rank-3">
+                <div class="cardImage">#3</div>
+                  <img src="assets/img/zeldatotk.jpg" alt="Zelda: TOTK">
+                  <div class="card-content">
+                    <span class="genre-tag">Aventura / Puzzle</span>
+                  <h3>Zelda: TOTK</h3>
+                  <p class="description">Creativitat sense límits. Construeix, vola i explora Hyrule com mai abans.</p>
                 </div>
               </article>
             </div>
-      </section>
 
-      <section class="ctaSection">
-        <div class="ctaContent">
-          <p>Veure mes jocs disponibles</p>
-          <a href="videojocsSAD.html" class="ctaButton">Veure cataleg complet</a>
-        </div>
+            <div class="cta-section">
+              <div class="cta-card">
+                <i class="fa-solid fa-layer-group cta-icon"></i>
+                <h3>Vols veure el catàleg complet?</h3>
+                <p>Tenim una gran varietat de jocs per a tots els gustos.</p>
+                <a href="" class="btn-neon">Veure Catàleg Complet</a>
+              </div>
+            </div>
       </section>
-    </main>
-
 
     <footer class="footer">
       <div class="container">