anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #2

Merged
anacarolinaduartecavalcante merged 30 commits from develop into main 2022-11-28 17:20:10 +00:00
Conversation 0 Commits 30 Files Changed 21 +16482
21 changed files with 16482 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.editorconfig Normal file
View File

@ -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

2
.gitignore vendored Normal file
View File

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

73
gulpfile.js Normal file
View File

@ -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",
},
styles: {
all: "src/styles/**/*.scss",
main: "src/styles/main.scss",
},
scripts: {
all: "src/scripts/**/*.js",
main: "src/scripts/app.js",
},
images: {
all: "src/assets/**",
},
output: "dist",
};
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.images.all, { ignoreInitial: false }, images);
}
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 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 images() {
return src(paths.images.all).pipe(dest(paths.output));
}
exports.default = parallel(server, sentinel);

15412
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "challenge-tourist-attractions-ana-carolina-duarte-cavalcante",
"version": "1.0.0",
"description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp"
},
"repository": {
"type": "git",
"url": "ssh://git@gitea.ecommercetools.com.br:22022/anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante.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"
}
}

9
src/assets/svgs/centrohistoricodeparati.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 261 KiB

9
src/assets/svgs/cristoredentor.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

9
src/assets/svgs/ilhagrande.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

3
src/assets/svgs/left arrow.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

9
src/assets/svgs/paodeacucar.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

3
src/assets/svgs/right arrow.svg Normal file
View File

@ -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.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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

5
src/scripts/app.js Normal file
View File

@ -0,0 +1,5 @@
import {Form} from "./components/form";
document.addEventListener("DOMContentLoaded",function(){
new Form();
});

132
src/scripts/components/form.js Normal file
View File

@ -0,0 +1,132 @@
export class Form {
constructor() {
this.list = [
{
src: "svgs/paodeacucar.svg",
title: "Pão de Açúcar",
description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
},
{
src: "svgs/cristoredentor.svg",
title: "Cristo Redentor",
description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
},
{
src: "svgs/ilhagrande.svg",
title: "Ilha Grande",
description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
},
{
src: "svgs/centrohistoricodeparati.svg",
title: "Centro Histórico de Parati",
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.renderListItems();
if (window.innerWidth > 1024){
this.addSlick();
}
}
selectors() {
this.inputImage = document.querySelector("#inputImage");
this.imagePreview = document.getElementsByClassName("image");
this.form = document.querySelector(".form");
this.itemTitle = document.querySelector("#titleInput");
this.itemDescription = document.querySelector("#descriptionText");
this.slider = document.querySelector(".slider-list");
}
events() {
this.inputImage.addEventListener("change", this.addImage.bind(this), false);
this.form.addEventListener("submit", this.addItemToList.bind(this));
}
addImage(event){
const inputFile = event.target;
const file = inputFile.files[0];
if (file){
const reader = new FileReader();
reader.addEventListener("load", (imagem) => {
const readerTarget = imagem.target;
const img = document.createElement("img");
img.src = readerTarget.result;
img.classList.add("image");
this.imagePreview[0].innerHTML = "";
this.imagePreview[0].appendChild(img);
});
reader.readAsDataURL(file);
} else{
this.imagePreview[0].innerHTML;
}
}
addItemToList(event) {
event.preventDefault();
const itemImage = this.imagePreview[0].children[0].src;
const itemTitle = event.target["titleInput"].value;
const itemDescription = event.target["descriptionText"].value;
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
const item = {
src: itemImage,
title: itemTitle,
description: itemDescription,
};
this.list.push(item);
this.renderListItems();
if (window.innerWidth > 1024){
this.removeSlick();
}
if (window.innerWidth > 1024){
this.addSlick();
}
this.resetInputs();
}
}
renderListItems() {
let itemsSlider = "";
this.list.forEach(function (item) {
itemsSlider += `
<li class="slider-content" data-test="item-list">
<figure>
<img src="${item.src}" alt="${item.title}" data-test="image-item-list"/>
<h3 data-test="title-item-list">${item.title}</h3>
<figcaption data-test="description-item-list">
${item.description}
</figcaption>
</figure>
</li>
`;
});
this.slider.innerHTML = itemsSlider;
}
addSlick () {
$(".slider-list").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
arrows: true,
dots: true,
});
}
removeSlick () {
$(".slider-list").slick('unslick');
}
resetInputs() {
this.imagePreview[0].innerHTML = "";
this.itemTitle.value = "";
this.itemDescription.value = "";
}
}

8
src/styles/common/global.scss Normal file
View File

@ -0,0 +1,8 @@
body {
background: $background-color;
font-family: "Poppins", sans-serif;
}
button {
cursor: pointer;
}

5
src/styles/common/reset.scss Normal file
View File

@ -0,0 +1,5 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

8
src/styles/main.scss Normal file
View File

@ -0,0 +1,8 @@
@import "utils/variables.scss";
@import "common/reset.scss";
@import "common/global.scss";
@import "partials/container.scss";
@import "partials/form.scss";
@import "partials/slider.scss";

30
src/styles/partials/container.scss Normal file
View File

@ -0,0 +1,30 @@
main{
margin: 0 130px;
}
.container {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
margin: 40px 0;
}
@media (min-width: $breakpoint-desk) {
main{
margin: 0 130px;
}
}
@media (max-width: $breakpoint-tablet) {
main{
margin: 0 16px;
}
}
@media (max-width: $breakpoint-mobile) {
main{
margin: 0 16px;
}
}

327
src/styles/partials/form.scss Normal file
View File

@ -0,0 +1,327 @@
h1 {
font-weight: 700;
font-size: 32px;
line-height: 120%;
}
input,
textarea {
border-radius: 8px;
}
textarea::placeholder,
textarea,
input::placeholder,
input,
.input-image-container {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
font-family: "Roboto", sans-serif;
color: $input-text-color;
}
.form {
width: 66.094%;
height: 284px;
margin-top: 40px;
.form-container {
.form-inputs {
display: flex;
justify-content: space-between;
width: 100%;
gap: 20px;
.input-image-container {
width: 43.975%;
height: 212.01px;
border: 2px solid $input-image-border-color;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
&::after {
content: "Imagem";
text-align: center;
pointer-events: none;
}
.input-image-content {
width: 101.174%;
height: 212.01px;
z-index: 1;
opacity: 0;
}
& label {
& span {
& img {
object-fit: cover;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
}
.form-input-descricao {
display: flex;
flex-direction: column;
width: 53.462%;
height: 284px;
gap: 20px;
.input-titulo {
width: 78.658%;
height: 56.01px;
border: 2px solid $input-titulo-border-color;
}
.description-content {
width: 100%;
height: 208.01px;
.input-descricao {
width: 100%;
height: 136px;
border: 2px solid $input-descrição-border-color;
}
& button {
background: $button-submit-color;
padding: 15.270px 19.28px;
border: 1px solid $button-submit-color;
border-radius: 8px;
margin-top: 10px;
font-weight: 700;
font-size: 16px;
color: $text-button-submit-color;
float: right;
font-family: "Poppins",sans-serif;
}
}
.input-titulo::placeholder {
padding: 16px 16px;
}
.input-descricao::placeholder {
padding: 40px 0 0 20px;
}
}
}
}
}
.input-image-content,
.input-image-container img {
position: absolute;
}
@media (min-width: $breakpoint-desk) {
h1 {
font-size: 64px;
}
textarea::placeholder,
textarea,
input::placeholder,
input,
.input-image-container {
font-size: 32px;
line-height: 48px;
}
.form {
width: 60.0246%;
height: 496px;
.form-container {
.form-inputs {
.input-image-container {
width: 44.904%;
height: 400px;
&::after {
font-weight: 400;
font-size: 32px;
line-height: 48px;
}
.input-image-content {
width: 100.669%;
height: 400px;
}
}
.form-input-descricao {
width: 54.262%;
height: 496px;
gap: 16px;
.input-titulo {
width: 79.311%;
height: 64px;
}
.description-content {
height: 416px;
.input-descricao {
height: 320px;
}
& button {
padding: 15.151px 19.046px;
font-size: 32px;
}
}
.input-titulo::placeholder {
padding: 10.43px 0 10.14px 16.05px;
}
.input-descricao::placeholder {
padding: 40.66px 16.77px;
}
}
}
}
}
}
@media (max-width: $breakpoint-tablet) {
.form {
width: 99.874%;
height: 876.78px;
.form-container {
height: 100%;
.form-inputs {
flex-direction: column;
width: 100%;
height: 100%;
gap: 16px;
.input-image-container {
width: 100%;
height: 570px;
.input-image-content {
width: 100.403%;
height: 570px;
}
}
.form-input-descricao {
width: 100%;
height: 289.78px;
gap: 16px;
.input-titulo {
width: 100%;
height: 54.01px;
}
.description-content {
width: 100%;
height: 213.75px;
.input-descricao {
width: 100%;
height: 131.15px;
}
& button {
margin-top: 20.21px;
width: 100%;
padding: 15.270px 0;
}
}
}
}
}
}
}
@media (max-width: $breakpoint-mobile) {
.form {
width: 100%;
height: 500.3px;
.form-container {
.form-inputs {
gap: 17px;
.input-image-container {
width: 100%;
height: 212px;
.input-image-content {
width: 100.945%;
height: 212px;
}
}
.form-input-descricao {
width: 100%;
height: 274.3px;
gap: 19.43px;
.input-titulo {
width: 100%;
height: 54.01px;
}
.description-content {
width: 100%;
height: 197.87px;
& button {
width: 100%;
height: 56px;
margin-top: 6px;
}
}
.input-titulo::placeholder {
padding: 15px 15.69px;
}
.input-descricao::placeholder {
padding: 36.43px 0 0 15.69px;
}
}
}
}
}
}
@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-1907){
h1 {
font-size: 64px;
}
textarea::placeholder,
textarea,
input::placeholder,
input,
.input-image-container {
font-size: 32px;
line-height: 48px;
}
.form {
width: 59.9714%;
height: 496px;
.form-container {
.form-inputs {
.input-image-container {
width: 44.906%;
height: 400px;
&::after {
font-weight: 400;
font-size: 32px;
line-height: 48px;
}
.input-image-content {
height: 400px;
}
}
.form-input-descricao {
width: 54.262%;
height: 496px;
gap: 16px;
.input-titulo {
width: 79.311%;
height: 64px;
}
.description-content {
height: 416px;
.input-descricao {
height: 320px;
}
& button {
padding: 15.151px 19.046px;
font-size: 32px;
}
}
.input-titulo::placeholder {
padding: 10.43px 0 10.14px 16.05px;
}
.input-descricao::placeholder {
padding: 40.66px 16.77px;
}
}
}
}
}
}

314
src/styles/partials/slider.scss Normal file
View File

@ -0,0 +1,314 @@
h2 {
font-weight: 700;
font-size: 32px;
line-height: 120%;
}
.slider-container {
width: 100%;
margin-top: 60px;
margin-bottom: 125px;
& ul {
width: 100%;
margin-top: 38px;
display: table;
table-layout: fixed;
border-collapse: collapse;
& .slider-content {
background: $background-color;
box-shadow: 0px 4px 16px $slider-content-shadow-color;
border-radius: 8px;
height: 424px;
list-style: none;
display: inline-block;
& figure {
width: 100%;
& img {
width: 100%;
object-fit: cover;
height: 212px;
border-radius: 8px;
}
& h3 {
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: $title-item-list-color;
height: 60.01px;
margin: 24px 24px 8px 24px;
overflow-y: auto;
}
& figcaption {
margin: 0 24px 24px 24px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: $description-item-list-color;
max-height: 91px;
overflow-y: auto;
}
}
}
}
}
.slick-slide {
margin: 0 10.5px;
}
.slick-list {
margin: 0 -10.5px;
}
.slick-track{
display: flex !important;
justify-content: center;
}
.slick-prev {
background: url("svgs/right arrow.svg") no-repeat center center !important;
border: none;
left: -40.36px;
font-size: 0;
background-size: 13.64px 29.47px;
width: 13.64px;
height: 29.47px;
}
.slick-next {
background: url("svgs/left arrow.svg") no-repeat center center !important;
border: none;
font-size: 0;
background-size: 13.64px 29.47px;
right: -40.36px;
width: 13.64px;
height: 29.47px;
}
.slick-prev:before,
.slick-next:before {
font-size: 0;
opacity: unset;
}
.slick-dotted.slick-slider {
margin-bottom: 21px;
}
.slick-dots li {
width: auto;
margin: 0;
}
.slick-dots li button {
width: auto;
height: 17px;
display: flex;
align-items: center;
}
.slick-dots li button:before {
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 25px;
color: $slider-ellipse-color;
font-size: 10.01px;
width: 10.01px;
height: 10.01px;
opacity: unset;
}
.slick-dots li.slick-active button:before {
border: 0.5px solid $slider-ellipse-color;
color: transparent;
border-radius: 100px;
width: 15.49px;
height: 15.49px;
opacity: unset;
}
@media (min-width: $breakpoint-desk) {
h2 {
font-size: 64px;
}
.slider-container {
width: 100%;
margin-top: 60px;
margin-bottom: 125px;
& ul {
width: 100%;
margin-top: 41px;
& .slider-content {
width: 544px;
height: 768px;
& figure {
& img {
width: 544px;
height: 400px;
}
& h3 {
font-weight: 700;
font-size: 48px;
line-height: 56px;
height: 120px;
}
& figcaption {
font-weight: 400;
font-size: 32px;
line-height: 48px;
max-height: 192px;
}
}
}
}
}
.slick-prev {
left: -70px;
width: 26px;
height: 58px;
background-size: 26px 58px !important;
}
.slick-next {
right: -70px;
width: 26px;
height: 58px;
background-size: 26px 58px !important;
}
.slick-dots li button:before {
font-size: 20.01px;
width: 20.01px;
height: 20.01px;
}
.slick-dots li.slick-active button:before {
width: 25.49px;
height: 25.49px;
}
}
@media (max-width: $breakpoint-tablet) {
.slider-container {
margin-top: 40.22px;
margin-bottom: 0;
position: relative;
& ul {
margin-top: 32px;
display: flex;
flex-direction: column;
justify-content: center;
& .slider-content {
width: 100%;
height: 710px;
padding: 0;
min-height: 710px;
display: flex;
flex-direction: column;
justify-content: space-between;
&:not(:first-child) {
margin-left: 0;
margin-top: 24px;
}
& figure {
& img {
width: 100%;
height: 570px;
object-position: top;
height: 570px;
border-radius: 8px;
}
& h3 {
margin: 14px 24px 8px 24px;
color: $title-item-list-color;
}
& figcaption {
margin: 0 24px 24px 24px;
}
}
}
}
}
.slick-dots li button {
display: none;
}
.slick-list {
width: 100%;
}
}
@media (max-width: $breakpoint-mobile) {
.slider-container {
margin-top: 40.7px;
margin-bottom: 77px;
& ul {
margin-top: 32px;
& .slider-content {
width: 100%;
height: 400px;
min-height: 400px;
& figure {
& img {
width: 100%;
height: 212px;
object-fit: cover;
}
& h3 {
color: $title-item-list-color;
}
& figcaption {
margin: 0 24px 24px 24px;
}
}
}
}
}
}
@media(width: $breakpoint-desk-1440) {
.slider-content {
width: 279px !important;
}
}
@media (max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425) {
.slider-container {
h2 {
font-size: 64px;
}
& ul {
& .slider-content {
width: 544px;
min-height: 768px;
& img {
width: 544px;
height: 400px !important;
}
& h3 {
font-weight: 700;
font-size: 48px !important;
line-height: 56px !important;
height: 120px !important;
}
& figcaption {
font-weight: 400;
font-size: 32px !important;
line-height: 48px !important;
max-height: 192px !important;
}
}
}
}
}

29
src/styles/utils/variables.scss Normal file
View File

@ -0,0 +1,29 @@
// Colors
$background-color: #ffffff;
$title-form-color: #000000;
$input-image-border-color: #e5e5e5;
$input-text-color: #858585;
$input-titulo-border-color: #d6d6d6;
$input-descrição-border-color: #d6d6d6;
$button-submit-color: #ff5a5f;
$text-button-submit-color: #ffffff;
$title-list-color: #000000;
$title-item-list-color: #333333;
$description-item-list-color: #858585;
$slider-ellipse-color: #858585;
$slider-content-shadow-color: #00000014;
// Breakpoints
$breakpoint-desk: 2500px;
$breakpoint-desk-2425: 2425px;
$breakpoint-desk-1907: 1907px;
$breakpoint-desk-1440: 1440px;
$breakpoint-tablet: 1025px;
$breakpoint-mobile: 491px;

53
src/templates/index.html Normal file
View File

@ -0,0 +1,53 @@
<!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" />
<title>Challenge Tourist Attractions</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<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" />
</head>
<body>
<main>
<section class="container">
<h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
<form class="form">
<div class="form-container">
<div class="form-inputs">
<div class="input-image-container" data-test="input-image">
<label for="filearea"><span class="image"></span></label>
<input type="file" accept="image/*" class="input-image-content" name="filearea" id="inputImage" />
</div>
<div class="form-input-descricao">
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
<div class="description-content">
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descrição" name="item-description" rows="10" cols="30"></textarea>
<button class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
</div>
</div>
</div>
</div>
</form>
<div class="slider-container">
<h2 data-test="title-list">Pontos Turísticos</h2>
<ul class="slider-list" data-test="container-item-list">
</ul>
</div>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<script src="bundle.js"></script>
</body>
</html>