Refactor styles and update HTML structure for "Historia Firmy" and "O Nas" pages
- Removed commented-out flex property in historia-firmy.scss for active class. - Added overflow hidden to main-page class in o-nas.scss. - Adjusted heights for responsive design in o-nas.scss. - Introduced gradient background for _col-1 in o-nas.scss. - Updated margin and height properties for various elements in o-nas.scss. - Removed unnecessary after pseudo-element in o-nas.scss. - Added feedback slider component in o-nas.php with customer testimonials. - Updated video element in o-nas.php to include controls and loop attributes. - Commented out unused sections in o-nas.php for better clarity. - Implemented Swiper functionality for feedback slider in o-nas.php.
This commit is contained in:
Roman Pyrih
@@ -1,13 +1,13 @@
|
||||
<link rel="stylesheet" href="/layout/style-css/historia-firmy.css">
|
||||
|
||||
<div id="historia-firmy">
|
||||
<div class="_row _row-1">
|
||||
<!-- <div class="_row _row-1">
|
||||
<div class="_col _col-1">
|
||||
<h2 class="section-title">
|
||||
<span>historia firmy vidok</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="_row _row-2">
|
||||
<div class="_col _col-1">
|
||||
<!-- Swiper -->
|
||||
@@ -245,10 +245,30 @@
|
||||
},
|
||||
});
|
||||
|
||||
// $("#timeline-nav .swiper-slide").on("click", function () {
|
||||
// const index = $(this).data("slide");
|
||||
// contentSwiper.slideTo(index);
|
||||
// navSwiper.slideTo(index);
|
||||
// $("#timeline-nav .swiper-slide").removeClass("active");
|
||||
// $(this).addClass("active");
|
||||
// });
|
||||
|
||||
$("#timeline-nav .swiper-slide").on("click", function () {
|
||||
const index = $(this).data("slide");
|
||||
|
||||
const slides = $("#timeline-nav .swiper-slide");
|
||||
slides.removeClass("active");
|
||||
|
||||
const clicked = $(this);
|
||||
clicked.addClass("active");
|
||||
|
||||
clicked.one("transitionend", function () {
|
||||
navSwiper.update();
|
||||
navSwiper.slideTo(index);
|
||||
});
|
||||
|
||||
contentSwiper.slideTo(index);
|
||||
$("#timeline-nav .swiper-slide").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@@ -17,7 +17,7 @@
|
||||
<h2>od 1993 roku</h2>
|
||||
</div>
|
||||
<div class="_col _col-2">
|
||||
<video src="/upload/filemanager/Pages/O-nas/VIDOK-Sprawdzona-Marka-1993.mp4" muted="" autoplay=""></video>
|
||||
<video src="/upload/filemanager/Pages/O-nas/VIDOK-Sprawdzona-Marka-1993.mp4" controls muted="" autoplay="" loop="" ></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_row _row-2">
|
||||
@@ -87,6 +87,45 @@
|
||||
<?php include 'templates_user/components/historia-firmy.php'; ?>
|
||||
</div>
|
||||
|
||||
<div class="box-12">
|
||||
<div class="_row _row-1">
|
||||
<div class="_col _col-1">
|
||||
<h3>szerokie spektrum</h3>
|
||||
<h2><span>możliwości realizacji</span></h2>
|
||||
|
||||
<div class="texts">
|
||||
<p>
|
||||
Budownictwo:
|
||||
<ul>
|
||||
<li><strong>MIESZKALNE WIELORODZINNE</strong> (np. osiedla, apartamentowce)</li>
|
||||
<li><strong>JEDNORODZINNE</strong> (np. domy wolnostojące, bliźniaki, szeregowce)</li>
|
||||
<li><strong>UŻYTECZNOŚCI</strong> PUBLICZNEJ (np. urzędy, szkoły, szpitale, biblioteki, uczelnie)</li>
|
||||
<li><strong>PRZEMYSŁOWE</strong> (np. hale produkcyjne, zakłady przemysłowe, magazyny)</li>
|
||||
<li><strong>BIUROWE</strong> (np. biurowce, centra biznesowe)</li>
|
||||
<li><strong>HANDLOWO-USŁUGOWE</strong> (np. galerie handlowe, centra logistyczne, hotele, restauracje)</li>
|
||||
<li><strong>INFRASTRUKTURY TRANSPORTOWEJ</strong> (np. dworce, lotniska, terminale)</li>
|
||||
<li><strong>SPORTOWE I REKREACYJNE</strong> (np. hale sportowe, stadiony, baseny)</li>
|
||||
<li><strong>SPECJALISTYCZNE</strong> (np. laboratoria, centra badawcze, elektrownie)</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_col _col-2">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-2.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-3.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-4.jpg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-5">
|
||||
<div class="_row _row-1">
|
||||
<div class="_col _col-1">
|
||||
@@ -334,7 +373,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-9">
|
||||
<!-- <div class="box-9">
|
||||
<div class="_row _row-1">
|
||||
<div class="_col _col-1">
|
||||
<h2 class="section-title">
|
||||
@@ -342,7 +381,7 @@
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="box-10">
|
||||
@@ -392,41 +431,104 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-12">
|
||||
<div class="box-17">
|
||||
<div class="_row _row-1">
|
||||
<div class="_col _col-1">
|
||||
<h3>szerokie spektrum</h3>
|
||||
<h2>możliwości realizacji</h2>
|
||||
|
||||
<div class="texts">
|
||||
<p>
|
||||
Budownictwo:
|
||||
<ul>
|
||||
<li><strong>MIESZKALNE WIELORODZINNE</strong> (np. osiedla, apartamentowce)</li>
|
||||
<li><strong>JEDNORODZINNE</strong> (np. domy wolnostojące, bliźniaki, szeregowce)</li>
|
||||
<li><strong>UŻYTECZNOŚCI</strong> PUBLICZNEJ (np. urzędy, szkoły, szpitale, biblioteki, uczelnie)</li>
|
||||
<li><strong>PRZEMYSŁOWE</strong> (np. hale produkcyjne, zakłady przemysłowe, magazyny)</li>
|
||||
<li><strong>BIUROWE</strong> (np. biurowce, centra biznesowe)</li>
|
||||
<li><strong>HANDLOWO-USŁUGOWE</strong> (np. galerie handlowe, centra logistyczne, hotele, restauracje)</li>
|
||||
<li><strong>INFRASTRUKTURY TRANSPORTOWEJ</strong> (np. dworce, lotniska, terminale)</li>
|
||||
<li><strong>SPORTOWE I REKREACYJNE</strong> (np. hale sportowe, stadiony, baseny)</li>
|
||||
<li><strong>SPECJALISTYCZNE</strong> (np. laboratoria, centra badawcze, elektrownie)</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="section-title">
|
||||
<span>Opinie klientów</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="_col _col-2">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-2.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-3.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="/upload/filemanager/Pages/O-nas/IMG-4.jpg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="_row _row-2">
|
||||
<div class="_col _col-1">
|
||||
<div class="feedback-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="feedback-tile">
|
||||
<ol>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
</ol>
|
||||
|
||||
<p>Mój mąż przeprowadzał w ostatnim czasie kapitalny remont domu, do którego mamy się wprowadzić. Do wymiany poszło wiele rzeczy, w tym okna, które były nieszczelne. Znajomy polecił nam firmę VIDOK. Posłuchaliśmy się jego rekomendacji i zamówiliśmy w ich autoryzowanym punkcie handlowym okna drewniane, które pięknie się prezentują i jak mąż twierdzi - świetnie trzymają ciepło i tłumią hałasy z zewnątrz.</p>
|
||||
|
||||
<span class="author">Monika, Lublin</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="feedback-tile">
|
||||
<ol>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
</ol>
|
||||
|
||||
<p>Gdy rozpoczęliśmy budowę domu, przyświecał nam jeden cel - by był nowoczesny i energooszczędny. W Internecie zobaczyliśmy reklamę marki VIDOK. Postanowiliśmy z niej skorzystać i zakupić okna GoldEnergy w powłoce Spectral. Do okien dokupiliśmy rolety screen oraz system zarządzania domem SMART VIDOK. Podjęta przez nas decyzja okazała się słuszna. Asortyment zamówiony w salonie VIDOK w Krakowie sprawuje się znakomicie.</p>
|
||||
|
||||
<span class="author">Kasia i Wojciech, Kraków</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="feedback-tile">
|
||||
<ol>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
</ol>
|
||||
|
||||
<p>Gdy rozpoczęliśmy budowę domu, przyświecał nam jeden cel - by był nowoczesny i energooszczędny. W Internecie zobaczyliśmy reklamę marki VIDOK. Postanowiliśmy z niej skorzystać i zakupić okna GoldEnergy w powłoce Spectral. Do okien dokupiliśmy rolety screen oraz system zarządzania domem SMART VIDOK. Podjęta przez nas decyzja okazała się słuszna. Asortyment zamówiony w salonie VIDOK w Krakowie sprawuje się znakomicie.</p>
|
||||
|
||||
<span class="author">Kasia i Wojciech, Kraków</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="feedback-tile">
|
||||
<ol>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
</ol>
|
||||
|
||||
<p>Realizuję budowy osiedli mieszkaniowych w Rzeszowie od kilkunastu lat. Cenię sobie jakość i profesjonalne podejście na co dzień, dlatego zdecydowałem się na VIDOK. Szybka dostawa, fachowy montaż i rzetelna obsługa na każdym etapie współpracy - tak wyglądała moja styczność z tą firmą. Nigdy nie miałem żadnych problemów. Rekomenduję VIDOK jako solidnego partnera biznesowego.</p>
|
||||
|
||||
<span class="author">Marcin, deweloper Rzeszów</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="feedback-tile">
|
||||
<ol>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
<li><img src="/upload/filemanager/icon/Star.svg" alt=""></li>
|
||||
</ol>
|
||||
|
||||
<p>Realizuję budowy osiedli mieszkaniowych w Rzeszowie od kilkunastu lat. Cenię sobie jakość i profesjonalne podejście na co dzień, dlatego zdecydowałem się na VIDOK. Szybka dostawa, fachowy montaż i rzetelna obsługa na każdym etapie współpracy - tak wyglądała moja styczność z tą firmą. Nigdy nie miałem żadnych problemów. Rekomenduję VIDOK jako solidnego partnera biznesowego.</p>
|
||||
|
||||
<span class="author">Marcin, deweloper Rzeszów</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feedback-arrows">
|
||||
<div class="feedback-prev">
|
||||
<img src="/upload/filemanager/icon/Arrow-long-left.svg" alt="">
|
||||
</div>
|
||||
<div class="feedback-next">
|
||||
<img src="/upload/filemanager/icon/Arrow-long-right.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -557,4 +659,14 @@
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
var swiperFeedback = new Swiper(".feedback-slider", {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
navigation: {
|
||||
nextEl: ".feedback-next",
|
||||
prevEl: ".feedback-prev",
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user