******************* HTML **************
* <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div
class="swiper-overcontainer"
id="project-portfolio-swiper-overcontainer"
>
<div class="container swiper" id="project-portfolio-swiper">
<h1 class="title">Projektové portfolio</h1>
<div class="container2 swiper-wrapper">
<div class="box-cont swiper-slide">
<picture>
<source
media="(max-width: 780px)"
srcset="img/image_23_mobil.png"
/>
<source
media="(max-width: 1160px)"
srcset="img/image_23_small.png"
/>
<source media="(min-width: 1160px)" srcset="img/image_23.png" />
<img
src="img/image_23.png"
alt="Bytový Dům Arkalycká"
class="houseIMG"
/>
</picture>
<h3>Bytový Dům Brandys</h3>
<p class="percenText">% (osobitost)</p>
<p class="propertyContent">
Cupcake ipsum dolor sit amet candy canes halvah. Gummies candy
caramels cheesecake oat cake halvah gingerbread muffin. Chocolate
bonbon cotton candy marzipan cookie toffee gingerbread tootsie
roll.
</p>
<p class="propertyContent expanded">
Cupcake ipsum dolor sit amet candy canes halvah. Gummies candy
caramels cheesecake oat cake halvah gingerbread muffin. Chocolate
bonbon cotton candy marzipan cookie toffee gingerbread tootsie
roll.
</p>
<div class="more closed">
<a href="#">více</a>
<svg
class="bottomIMG"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.799 12.2722L15.3838 18.8318C15.3229 18.8941 15.262 18.9377 15.201 18.9626C15.1401 18.9875 15.0731 19 15 19C14.9269 19 14.8599 18.9875 14.799 18.9626C14.738 18.9377 14.6771 18.8941 14.6162 18.8318L8.20104 12.2722C8.06701 12.1351 8 11.9607 8 11.7489C8 11.5371 8.06701 11.3626 8.20104 11.2256C8.34726 11.0761 8.52089 11.0013 8.72193 11.0013C8.92298 11.0013 9.09661 11.0761 9.24282 11.2256L15 17.1125L20.7572 11.2256C20.9156 11.0636 21.0923 10.9889 21.2872 11.0013C21.4822 11.0138 21.6466 11.0885 21.7807 11.2256C21.9269 11.3751 22 11.5526 22 11.7582C22 11.9638 21.933 12.1351 21.799 12.2722Z"
fill="#A48E3D"
/>
</svg>
</div>
</div>
<div class="box-cont swiper-slide">
<picture>
<source
media="(max-width: 780px)"
srcset="img/image_22_mobil.png"
/>
<source
media="(max-width: 1160px)"
srcset="img/image_22_small.png"
/>
<source media="(min-width: 1160px)" srcset="img/image_22.png" />
<img
src="img/image_22.png"
alt="Bytový Dům Arkalycká"
class="houseIMG"
/>
</picture>
<h3>Výhledy Brno</h3>
<p class="percenText">% (osobitost)</p>
<p class="propertyContent">
Cupcake ipsum dolor sit amet cookie tootsie roll icing. Candy
canes lollipop cake candy canes apple pie gingerbread. I love
soufflé jelly short.
</p>
<p class="propertyContent expanded">
Cupcake ipsum dolor sit amet cookie tootsie roll icing. Candy
canes lollipop cake candy canes apple pie gingerbread. I love
soufflé jelly shortbread cupcake gingerbread. Muffin cheesecake I
love toffee wafer.
</p>
<div class="more closed">
<a href="#">více</a>
<svg
class="bottomIMG"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.799 12.2722L15.3838 18.8318C15.3229 18.8941 15.262 18.9377 15.201 18.9626C15.1401 18.9875 15.0731 19 15 19C14.9269 19 14.8599 18.9875 14.799 18.9626C14.738 18.9377 14.6771 18.8941 14.6162 18.8318L8.20104 12.2722C8.06701 12.1351 8 11.9607 8 11.7489C8 11.5371 8.06701 11.3626 8.20104 11.2256C8.34726 11.0761 8.52089 11.0013 8.72193 11.0013C8.92298 11.0013 9.09661 11.0761 9.24282 11.2256L15 17.1125L20.7572 11.2256C20.9156 11.0636 21.0923 10.9889 21.2872 11.0013C21.4822 11.0138 21.6466 11.0885 21.7807 11.2256C21.9269 11.3751 22 11.5526 22 11.7582C22 11.9638 21.933 12.1351 21.799 12.2722Z"
fill="#A48E3D"
/>
</svg>
</div>
</div>
</div>
<button class="button">KONTAKTOVAT</button>
</div>
<div class="swiper-button-next">
<!-- <img src="img/arrow_forward_right.svg" alt="right button" class="rBtn" /> -->
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.7996 42.4501C13.433 42.0501 13.2413 41.5835 13.2246 41.0501C13.208 40.5168 13.3996 40.0501 13.7996 39.6501L29.5496 23.9001L13.7996 8.15012C13.433 7.78345 13.2413 7.32512 13.2246 6.77512C13.208 6.22512 13.3996 5.75012 13.7996 5.35012C14.1663 4.95012 14.6246 4.74179 15.1746 4.72512C15.7246 4.70845 16.1996 4.90012 16.5996 5.30012L34.1496 22.8501C34.3163 23.0168 34.433 23.1835 34.4996 23.3501C34.5663 23.5168 34.5996 23.7001 34.5996 23.9001C34.5996 24.1001 34.5663 24.2835 34.4996 24.4501C34.433 24.6168 34.3163 24.7835 34.1496 24.9501L16.5996 42.5001C16.233 42.8668 15.7746 43.0501 15.2246 43.0501C14.6746 43.0501 14.1996 42.8501 13.7996 42.4501Z"
fill="#A48E3D"
/>
</svg>
</div>
<div class="swiper-button-prev">
<!-- <img src="img/arrow_forward_left.svg" alt="right button" class="lBtn" /> -->
<svg
class="imgLIB"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M34.2004 5.54988C34.567 5.94988 34.7587 6.41655 34.7754 6.94988C34.792 7.48321 34.6004 7.94987 34.2004 8.34988L18.4504 24.0999L34.2004 39.8499C34.567 40.2165 34.7587 40.6749 34.7754 41.2249C34.792 41.7749 34.6004 42.2499 34.2004 42.6499C33.8337 43.0499 33.3754 43.2582 32.8254 43.2749C32.2754 43.2915 31.8004 43.0999 31.4004 42.6999L13.8504 25.1499C13.6837 24.9832 13.567 24.8165 13.5004 24.6499C13.4337 24.4832 13.4004 24.2999 13.4004 24.0999C13.4004 23.8999 13.4337 23.7165 13.5004 23.5499C13.567 23.3832 13.6837 23.2165 13.8504 23.0499L31.4004 5.49988C31.767 5.13321 32.2254 4.94988 32.7754 4.94988C33.3254 4.94988 33.8004 5.14988 34.2004 5.54988Z"
fill="#A48E3D"
/>
</svg>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
******************* HTML **************
********************* JS *****************
document.addEventListener("DOMContentLoaded", function (e) {
const more = document.querySelectorAll(".more");
// **** Swiper animation ****
const projectPortfolioSwiper = new Swiper("#project-portfolio-swiper", {
slidesPerView: 1,
// spaceBetween: 50,
// slidesPerGroup: 2,
loop: true,
navigation: {
nextEl: "#project-portfolio-swiper-overcontainer .swiper-button-next",
prevEl: "#project-portfolio-swiper-overcontainer .swiper-button-prev",
},
breakpoints: {
790: {
slidesPerView: 2,
spaceBetween: 40,
},
1160: {
slidesPerView: 2,
spaceBetween: 50,
},
},
});
// **** Swiper animation ****
const toggleDropdownText = (expandElement) => {
if (expandElement.classList.contains("text-animated")) {
expandElement.classList.remove("text-animated");
expandElement.classList.add("text-animated-hide");
expandElement.style.display = "none";
} else {
expandElement.classList.add("text-animated");
expandElement.classList.remove("text-animated-hide");
expandElement.style.display = "block";
window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
}
};
// ***** rotate img an change text function ****
// const rotateImgChangeText = () => {
// more.forEach((moreElement) => {
// const as = moreElement.querySelector("a");
// const imgs = moreElement.querySelector(".bottomIMG");
// if (imgs.classList.contains("rotate")) {
// imgs.style.transform = "rotate(0deg)";
// imgs.classList.remove("rotate");
// as.innerText = "více";
// } else {
// imgs.style.transform = "rotate(180deg)";
// imgs.classList.add("rotate");
// as.innerText = "méně";
// }
// });
// };
// ***** rotate img an change text function ****
// ***** rotate img an change text function update ****
const rotateImgChangeText = () => {
const moreElements = document.querySelectorAll(".more");
moreElements.forEach((moreElement) => {
const as = moreElement.querySelector("a");
const imgs = moreElement.querySelector(".bottomIMG");
moreElement.classList.toggle("open");
moreElement.classList.toggle("closed");
imgs.classList.toggle("rotate");
if (moreElement.classList.contains("open")) {
as.innerText = "méně";
} else {
as.innerText = "více";
}
});
};
// ***** rotate img an change text function update ****
const onDropdownButtonClick = (e) => {
const moreParent = e.target.closest(".box-cont");
// const bottomArrowImg = moreParent.querySelector(".bottomIMG");
const propertyContent = moreParent.querySelector("p.propertyContent.expanded");
toggleDropdownText(propertyContent);
rotateImgChangeText();
}
projectPortfolioSwiper.on("slideChangeTransitionStart", function (event) {
const mores = document.querySelectorAll(".swiper-slide-duplicate .more");
mores.forEach((button) => {
button.removeEventListener("click", onDropdownButtonClick);
button.addEventListener("click", onDropdownButtonClick);
});
rotateImgChangeText();
hideFunc();
});
const hideFunc = () =>{
const expandText = document.querySelectorAll(".box-cont .expanded");
const expandText1 = document.querySelectorAll(".swiper-slide-duplicate .expanded");
expandText.forEach((text)=>{
if(text.classList.contains("text-animated"))
text.style.display = "none";
})
expandText1.forEach((text)=>{
if(text.classList.contains("text-animated"))
text.style.display = "none";
})
}
more.forEach((button) => {
// const moreParent = button.closest(".box-cont");
// const propertyContent = moreParent.querySelector("p.propertyContent.expanded");
button.removeEventListener("click", onDropdownButtonClick);
button.addEventListener("click", onDropdownButtonClick);
});
});
********************* JS *****************
********************* CSS *****************
/* **** Fonts import **** */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap");
/* **** Fonts import **** */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: auto;
background: #f7f4f2;
}
.container {
max-width: 1054px;
/* height: 100%; */
display: flex;
flex-direction: column;
align-items: center;
}
.swiper-overcontainer {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.title {
margin-top: 5px;
margin-bottom: 40px;
font-weight: 700;
font-size: 42px;
font-family: "Barlow", sans-serif;
}
h3 {
margin-top: 15px;
font-size: 17px;
font-family: "Barlow", sans-serif;
}
p {
font-size: 17px;
font-family: "Barlow", sans-serif;
}
.propertyContent {
max-width: 352px;
line-height: 140%;
margin-top: 20px;
transition: transform 0.5s ease-in-out;
}
.box-cont p:nth-of-type(3){
/* visibility: hidden; */
display: none;
}
.text-animated {
animation: fade_in_show 0.8s
}
@keyframes fade_in_show {
0% {
opacity: 0;
transform: scale(0)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.text-animated-hide {
animation: fade_out_show 0.8s
}
@keyframes fade_out_show {
100% {
opacity: 0;
transform: scale(0)
}
0% {
opacity: 1;
transform: scale(1)
}
}
.rotate{
transform: rotate(180deg);
}
a {
font-size: 16px;
font-family: "Barlow", sans-serif;
text-decoration: none;
color: #a48e3d;
}
.more {
display: flex;
align-items: center;
cursor: pointer;
/* margin-top: 15px; */
margin: 15px;
opacity: 1;
transition: 0.3s;
}
.more:hover{
opacity: 0.6
}
.box-cont {
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
text-align: center;
gap: 10px;
}
.swiper-button-next::after,
.swiper-button-prev::after {
content: "";
}
.swiper-button-prev, .swiper-button-next {
top: 350px;
}
.percenText {
color: #a48e3d;
}
.button {
font-size: 16px;
font-family: "Barlow", sans-serif;
max-width: 191px;
max-height: 45px;
color: #ffffff;
background: #a48e3d;
border: none;
border-radius: 2px;
margin-top: 20px;
margin-bottom: 5px;
padding: 12px 42px;
cursor: pointer;
}
@media only screen and (max-width: 1160px) and (min-width: 770px) {
.container {
max-width: 690px;
height: 100%;
}
.swiper-overcontainer {
max-width: 800px;
}
.swiper-button-prev, .swiper-button-next {
top: 260px;
}
.dropdown-text {
max-width: 272px;
margin-bottom: 20px;
}
.more {
margin-bottom: 50px;
}
}
@media only screen and (max-width: 770px) and (min-width: 300px) {
.title{
font-size: 35px;
}
.swiper-overcontainer {
max-width: 380px;
}
.swiper-button-prev, .swiper-button-next {
top: 230px;
}
.dropdown-text {
max-width: 272px;
margin-bottom: 20px;
}
.more {
margin-bottom: 50px;
}
}
********************* CSS *****************
Sign in with Wallet
Connect another wallet