feat(Feature/TouristAttractionsAutoJs): Finaliza estilização

src/assets/images/arrowLeftmaior.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="58" viewBox="0 0 26 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.25454e-06 28.8415L25.3707 58L26 53.3516L5.34947 28.8415L26 4.64845L25.3707 -3.2965e-08L4.25454e-06 28.8415Z" fill="#858585"/>
+</svg>

src/assets/images/arrowLeftmenor.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M-1.84423e-05 14.6557L13.3144 29.4724L13.6447 27.1103L2.80736 14.6557L13.6447 2.36209L13.3144 -1.93095e-06L-1.84423e-05 14.6557Z" fill="#858585"/>
+<path d="M-1.85934e-05 14.6557L13.3144 29.4724L13.6447 27.1103L2.80736 14.6557L13.6447 2.36209L13.3144 -1.58741e-06L-1.85934e-05 14.6557Z" fill="#858585"/>
 </svg>

src/assets/images/arrowRightmaior.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="59" viewBox="0 0 27 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.6445 29.631L1.27388 0.472534L0.64453 5.12098L21.295 29.631L0.644519 53.8241L1.27387 58.4725L26.6445 29.631Z" fill="#858585"/>
+</svg>

src/scripts/components/TouristAttractions.js

@@ -2,29 +2,21 @@ export class TouristAttractions {
     constructor () {
         this.list = [
             {
-                // image: 'img1-279.png',
-                // image: 'img1-544.png',
                 image: 'img1-992.png',
                 titulo: 'Pão de Açucar',
                 description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
             },
             {
-                // image: 'img2-279.png',
-                // image: 'img2-544.png',
                 image: 'img2-992.png',
                 titulo: 'Cristo Redentor',
                 description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
             },
             {
-                // image: 'img3-279.png',
-                // image: 'img3-544.png',
                 image: 'img3-992.png',
                 titulo: 'Ilha Grande',
                 description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
             },
             {
-                // image: 'img4-279.png',
-                // image: 'img4-544.png',
                 image: 'img4-992.png',
                 titulo: 'Centro Histórico de Paraty',
                 description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
@@ -89,8 +81,10 @@ export class TouristAttractions {
                 <figure class="container-card__img">
                     <img class="result-card__img" src="${i.image}"/>
                 </figure>
-                <h3 class="result-card__title">${i.titulo}</h3>
+                <div class="container-texto">
-                <p class="result-card__description">${i.description}</p>
+                    <h3 class="result-card__title">${i.titulo}</h3>
+                    <p class="result-card__description">${i.description}</p>
+                </div>
             </li>`;
         });
 
@@ -111,8 +105,6 @@ export class TouristAttractions {
 
         }
     };
-
-
     removeSlick () {
         if(window.screen.width > 1024) {
             $('.wrapper-ul__cards').slick('unslick');

src/styles/partials/form.scss

@@ -115,7 +115,7 @@
         object-fit: cover;
     }
 
-@media only screen and  (width: 490px){
+@media only screen and  (width: 375px){
     .container-pai {
         .container-h1-input {
             .form__tourist-attractions {
@@ -152,6 +152,43 @@
         }
     }
 }
+
+@media only screen and (max-width: 490px) {
+    .container-pai {
+        .container-h1-input {
+            .form__tourist-attractions {
+                .container-input {
+                    .wrapper-input__img {
+                        label {
+                            width: 100%;
+                            height: 212px;
+                        }
+                    }
+                    .input__span {
+                        width: 100%px;
+                        height: 212px;
+                    }
+                    .wrapper-input__text {
+                        .input-text__titulo {
+                            width: 100%px;
+                            height: 54px;
+                        }
+                        .input-text__descricao {
+                            width: 100%px;
+                            height: 131.14px;
+                        }
+                        .wrapper-button-submit {
+                            .button-submit__input{
+                                width: 100%px;
+                                height: 56px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 @media only screen and (max-width: 1024px) {
     .container-pai {
         .container-h1-input {

src/styles/partials/result.scss

@@ -17,20 +17,12 @@
         width: 100%;
         column-gap: 10.5px;
         .slick-prev {
-            background: url('arrowLeft.svg') no-repeat center center !important;
-            height: 58px;
-            width: 26px;
-            left: -4.56%;
             &::before {
                 display: none;
             }
         }
 
         .slick-next {
-            background: url('arrowRight.svg') no-repeat center center !important;
-            height: 30px;
-            width: 13.64px;
-            right: -4.56%;
             &::before {
                 display: none;
             }
@@ -49,78 +41,172 @@
                 border-radius: 8px;
                 object-fit: cover;
                 object-position: top;
+                display: block;
             }
-            .result-card__title {
+            .container-texto {
-                font-family: 'Poppins', sans-serif;
+                display: flex;
-                font-style: normal;
+                flex-direction: column;
-                font-weight: 700;
+                justify-content: space-between;
-                font-size: 48px;
+                margin: 24px 24px;
-                line-height: 56px;
-                color: $black-500;
-                margin: 24px 24px 8px;
-                height: 120px;
-                overflow-wrap: anywhere;
-            }
-            .result-card__description {
-                font-family: 'Roboto', sans-serif;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 32px;
-                line-height: 48px;
-                color: $grey-500;
                 overflow-y: scroll;
-                white-space: normal;
+                height: 100% !important;
-                margin: 0 24px 24px;
-                height: 192px;
-                overflow-wrap: anywhere;
                 &::-webkit-scrollbar {
-                    width: 4px;
+                    width: 0;
                 }
                 &::-webkit-scrollbar-thumb {
                     background: $grey-500;
                     border-radius: 5px;
                     border: 1px solid $white-500;
                 }
+                .result-card__title {
+                    font-family: 'Poppins', sans-serif;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 48px;
+                    color: $black-500;
+                    margin-bottom: 8px;
+                    height: fit-content;
+                    overflow-wrap: anywhere;
+                }
+                .result-card__description {
+                    font-family: 'Roboto', sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 32px;
+                    color: $grey-500;
+                    white-space: normal;
+                    height: 192px;
+                    overflow-wrap: anywhere;
+                }
             }
         }
     }
 }
 
-@media only screen and  (max-width: 490px){
+@media only screen and (width: 375px) {
-
-}
-
-
-
-@media only screen and (max-width: 1024px) {
     .container-pai {
         .container-cards {
             .wrapper-ul__cards {
-                flex-direction: column;
-                row-gap: 24px;
-                column-gap: 0;
                 .wrapper-cards__li {
-                    .result-card__description {
+                    width: 343px;
-                        height: 24px;
+                    .container-texto {
+                        .result-card__title {
+                            height: fit-content;
+                        }
+                        .result-card__description {
+                            height: 72px;
+                        }
                     }
                 }
             }
         }
     }
 }
-@media only screen and (width: 1440px) {
+
+@media only screen and (max-width: 490px) {
     .container-pai {
         .container-cards {
+            .page-titulo__img__spot {
+                font-size: 32px;
+            }
             .wrapper-ul__cards {
+                flex-direction: column;
+                row-gap: 24px;
+                column-gap: 0;
                 .wrapper-cards__li {
-                    width: 279px;
+                    width: 100%;
+                    height: 400px;
+                    .result-card__img {
+                        height: 212px;
+                    }
+                    .container-texto {
+                        height: 140px;
+                        .result-card__title {
+                            font-size: 24px;
+                            height: fit-content;
+                            line-height: 28px !important;
+
+                        }
+                        .result-card__description {
+                            height: 72px;
+                            font-size: 16px;
+                            line-height: 24px;
+                        }
+                    }
                 }
             }
         }
     }
 }
 
-@media only screen and (max-width: 2499px) {
+
+@media only screen and (width: 1024px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .wrapper-cards__li {
+                    .container-texto {
+                        .result-card__title {
+                            height: fit-content;
+                        }
+                        .result-card__description {
+                            height: 24px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 491px) and (max-width: 1024px) {
+    .container-pai {
+        .container-cards {
+            .page-titulo__img__spot {
+                font-size: 32px;
+            }
+            .wrapper-ul__cards {
+                flex-direction: column;
+                row-gap: 24px;
+                column-gap: 0;
+                .wrapper-cards__li {
+                    width: 100%;
+                    height: 710px;
+                    .result-card__img {
+                        height: 570px !important;
+                    }
+                    .container-texto {
+                        height: 92px;
+                        .result-card__title {
+                            font-size: 24px;
+                            height: fit-content;
+                        }
+                        .result-card__description {
+                            height: 100%;
+                            font-size: 16px;
+                            line-height: 24px;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (width: 1440px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .wrapper-cards__li {
+                    width: 544px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 1025px) and ( max-width: 2499px) {
     .container-pai {
         .container-cards {
             .page-titulo__img__spot {
@@ -128,34 +214,96 @@
             }
             .wrapper-ul__cards {
                 .slick-prev {
-                    height: 30px;
+                    background: url('arrowLeftmenor.svg') no-repeat center center !important;
-                    width: 13.64px;
+                    left: -6.16%;
-                    left: -4.56%;
+                }
+                .slick-next {
+                    background: url('arrowRightmenor.svg') no-repeat center center !important;
+                    right: -6.16%;
                 }
                 .wrapper-cards__li {
-                    .result-card__title {
+                    height: 424px;
-                        font-size: 24px;
+                    .result-card__img {
-                        line-height: 28px;
+                        height: 212px !important ;
-                        height: 60px;
                     }
-
+                    .container-texto {
-                    .result-card__description {
+                        .result-card__title {
-                        font-size: 16px;
+                            font-size: 24px;
-                        line-height: 24px;
+                            line-height: 24px;
-                        height: 96px;
+                            height: fit-content;
+                        }
+                        .result-card__description {
+                            font-size: 16px;
+                            line-height: 24px;
+                            height: 96px;
+                        }
                     }
                 }
             }
         }
     }
 }
+
+@media only screen and (width: 1920px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .slick-prev {
+                    background: url('arrowLeftmenor.svg') no-repeat center center !important;
+                    left: -4.16%;
+                }
+                .slick-next {
+                    background: url('arrowRightmenor.svg') no-repeat center center !important;
+                    right: -4.16%;
+                }
+            }
+        }
+    }
+}
+
 @media only screen and (width: 2500px) {
     .container-pai {
         .container-cards {
             .wrapper-ul__cards {
                 .wrapper-cards__li {
-                    width: 544px !important;
+                    width: 279px !important;
+                }
+            }
+        }
+    }
+}
 
+@media only screen and (min-width: 2500px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .slick-prev {
+                    background: url('arrowLeftmaior.svg') no-repeat center center !important;
+                    left: -3.5%;
+                    width: 26px;
+                    height: 58px;
+
+                }
+                .slick-next {
+                    background: url('arrowRightmaior.svg') no-repeat center center !important;
+                    right: -3.5%;
+                    width: 26px;
+                    height: 58px;
+                }
+                .wrapper-cards__li {
+                    height: 768px;
+                    .result-card__img {
+                        height: 400px !important;
+                    }
+                    .container-texto {
+                        height: 320px;
+                        .result-card__title {
+                            line-height: 56px;
+                        }
+                        .result-card__description {
+                            line-height: 48px;
+                        }
+                    }
                 }
             }
         }
@@ -163,5 +311,23 @@
 }
 
 
-
+@media only screen and (min-width: 2850px) {
-
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .slick-prev {
+                    background: url('arrowLeftmaior.svg') no-repeat center center !important;
+                    left: -2.5%;
+                    width: 26px;
+                    height: 58px;
+                }
+                .slick-next {
+                    background: url('arrowRightmaior.svg') no-repeat center center !important;
+                    right: -2.5%;
+                    width: 26px;
+                    height: 58px;
+                }
+            }
+        }
+    }
+}

src/styles/partials/slick-theme.scss

@@ -189,6 +189,7 @@ $slick-opacity-not-active: 0.25 !default;
             }
         }
         &.slick-active button:before {
+            bottom: 21px;
             width: 27px;
             height: 27px;
             border: 1px solid $grey-500;
@@ -196,6 +197,11 @@ $slick-opacity-not-active: 0.25 !default;
         }
     }
 }
+@media only screen and (min-width: 2501px) {
+    .slick-dots {
+       bottom: -40px;
+    }
+}
 
 @media only screen and (max-width: 2499px) {
 

src/styles/partials/slick.scss

@@ -15,7 +15,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 .slick-list {
-    height: 432px;
+    height: 100%;
     position: relative;
     overflow: hidden;
     display: block;

src/templates/index.html

@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> -->
     <link rel="stylesheet" href="main.css">
     <title>Tourist Attractions</title>
 </head>