feat: na home page, adiciona links para os cards na seção Repúblicas …

…disponíveis
ICEI-PUC-Minas-PMV-SInt · May 30, 2024 · 872ec41 · 872ec41
1 parent 97eef59
commit 872ec41
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -102,7 +102,10 @@ <h2 class="title3">Melhores na região</h2>
               </div>
             </a>
             <a class="repImageBox" href="./src/pages/republics/rep5.html">
-              <img src="./src/assets/img/availables/rep5/rep5-img1.jpg" alt="república" />
+              <img
+                src="./src/assets/img/availables/rep5/rep5-img1.jpg"
+                alt="república"
+              />
               <div>
                 <p class="repPrice"><span>R$ 475,00</span> mensal</p>
                 <div class="repInfo">
@@ -116,39 +119,39 @@ <h2 class="title3">Melhores na região</h2>
         <section class="container availableRepsContainer">
           <h2 class="title3">Repúblicas disponíveis</h2>
           <div class="availableRepsBox">
-            <div class="availableRepCard">
+            <a class="availableRepCard" href="./src/pages/republics/rep5.html">
               <img
-                src="./src/assets/img/availables/available-rep1.png"
+                src="./src/assets/img/availables/rep5/rep5-img1.jpg"
                 alt="república"
               />
-              <h3 class="repCardTitle">ARep da Maria</h3>
-              <p class="repCardLocation">Guarulhos, São Paulo</p>
+              <h3 class="repCardTitle">Pousada dos Alunos</h3>
+              <p class="repCardLocation">Guarulhos, SP</p>
               <p class="mostAccessedLabel">Mais acessada</p>
-            </div>
-            <div class="availableRepCard">
+            </a>
+            <a class="availableRepCard" href="./src/pages/republics/rep3.html">
               <img
-                src="./src/assets/img/availables/available-rep2.png"
+                src="./src/assets/img/availables/rep3/rep3-img1.jpg"
                 alt="república"
               />
-              <h3 class="repCardTitle">ARep da Maria</h3>
+              <h3 class="repCardTitle">Estudantes da Vila</h3>
               <p class="repCardLocation">Guarulhos, São Paulo</p>
-            </div>
-            <div class="availableRepCard">
+            </a>
+            <a class="availableRepCard" href="./src/pages/republics/rep1.html">
               <img
-                src="./src/assets/img/availables/available-rep3.png"
+                src="./src/assets/img/availables/rep1/rep1-img1.jpg"
                 alt="república"
               />
-              <h3 class="repCardTitle">ARep da Maria</h3>
-              <p class="repCardLocation">Guarulhos, São Paulo</p>
-            </div>
-            <div class="availableRepCard">
+              <h3 class="repCardTitle">Estúdio Acadêmico</h3>
+              <p class="repCardLocation">São Paulo, SP</p>
+            </a>
+            <a class="availableRepCard" href="./src/pages/republics/rep2.html">
               <img
-                src="./src/assets/img/availables/available-rep4.png"
+                src="./src/assets/img/availables/rep2/rep2-img1.jpg"
                 alt="república"
               />
-              <h3 class="repCardTitle">ARep da Maria</h3>
-              <p class="repCardLocation">Guarulhos, São Paulo</p>
-            </div>
+              <h3 class="repCardTitle">Recanto do Estudante</h3>
+              <p class="repCardLocation">São Paulo, SP</p>
+            </a>
           </div>
         </section>
         <section class="container testimoniesContainer">

diff --git a/src/styles/repCards.css b/src/styles/repCards.css
@@ -31,6 +31,7 @@
   img {
     width: 100%;
     height: 100%;
+    border-radius: 8px;
   }
 }
 
@@ -88,13 +89,18 @@
 }
 
 .availableRepCard {
+  width: 240px;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 12px;
+
+  img {
+    border-radius: 8px;
+  }
 }
 
 .repCardLocation {
   font-size: 16px;
   color: #b0b0b0;
-}
+}