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

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 29 commits from feature/challenge-tourist-attractions into develop 2022-11-28 17:16:05 +00:00
Conversation 0 Commits 29 Files Changed 21 +76 -52
4 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3df8bbd5ae - Show all commits

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

@ -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}

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

@ -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%;
}
}

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

@ -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;
}
}
}

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

@ -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;