Project-Pro/eng.vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jacek Pyziak
2025-03-06 19:27:29 +01:00
commit f2698d53d0
6352 changed files with 822401 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
layout/style-scss/contact.scss Normal file
View File

@@ -0,0 +1,392 @@
@import '_mixins';
@import '_variables';
.box-01 {
margin-bottom: 35px;
.contact-sections {
display: grid;
grid-template-columns: 500px 1fr;
grid-template-areas:
's0 s4'
'sw1 s5'
'sw1 s6'
'sw1 s7';
.sections-wrapper {
grid-area: sw1;
}
.sections_2_3 {
@include respond-above(md) {
position: relative;
padding-top: 260px;
padding-bottom: 100px;
background-color: #010101;
background-image: url('/upload/filemanager/Pages/Contact/contact-bg.png');
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 1) 0%,
rgba(102, 102, 102, 0) 100%);
}
}
}
section {
position: relative;
&.section_0 {
grid-area: s0;
@include respond-above(md) {
background-color: $cBlack;
}
}
&.section_1 {
grid-area: s1;
text-align: right;
padding: 75px 50px 75px;
@include respond-below(md) {
padding: 75px 50px 30px;
}
@include respond-above(md) {
background-color: $cBlack;
}
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 75px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
margin-bottom: 20px;
}
}
p {
font-size: 14px;
font-weight: 200;
@include respond-above(md) {
color: $cTxtWhite;
}
strong {
font-weight: 700;
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
&:not(:last-child) {
margin-bottom: 10px;
}
a {
font-size: 18px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
color: $cTxtBlack;
}
}
}
}
@include respond-below(md) {
text-align: center;
}
}
&.section_2 {
grid-area: s2;
text-align: right;
padding: 0 50px 90px 50px;
// @include respond-above(md) {
// background-color: $cBlack;
// }
img {
margin-bottom: 20px;
@include respond-below(md) {
filter: invert(1);
}
}
p {
font-size: 15px;
font-weight: 700;
margin-bottom: 0;
@include respond-above(md) {
color: $cTxtWhite;
}
}
@include respond-below(md) {
text-align: center;
padding: 50px 0 20px;
}
}
&.section_3 {
grid-area: s3;
text-align: right;
padding: 0 50px;
// @include respond-above(md) {
// background-color: $cBlack;
// }
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 60px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
font-size: 22px;
br {
display: none;
}
}
}
p {
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
line-height: 30px;
}
@include respond-below(md) {
text-align: center;
margin-bottom: 10px;
p {
color: #000;
}
}
}
&.section_4 {
grid-area: s4;
padding: 80px 50px;
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
p {
color: $cTxtGrayDarker;
font-size: 25px;
font-weight: 200;
margin-bottom: 0;
}
a {
width: 100%;
max-width: 50px;
img {
width: 100%;
}
}
@include respond-below(md) {
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
}
&.section_5 {
grid-area: s5;
padding: 75px 50px 0;
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 75px;
text-transform: uppercase;
@include respond-below(md) {
margin-bottom: 20px;
}
}
p {
font-size: 12px;
font-weight: 300;
margin-bottom: 20px;
}
@include respond-below(md) {
text-align: center;
}
#contact_form {
.agreement {
display: flex;
flex-direction: row;
gap: 40px;
.agreement-container {
.form_group_2 {
input[type='checkbox'] {
background: #fff;
border: 1px solid #000000;
&::before {
background: #000;
}
&::after {
background: #000;
}
}
}
}
.buttons-container {
button {
width: 180px;
&::before,
&::after {
right: 40px;
}
}
}
}
}
}
&.section_6 {
grid-area: s6;
padding: 100px 50px 50px;
display: flex;
flex-direction: column;
justify-content: center;
p {
font-size: 21px;
font-weight: 300;
margin-bottom: 0;
span {
display: inline-block;
min-width: 44px;
}
}
@include respond-below(md) {
text-align: center;
padding: 50px;
}
}
&.section_7 {
grid-area: s7;
padding: 0 50px;
iframe {
width: 100%;
height: 535px;
}
}
}
@include respond-below(lg) {
grid-template-columns: 350px 1fr;
}
@include respond-below(md) {
grid-template-columns: 1fr;
grid-template-areas:
's0'
'sw1'
// 's2'
's6'
's5'
's4'
's3'
's7';
padding-top: 50px;
}
}
}
.box-02 {
margin-bottom: 35px;
.box-2-data {
position: relative;
padding: 30px 150px;
background: #f4f4f4;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
h2 {
color: #000;
font-size: 20px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
li {
img {
width: 100%;
max-width: 24px;
filter: brightness(0) saturate(100%) invert(0%) sepia(98%) saturate(0%) hue-rotate(47deg) brightness(98%) contrast(101%);
}
}
}
>img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
}
}