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 {
|
||||
margin-bottom: 100px;
|
||||
|
||||
@@ -95,7 +112,107 @@ strong {
|
||||
|
||||
&--wrapper {
|
||||
.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;
|
||||
line-height: 0;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
1px 1px #920a0a,
|
||||
-1px -1px #920a0a,
|
||||
-1px 1px #920a0a,
|
||||
1px -1px #920a0a;
|
||||
text-shadow: 1px 1px #920a0a, -1px -1px #920a0a,
|
||||
-1px 1px #920a0a, 1px -1px #920a0a;
|
||||
}
|
||||
span {
|
||||
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">
|
||||
<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="container">
|
||||
<div class="box-1--wrapper">
|
||||
@@ -65,6 +84,65 @@
|
||||
<div class="container">
|
||||
<div class="box-2--wrapper">
|
||||
<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>
|
||||
@@ -426,7 +504,23 @@
|
||||
</div>
|
||||
</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">
|
||||
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", {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 80,
|
||||
@@ -436,4 +530,70 @@
|
||||
slidesPerView: 4,
|
||||
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