diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js
index 08246df..6b316cf 100644
--- a/src/scripts/components/form.js
+++ b/src/scripts/components/form.js
@@ -73,7 +73,6 @@ export class Form {
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
const item = {
src: itemImage,
- alt: "Imagem no Slider",
title: itemTitle,
description: itemDescription,
};
diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss
index 50fba6e..ed44ecc 100644
--- a/src/styles/partials/container.scss
+++ b/src/styles/partials/container.scss
@@ -1,5 +1,5 @@
.container {
- width: 81.999%;
+ width: 81.946%;
display: flex;
justify-content: center;
flex-direction: column;
@@ -23,3 +23,57 @@
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%;
+ }
+}
diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss
index 448322a..0ff1a46 100644
--- a/src/styles/partials/form.scss
+++ b/src/styles/partials/form.scss
@@ -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 {
- width: 100%;
font-weight: 700;
font-size: 32px;
+ line-height: 120%;
}
input,
@@ -25,7 +23,7 @@ input,
}
.form {
- width: 66.158%;
+ width: 66.094%;
height: 284px;
margin-top: 40px;
.form-container {
@@ -35,8 +33,8 @@ input,
width: 100%;
gap: 20px;
.input-image-container {
- width: 43.976%;
- height: 212px;
+ width: 43.934%;
+ height: 212.01px;
border: 2px solid $input-image-border-color;
border-radius: 8px;
display: flex;
@@ -70,7 +68,7 @@ input,
.form-input-descricao {
display: flex;
flex-direction: column;
- width: 53.464%;
+ width: 53.462%;
height: 284px;
gap: 20px;
.input-titulo {
@@ -214,13 +212,8 @@ input,
margin-top: 20.21px;
width: 100%;
padding: 15.270px 0;
- // float: none;
}
}
- // .input-descricao,
- // .input-titulo {
- // padding: 10px 16px;
- // }
}
}
}
@@ -229,20 +222,21 @@ input,
@media (max-width: $breakpoint-mobile) {
.form {
+ width: 100%;
height: 500.3px;
.form-container {
.form-inputs {
gap: 17px;
.input-image-container {
- width: 343px;
+ width: 100%;
height: 212px;
.input-image-content {
- width: 343px;
+ width: 100%;
height: 212px;
}
}
.form-input-descricao {
- width: 343px;
+ width: 100%;
height: 274.3px;
gap: 19.43px;
.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;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss
index 021b6d1..5075724 100644
--- a/src/styles/partials/slider.scss
+++ b/src/styles/partials/slider.scss
@@ -1,6 +1,7 @@
h2 {
font-weight: 700;
font-size: 32px;
+ line-height: 120%;
}
.slider-container {
@@ -15,7 +16,6 @@ h2 {
flex-direction: row;
justify-content: center;
& .slider-content {
- background: $background-color;
box-shadow: 0px 4px 16px $slider-content-shadow-color;
border-radius: 8px;
width: 279.01px;
@@ -47,7 +47,7 @@ h2 {
}
}
& figcaption {
- margin: 0 24px 0 24px;
+ margin: 0 24px 24px 24px;
font-weight: 400;
font-size: 16px;
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;
+ }
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
index 37e6803..76c1de0 100644
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@@ -14,15 +14,54 @@ $description-item-list-color: #858585;
$slider-ellipse-color: #858585;
$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-mobile: 490px;
-
-
-//tablet 1024px até 491px
-// mobile 490px ate 280px
-// desk 1025px até 2499px
-// desk 4k > 2500px
diff --git a/src/templates/index.html b/src/templates/index.html
index e72bd19..4eced43 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -10,6 +10,7 @@
+
@@ -29,7 +30,7 @@
-
+
@@ -38,7 +39,7 @@