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 {
|
||||
&-1 {
|
||||
margin-bottom: 100px;
|
||||
|
||||
._col {
|
||||
&-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 {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.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 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