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
@@ -18,6 +18,7 @@ p {
|
||||
|
||||
.main-page {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.breadcrumbs {
|
||||
margin: 14px 0;
|
||||
@@ -73,19 +74,44 @@ p {
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
@include respond-above(md) {
|
||||
height: 282px;
|
||||
}
|
||||
@include respond-above(lg) {
|
||||
height: 455px;
|
||||
}
|
||||
@include respond-below(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
._col {
|
||||
&-1 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
|
||||
@include respond-below(md) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include respond-above(md) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -30px;
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(244, 244, 244, 0) 0%,
|
||||
rgba(244, 244, 244, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
color: $cTxtBlack;
|
||||
@@ -153,7 +179,7 @@ p {
|
||||
._col {
|
||||
&-1 {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
height: 56px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@@ -176,7 +202,7 @@ p {
|
||||
.img_box {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 64px;
|
||||
height: 56px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
|
||||
z-index: 1;
|
||||
@@ -391,10 +417,10 @@ p {
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
margin-bottom: 160px;
|
||||
margin-bottom: 100px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -551,20 +577,6 @@ p {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 70px;
|
||||
background-image: url('/upload/filemanager/icon/Group.svg');
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 440px;
|
||||
height: 420px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
._row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -588,6 +600,26 @@ p {
|
||||
}
|
||||
|
||||
&-1 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -100px;
|
||||
background-image: url('/upload/filemanager/icon/Group.svg');
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 440px;
|
||||
height: 420px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
h3 {
|
||||
color: #181c1d;
|
||||
font-size: 25px;
|
||||
@@ -640,12 +672,18 @@ p {
|
||||
font-family: $font3;
|
||||
line-height: 26px;
|
||||
text-transform: uppercase;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 14px;
|
||||
padding: 16px 30px 11px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $cTxtBlack;
|
||||
background: #ffed00;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
@@ -655,11 +693,6 @@ p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
color: $cTxtBlack;
|
||||
background: #ffed00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -685,9 +718,9 @@ p {
|
||||
}
|
||||
&-2 {
|
||||
width: 100%;
|
||||
max-width: 1070px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
// max-width: 1070px;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
margin-bottom: 70px;
|
||||
|
||||
._col {
|
||||
@@ -843,9 +876,9 @@ p {
|
||||
}
|
||||
&-2 {
|
||||
width: 100%;
|
||||
max-width: 1070px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
// max-width: 1070px;
|
||||
// margin-left: auto;
|
||||
// margin-right: auto;
|
||||
margin-bottom: 100px;
|
||||
|
||||
._col {
|
||||
@@ -1077,7 +1110,6 @@ p {
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
|
||||
@include respond-above(md) {
|
||||
margin-right: 45px;
|
||||
@@ -1087,6 +1119,7 @@ p {
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-family: $font3;
|
||||
@@ -1101,12 +1134,25 @@ p {
|
||||
gap: 20px;
|
||||
padding: 18px 45px 14px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
background: #2e2d2c;
|
||||
border-radius: 100px;
|
||||
width: fit-content;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
|
||||
background: #2e2d2c;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 26px;
|
||||
margin-right: auto;
|
||||
@@ -1151,9 +1197,12 @@ p {
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 40px 0 0 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
@include respond-below(md) {
|
||||
@@ -1495,3 +1544,96 @@ p {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-17 {
|
||||
margin-bottom: 100px;
|
||||
|
||||
._row {
|
||||
&-1 {
|
||||
margin-bottom: 10px;
|
||||
|
||||
._col {
|
||||
&-1 {
|
||||
}
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
._col {
|
||||
&-1 {
|
||||
position: relative;
|
||||
padding-top: 30px;
|
||||
|
||||
.feedback-slider {
|
||||
position: relative;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.feedback-tile {
|
||||
padding: 47px 40px;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background: $cWhite;
|
||||
box-shadow: 8px 8px 20px -5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 40px 0;
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1d1d1e;
|
||||
font-size: 18px;
|
||||
font-family: $font3;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
span.author {
|
||||
color: #1d1d1e;
|
||||
font-size: 14px;
|
||||
font-family: $font3;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 19%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-arrows {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
> div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper-button-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user