Entrega do Desafio #1
@ -73,7 +73,6 @@ 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,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.container {
|
.container {
|
||||||
width: 81.999%;
|
width: 81.946%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -23,3 +23,57 @@
|
|||||||
width: 91.441%;
|
width: 91.441%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2473){
|
||||||
|
.container {
|
||||||
|
width: 90.533%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2473) and (min-width: $breakpoint-desk-2425){
|
||||||
|
.container {
|
||||||
|
width: 92.300%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2393){
|
||||||
|
.container {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2393) and (min-width: $breakpoint-desk-2351){
|
||||||
|
.container {
|
||||||
|
width: 91.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2055){
|
||||||
|
.container {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){
|
||||||
|
.container {
|
||||||
|
width: 92%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2055){
|
||||||
|
.container {
|
||||||
|
width: 91%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1947){
|
||||||
|
.container {
|
||||||
|
width: 91.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1947) and (min-width: $breakpoint-desk-1445){
|
||||||
|
.container {
|
||||||
|
width: 89.533%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
@import url("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");
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
width: 100%;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
line-height: 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
@ -25,7 +23,7 @@ input,
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
width: 66.158%;
|
width: 66.094%;
|
||||||
height: 284px;
|
height: 284px;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
.form-container {
|
.form-container {
|
||||||
@ -35,8 +33,8 @@ input,
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
.input-image-container {
|
.input-image-container {
|
||||||
width: 43.976%;
|
width: 43.934%;
|
||||||
height: 212px;
|
height: 212.01px;
|
||||||
border: 2px solid $input-image-border-color;
|
border: 2px solid $input-image-border-color;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -70,7 +68,7 @@ input,
|
|||||||
.form-input-descricao {
|
.form-input-descricao {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 53.464%;
|
width: 53.462%;
|
||||||
height: 284px;
|
height: 284px;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
.input-titulo {
|
.input-titulo {
|
||||||
@ -214,13 +212,8 @@ input,
|
|||||||
margin-top: 20.21px;
|
margin-top: 20.21px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15.270px 0;
|
padding: 15.270px 0;
|
||||||
// float: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .input-descricao,
|
|
||||||
// .input-titulo {
|
|
||||||
// padding: 10px 16px;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -229,20 +222,21 @@ input,
|
|||||||
|
|
||||||
@media (max-width: $breakpoint-mobile) {
|
@media (max-width: $breakpoint-mobile) {
|
||||||
.form {
|
.form {
|
||||||
|
width: 100%;
|
||||||
height: 500.3px;
|
height: 500.3px;
|
||||||
.form-container {
|
.form-container {
|
||||||
.form-inputs {
|
.form-inputs {
|
||||||
gap: 17px;
|
gap: 17px;
|
||||||
.input-image-container {
|
.input-image-container {
|
||||||
width: 343px;
|
width: 100%;
|
||||||
height: 212px;
|
height: 212px;
|
||||||
.input-image-content {
|
.input-image-content {
|
||||||
width: 343px;
|
width: 100%;
|
||||||
height: 212px;
|
height: 212px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.form-input-descricao {
|
.form-input-descricao {
|
||||||
width: 343px;
|
width: 100%;
|
||||||
height: 274.3px;
|
height: 274.3px;
|
||||||
gap: 19.43px;
|
gap: 19.43px;
|
||||||
.input-titulo {
|
.input-titulo {
|
||||||
@ -269,3 +263,64 @@ input,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +1,7 @@
|
|||||||
h2 {
|
h2 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
line-height: 120%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-container {
|
.slider-container {
|
||||||
@ -15,7 +16,6 @@ h2 {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
& .slider-content {
|
& .slider-content {
|
||||||
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: 279.01px;
|
width: 279.01px;
|
||||||
@ -47,7 +47,7 @@ h2 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
& figcaption {
|
& figcaption {
|
||||||
margin: 0 24px 0 24px;
|
margin: 0 24px 24px 24px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -274,3 +274,581 @@ h2 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk) and (min-width: $breakpoint-desk-2425){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 544px;
|
||||||
|
min-height: 768px;
|
||||||
|
& 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2425) and (min-width: $breakpoint-desk-2351){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 523px;
|
||||||
|
min-height: 738.35px;
|
||||||
|
& img {
|
||||||
|
width: 523px;
|
||||||
|
height: 384.56px;
|
||||||
|
}
|
||||||
|
& 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2351) and (min-width: $breakpoint-desk-2335){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 510px;
|
||||||
|
min-height: 720px;
|
||||||
|
& img {
|
||||||
|
width: 510px;
|
||||||
|
height: 375px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2335) and (min-width: $breakpoint-desk-2277){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 510px;
|
||||||
|
min-height: 720px;
|
||||||
|
& img {
|
||||||
|
width: 510px;
|
||||||
|
height: 375px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2277) and (min-width: $breakpoint-desk-2203){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 490px;
|
||||||
|
min-height: 691.76px;
|
||||||
|
& img {
|
||||||
|
width: 490px;
|
||||||
|
height: 360.29px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2203) and (min-width: $breakpoint-desk-2055){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 470px;
|
||||||
|
min-height: 663.53px;
|
||||||
|
& img {
|
||||||
|
width: 470px;
|
||||||
|
height: 345.59px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2129) and (min-width: $breakpoint-desk-2055){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 455px;
|
||||||
|
min-height: 642.35px;
|
||||||
|
& img {
|
||||||
|
width: 455px;
|
||||||
|
height: 334.56px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-2055) and (min-width: $breakpoint-desk-1981){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 440px;
|
||||||
|
min-height: 621.18px;
|
||||||
|
& img {
|
||||||
|
width: 440px;
|
||||||
|
height: 323.53px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1981) and (min-width: $breakpoint-desk-1907){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 420px;
|
||||||
|
min-height: 592.94px;
|
||||||
|
& img {
|
||||||
|
width: 420px;
|
||||||
|
height: 308.82px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1907) and (min-width: $breakpoint-desk-1833){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 410px;
|
||||||
|
min-height: 578.82px;
|
||||||
|
& img {
|
||||||
|
width: 410px;
|
||||||
|
height: 301.47px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1833) and (min-width: $breakpoint-desk-1759){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 385px;
|
||||||
|
min-height: 543.53px;
|
||||||
|
& img {
|
||||||
|
width: 385px;
|
||||||
|
height: 283.09px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1759) and (min-width: $breakpoint-desk-1730){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 380px;
|
||||||
|
min-height: 543.53px;
|
||||||
|
& img {
|
||||||
|
width: 380px;
|
||||||
|
height: 283.09px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1730) and (min-width: $breakpoint-desk-1685){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 366px;
|
||||||
|
min-height: 516.71px;
|
||||||
|
& img {
|
||||||
|
width: 366px;
|
||||||
|
height: 269.12px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1685) and (min-width: $breakpoint-desk-1611){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 346px;
|
||||||
|
min-height: 488.47px;
|
||||||
|
& img {
|
||||||
|
width: 346px;
|
||||||
|
height: 254.41px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1611) and (min-width: $breakpoint-desk-1537){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 325px;
|
||||||
|
min-height: 458.82px;
|
||||||
|
& img {
|
||||||
|
width: 325px;
|
||||||
|
height: 238.97px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1537) and (min-width: $breakpoint-desk-1445){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 310px;
|
||||||
|
min-height: 437.65px;
|
||||||
|
& img {
|
||||||
|
width: 310px;
|
||||||
|
height: 227.94px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 48px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1430) and (min-width: $breakpoint-desk-1165){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 266px;
|
||||||
|
min-height: 375.53px;
|
||||||
|
& img {
|
||||||
|
width: 266px;
|
||||||
|
height: 195.59px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 24px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: $breakpoint-desk-1165) and (min-width: $breakpoint-desk-1025){
|
||||||
|
.slider-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
& ul {
|
||||||
|
& .slider-content {
|
||||||
|
width: 220px;
|
||||||
|
min-height: 309.18px;
|
||||||
|
& img {
|
||||||
|
width: 220px;
|
||||||
|
height: 161.03px;
|
||||||
|
}
|
||||||
|
& h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 56px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
& figcaption {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 24px;
|
||||||
|
max-height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -14,15 +14,54 @@ $description-item-list-color: #858585;
|
|||||||
$slider-ellipse-color: #858585;
|
$slider-ellipse-color: #858585;
|
||||||
$slider-content-shadow-color: #00000014;
|
$slider-content-shadow-color: #00000014;
|
||||||
|
|
||||||
// Breakpoint
|
// Breakpoints
|
||||||
|
|
||||||
|
$breakpoint-desk: 2501px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2473: 2473px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2425: 2425px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2393: 2393px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2351: 2351px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2335: 2335px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2277: 2277px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2203: 2203px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2129: 2129px;
|
||||||
|
|
||||||
|
$breakpoint-desk-2055: 2055px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1981: 1981px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1947: 1947px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1907: 1907px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1833: 1833px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1759: 1759px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1730: 1730px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1685: 1685px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1611: 1611px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1537: 1537px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1445: 1445px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1430: 1430px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1165: 1165px;
|
||||||
|
|
||||||
|
$breakpoint-desk-1025: 1025px;
|
||||||
|
|
||||||
$breakpoint-desk: 2500px;
|
|
||||||
$breakpoint-medium-desk: "@media (max-width: 2499) and (min-width: 1440px)";
|
|
||||||
$breakpoint-tablet: 1024px;
|
$breakpoint-tablet: 1024px;
|
||||||
|
|
||||||
$breakpoint-mobile: 490px;
|
$breakpoint-mobile: 490px;
|
||||||
|
|
||||||
|
|
||||||
//tablet 1024px até 491px
|
|
||||||
// mobile 490px ate 280px
|
|
||||||
// desk 1025px até 2499px
|
|
||||||
// desk 4k > 2500px
|
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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=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.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.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" />
|
<link rel="stylesheet" href="main.css" />
|
||||||
@ -29,7 +30,7 @@
|
|||||||
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
|
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
|
||||||
<div class="description-content">
|
<div class="description-content">
|
||||||
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
|
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
|
||||||
<button id="buttonAdicionar" class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
|
<button class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -38,7 +39,7 @@
|
|||||||
<div class="slider-container">
|
<div class="slider-container">
|
||||||
<h2 data-test="title-list">Pontos Turísticos</h2>
|
<h2 data-test="title-list">Pontos Turísticos</h2>
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<ul class="slider-list" id="slider-content">
|
<ul class="slider-list" data-test="container-item-list">
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user