.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

gulpfile.js

@@ -0,0 +1,73 @@
+const { src, dest, watch, parallel } = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const browserify = require('browserify');
+const Babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const uglify = require('gulp-uglify');
+const connect = require('gulp-connect');
+
+const paths = {
+    html: {
+        all: 'src/templates/**/*.html'
+    },
+
+    img: {
+       all: 'src/assets/images/**',
+    },
+
+    styles: {
+        all: 'src/styles/**/*.scss',
+        main: 'src/styles/main.scss',
+    },
+
+    scripts: {
+        all: 'src/scripts/**/*.js',
+        main: 'src/scripts/app.js',
+    },
+
+    utilities: {
+        all: 'src/scripts/utilities/*.js'
+    },
+
+    output: 'dist',
+};
+
+function html () {
+  return src(paths.html.all).pipe(dest(paths.output)).pipe(connect.reload());
+}
+
+function styles() {
+    return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output)).pipe(connect.reload());
+  };
+
+
+  function server () {
+      connect.server({
+          root: 'dist',
+          livereload: true,
+          port: 3000,
+        })
+    }
+
+    function sentinel () {
+      watch(paths.html.all, {ignoreInitial: false}, html);
+      watch(paths.styles.all, {ignoreInitial: false}, styles);
+      watch(paths.scripts.all, {ignoreInitial: false}, scripts);
+      watch(paths.img.all, {ignoreInitial: false}, img);
+      watch(paths.utilities.all, {ignoreInitial: false}, utilities);
+    }
+
+    function utilities () {
+        return src(paths.utilities.all).pipe(dest(paths.output));
+    }
+
+    function scripts () {
+      return browserify(paths.scripts.main).transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest(paths.output)).pipe(connect.reload());
+    }
+
+    function img () {
+        return src(paths.img.all).pipe(dest(paths.output));
+    }
+
+  exports.default = parallel (server, sentinel);

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "challenge-tourist-attractions-williamsimao",
+  "version": "1.0.0",
+  "description": "Projeto m3Academmy",
+  "main": "js.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "gulp"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.ecommercetools.com.br/WilliamSimao/challenge-tourist-attractions-WilliamSimao.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
+    "gulp": "^4.0.2",
+    "gulp-connect": "^5.7.0",
+    "gulp-sass": "^5.1.0",
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.56.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
+  }
+}

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

@@ -0,0 +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.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/assets/images/arrowRightmenor.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6447 14.8168L0.33028 4.58192e-05L-5.61424e-07 2.36213L10.8373 14.8168L-6.44363e-06 27.1104L0.330273 29.4725L13.6447 14.8168Z" fill="#858585"/>
+</svg>

src/scripts/app.js

@@ -0,0 +1,6 @@
+import { TouristAttractions } from "./components/TouristAttractions";
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    new TouristAttractions();
+    });

src/scripts/components/TouristAttractions.js

@@ -0,0 +1,151 @@
+export class TouristAttractions {
+    constructor () {
+        this.list = [
+            {
+                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-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-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-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.',
+            },
+
+        ];
+
+        this.selectors();
+        this.events();
+        this.carrossel();
+        this.renderListItems();
+        this.slickAdd();
+    }
+
+    selectors () {
+        this.inputFile = document.querySelector('#input__img');
+        this.spanInput = document.querySelector('.input__span');
+        this.textSpanInput = "Imagem";
+        this.spanInput.innerText = this.textSpanInput;
+        this.labelInput = document.querySelector('.label-input')
+        this.form = document.querySelector('.form__tourist-attractions');
+        this.ulList = document.querySelector('.wrapper-ul__cards');
+        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.form.addEventListener('submit', this.addProperty.bind(this));
+
+    }
+
+    imgPreview (i) {
+        const inputTarget = i.target;
+        const file = inputTarget.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.addEventListener('load', (e) => {
+                const readerTarget = e.target;
+                const img = document.createElement('img');
+                img.src = readerTarget.result;
+                img.classList.add('img-result');
+                this.spanInput.innerHTML = "";
+                this.labelInput.style.border = "none";
+                this.spanInput.appendChild(img);
+            });
+            reader.readAsDataURL(file);
+            i.target.value = '';
+        }else {
+            this.spanInput.innerText = this.textSpanInput;
+            this.labelInput.style.border = "";
+        }
+    };
+
+    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
+
+        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
+
+            const spot = {
+                image: spotImg,
+                titulo: spotTitle,
+                description: spotDescription,
+            };
+            this.list.push(spot);
+            this.renderListItems();
+            this.resetInputs();
+        }
+    };
+
+    renderListItems () {
+        let spotStructure = '';
+
+        this.list.forEach((i) => {
+            spotStructure += `
+            <li class="wrapper-cards__li" data-test="item-list">
+                <figure class="container-card__img">
+                    <img class="result-card__img" data-test="image-item-list" src="${i.image}"/>
+                </figure>
+                <div class="container-texto">
+                    <h3 class="result-card__title" data-test="title-item-list">${i.titulo}</h3>
+                    <p class="result-card__description" data-test="description-item-list">${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: 4,
+                slidesToScroll: 1,
+            })
+
+        }
+    };
+    removeSlick () {
+        if(window.screen.width > 1024) {
+            $('.wrapper-ul__cards').slick('unslick');
+        }
+    };
+
+    slickAdd () {
+        const ulListSlick = this.ulList;
+        if (ulListSlick.classList.value === 'slick-initialized') {
+            this.carrossel();
+        }else {
+            this.removeSlick();
+        }
+    }
+
+    resetInputs () {
+        this.inputTitle.value = '';
+        this.inputDescription.value = '';
+        this.labelInput.style.border = '';
+        this.spanInput.innerText = this.textSpanInput;
+        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/common/reset.scss

@@ -0,0 +1,6 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+  }

src/styles/main.scss

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

src/styles/partials/form.scss

@@ -0,0 +1,276 @@
+@import "utils/fonts.scss";
+
+    .page-titulo__tourist {
+        font-family: "Poppins", sans-serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 64px;
+        line-height: 120%;
+    }
+        .container-input {
+            display: flex;
+            margin: 40px 0 60px;
+
+            .wrapper-input__img {
+                margin-right: 20px;
+
+                label {
+                    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: 600px;
+                height: 400px;
+            }
+            .wrapper-input__img input {
+                display: none;
+            }
+            .wrapper-input__text {
+                display: flex;
+                flex-direction: column;
+
+                .input-text__titulo {
+                    display: flex;
+                    width: 575px;
+                    height: 64px;
+                    margin-bottom: 20px;
+                    padding: 16px 16px 16px;
+                    border: 2px solid $grey-100;
+                    border-radius: 8px;
+                    color: $grey-500;
+                    font-family: "Roboto", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 32px;
+                    line-height: 38px;
+                    letter-spacing: 0.15px;
+                }
+                .input-text__descricao {
+                    display: flex;
+                    width: 725px;
+                    height: 320px;
+                    margin-bottom: 16px;
+                    padding: 40px 16.77px 222.87px;
+                    color: $grey-500;
+                    font-family: "Roboto", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 32px;
+                    line-height: 48px;
+                    letter-spacing: 0.15px;
+                    border: 2px solid $grey-100;
+                    border-radius: 8px;
+                }
+                .wrapper-button-submit {
+                    display: flex;
+                    justify-content: end;
+
+                    .button-submit__input {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 201px;
+                        height: 80px;
+                        background: $red-500;
+                        color: $white-500;
+                        font-family: "Poppins", sans-serif;
+                        font-style: normal;
+                        font-weight: 700;
+                        font-size: 32px;
+                        border: 1px solid $red-500;
+                        border-radius: 8px;
+                        cursor: pointer;
+
+                        &:hover {
+                            background: $red-700;
+                        }
+                    }
+                }
+            }
+        }
+
+    .img-result {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        object-fit: cover;
+    }
+@media only screen and  (width: 375px){
+    .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: 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 {
+            .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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media only screen and (max-width: 2499px) {
+
+    .container-h1-input {
+        .page-titulo__tourist {
+            font-size: 32px;
+        }
+        .container-input {
+            .wrapper-input__img {
+                label {
+                    width: 343px;
+                    height: 212px;
+                    font-size: 26px;
+                    line-height: 24px;
+                }
+            }
+            .input__span {
+                width: 343px;
+                height: 212px;
+                font-size: 16px;
+            }
+
+            .wrapper-input__text {
+                .input-text__titulo {
+                    width: 328px;
+                    height: 56px;
+                    font-size: 16px;
+                    line-height: 24px;
+                }
+                .input-text__descricao {
+                    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,333 @@
+.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 {
+            &::before {
+                display: none;
+            }
+        }
+
+        .slick-next {
+            &::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;
+                display: block;
+            }
+            .container-texto {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin: 24px 24px;
+                overflow-y: scroll;
+                height: 100% !important;
+                &::-webkit-scrollbar {
+                    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 (width: 375px) {
+    .container-pai {
+        .container-cards {
+            .wrapper-ul__cards {
+                .wrapper-cards__li {
+                    width: 343px;
+                    .container-texto {
+                        .result-card__title {
+                            height: fit-content;
+                        }
+                        .result-card__description {
+                            height: 72px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@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: 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 (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: 279px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 1025px) and ( max-width: 2499px) {
+    .container-pai {
+        .container-cards {
+            .page-titulo__img__spot {
+                font-size: 32px;
+            }
+            .wrapper-ul__cards {
+                .slick-prev {
+                    background: url('arrowLeftmenor.svg') no-repeat center center !important;
+                    left: -3.56%;
+                }
+                .slick-next {
+                    background: url('arrowRightmenor.svg') no-repeat center center !important;
+                    right: -3.56%;
+                }
+                .wrapper-cards__li {
+                    height: 424px;
+                    .result-card__img {
+                        height: 212px !important ;
+                    }
+                    .container-texto {
+                        .result-card__title {
+                            font-size: 24px;
+                            line-height: 24px;
+                            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;
+                }
+            }
+        }
+    }
+}
+
+@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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@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

@@ -0,0 +1,224 @@
+@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 {
+            bottom: 21px;
+            width: 27px;
+            height: 27px;
+            border: 1px solid $grey-500;
+            background: transparent;
+        }
+    }
+}
+@media only screen and (min-width: 2500px) {
+    .slick-dots {
+       bottom: -40px;
+    }
+}
+
+@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: 100%;
+    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/styles/utils/fonts.scss

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");

src/styles/utils/variables.scss

@@ -0,0 +1,16 @@
+
+//colors
+
+$white-500: #ffffff;
+
+
+$grey-100: #d6d6d6;
+$grey-200: #e5e5e5;
+$grey-500: #858585;
+
+$black-500: #333333;
+
+$red-500: #ff5a5f;
+$red-700: #e93137;
+
+

src/templates/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <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" href="main.css">
+    <title>Tourist Attractions</title>
+</head>
+<body>
+    <main>
+
+            <div class="container-pai" >
+                <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">
+                        <div class="container-input">
+                            <div class="wrapper-input__img">
+                                <label class="label-input" for="input__img" tabIndex="0">
+                                    <span class="input__span"></span>
+                                </label>
+                            <input id="input__img" data-test="input-image" type="file" accept="image/*">
+                            </div>
+
+                            <div class="wrapper-input__text">
+                                <input name="input-title" class="input-text__titulo" data-test="input-titulo" type="text" accept="text" placeholder="Titulo">
+                                <input name="input-description" class="input-text__descricao" data-test="input-descrição" type="text" accept="text" placeholder="Descrição">
+                                <div class="wrapper-button-submit">
+                                    <button class="button-submit__input" data-test="button-submit" type="submit">Adicionar</button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+
+
+                </div>
+
+                <div class="container-cards">
+                    <h1 class="page-titulo__img__spot" data-test="title-list">Pontos Turísticos</h1>
+
+                    <ul class="wrapper-ul__cards" data-test="container-item-list"></ul>
+
+                </div>
+            </div>
+    </main>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="slick.min.js"></script>
+    <script src="bundle.js"></script>
+
+
+</body>
+</html>