New home page
This commit is contained in:
Roman Pyrih
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -35,6 +35,23 @@ strong {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-0 {
|
||||||
|
margin-bottom: 80px;
|
||||||
|
background: #f1efed;
|
||||||
|
|
||||||
|
&--wrapper {
|
||||||
|
.slider-box-0 {
|
||||||
|
.swiper-slide {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
@media (min-width: 1500px) {
|
||||||
|
max-width: 1430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.box-1 {
|
.box-1 {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
|
|
||||||
@@ -95,7 +112,107 @@ strong {
|
|||||||
|
|
||||||
&--wrapper {
|
&--wrapper {
|
||||||
.box-title {
|
.box-title {
|
||||||
margin-bottom: 0;
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-box-2 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
overflow: initial;
|
||||||
|
|
||||||
|
.swiper-wrapper {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
display: flex;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.slide-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: $cWhite;
|
||||||
|
border: 1px solid #d2cec4;
|
||||||
|
box-shadow: 0px 4px 19.8px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.slide-img {
|
||||||
|
height: 189px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slide-data {
|
||||||
|
padding: 14px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 216px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-footer {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background: #000;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: transform 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&::before {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -421,11 +538,8 @@ strong {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-shadow:
|
text-shadow: 1px 1px #920a0a, -1px -1px #920a0a,
|
||||||
1px 1px #920a0a,
|
-1px 1px #920a0a, 1px -1px #920a0a;
|
||||||
-1px -1px #920a0a,
|
|
||||||
-1px 1px #920a0a,
|
|
||||||
1px -1px #920a0a;
|
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@@ -790,3 +904,94 @@ strong {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fancybox__backdrop {
|
||||||
|
background: rgba(255, 255, 255, 0.63) !important;
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancybox__content {
|
||||||
|
width: min(100%, 500px);
|
||||||
|
padding: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancybox__container.box2-fancybox {
|
||||||
|
--fancybox-bg: rgba(30, 40, 50, 0.5);
|
||||||
|
--carousel-button-bg: #ededeb;
|
||||||
|
--carousel-button-color: #1e2832;
|
||||||
|
|
||||||
|
.fancybox__slide {
|
||||||
|
padding: 24px 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancybox__nav {
|
||||||
|
.carousel__button {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__button.is-close {
|
||||||
|
top: -10px;
|
||||||
|
right: -40px;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
color: #1e2832;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2-fancybox-slide {
|
||||||
|
width: min(100%, 500px);
|
||||||
|
display: flex;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.slide-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background: $cWhite;
|
||||||
|
border: 1px solid #d2cec4;
|
||||||
|
box-shadow: 0px 4px 19.8px 1px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-img {
|
||||||
|
height: 370px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-data {
|
||||||
|
padding: 14px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 380px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -4,6 +4,25 @@
|
|||||||
?>
|
?>
|
||||||
|
|
||||||
<main id="AppHome">
|
<main id="AppHome">
|
||||||
|
<div class="box-0">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-0--wrapper">
|
||||||
|
<div class="swiper slider-box-0">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/slide-1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/slide-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/slide-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="box-1">
|
<div class="box-1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="box-1--wrapper">
|
<div class="box-1--wrapper">
|
||||||
@@ -65,6 +84,65 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="box-2--wrapper">
|
<div class="box-2--wrapper">
|
||||||
<h2 class="box-title">Spektrum <strong>możliwości</strong></h2>
|
<h2 class="box-title">Spektrum <strong>możliwości</strong></h2>
|
||||||
|
|
||||||
|
<div class="swiper slider-box-2">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="slide-wrapper">
|
||||||
|
<div class="slide-img">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/realiz-1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="slide-data">
|
||||||
|
<h3 class="slide-title">Rezydencje premium</h3>
|
||||||
|
<p>domy jednorodzinne, penthouse, houseboat, ogrody zimowe</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="slide-wrapper">
|
||||||
|
<div class="slide-img">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/realiz-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="slide-data">
|
||||||
|
<h3 class="slide-title">Apartamenty i osiedla</h3>
|
||||||
|
<p>osiedla, apartamentowce, bliźniaki, szeregowce</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="slide-wrapper">
|
||||||
|
<div class="slide-img">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/realiz-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="slide-data">
|
||||||
|
<h3 class="slide-title">Obiekty komercyjne</h3>
|
||||||
|
<p>hale produkcyjne, galerie handlowe, szpitale, szkoły, urzędy, biurowce</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="slide-wrapper">
|
||||||
|
<div class="slide-img">
|
||||||
|
<img src="/upload/filemanager/Pages/home-page/realiz-4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="slide-data">
|
||||||
|
<h3 class="slide-title">Obiekty zabytkowe</h3>
|
||||||
|
<p>zamki, pałace, hotele, kościoły, ratusze</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-footer">
|
||||||
|
<a href="#" class="js-open-box2-gallery">
|
||||||
|
<span>Zobacz wybrane realizacje</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M12 5C5.63636 5 2 12 2 12C2 12 5.63636 19 12 19C18.3636 19 22 12 22 12C22 12 18.3636 5 12 5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -426,7 +504,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<link class="footer" href="/plugins/fancybox/fancybox.css" rel="stylesheet" type="text/css">
|
||||||
|
<script class="footer" type="text/javascript" src="/plugins/fancybox/fancybox.js"></script>
|
||||||
<script class="footer">
|
<script class="footer">
|
||||||
|
var swiper_box_0 = new Swiper(".slider-box-0", {
|
||||||
|
slidesPerView: 1,
|
||||||
|
speed: 5000,
|
||||||
|
autoplay: {
|
||||||
|
delay: 4000,
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var swiper_box_2 = new Swiper(".slider-box-2", {
|
||||||
|
slidesPerView: 4,
|
||||||
|
spaceBetween: 22,
|
||||||
|
});
|
||||||
|
|
||||||
var swiper_box_3 = new Swiper(".slider-box-3", {
|
var swiper_box_3 = new Swiper(".slider-box-3", {
|
||||||
slidesPerView: 5,
|
slidesPerView: 5,
|
||||||
spaceBetween: 80,
|
spaceBetween: 80,
|
||||||
@@ -436,4 +530,70 @@
|
|||||||
slidesPerView: 4,
|
slidesPerView: 4,
|
||||||
spaceBetween: 26,
|
spaceBetween: 26,
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
(function () {
|
||||||
|
var openGalleryBtn = document.querySelector(".js-open-box2-gallery");
|
||||||
|
if (!openGalleryBtn || !window.Fancybox) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var escapeHtml = function (text) {
|
||||||
|
return String(text || "").replace(/[&<>"']/g, function (char) {
|
||||||
|
return {
|
||||||
|
"&": "&",
|
||||||
|
"<": "<",
|
||||||
|
">": ">",
|
||||||
|
"\"": """,
|
||||||
|
"'": "'"
|
||||||
|
}[char];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
openGalleryBtn.addEventListener("click", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
var slideNodes = document.querySelectorAll(".slider-box-2 .swiper-slide");
|
||||||
|
var items = Array.from(slideNodes).map(function (slide) {
|
||||||
|
var imageNode = slide.querySelector(".slide-img img");
|
||||||
|
var titleNode = slide.querySelector(".slide-title");
|
||||||
|
var textNode = slide.querySelector(".slide-data p");
|
||||||
|
|
||||||
|
var imageSrc = imageNode ? imageNode.getAttribute("src") : "";
|
||||||
|
var imageAlt = imageNode ? imageNode.getAttribute("alt") : "";
|
||||||
|
var title = titleNode ? titleNode.textContent.trim() : "";
|
||||||
|
var description = textNode ? textNode.textContent.trim() : "";
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "html",
|
||||||
|
src:
|
||||||
|
'<div class="swiper-slide box2-fancybox-slide">' +
|
||||||
|
'<div class="slide-wrapper">' +
|
||||||
|
'<div class="slide-img">' +
|
||||||
|
'<img src="' + escapeHtml(imageSrc) + '" alt="' + escapeHtml(imageAlt) + '">' +
|
||||||
|
'<\/div>' +
|
||||||
|
'<div class="slide-data">' +
|
||||||
|
'<h3 class="slide-title">' + escapeHtml(title) + '<\/h3>' +
|
||||||
|
'<p>' + escapeHtml(description) + '<\/p>' +
|
||||||
|
'<\/div>' +
|
||||||
|
'<\/div>' +
|
||||||
|
'<\/div>'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!items.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Fancybox.show(items, {
|
||||||
|
mainClass: "box2-fancybox",
|
||||||
|
animated: true,
|
||||||
|
dragToClose: false,
|
||||||
|
Thumbs: false,
|
||||||
|
Toolbar: {
|
||||||
|
display: []
|
||||||
|
},
|
||||||
|
startIndex: typeof swiper_box_2 !== "undefined" ? swiper_box_2.activeIndex : 0
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user