Enhance "O Nas" page layout with new sections and improved styling
This commit is contained in:
Roman Pyrih
@@ -93,7 +93,123 @@
|
||||
</div>
|
||||
<div class="_row _row-2">
|
||||
<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>
|
||||
@@ -450,6 +566,112 @@
|
||||
</h2>
|
||||
</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>
|
||||
|
||||
@@ -464,4 +686,26 @@
|
||||
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>
|
||||
Reference in New Issue
Block a user