feat(TouristAttractions): Estiliza cards

src/scripts/components/TouristAttractions.js

@@ -18,10 +18,12 @@ export class TouristAttractions {
         this.inputTitle = document.querySelector('.input-text__titulo');
         this.inputDescription = document.querySelector('.input-text__descricao');
 
+
+
     }
 
     events () {
-        this.inputFile.addEventListener('change', this.imgPreview.bind(this), false);
+        this.inputFile.addEventListener('change', this.imgPreview.bind(this));
         this.form.addEventListener('submit', this.addProperty.bind(this));
 
     }
@@ -47,9 +49,6 @@ export class TouristAttractions {
                 img.classList.add('img-result');
 
 
-                this.labelInput.innerText = "";
-
-
                 this.labelInput.appendChild(img);
 
             });
@@ -57,6 +56,7 @@ export class TouristAttractions {
 
             reader.readAsDataURL(file);
 
+            this.labelInput.innerText = "";
             this.labelInput.style.border = "none";
 
 
@@ -97,6 +97,8 @@ export class TouristAttractions {
 };
 
 
+
+
         renderListItems () {
        let spotStructure = '';
 
@@ -109,9 +111,13 @@ export class TouristAttractions {
                     </div>
 
                     <div class="result-card__text">
-                        <h2 class="result-card__title">${i.titulo}</h2>
+                    <div class="card__h2">
+                        <p class="result-card__title">${i.titulo}</p>
+                    </div>
+                    <div class="card__p">
                         <p class="result-card__description">${i.description}</p>
                     </div>
+                    </div>
 
                 </li>
             `;

src/styles/common/reset.scss

@@ -2,4 +2,5 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    list-style: none;
   }

src/styles/partials/form.scss

@@ -144,3 +144,57 @@
 
   }
 
+  .container-cards {
+    display: flex;
+    padding: 41px 63px;
+
+    .wrapper-ul__cards {
+        display: flex;
+        column-gap: 10px;
+
+        .wrapper-cards__li {
+            width: 279px;
+
+
+            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
+            border-radius: 8px;
+
+            .result-card__img {
+                object-fit: cover;
+                width: 100%;
+            }
+
+            .result-card__text {
+                margin: 24px;
+
+                .card__h2 {
+                    margin-bottom: 8px;
+                    width: 231px;
+                    height: 60px;
+
+                    font-family: 'Poppins', sans-serif;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 24px;
+                    line-height: 28px;
+                    color: $black-500;
+                }
+
+                .card__p {
+                    width: 231px;
+                    height: 96px;
+
+                    font-family: 'Roboto', sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 24px;
+                    color: $grey-500;
+                }
+
+            }
+        }
+
+
+    }
+  }

src/styles/utils/variables.scss

@@ -8,6 +8,9 @@ $grey-100: #d6d6d6;
 $grey-200: #e5e5e5;
 $grey-500: #858585;
 
+$black-500: #333333;
 
 $red-500: #ff5a5f;
 $red-700: #e93137;
+
+

src/templates/index.html

@@ -48,14 +48,17 @@
 
                 <ul class="wrapper-ul__cards"></ul>
 
+
             </div>
 
 
         </div>
 
     </main>
-
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="../scripts/components/slick.min.js"></script> -->
     <script src="bundle.js"></script>
 
+
 </body>
 </html>