Enhance "O Nas" page layout with new sections and improved styling
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
@@ -308,11 +308,109 @@ p {
|
|||||||
|
|
||||||
._row {
|
._row {
|
||||||
&-1 {
|
&-1 {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
._col {
|
._col {
|
||||||
&-1 {
|
&-1 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&-2 {
|
||||||
|
#history-timeline {
|
||||||
|
#timeline-nav {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 80px;
|
||||||
|
padding-right: 80px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
|
||||||
|
.timeline-nav--wrapper {
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 17px;
|
||||||
|
height: 3px;
|
||||||
|
width: 100%;
|
||||||
|
background: #000000;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.swiper-wrapper {
|
||||||
|
align-items: end;
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
flex: 0 0 calc(100% / 8);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
flex: 0 0 calc((100% / 8) * 2);
|
||||||
|
// flex: 0 0 200px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-dot {
|
||||||
|
background: #fff246;
|
||||||
|
border-color: #fff246;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: #181c1d;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: $font3;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.slide-dot {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: block;
|
||||||
|
border: 2px solid #181c1d;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-next,
|
||||||
|
.timeline-prev {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 44px;
|
||||||
|
min-width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: #181c1d;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
bottom: 47px;
|
||||||
|
}
|
||||||
|
.timeline-prev {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.timeline-next {
|
||||||
|
right: 0;
|
||||||
|
img {
|
||||||
|
transform: scale(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-content {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -678,6 +776,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-9 {
|
.box-9 {
|
||||||
|
margin-bottom: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-10 {
|
.box-10 {
|
||||||
@@ -890,3 +989,231 @@ p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-13 {
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
|
._row {
|
||||||
|
&-1 {
|
||||||
|
margin-bottom: 70px;
|
||||||
|
|
||||||
|
._col {
|
||||||
|
&-1 {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 25px;
|
||||||
|
|
||||||
|
._col {
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview_box {
|
||||||
|
.preview_img {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: fit-content;
|
||||||
|
height: 400px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preview_data {
|
||||||
|
h3 {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 45px;
|
||||||
|
padding-bottom: 45px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 90%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
&.mini {
|
||||||
|
font-size: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-14 {
|
||||||
|
margin-bottom: 150px;
|
||||||
|
|
||||||
|
._row {
|
||||||
|
&-1 {
|
||||||
|
margin-bottom: 70px;
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
._col {
|
||||||
|
&-1 {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 60px;
|
||||||
|
row-gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-15 {
|
||||||
|
margin-bottom: 150px;
|
||||||
|
|
||||||
|
._row {
|
||||||
|
&-1 {
|
||||||
|
._col {
|
||||||
|
&-1 {
|
||||||
|
h2 {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 34px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 14px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
&:nth-child(1) {
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
background: #1d1d1e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
a {
|
||||||
|
color: #1d1d1e;
|
||||||
|
background: #fff246;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding: 20px 36px 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-16 {
|
||||||
|
padding-top: 120px;
|
||||||
|
border-top: 1px solid $cBlack;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
|
||||||
|
._row {
|
||||||
|
&-1 {
|
||||||
|
._col {
|
||||||
|
&-1 {
|
||||||
|
h2 {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 34px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -93,7 +93,123 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="_row _row-2">
|
<div class="_row _row-2">
|
||||||
<div class="_col _col-1">
|
<div class="_col _col-1">
|
||||||
Slider
|
<!-- Swiper -->
|
||||||
|
<div id="history-timeline">
|
||||||
|
<div id="timeline-nav">
|
||||||
|
<div class="timeline-nav--wrapper swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide active" data-slide="0">
|
||||||
|
<span>1993</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="1">
|
||||||
|
<span>1994</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="2">
|
||||||
|
<span>1995</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="3">
|
||||||
|
<span>1999</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="4">
|
||||||
|
<span>2005</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="5">
|
||||||
|
<span>2010</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="6">
|
||||||
|
<span>2016</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="7">
|
||||||
|
<span>2018</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="8">
|
||||||
|
<span>2019</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="9">
|
||||||
|
<span>2020</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="10">
|
||||||
|
<span>2023</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-slide="11">
|
||||||
|
<span>2025</span>
|
||||||
|
<div class="slide-dot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-next">
|
||||||
|
<img src="/upload/filemanager/icon/arrow-left-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="timeline-prev">
|
||||||
|
<img src="/upload/filemanager/icon/arrow-left-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-content swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>1993: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image1.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>1994: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="your_image_1994.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>1995: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>1999: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2005: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2010: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2016: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2018: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2019: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2020: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2023: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<p>2025: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, sit.</p>
|
||||||
|
<img src="image3.jpg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -450,6 +566,112 @@
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="_row _row-2">
|
||||||
|
<div class="_col _col-1">
|
||||||
|
<div class="preview_box">
|
||||||
|
<div class="preview_img">
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/img-6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="preview_data">
|
||||||
|
<h3>Szklane Tarasy</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="mini">Armii Krajowej, Rzeszów, POLSKA</li>
|
||||||
|
<li>Dostawa i montaż stolarki z PVC</li>
|
||||||
|
<li>Wartość inwestycji: 978 126 PLN</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_col _col-2">
|
||||||
|
<div class="preview_box">
|
||||||
|
<div class="preview_img">
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/img-7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="preview_data">
|
||||||
|
<h3>Holiday Inn Express Bicester</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="mini">BICESTER GATEWAY BUSINESS PARK WENDLEBURY, WIELKA BRYTANIA</li>
|
||||||
|
<li>Okna, drzwi i fasady - system ALUPROF</li>
|
||||||
|
<li>Wartość inwestycji: 217 552 €</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-14">
|
||||||
|
<div class="_row _row-1">
|
||||||
|
<div class="_col _col-1">
|
||||||
|
<h2 class="section-title">
|
||||||
|
<span>certyfikaty i badania</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_row _row-2">
|
||||||
|
<div class="_col _col-1">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/ce.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/tuv.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/itc.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/ift.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/pfb.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/FSC.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/PEFC.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/upload/filemanager/Pages/O-nas/certyfikaty/bmtrada.jpg" alt="">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-15">
|
||||||
|
<div class="_row _row-1">
|
||||||
|
<div class="_col _col-1">
|
||||||
|
<h2>Jesteś zainteresowany naszymi produktami?</h2>
|
||||||
|
<p>Skorzystaj z darmowej wyceny na podstawie projektu lub znajdź salon.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
Gdzie kupić
|
||||||
|
<img src="/upload/filemanager/icon/Arrow-1-yellow.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
Bezpłatna wycena
|
||||||
|
<img src="/upload/filemanager/icon/Vector.svg" alt="">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box-16">
|
||||||
|
<div class="_row _row-1">
|
||||||
|
<div class="_col _col-1">
|
||||||
|
<h2>Wybierz sprawdzonego producenta</h2>
|
||||||
|
<p>Firma VIDOK powstała w 1993 roku. Najpierw specjalizowała się w pośrednictwie w sprzedaży okien PVC, jednak już rok później rozpoczęła własną produkcję. W naszej ofercie znajdowały się wówczas okna PVC, ale już niebawem pojawiły się również okna aluminiowe i okna drewniane. W kolejnych latach nastąpił dynamiczny rozwój firmy, która zyskała kilkadziesiąt punktów handlowych oraz zaczęła importować produkty do krajów Unii Europejskiej. Zmodernizowaliśmy produkcję, uruchamiając nowoczesne hale produkcyjno-magazynowe oraz wdrażając technologie oparte na robotach najnowszej generacji łączących w idealną całość nasze okna.</p>
|
||||||
|
<a href="#">Czytaj więcej</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -464,4 +686,26 @@
|
|||||||
prevEl: ".swiper-button-prev",
|
prevEl: ".swiper-button-prev",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const contentSwiper = new Swiper(".timeline-content", {
|
||||||
|
slidesPerView: 1,
|
||||||
|
allowTouchMove: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const navSwiper = new Swiper("#timeline-nav .swiper", {
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".timeline-next",
|
||||||
|
prevEl: ".timeline-prev",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#timeline-nav .swiper-slide").on("click", function () {
|
||||||
|
const index = $(this).data("slide");
|
||||||
|
contentSwiper.slideTo(index);
|
||||||
|
$("#timeline-nav .swiper-slide").removeClass("active");
|
||||||
|
$(this).addClass("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user