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