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

style: corrigindo tamanhos conforme o figma

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-23 16:59:22 -03:00
parent c220698f84
commit 3df8bbd5ae
4 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/components/form.js
View File

@ -73,6 +73,7 @@ export class Form {
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") { if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
const item = { const item = {
src: itemImage, src: itemImage,
alt: "Imagem no Slider",
title: itemTitle, title: itemTitle,
description: itemDescription, description: itemDescription,
}; };
@ -98,7 +99,7 @@ export class Form {
itemsSlider += ` itemsSlider += `
<li class="slider-content" data-test="container-item-list"> <li class="slider-content" data-test="container-item-list">
<figure> <figure>
<img src="${item.src}" alt="" data-test="image-item-list"/> <img src="${item.src}" alt="${item.title}" data-test="image-item-list"/>
<h3 data-test="title-item-list">${item.title}</h3> <h3 data-test="title-item-list">${item.title}</h3>
<figcaption data-test="description-item-list"> <figcaption data-test="description-item-list">
${item.description} ${item.description}

4
src/styles/partials/container.scss
View File

@ -1,5 +1,5 @@
.container { .container {
width: 81.875%; width: 81.999%;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -14,7 +14,7 @@
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.container { .container {
width: 96.87%; width: 96.924%;
} }
} }

92
src/styles/partials/form.scss
View File

@ -24,8 +24,8 @@ input,
color: $input-text-color; color: $input-text-color;
} }
form { .form {
width: 66.151%; width: 66.158%;
height: 284px; height: 284px;
margin-top: 40px; margin-top: 40px;
.form-container { .form-container {
@ -74,13 +74,13 @@ form {
height: 284px; height: 284px;
gap: 20px; gap: 20px;
.input-titulo { .input-titulo {
width: 78.657%; width: 78.658%;
height: 56px; height: 56.01px;
border: 2px solid $input-titulo-border-color; border: 2px solid $input-titulo-border-color;
} }
.description-content { .description-content {
width: 100%; width: 100%;
height: 208px; height: 208.01px;
.input-descricao { .input-descricao {
width: 100%; width: 100%;
height: 136px; height: 136px;
@ -88,19 +88,22 @@ form {
} }
& button { & button {
background: $button-submit-color; background: $button-submit-color;
padding: 16px 20px; padding: 15.270px 19.28px;
border: 1px solid $button-submit-color; border: 1px solid $button-submit-color;
border-radius: 8px; border-radius: 8px;
margin-top: 16px; margin-top: 10px;
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
color: $text-button-submit-color; color: $text-button-submit-color;
float: right; float: right;
font-family: "Poppins",sans-serif;
} }
} }
.input-descricao, .input-titulo::placeholder {
.input-titulo { padding: 16px 16px;
padding: 10px 16px; }
.input-descricao::placeholder {
padding: 40px 0 0 20px;
} }
} }
} }
@ -122,14 +125,13 @@ form {
input::placeholder, input::placeholder,
input, input,
.input-image-container { .input-image-container {
font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
form { .form {
width: 60.072%; width: 59.9714%;
height: 416px; height: 496px;
.form-container { .form-container {
.form-inputs { .form-inputs {
.input-image-container { .input-image-container {
@ -158,14 +160,14 @@ form {
height: 320px; height: 320px;
} }
& button { & button {
padding: 16px 20px; padding: 15.151px 19.046px;
border-radius: 8px;
margin-top: 16px;
font-weight: 700;
font-size: 32px; font-size: 32px;
} }
} }
.input-descricao { .input-titulo::placeholder {
padding: 10.43px 0 10.14px 16.05px;
}
.input-descricao::placeholder {
padding: 40.66px 16.77px; padding: 40.66px 16.77px;
} }
} }
@ -175,13 +177,15 @@ form {
} }
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
form { .form {
width: 100%; width: 100%;
height: 873.78px; height: 876.78px;
.form-container { .form-container {
height: 100%;
.form-inputs { .form-inputs {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
gap: 16px; gap: 16px;
.input-image-container { .input-image-container {
width: 100%; width: 100%;
@ -193,29 +197,30 @@ form {
} }
.form-input-descricao { .form-input-descricao {
width: 100%; width: 100%;
height: 287.78px; height: 289.78px;
gap: 16px; gap: 16px;
.input-titulo { .input-titulo {
width: 100%; width: 100%;
height: 56px; height: 54.01px;
} }
.description-content { .description-content {
width: 100%; width: 100%;
height: 215.78px; height: 213.75px;
.input-descricao { .input-descricao {
width: 100%; width: 100%;
height: 136px; height: 131.15px;
} }
& button { & button {
margin-top: 20.21px;
width: 100%; width: 100%;
padding: 16px 0; padding: 15.270px 0;
float: none; // float: none;
} }
} }
.input-descricao, // .input-descricao,
.input-titulo { // .input-titulo {
padding: 10px 16px; // padding: 10px 16px;
} // }
} }
} }
} }
@ -223,30 +228,41 @@ form {
} }
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {
form { .form {
height: 500.3px; height: 500.3px;
.form-container { .form-container {
.form-inputs { .form-inputs {
gap: 17px;
.input-image-container { .input-image-container {
width: 343px;
height: 212px; height: 212px;
.input-image-content { .input-image-content {
width: 343px;
height: 212px; height: 212px;
} }
} }
.form-input-descricao { .form-input-descricao {
height: 272.3px; width: 343px;
height: 274.3px;
gap: 19.43px;
.input-titulo {
width: 100%;
height: 54.01px;
}
.description-content { .description-content {
width: 100%; width: 100%;
height: 200.3px; height: 200.87px;
& button { & button {
width: 100%; width: 100%;
height: 56px; height: 56px;
margin-top: 8.3px; margin-top: 10.73px;
} }
} }
.input-descricao, .input-titulo::placeholder {
.input-titulo { padding: 15px 15.69px;
padding: 10px 16px; }
.input-descricao::placeholder {
padding: 36.43px 0 0 15.69px;
} }
} }
} }

29
src/styles/partials/slider.scss
View File

@ -1,12 +1,11 @@
h2 { h2 {
width: 100%;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
} }
.slider-container { .slider-container {
margin-top: 60px; margin-top: 60px;
margin-bottom: 128px; margin-bottom: 125px;
.slider { .slider {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
@ -19,7 +18,7 @@ h2 {
background: $background-color; background: $background-color;
box-shadow: 0px 4px 16px $slider-content-shadow-color; box-shadow: 0px 4px 16px $slider-content-shadow-color;
border-radius: 8px; border-radius: 8px;
width: 279px; width: 279.01px;
height: auto; height: auto;
min-height: 424px; min-height: 424px;
list-style: none; list-style: none;
@ -29,7 +28,7 @@ h2 {
& img { & img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
height: 212px; height: 212.01px;
border-radius: 8px; border-radius: 8px;
} }
& h3 { & h3 {
@ -38,7 +37,7 @@ h2 {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $title-item-list-color; color: $title-item-list-color;
height: 60px; height: 60.01px;
margin: 24px 24px 8px 24px; margin: 24px 24px 8px 24px;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: none; -ms-overflow-style: none;
@ -88,13 +87,15 @@ h2 {
height: 29.47px; height: 29.47px;
} }
.slick-prev:before, .slick-next:before { .slick-prev:before, .slick-next:before {
font-size: 0; font-size: 0;
opacity: unset; opacity: unset;
} }
.slick-dotted.slick-slider {
margin-bottom: 21px;
}
.slick-dots li { .slick-dots li {
width: auto; width: auto;
margin: 0; margin: 0;
@ -115,6 +116,8 @@ h2 {
top: 25px; top: 25px;
color: $slider-ellipse-color; color: $slider-ellipse-color;
font-size: 10.01px; font-size: 10.01px;
width: 10.01px;
height: 10.01px;
opacity: unset; opacity: unset;
} }
@ -133,15 +136,15 @@ h2 {
} }
.slider-container { .slider-container {
margin-top: 120px; margin-top: 60px;
.slider { .slider {
& ul { & ul {
margin-top: 41px; margin-top: 41px;
& .slider-content { & .slider-content {
width: 544px;
width: 544px; width: 544px;
min-height: 768px; min-height: 768px;
& img { & img {
width: 544px;
height: 400px; height: 400px;
} }
& h3 { & h3 {
@ -178,6 +181,8 @@ h2 {
.slick-dots li button:before { .slick-dots li button:before {
font-size: 20.01px; font-size: 20.01px;
width: 20.01px;
height: 20.01px;
} }
.slick-dots li.slick-active button:before { .slick-dots li.slick-active button:before {
@ -188,8 +193,8 @@ h2 {
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.slider-container { .slider-container {
margin-top: 60px; margin-top: 40.22px;
margin-bottom: 64px; margin-bottom: 0;
position: relative; position: relative;
.slider { .slider {
width: 100%; width: 100%;
@ -218,6 +223,7 @@ h2 {
border-radius: 8px; border-radius: 8px;
} }
& h3 { & h3 {
margin: 14px 24px 8px 24px;
color: $title-item-list-color; color: $title-item-list-color;
} }
& figcaption { & figcaption {
@ -244,6 +250,7 @@ h2 {
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {
.slider-container { .slider-container {
margin-top: 40.7px; margin-top: 40.7px;
margin-bottom: 77px;
.slider { .slider {
& ul { & ul {
margin-top: 32px; margin-top: 32px;