New page contact - development
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -6,6 +6,11 @@ html {
|
|||||||
scroll-padding-top: 105px;
|
scroll-padding-top: 105px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
strong {
|
strong {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -26,6 +31,8 @@ strong {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
column-gap: 50px;
|
column-gap: 50px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.c-col {
|
.c-col {
|
||||||
&-1 {
|
&-1 {
|
||||||
@@ -33,7 +40,7 @@ strong {
|
|||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
|
|
||||||
.box-title {
|
.box-title {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: $cTxtBlack;
|
color: $cTxtBlack;
|
||||||
@@ -46,7 +53,8 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-text {
|
.box-text {
|
||||||
padding-bottom: 40px;
|
padding-bottom: 25px;
|
||||||
|
margin-bottom: 40px;
|
||||||
border-bottom: 1px solid #000;
|
border-bottom: 1px solid #000;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@@ -66,10 +74,671 @@ strong {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 241px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
a {
|
||||||
|
background-color: #1e2832;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
a {
|
||||||
|
background-color: #b8aea4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 18px 13px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
color: $cWhite;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-2 {
|
&-2 {
|
||||||
|
.box-img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-2 {
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 120px;
|
||||||
|
|
||||||
|
.box-2--wrapper {
|
||||||
|
.c-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
.c-col {
|
||||||
|
&-1 {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
border-top: 1px solid #b79f87;
|
||||||
|
border-left: 1px solid #b79f87;
|
||||||
|
border-bottom: 1px solid #b79f87;
|
||||||
|
border-top-left-radius: 30px;
|
||||||
|
border-bottom-left-radius: 30px;
|
||||||
|
padding: 45px 0 45px 60px;
|
||||||
|
|
||||||
|
.box-text {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-family: 'URW Form';
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: -0.48px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 460px;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin: 35px 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: $cTxtBlack;
|
||||||
|
font-family: 'URW Form';
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 34px;
|
||||||
|
letter-spacing: -0.48px;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-nav {
|
||||||
|
._radios {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 26px;
|
||||||
|
|
||||||
|
._radio {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 410px;
|
||||||
|
|
||||||
|
input[type='radio'] {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='radio']:checked + label {
|
||||||
|
color: #fff !important;
|
||||||
|
background: #1e2832 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-family: $font3;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 410px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #dfdfdf;
|
||||||
|
padding: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
padding: 46px 40px;
|
||||||
|
background: #f7f6f5;
|
||||||
|
border-radius: 14px 0 5px 22px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
&[type='text'],
|
||||||
|
&[type='email'] {
|
||||||
|
padding: 13px 14px 11px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font3;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type='radio'],
|
||||||
|
&[type='checkbox'] {
|
||||||
|
position: relative;
|
||||||
|
appearance: none;
|
||||||
|
width: 11px;
|
||||||
|
min-width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 1px solid #dfdfdf;
|
||||||
|
transition: all 250ms ease-in-out;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #1d1d1e;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
border-color: #1d1d1e;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
padding: 13px 14px 11px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
min-height: 100px;
|
||||||
|
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font3;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
position: relative;
|
||||||
|
appearance: none;
|
||||||
|
padding: 13px 14px 11px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font3;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
._1_column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
._2_columns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
column-gap: 26px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
width: 50% !important;
|
||||||
|
|
||||||
|
@include respond-below(sm) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
._text {
|
||||||
|
margin: 17px 0 25px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-family: $font3;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
._file {
|
||||||
|
padding: 29px;
|
||||||
|
margin: 0 0 23px 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
color: #3f3f3f;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font3;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 300;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
.fileuploader-input {
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.fileuploader-input-caption {
|
||||||
|
span {
|
||||||
|
padding-top: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.fileuploader-input-button {
|
||||||
|
background: #1e2832;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 10px 36px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
font-family: $font3;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
._radio,
|
||||||
|
._checkbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
padding-top: 2px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form_actions {
|
||||||
|
margin-top: 40px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
button[type='submit'] {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 11px 20px 12px 20px;
|
||||||
|
margin: 0;
|
||||||
|
background: #fff246;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'URW Form', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
|
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
|
||||||
|
width: fit-content !important;
|
||||||
|
height: auto;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
// &:active {
|
||||||
|
// background: #f0e875;
|
||||||
|
// }
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-above(xs) {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-3 {
|
||||||
|
.box-3--wrapper {
|
||||||
|
.c-row {
|
||||||
|
.c-col {
|
||||||
|
.box-title {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 50px;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-text {
|
||||||
|
p {
|
||||||
|
color: #000000;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.37;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-4 {
|
||||||
|
padding-top: 115px;
|
||||||
|
padding-bottom: 115px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-5 {
|
||||||
|
padding-bottom: 100px;
|
||||||
|
|
||||||
|
.box-5--wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.c-row {
|
||||||
|
&-1 {
|
||||||
|
padding: 36px 35px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background: #f6f5f4;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 40px;
|
||||||
|
|
||||||
|
.c-col {
|
||||||
|
&-1 {
|
||||||
|
.text-1 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-2 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 23px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-3 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-4 {
|
||||||
|
p {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-2 {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 765px;
|
||||||
|
|
||||||
|
.box-map {
|
||||||
|
line-height: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.box-info-left {
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
.icons {
|
||||||
|
display: inline-block;
|
||||||
|
width: 19px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-info-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 20px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
span {
|
||||||
|
img {
|
||||||
|
transform: scale(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1e2832;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: right;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 27px;
|
||||||
|
min-width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #1e2832;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: all 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-2 {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.tiles {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 38px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: 60px;
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
text-align: center;
|
||||||
|
width: calc((100% / 4) - (38px - (38px / 4)));
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
width: calc((100% / 2) - (38px - (38px / 2)));
|
||||||
|
}
|
||||||
|
|
||||||
|
@include respond-below(xs) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-text {
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 0.5px solid #181c1d;
|
||||||
|
padding: 27px 20px;
|
||||||
|
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1d1d1e;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: $font3;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
@include respond-below(md) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,4 +49,308 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="box-2">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-2--wrapper">
|
||||||
|
<form method="POST" action="" enctype="multipart/form-data" id="contact-form-new">
|
||||||
|
<input type="hidden" name="action" value="send-contact-form-new">
|
||||||
|
<input type="hidden" name="token" value="<?= \S::get_session('contact-form-token'); ?>">
|
||||||
|
<input type="hidden" name="website" value="">
|
||||||
|
<div class="c-row">
|
||||||
|
<div class="c-col c-col-1">
|
||||||
|
<div class="box-text">
|
||||||
|
<p>Wypełnij formularz, a nasz specjalista:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>odpowie na Twoje pytania,</li>
|
||||||
|
<li>doradzi najlepsze rozwiązania,</li>
|
||||||
|
<li>przedstawi szczegóły oferty dopasowane do Twoich potrzeb.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Wybierz, kim jesteś:</p>
|
||||||
|
</div>
|
||||||
|
<div class="box-nav">
|
||||||
|
<div class="_radios">
|
||||||
|
<div class="_radio">
|
||||||
|
<input type="radio" id="client-individual" name="client" value="Klient indywidualny" required>
|
||||||
|
<label for="client-individual">Klient indywidualny</label>
|
||||||
|
</div>
|
||||||
|
<div class="_radio">
|
||||||
|
<input type="radio" id="client-cooperation" name="client" value="Współpraca inwestycyjna - deweloperzy" required>
|
||||||
|
<label for="client-cooperation">Współpraca inwestycyjna - deweloperzy</label>
|
||||||
|
</div>
|
||||||
|
<div class="_radio">
|
||||||
|
<input type="radio" id="client-b2b" name="client" value="Współpraca B2B - salony sprzedaży" required>
|
||||||
|
<label for="client-b2b">Współpraca B2B - salony sprzedaży</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-col c-col-2">
|
||||||
|
<div class="_2_columns">
|
||||||
|
<input type="text" name="name" placeholder="Imię" required>
|
||||||
|
<input type="text" name="surname" placeholder="Nazwisko" required>
|
||||||
|
</div>
|
||||||
|
<div class="_2_columns">
|
||||||
|
<input type="text" name="phone" placeholder="Telefon" required>
|
||||||
|
<input type="email" name="email" placeholder="Adres e-mail" required>
|
||||||
|
</div>
|
||||||
|
<div class="_2_columns">
|
||||||
|
<div class="voivodeship__wrapper">
|
||||||
|
<select name="voivodeship" required>
|
||||||
|
<option value="" disabled selected>Województwa</option>
|
||||||
|
<option value="dolnoslaskie">dolnośląskie</option>
|
||||||
|
<option value="kujawsko-pomorskie">kujawsko-pomorskie</option>
|
||||||
|
<option value="lubelskie">lubelskie</option>
|
||||||
|
<option value="lubuskie">lubuskie</option>
|
||||||
|
<option value="lodzkie">łódzkie</option>
|
||||||
|
<option value="malopolskie">małopolskie</option>
|
||||||
|
<option value="mazowieckie">mazowieckie</option>
|
||||||
|
<option value="opolskie">opolskie</option>
|
||||||
|
<option value="podkarpackie">podkarpackie</option>
|
||||||
|
<option value="podlaskie">podlaskie</option>
|
||||||
|
<option value="pomorskie">pomorskie</option>
|
||||||
|
<option value="slaskie">śląskie</option>
|
||||||
|
<option value="swietokrzyskie">świętokrzyskie</option>
|
||||||
|
<option value="warminsko-mazurskie">warmińsko-mazurskie</option>
|
||||||
|
<option value="wielkopolskie">wielkopolskie</option>
|
||||||
|
<option value="zachodniopomorskie">zachodniopomorskie</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<input type="text" name="postal_code" placeholder="Kod pocztowy" required>
|
||||||
|
</div>
|
||||||
|
<div class="_1_column">
|
||||||
|
<textarea name="message" placeholder="Opis zgłoszenia. Jeżeli masz jakieś uwagi, wytyczne możesz wpisać je tutaj."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="_text">
|
||||||
|
<p>Chcesz przesłać nam wizualizacje, projekt lub inne materiały?<br /> Skorzystaj z pola poniżej i dodaj plik do wiadomości.</p>
|
||||||
|
</div>
|
||||||
|
<div class="_file fileuploader fileuploader-theme-default">
|
||||||
|
<input type="hidden" name="fileuploader-list-files" value="[]">
|
||||||
|
<input type="file" name="files[]" class="files" multiple="multiple">
|
||||||
|
<div class="fileuploader-items">
|
||||||
|
<ul class="fileuploader-items-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_1_column">
|
||||||
|
<div class="_checkbox">
|
||||||
|
<input type="checkbox" name="zgoda_1" id="zgoda_1">
|
||||||
|
<label for="zgoda_1">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu przygotowania stosownej oferty.</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_1_column">
|
||||||
|
<div class="_checkbox">
|
||||||
|
<input type="checkbox" name="zgoda_2" id="zgoda_2">
|
||||||
|
<label for="zgoda_2">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu otrzymywania materiałów reklamowych.</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_1_column form_actions">
|
||||||
|
<div class="g-recaptcha" data-sitekey="6LfaovglAAAAAAieLVC7i4xGkQA5ufXUbWLipSbp"></div>
|
||||||
|
<button type="submit">Wyślij<img src="/images/contact-icon-check.svg"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="box-3">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-3--wrapper">
|
||||||
|
<div class="c-row">
|
||||||
|
<div class="c-col">
|
||||||
|
<div class="box-title">
|
||||||
|
<h2>Sprawdź gdzie jeszcze możesz kupić <strong>Nasze Produkty</strong></h2>
|
||||||
|
</div>
|
||||||
|
<div class="box-text">
|
||||||
|
<p>Wybierz region, aby otrzymać informacje dopasowane do Twojej lokalizacji.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="box-4">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-4--wrapper">
|
||||||
|
<div class="c-row">
|
||||||
|
lista
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="box-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="box-5--wrapper">
|
||||||
|
<div class="c-row c-row-1">
|
||||||
|
<div class="c-col c-col-1">
|
||||||
|
<div class="text-1">
|
||||||
|
<p>Siedziba firmy</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-2">
|
||||||
|
<h2>VIDOK Sp. z o. o.</h2>
|
||||||
|
<p>36-054 Rudna Mała 75</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-3">
|
||||||
|
<p>KRS Nr. 0000191980</p>
|
||||||
|
<p>REGON: 690379060</p>
|
||||||
|
<p>NIP: 8131086710</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-4">
|
||||||
|
<p>ING BANK ŚLĄSKI S.A.</p>
|
||||||
|
<p>SWIFT INGBPLPW</p>
|
||||||
|
<br>
|
||||||
|
<p>PLN: PL 31 1050 1562 1000 0090 3034 4197</p>
|
||||||
|
<p>EUR: PL 84 1050 1562 1000 0090 3034 4213</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-col c-col-2">
|
||||||
|
<div class="box-map">
|
||||||
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.1425723841835!2d21.973517577050675!3d50.10233831236703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473ce36b077ae3b5%3A0x31bb36833c20c2f0!2sVIDOK%20Sp.%20z%20o.o.%20Producent%20okien%20i%20drzwi!5e0!3m2!1spl!2spl!4v1764582571106!5m2!1spl!2spl" width="100%" height="260" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="box-info">
|
||||||
|
<div class="box-info-left">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="icons"></span>
|
||||||
|
poniedziałek - piątek 7:00 - 15:00
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tel:+48178595660">
|
||||||
|
<span class="icons">
|
||||||
|
<img src="/upload/filemanager/icon/iphone.svg" alt="">
|
||||||
|
</span>
|
||||||
|
+48 17 859 56 60
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="mailto:sekretariat@vidok.com">
|
||||||
|
<span class="icons">
|
||||||
|
<img src="/upload/filemanager/icon/envelope.svg" alt="">
|
||||||
|
</span>
|
||||||
|
sekretariat@vidok.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="box-info-right">
|
||||||
|
<p>
|
||||||
|
<strong>Skontaktuj się bezpośrednio</strong><br/> z wybranym działem
|
||||||
|
</p>
|
||||||
|
<span>
|
||||||
|
<img src="/upload/filemanager/icon/btn-arrow.svg" alt="">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c-row c-row-2">
|
||||||
|
<div class="c-col">
|
||||||
|
<div class="tiles">
|
||||||
|
<div class="tile tile-1">
|
||||||
|
<h3>LOGISTYKA</h3>
|
||||||
|
<div class="tile-text">
|
||||||
|
<a href="tel:+48178676402">+48 17 867 64 02</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:logistyka@vidok.com">logistyka@vidok.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile tile-2">
|
||||||
|
<h3>KSIĘGOWOŚĆ</h3>
|
||||||
|
<div class="tile-text">
|
||||||
|
<a href="tel:+48178595676">+48 17 859 56 76</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:ksiegowosc@vidok.com">ksiegowosc@vidok.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile tile-3">
|
||||||
|
<h3>MARKETING</h3>
|
||||||
|
<div class="tile-text">
|
||||||
|
<a href="tel:+48178595667">+48 17 859 56 67</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:marketing@vidok.com">marketing@vidok.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile tile-4">
|
||||||
|
<h3>SERWIS</h3>
|
||||||
|
<div class="tile-text">
|
||||||
|
<a href="tel:+48178595682">+48 17 859 56 82</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:serwis@vidok.com">serwis@vidok.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script class="footer" type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('body').on('click', '.box-5 .box-info .box-info-right', function(e){
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
$(this).toggleClass('active')
|
||||||
|
$('.box-5 .c-row-2').slideToggle()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#contact-form-new input.files').fileuploader({
|
||||||
|
fileMaxSize: 10,
|
||||||
|
extensions: ['jpg', 'jpeg', 'png', 'pdf', 'text/plain', 'csv', 'xml', 'xls', 'xlsx', 'doc', 'dot', 'docx'],
|
||||||
|
addMore: true,
|
||||||
|
captions: {
|
||||||
|
button: function(e) {
|
||||||
|
return "Wybierz plik<img src='/images/contact-icon-file.svg'>";
|
||||||
|
},
|
||||||
|
feedback: function(e) {
|
||||||
|
return (
|
||||||
|
"PRZYCIĄGNIJ I UPUŚĆ LUB"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
feedback2: function(e) {
|
||||||
|
return (
|
||||||
|
e.length +
|
||||||
|
" " +
|
||||||
|
(1 < e.length ? "pliki są wybrane" : "plik jest wybrany")
|
||||||
|
);
|
||||||
|
},
|
||||||
|
confirm: "Potwierdzenie",
|
||||||
|
cancel: "Anuluj",
|
||||||
|
name: "Nazwa",
|
||||||
|
type: "Typ pliku",
|
||||||
|
size: "Rozmiar pliku",
|
||||||
|
dimensions: "Wymiary",
|
||||||
|
duration: "Czas",
|
||||||
|
crop: "Utnij to",
|
||||||
|
rotate: "Koło",
|
||||||
|
sort: "Sortować",
|
||||||
|
open: "Otwierasz",
|
||||||
|
download: "Ściągnij",
|
||||||
|
remove: "Usunąć",
|
||||||
|
drop: "Umieść plik tutaj do przesłania",
|
||||||
|
paste: '<div class="fileuploader-pending-loader"></div> Wklej plik, kliknij tutaj, aby usunąć',
|
||||||
|
removeConfirmation: "Czy na pewno chcesz usunąć plik??",
|
||||||
|
errors: {
|
||||||
|
filesLimit: "Sam ${limit} pliki można przesyłać.",
|
||||||
|
filesType: "Sam ${extensions} pliki można przesyłać.",
|
||||||
|
fileSize: "${name} jest zbyt duży! Wybierz plik do ${fileMaxSize} MB.",
|
||||||
|
filesSizeAll: "Wybrane pliki są za duże! Wybierz plik do ${maxSize} MB.",
|
||||||
|
fileName: "Plik o tej samej nazwie ${name} jest już wybrany.",
|
||||||
|
remoteFile: "Pliki zdalne są niedozwolone.",
|
||||||
|
folderUpload: "Foldery są niedozwolone.",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user