diff --git a/src/assets/images/arrowLeftmaior.svg b/src/assets/images/arrowLeftmaior.svg new file mode 100644 index 0000000..94c5dc4 --- /dev/null +++ b/src/assets/images/arrowLeftmaior.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/arrowLeft.svg b/src/assets/images/arrowLeftmenor.svg similarity index 50% rename from src/assets/images/arrowLeft.svg rename to src/assets/images/arrowLeftmenor.svg index c8e2f1a..7e7106e 100644 --- a/src/assets/images/arrowLeft.svg +++ b/src/assets/images/arrowLeftmenor.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/arrowRightmaior.svg b/src/assets/images/arrowRightmaior.svg new file mode 100644 index 0000000..3632b66 --- /dev/null +++ b/src/assets/images/arrowRightmaior.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/arrowRight.svg b/src/assets/images/arrowRightmenor.svg similarity index 100% rename from src/assets/images/arrowRight.svg rename to src/assets/images/arrowRightmenor.svg diff --git a/src/scripts/components/TouristAttractions.js b/src/scripts/components/TouristAttractions.js index bde7a6d..7b8ecbe 100644 --- a/src/scripts/components/TouristAttractions.js +++ b/src/scripts/components/TouristAttractions.js @@ -2,29 +2,21 @@ export class TouristAttractions { constructor () { this.list = [ { - // image: 'img1-279.png', - // image: 'img1-544.png', image: 'img1-992.png', titulo: 'Pão de Açucar', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - // image: 'img2-279.png', - // image: 'img2-544.png', image: 'img2-992.png', titulo: 'Cristo Redentor', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - // image: 'img3-279.png', - // image: 'img3-544.png', image: 'img3-992.png', titulo: 'Ilha Grande', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - // image: 'img4-279.png', - // image: 'img4-544.png', image: 'img4-992.png', titulo: 'Centro Histórico de Paraty', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', @@ -89,8 +81,10 @@ export class TouristAttractions {
-

${i.titulo}

-

${i.description}

+
+

${i.titulo}

+

${i.description}

+
`; }); @@ -111,8 +105,6 @@ export class TouristAttractions { } }; - - removeSlick () { if(window.screen.width > 1024) { $('.wrapper-ul__cards').slick('unslick'); diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index b279581..77bf8cb 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -115,7 +115,7 @@ object-fit: cover; } -@media only screen and (width: 490px){ +@media only screen and (width: 375px){ .container-pai { .container-h1-input { .form__tourist-attractions { @@ -152,6 +152,43 @@ } } } + +@media only screen and (max-width: 490px) { + .container-pai { + .container-h1-input { + .form__tourist-attractions { + .container-input { + .wrapper-input__img { + label { + width: 100%; + height: 212px; + } + } + .input__span { + width: 100%px; + height: 212px; + } + .wrapper-input__text { + .input-text__titulo { + width: 100%px; + height: 54px; + } + .input-text__descricao { + width: 100%px; + height: 131.14px; + } + .wrapper-button-submit { + .button-submit__input{ + width: 100%px; + height: 56px; + } + } + } + } + } + } + } +} @media only screen and (max-width: 1024px) { .container-pai { .container-h1-input { diff --git a/src/styles/partials/result.scss b/src/styles/partials/result.scss index 1bff07a..fcb4030 100644 --- a/src/styles/partials/result.scss +++ b/src/styles/partials/result.scss @@ -17,20 +17,12 @@ width: 100%; column-gap: 10.5px; .slick-prev { - background: url('arrowLeft.svg') no-repeat center center !important; - height: 58px; - width: 26px; - left: -4.56%; &::before { display: none; } } .slick-next { - background: url('arrowRight.svg') no-repeat center center !important; - height: 30px; - width: 13.64px; - right: -4.56%; &::before { display: none; } @@ -49,78 +41,172 @@ border-radius: 8px; object-fit: cover; object-position: top; + display: block; } - .result-card__title { - 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; + .container-texto { + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 24px 24px; overflow-y: scroll; - white-space: normal; - margin: 0 24px 24px; - height: 192px; - overflow-wrap: anywhere; + height: 100% !important; &::-webkit-scrollbar { - width: 4px; + width: 0; } &::-webkit-scrollbar-thumb { background: $grey-500; border-radius: 5px; border: 1px solid $white-500; } + .result-card__title { + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 48px; + color: $black-500; + margin-bottom: 8px; + height: fit-content; + overflow-wrap: anywhere; + } + .result-card__description { + font-family: 'Roboto', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + color: $grey-500; + white-space: normal; + height: 192px; + overflow-wrap: anywhere; + } } } } } -@media only screen and (max-width: 490px){ - -} - - - -@media only screen and (max-width: 1024px) { +@media only screen and (width: 375px) { .container-pai { .container-cards { .wrapper-ul__cards { - flex-direction: column; - row-gap: 24px; - column-gap: 0; .wrapper-cards__li { - .result-card__description { - height: 24px; + width: 343px; + .container-texto { + .result-card__title { + height: fit-content; + } + .result-card__description { + height: 72px; + } } } } } } } -@media only screen and (width: 1440px) { + +@media only screen and (max-width: 490px) { .container-pai { .container-cards { + .page-titulo__img__spot { + font-size: 32px; + } .wrapper-ul__cards { + flex-direction: column; + row-gap: 24px; + column-gap: 0; .wrapper-cards__li { - width: 279px; + width: 100%; + height: 400px; + .result-card__img { + height: 212px; + } + .container-texto { + height: 140px; + .result-card__title { + font-size: 24px; + height: fit-content; + line-height: 28px !important; + + } + .result-card__description { + height: 72px; + font-size: 16px; + line-height: 24px; + } + } } } } } } -@media only screen and (max-width: 2499px) { + +@media only screen and (width: 1024px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .wrapper-cards__li { + .container-texto { + .result-card__title { + height: fit-content; + } + .result-card__description { + height: 24px; + } + } + } + } + } + } +} + +@media only screen and (min-width: 491px) and (max-width: 1024px) { + .container-pai { + .container-cards { + .page-titulo__img__spot { + font-size: 32px; + } + .wrapper-ul__cards { + flex-direction: column; + row-gap: 24px; + column-gap: 0; + .wrapper-cards__li { + width: 100%; + height: 710px; + .result-card__img { + height: 570px !important; + } + .container-texto { + height: 92px; + .result-card__title { + font-size: 24px; + height: fit-content; + } + .result-card__description { + height: 100%; + font-size: 16px; + line-height: 24px; + } + + } + } + } + } + } +} + +@media only screen and (width: 1440px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .wrapper-cards__li { + width: 544px; + } + } + } + } +} + +@media only screen and (min-width: 1025px) and ( max-width: 2499px) { .container-pai { .container-cards { .page-titulo__img__spot { @@ -128,34 +214,96 @@ } .wrapper-ul__cards { .slick-prev { - height: 30px; - width: 13.64px; - left: -4.56%; + background: url('arrowLeftmenor.svg') no-repeat center center !important; + left: -6.16%; + } + .slick-next { + background: url('arrowRightmenor.svg') no-repeat center center !important; + right: -6.16%; } .wrapper-cards__li { - .result-card__title { - font-size: 24px; - line-height: 28px; - height: 60px; + height: 424px; + .result-card__img { + height: 212px !important ; } - - .result-card__description { - font-size: 16px; - line-height: 24px; - height: 96px; + .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; + width: 279px !important; + } + } + } + } +} +@media only screen and (min-width: 2500px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .slick-prev { + background: url('arrowLeftmaior.svg') no-repeat center center !important; + left: -3.5%; + width: 26px; + height: 58px; + + } + .slick-next { + background: url('arrowRightmaior.svg') no-repeat center center !important; + right: -3.5%; + width: 26px; + height: 58px; + } + .wrapper-cards__li { + height: 768px; + .result-card__img { + height: 400px !important; + } + .container-texto { + height: 320px; + .result-card__title { + line-height: 56px; + } + .result-card__description { + line-height: 48px; + } + } } } } @@ -163,5 +311,23 @@ } - - +@media only screen and (min-width: 2850px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .slick-prev { + background: url('arrowLeftmaior.svg') no-repeat center center !important; + left: -2.5%; + width: 26px; + height: 58px; + } + .slick-next { + background: url('arrowRightmaior.svg') no-repeat center center !important; + right: -2.5%; + width: 26px; + height: 58px; + } + } + } + } +} diff --git a/src/styles/partials/slick-theme.scss b/src/styles/partials/slick-theme.scss index 1ce2874..9a16ace 100644 --- a/src/styles/partials/slick-theme.scss +++ b/src/styles/partials/slick-theme.scss @@ -189,6 +189,7 @@ $slick-opacity-not-active: 0.25 !default; } } &.slick-active button:before { + bottom: 21px; width: 27px; height: 27px; border: 1px solid $grey-500; @@ -196,6 +197,11 @@ $slick-opacity-not-active: 0.25 !default; } } } +@media only screen and (min-width: 2501px) { + .slick-dots { + bottom: -40px; + } +} @media only screen and (max-width: 2499px) { diff --git a/src/styles/partials/slick.scss b/src/styles/partials/slick.scss index ad163a5..feb3654 100644 --- a/src/styles/partials/slick.scss +++ b/src/styles/partials/slick.scss @@ -15,7 +15,7 @@ -webkit-tap-highlight-color: transparent; } .slick-list { - height: 432px; + height: 100%; position: relative; overflow: hidden; display: block; diff --git a/src/templates/index.html b/src/templates/index.html index d91c497..44804c7 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -4,8 +4,6 @@ - Tourist Attractions