style: corrigindo tamanhos conforme o figma
This commit is contained in:
parent
c220698f84
commit
3df8bbd5ae
@ -73,6 +73,7 @@ export class Form {
|
||||
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
|
||||
const item = {
|
||||
src: itemImage,
|
||||
alt: "Imagem no Slider",
|
||||
title: itemTitle,
|
||||
description: itemDescription,
|
||||
};
|
||||
@ -98,7 +99,7 @@ export class Form {
|
||||
itemsSlider += `
|
||||
<li class="slider-content" data-test="container-item-list">
|
||||
<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>
|
||||
<figcaption data-test="description-item-list">
|
||||
${item.description}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.container {
|
||||
width: 81.875%;
|
||||
width: 81.999%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
.container {
|
||||
width: 96.87%;
|
||||
width: 96.924%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,8 +24,8 @@ input,
|
||||
color: $input-text-color;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 66.151%;
|
||||
.form {
|
||||
width: 66.158%;
|
||||
height: 284px;
|
||||
margin-top: 40px;
|
||||
.form-container {
|
||||
@ -74,13 +74,13 @@ form {
|
||||
height: 284px;
|
||||
gap: 20px;
|
||||
.input-titulo {
|
||||
width: 78.657%;
|
||||
height: 56px;
|
||||
width: 78.658%;
|
||||
height: 56.01px;
|
||||
border: 2px solid $input-titulo-border-color;
|
||||
}
|
||||
.description-content {
|
||||
width: 100%;
|
||||
height: 208px;
|
||||
height: 208.01px;
|
||||
.input-descricao {
|
||||
width: 100%;
|
||||
height: 136px;
|
||||
@ -88,19 +88,22 @@ form {
|
||||
}
|
||||
& button {
|
||||
background: $button-submit-color;
|
||||
padding: 16px 20px;
|
||||
padding: 15.270px 19.28px;
|
||||
border: 1px solid $button-submit-color;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: $text-button-submit-color;
|
||||
float: right;
|
||||
font-family: "Poppins",sans-serif;
|
||||
}
|
||||
}
|
||||
.input-descricao,
|
||||
.input-titulo {
|
||||
padding: 10px 16px;
|
||||
.input-titulo::placeholder {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
.input-descricao::placeholder {
|
||||
padding: 40px 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,14 +125,13 @@ form {
|
||||
input::placeholder,
|
||||
input,
|
||||
.input-image-container {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60.072%;
|
||||
height: 416px;
|
||||
.form {
|
||||
width: 59.9714%;
|
||||
height: 496px;
|
||||
.form-container {
|
||||
.form-inputs {
|
||||
.input-image-container {
|
||||
@ -158,14 +160,14 @@ form {
|
||||
height: 320px;
|
||||
}
|
||||
& button {
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
font-weight: 700;
|
||||
padding: 15.151px 19.046px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.input-descricao {
|
||||
.input-titulo::placeholder {
|
||||
padding: 10.43px 0 10.14px 16.05px;
|
||||
}
|
||||
.input-descricao::placeholder {
|
||||
padding: 40.66px 16.77px;
|
||||
}
|
||||
}
|
||||
@ -175,13 +177,15 @@ form {
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
form {
|
||||
.form {
|
||||
width: 100%;
|
||||
height: 873.78px;
|
||||
height: 876.78px;
|
||||
.form-container {
|
||||
height: 100%;
|
||||
.form-inputs {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
.input-image-container {
|
||||
width: 100%;
|
||||
@ -193,29 +197,30 @@ form {
|
||||
}
|
||||
.form-input-descricao {
|
||||
width: 100%;
|
||||
height: 287.78px;
|
||||
height: 289.78px;
|
||||
gap: 16px;
|
||||
.input-titulo {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
height: 54.01px;
|
||||
}
|
||||
.description-content {
|
||||
width: 100%;
|
||||
height: 215.78px;
|
||||
height: 213.75px;
|
||||
.input-descricao {
|
||||
width: 100%;
|
||||
height: 136px;
|
||||
height: 131.15px;
|
||||
}
|
||||
& button {
|
||||
margin-top: 20.21px;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
float: none;
|
||||
padding: 15.270px 0;
|
||||
// float: none;
|
||||
}
|
||||
}
|
||||
.input-descricao,
|
||||
.input-titulo {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
// .input-descricao,
|
||||
// .input-titulo {
|
||||
// padding: 10px 16px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,30 +228,41 @@ form {
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
form {
|
||||
.form {
|
||||
height: 500.3px;
|
||||
.form-container {
|
||||
.form-inputs {
|
||||
gap: 17px;
|
||||
.input-image-container {
|
||||
width: 343px;
|
||||
height: 212px;
|
||||
.input-image-content {
|
||||
width: 343px;
|
||||
height: 212px;
|
||||
}
|
||||
}
|
||||
.form-input-descricao {
|
||||
height: 272.3px;
|
||||
width: 343px;
|
||||
height: 274.3px;
|
||||
gap: 19.43px;
|
||||
.input-titulo {
|
||||
width: 100%;
|
||||
height: 54.01px;
|
||||
}
|
||||
.description-content {
|
||||
width: 100%;
|
||||
height: 200.3px;
|
||||
height: 200.87px;
|
||||
& button {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
margin-top: 8.3px;
|
||||
margin-top: 10.73px;
|
||||
}
|
||||
}
|
||||
.input-descricao,
|
||||
.input-titulo {
|
||||
padding: 10px 16px;
|
||||
.input-titulo::placeholder {
|
||||
padding: 15px 15.69px;
|
||||
}
|
||||
.input-descricao::placeholder {
|
||||
padding: 36.43px 0 0 15.69px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
h2 {
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 128px;
|
||||
margin-bottom: 125px;
|
||||
.slider {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@ -19,7 +18,7 @@ h2 {
|
||||
background: $background-color;
|
||||
box-shadow: 0px 4px 16px $slider-content-shadow-color;
|
||||
border-radius: 8px;
|
||||
width: 279px;
|
||||
width: 279.01px;
|
||||
height: auto;
|
||||
min-height: 424px;
|
||||
list-style: none;
|
||||
@ -29,7 +28,7 @@ h2 {
|
||||
& img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 212px;
|
||||
height: 212.01px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
& h3 {
|
||||
@ -38,7 +37,7 @@ h2 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $title-item-list-color;
|
||||
height: 60px;
|
||||
height: 60.01px;
|
||||
margin: 24px 24px 8px 24px;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
@ -88,13 +87,15 @@ h2 {
|
||||
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;
|
||||
@ -115,6 +116,8 @@ h2 {
|
||||
top: 25px;
|
||||
color: $slider-ellipse-color;
|
||||
font-size: 10.01px;
|
||||
width: 10.01px;
|
||||
height: 10.01px;
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
@ -133,15 +136,15 @@ h2 {
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
margin-top: 120px;
|
||||
margin-top: 60px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 41px;
|
||||
& .slider-content {
|
||||
width: 544px;
|
||||
width: 544px;
|
||||
min-height: 768px;
|
||||
& img {
|
||||
width: 544px;
|
||||
height: 400px;
|
||||
}
|
||||
& h3 {
|
||||
@ -178,6 +181,8 @@ h2 {
|
||||
|
||||
.slick-dots li button:before {
|
||||
font-size: 20.01px;
|
||||
width: 20.01px;
|
||||
height: 20.01px;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button:before {
|
||||
@ -188,8 +193,8 @@ h2 {
|
||||
|
||||
@media (max-width: $breakpoint-tablet) {
|
||||
.slider-container {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 64px;
|
||||
margin-top: 40.22px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
.slider {
|
||||
width: 100%;
|
||||
@ -218,6 +223,7 @@ h2 {
|
||||
border-radius: 8px;
|
||||
}
|
||||
& h3 {
|
||||
margin: 14px 24px 8px 24px;
|
||||
color: $title-item-list-color;
|
||||
}
|
||||
& figcaption {
|
||||
@ -244,6 +250,7 @@ h2 {
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.slider-container {
|
||||
margin-top: 40.7px;
|
||||
margin-bottom: 77px;
|
||||
.slider {
|
||||
& ul {
|
||||
margin-top: 32px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user