gulpfile.js

@@ -13,7 +13,7 @@ const paths = {
     },
 
     img: {
-       all: 'src/assets/**',
+       all: 'src/assets/images/**',
     },
 
     styles: {

src/scripts/components/TouristAttractions.js

@@ -2,22 +2,30 @@ export class TouristAttractions {
     constructor () {
         this.list = [
             {
-                image: 'img1.png',
+                // 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.png',
+                // 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.png',
+                // 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.png',
+                // 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.',
             },
@@ -28,6 +36,7 @@ export class TouristAttractions {
         this.events();
         this.carrossel();
         this.renderListItems();
+        this.removeSlick();
     }
 
     selectors () {
@@ -70,10 +79,50 @@ export class TouristAttractions {
         }
     };
 
-    addProperty (e) {
-        e.preventDefault();
 
-        const spotImg = this.spanInput.children[0].src
+    renderListItems () {
+        let spotStructure = '';
+
+        this.list.forEach((i) => {
+            spotStructure += `
+            <li class="wrapper-cards__li">
+                <figure class="container-card__img">
+                    <img class="result-card__img" src="${i.image}"/>
+                </figure>
+                <h3 class="result-card__title">${i.titulo}</h3>
+                <p class="result-card__description">${i.description}</p>
+            </li>`;
+        });
+
+        this.removeSlick();
+        this.ulList.innerHTML = spotStructure;
+        this.carrossel();
+    };
+
+    carrossel () {
+        if(window.screen.width > 1024) {
+            $('.wrapper-ul__cards').slick({
+                dots: true,
+                infinite: true,
+                arrows: true,
+                slidesToShow: 4,
+                slidesToScroll: 1,
+            })
+
+        }
+    };
+
+
+    removeSlick () {
+        if(window.screen.width > 1024) {
+            $('.wrapper-ul__cards').slick('unslick');
+        }
+    };
+
+    addProperty (e) {
+    e.preventDefault();
+
+    const spotImg = this.spanInput.children[0].src
         const spotTitle = e.target['input-title'].value
         const spotDescription = e.target['input-description'].value
 
@@ -87,57 +136,15 @@ export class TouristAttractions {
             this.list.push(spot);
             this.renderListItems();
             this.resetInputs();
-        }else {
-            alert('Preencha todos os campos')
-        }
-    };
-
-    renderListItems () {
-        let spotStructure = '';
-
-        this.list.forEach((i) => {
-            spotStructure += `
-            <li class="wrapper-cards__li">
-            <figure class="container-card__img">
-            <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
-            </figure>
-            <div class="container__text">
-            <h3 class="result-card__title">${i.titulo}</h3>
-            <p class="result-card__description">${i.description}</p>
-            </div>
-            </li>`;
-        });
-        this.removeSlick();
-        this.ulList.innerHTML = spotStructure;
-        this.carrossel();
-    };
-
-    carrossel () {
-        if(window.screen.width > 1024) {
-            $('.wrapper-ul__cards').slick({
-                dots: true,
-                infinite: true,
-                arrows: true,
-                slidesToShow: 3,
-                slidesToScroll: 1,
-                variableWidth: true,
-            })
-
-        }
-    };
-
-    removeSlick () {
-        if(window.screen.width > 1024) {
-            $('.wrapper-ul__cards').slick('unslick');
         }
     };
 
     resetInputs () {
         this.inputTitle.value = '';
         this.inputDescription.value = '';
-        this.labelInput.style.border = "";
+        this.labelInput.style.border = '';
         this.spanInput.innerText = this.textSpanInput;
-        this.spanInput.style.border = "";
+        this.spanInput.style.border = '';
     };
 
 

src/styles/common/global.scss

@@ -0,0 +1,9 @@
+.container-pai {
+    padding: 40px 130px 0;
+}
+
+@media only screen and (max-width: 1024px) {
+    .container-pai {
+        padding: 40px 16px 0;
+    }
+}

src/styles/main.scss

@@ -1,7 +1,11 @@
 @import "utils/variables.scss";
 @import "utils/fonts.scss";
 
+@import "common/global.scss";
 @import "common/reset.scss";
 
-@import "partials/form.scss";
+@import "partials/slick.scss";
+@import "partials/slick-theme.scss";
 
+@import "partials/form.scss";
+@import "partials/result.scss";

src/styles/partials/form.scss

@@ -1,47 +1,48 @@
 @import "utils/fonts.scss";
 
-.container-h1-input {
+
-    padding: 40px 130px 0;
 
     .page-titulo__tourist {
         font-family: "Poppins", sans-serif;
         font-style: normal;
         font-weight: 700;
-        font-size: 32px;
+        font-size: 64px;
         line-height: 120%;
     }
         .container-input {
             display: flex;
             margin: 40px 0 60px;
 
-            .wrapper-input__img label {
+            .wrapper-input__img {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: $grey-500;
-                font-family: "Roboto", sans-serif;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-                letter-spacing: 0.15px;
-                width: 343px;
-                height: 212px;
                 margin-right: 20px;
-                border: 2px solid $grey-200;
+
-                border-radius: 8px;
+                label {
-                cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: $grey-500;
+                    font-family: "Roboto", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 32px;
+                    line-height: 48px;
+                    letter-spacing: 0.15px;
+                    width: 600px;
+                    height: 400px;
+                    border: 2px solid $grey-200;
+                    border-radius: 8px;
+                    cursor: pointer;
+                }
             }
             .input__span {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 343px;
+                width: 600px;
-                height: 212px;
+                height: 400px;
             }
             .wrapper-input__img input {
                 display: none;
-                margin-right: 20px;
             }
             .wrapper-input__text {
                 display: flex;
@@ -49,8 +50,8 @@
 
                 .input-text__titulo {
                     display: flex;
-                    width: 328px;
+                    width: 575px;
-                    height: 56px;
+                    height: 64px;
                     margin-bottom: 20px;
                     padding: 16px 16px 16px;
                     border: 2px solid $grey-100;
@@ -59,22 +60,22 @@
                     font-family: "Roboto", sans-serif;
                     font-style: normal;
                     font-weight: 400;
-                    font-size: 16px;
+                    font-size: 32px;
-                    line-height: 24px;
+                    line-height: 38px;
                     letter-spacing: 0.15px;
                 }
                 .input-text__descricao {
                     display: flex;
-                    width: 417px;
+                    width: 725px;
-                    height: 136px;
+                    height: 320px;
                     margin-bottom: 16px;
-                    padding: 40px 20px 72px;
+                    padding: 40px 16.77px 222.87px;
                     color: $grey-500;
                     font-family: "Roboto", sans-serif;
                     font-style: normal;
                     font-weight: 400;
-                    font-size: 16px;
+                    font-size: 32px;
-                    line-height: 24px;
+                    line-height: 48px;
                     letter-spacing: 0.15px;
                     border: 2px solid $grey-100;
                     border-radius: 8px;
@@ -87,14 +88,14 @@
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        width: 121px;
+                        width: 201px;
-                        height: 56px;
+                        height: 80px;
                         background: $red-500;
                         color: $white-500;
                         font-family: "Poppins", sans-serif;
                         font-style: normal;
                         font-weight: 700;
-                        font-size: 16px;
+                        font-size: 32px;
                         border: 1px solid $red-500;
                         border-radius: 8px;
                         cursor: pointer;
@@ -113,84 +114,132 @@
         border-radius: 8px;
         object-fit: cover;
     }
+
+@media only screen and  (width: 490px){
+    .container-pai {
+        .container-h1-input {
+            .form__tourist-attractions {
+                .container-input {
+                    width: 343px ;
+                    .wrapper-input__img {
+                        label {
+                            width: 343px;
+                            height: 212px;
+                        }
+                    }
+                    .input__span {
+                        width: 343px;
+                        height: 212px;
+                    }
+                    .wrapper-input__text {
+                        .input-text__titulo {
+                            width: 340.91px;
+                            height: 54px;
+                        }
+                        .input-text__descricao {
+                            width: 340.91px;
+                            height: 131.14px;
+                        }
+                        .wrapper-button-submit {
+                            .button-submit__input{
+                                width: 343px;
+                                height: 56px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
+@media only screen and (max-width: 1024px) {
+    .container-pai {
+        .container-h1-input {
+            .container-input {
+                flex-direction: column;
+                .wrapper-input__img {
+                    margin: 0 0 17px;
+                    label {
+                        width: 100%;
+                        height: 570px;
+                    }
+                }
+                .input__span {
+                    width: 100%;
+                    height: 570px;
+                }
+                .wrapper-input__text {
+                    .input-text__titulo {
+                        width: 100%;
+                        height: 54px;
+                    }
+                    .input-text__descricao {
+                        width: 100%;
+                        height: 131.14px;
+                    }
+                    .wrapper-button-submit {
+                        .button-submit__input {
+                            width: 100%;
+                            height: 56px;
+                        }
+                    }
 
-.container-cards {
+                }
-    padding: 0px 130px;
+
+            }
+        }
 
-    .page-titulo__img__spot {
-        font-family: "Poppins", sans-serif;
-        font-style: normal;
-        font-weight: 700;
-        font-size: 32px;
-        line-height: 120%;
-        margin-bottom: 38px;
     }
 
-    .wrapper-ul__cards {
+}
-        display: flex;
-        align-items: center;
 
-        .slick-prev {
+
-            background: url('arrowLeft.svg') no-repeat !important;
+@media only screen and (max-width: 2499px) {
-            height: 30px;
+
-            width: 13.64px;
+    .container-h1-input {
-            left: -6.16%;
+        .page-titulo__tourist {
-            &::before {
+            font-size: 32px;
-                display: none;
-            }
         }
-
+        .container-input {
-        .slick-next {
+            .wrapper-input__img {
-            background: url('arrowRight.svg') no-repeat center center !important;
+                label {
-            height: 30px;
+                    width: 343px;
-            width: 13.64px;
+                    height: 212px;
-            right: -4.56%;
+                    font-size: 26px;
-            &::before {
+                    line-height: 24px;
-                display: none;
-            }
-        }
-
-        .wrapper-cards__li {
-            width: 279px !important;
-            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
-            border-radius: 8px;
-            margin: 0 10.5px;
-            max-height: 424px;
-
-            .result-card__img {
-                width: 100%;
-                border-radius: 8px;
-                height: 212px;
-                object-fit: cover;
-            }
-            .container__text {
-                padding: 24px;
-                overflow-y: scroll;
-
-                .result-card__title {
-                    font-family: 'Poppins', sans-serif;
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 24px;
-                    line-height: 28px;
-                    color: $black-500;
-                    margin-bottom: 8px;
-                    width: 231px;
-                    height: 60px;
                 }
-                .result-card__description {
+            }
-                    font-family: 'Roboto', sans-serif;
+            .input__span {
-                    font-style: normal;
+                width: 343px;
-                    font-weight: 400;
+                height: 212px;
+                font-size: 16px;
+            }
+
+            .wrapper-input__text {
+                .input-text__titulo {
+                    width: 328px;
+                    height: 56px;
                     font-size: 16px;
                     line-height: 24px;
-                    color: $grey-500;
+                }
-                    height: 96px;
+                .input-text__descricao {
-                    overflow-y: scroll;
+                    width: 417px;
+                    height: 136px;
+                    font-size: 16px;
+                    line-height: 24px;
+                    padding: 40px 20px 72px;
                 }
 
+                .wrapper-button-submit {
+                    .button-submit__input {
+                        width: 121px;
+                        height: 56px;
+                        font-size: 16px;
+                    }
+                }
             }
+
+
         }
     }
 }

src/styles/partials/result.scss

@@ -0,0 +1,167 @@
+.container-cards {
+    width: 100%;
+    margin-bottom: 165px;
+
+    .page-titulo__img__spot {
+        font-family: "Poppins", sans-serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 64px;
+        line-height: 120%;
+        margin-bottom: 38px;
+    }
+
+    .wrapper-ul__cards {
+        display: flex;
+        align-items: center;
+        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;
+            }
+        }
+        .wrapper-cards__li {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
+            border-radius: 8px;
+            background-color: $white-500;
+
+
+            .result-card__img {
+                width: 100%;
+                border-radius: 8px;
+                object-fit: cover;
+                object-position: top;
+            }
+            .result-card__title {
+                font-family: 'Poppins', sans-serif;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 48px;
+                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;
+                margin: 0 24px 24px;
+                height: 192px;
+                overflow-wrap: anywhere;
+                &::-webkit-scrollbar {
+                    width: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    background: $grey-500;
+                    border-radius: 5px;
+                    border: 1px solid $white-500;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and  (max-width: 490px){
+
+}
+
+
+
+@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 {
+                        height: 24px;
+                    }
+                }
+            }
+        }
+    }
+}
+@media only screen and (width: 1440px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .wrapper-cards__li {
+                    width: 279px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 2499px) {
+    .container-pai {
+        .container-cards {
+            .page-titulo__img__spot {
+                font-size: 32px;
+            }
+            .wrapper-ul__cards {
+                .slick-prev {
+                    height: 30px;
+                    width: 13.64px;
+                    left: -4.56%;
+                }
+                .wrapper-cards__li {
+                    .result-card__title {
+                        font-size: 24px;
+                        line-height: 28px;
+                        height: 60px;
+                    }
+
+                    .result-card__description {
+                        font-size: 16px;
+                        line-height: 24px;
+                        height: 96px;
+                    }
+                }
+            }
+        }
+    }
+}
+@media only screen and (width: 2500px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .wrapper-cards__li {
+                    width: 544px !important;
+
+                }
+            }
+        }
+    }
+}
+
+
+
+

src/styles/partials/slick-theme.scss

@@ -0,0 +1,218 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: white !default;
+$slick-dot-color: black !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 6px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+    @if function-exists(image-url) {
+        @return image-url($url);
+    }
+    @else {
+        @return url($slick-loader-path + $url);
+    }
+}
+
+@function slick-font-url($url) {
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else {
+        @return url($slick-font-path + $url);
+    }
+}
+
+/* Slider */
+
+.slick-list {
+    .slick-loading & {
+        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+    }
+}
+
+/* Icons */
+@if $slick-font-family == "slick" {
+    @font-face {
+        font-family: "slick";
+        src: slick-font-url("slick.eot");
+        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: $slick-opacity-not-active;
+    }
+    &:before {
+        font-family: $slick-font-family;
+        font-size: 20px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: $slick-prev-character;
+        [dir="rtl"] & {
+            content: $slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: $slick-next-character;
+        [dir="rtl"] & {
+            content: $slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: inline-flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    gap: 12px;
+    li {
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        display: inline-flex;
+        width: max-content;
+        padding: 0;
+        cursor: pointer;
+        button {
+            align-items: center;
+            border: 0;
+            background: transparent;
+            display: flex;
+            height: max-content;
+            width: max-content;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: $slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 100%;
+                background-color: $grey-500;
+                top: 0;
+                left: 0;
+                content: '';
+                width: 20px;
+                height: 20px;
+                text-align: center;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            width: 27px;
+            height: 27px;
+            border: 1px solid $grey-500;
+            background: transparent;
+        }
+    }
+}
+
+@media only screen and (max-width: 2499px) {
+
+    .slick-dots {
+        li {
+            button {
+                &::before {
+                    width: 10px;
+                    height: 10px;
+                }
+            }
+            &.slick-active button:before {
+                width: 17px;
+                height: 17px;
+            }
+        }
+    }
+}
+
+

src/styles/partials/slick.scss

@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    height: 432px;
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    column-gap: 10.5px;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

src/templates/index.html

@@ -4,46 +4,47 @@
     <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.css"/>
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.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>
 <body>
     <main>
 
-        <div class="container-h1-input">
+            <div class="container-pai" >
-            <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
+                <div class="container-h1-input">
+                    <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
 
-            <form class="form__tourist-attractions">
+                    <form class="form__tourist-attractions">
-                <div class="container-input">
+                        <div class="container-input">
-                    <div class="wrapper-input__img">
+                            <div class="wrapper-input__img">
-                        <label class="label-input" for="input__img" tabIndex="0">
+                                <label class="label-input" for="input__img" tabIndex="0">
-                            <span class="input__span"></span>
+                                    <span class="input__span"></span>
-                        </label>
+                                </label>
-                    <input id="input__img" type="file" accept="image/*" data-test="input-image">
+                            <input id="input__img" type="file" accept="image/*" data-test="input-image">
-                    </div>
+                            </div>
 
-                    <div class="wrapper-input__text">
+                            <div class="wrapper-input__text">
-                        <input name="input-title" class="input-text__titulo" type="text" accept="text" placeholder="Titulo" data-test="input-titulo">
+                                <input name="input-title" class="input-text__titulo" type="text" accept="text" placeholder="Titulo" data-test="input-titulo">
-                        <input name="input-description" class="input-text__descricao" type="text" accept="text" placeholder="Descrição" data-test="input-descrição">
+                                <input name="input-description" class="input-text__descricao" type="text" accept="text" placeholder="Descrição" data-test="input-descrição">
-                        <div class="wrapper-button-submit">
+                                <div class="wrapper-button-submit">
-                            <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
+                                    <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                    </form>
+
+
                 </div>
-            </form>
 
+                <div class="container-cards">
+                    <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
 
-        </div>
+                    <ul class="wrapper-ul__cards"></ul>
-
-        <div class="container-cards">
-            <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
-
-            <ul class="wrapper-ul__cards"></ul>
-
-        </div>
 
+                </div>
+            </div>
     </main>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>