feat(TouristAttractions): Estiliza cards
This commit is contained in:
parent
6d206516b6
commit
354ab5660e
BIN
src/Assets/centroHistoricodeParaty.png
Normal file
BIN
src/Assets/centroHistoricodeParaty.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 460 KiB |
BIN
src/Assets/cristoRedentor.png
Normal file
BIN
src/Assets/cristoRedentor.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 255 KiB |
BIN
src/Assets/ilhaGrande.png
Normal file
BIN
src/Assets/ilhaGrande.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 397 KiB |
BIN
src/Assets/paoDeAcucar.png
Normal file
BIN
src/Assets/paoDeAcucar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 337 KiB |
@ -18,10 +18,12 @@ export class TouristAttractions {
|
|||||||
this.inputTitle = document.querySelector('.input-text__titulo');
|
this.inputTitle = document.querySelector('.input-text__titulo');
|
||||||
this.inputDescription = document.querySelector('.input-text__descricao');
|
this.inputDescription = document.querySelector('.input-text__descricao');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
events () {
|
events () {
|
||||||
this.inputFile.addEventListener('change', this.imgPreview.bind(this), false);
|
this.inputFile.addEventListener('change', this.imgPreview.bind(this));
|
||||||
this.form.addEventListener('submit', this.addProperty.bind(this));
|
this.form.addEventListener('submit', this.addProperty.bind(this));
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -47,9 +49,6 @@ export class TouristAttractions {
|
|||||||
img.classList.add('img-result');
|
img.classList.add('img-result');
|
||||||
|
|
||||||
|
|
||||||
this.labelInput.innerText = "";
|
|
||||||
|
|
||||||
|
|
||||||
this.labelInput.appendChild(img);
|
this.labelInput.appendChild(img);
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -57,6 +56,7 @@ export class TouristAttractions {
|
|||||||
|
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
|
|
||||||
|
this.labelInput.innerText = "";
|
||||||
this.labelInput.style.border = "none";
|
this.labelInput.style.border = "none";
|
||||||
|
|
||||||
|
|
||||||
@ -97,6 +97,8 @@ export class TouristAttractions {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
renderListItems () {
|
renderListItems () {
|
||||||
let spotStructure = '';
|
let spotStructure = '';
|
||||||
|
|
||||||
@ -109,9 +111,13 @@ export class TouristAttractions {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="result-card__text">
|
<div class="result-card__text">
|
||||||
<h2 class="result-card__title">${i.titulo}</h2>
|
<div class="card__h2">
|
||||||
|
<p class="result-card__title">${i.titulo}</p>
|
||||||
|
</div>
|
||||||
|
<div class="card__p">
|
||||||
<p class="result-card__description">${i.description}</p>
|
<p class="result-card__description">${i.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
|
1
src/scripts/components/slick.min.js
vendored
Normal file
1
src/scripts/components/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -2,4 +2,5 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
@ -144,3 +144,57 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-cards {
|
||||||
|
display: flex;
|
||||||
|
padding: 41px 63px;
|
||||||
|
|
||||||
|
.wrapper-ul__cards {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 10px;
|
||||||
|
|
||||||
|
.wrapper-cards__li {
|
||||||
|
width: 279px;
|
||||||
|
|
||||||
|
|
||||||
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.result-card__img {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-card__text {
|
||||||
|
margin: 24px;
|
||||||
|
|
||||||
|
.card__h2 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
width: 231px;
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: $black-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__p {
|
||||||
|
width: 231px;
|
||||||
|
height: 96px;
|
||||||
|
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: $grey-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -8,6 +8,9 @@ $grey-100: #d6d6d6;
|
|||||||
$grey-200: #e5e5e5;
|
$grey-200: #e5e5e5;
|
||||||
$grey-500: #858585;
|
$grey-500: #858585;
|
||||||
|
|
||||||
|
$black-500: #333333;
|
||||||
|
|
||||||
$red-500: #ff5a5f;
|
$red-500: #ff5a5f;
|
||||||
$red-700: #e93137;
|
$red-700: #e93137;
|
||||||
|
|
||||||
|
|
||||||
|
@ -48,14 +48,17 @@
|
|||||||
|
|
||||||
<ul class="wrapper-ul__cards"></ul>
|
<ul class="wrapper-ul__cards"></ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||||
|
<script src="../scripts/components/slick.min.js"></script> -->
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user