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

Add reCAPTCHA validation to contact form and enhance styling

Browse Source
This commit is contained in:
Roman Pyrih
2025-03-21 15:06:37 +01:00
parent 02ed5624e6
commit f503e19ea5
5 changed files with 294 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
layout/style-scss/kontakt-v3.scss
View File

@@ -1,6 +1,11 @@
@import 'variables';
@import '_mixins';
html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
strong {
font-weight: 700;
}
@@ -206,7 +211,7 @@ strong {
align-items: center;
justify-content: flex-start;
padding: 22px 46px 19px;
background: #2e2d2c;
background: #1d1d1e;
border-radius: 3px;
font-weight: 200;
@@ -392,11 +397,30 @@ strong {
._autoryzowani_partnerzy {
._title {
position: relative;
max-width: fit-content;
margin-left: auto;
color: #3f3f3f;
font-size: 18px;
font-weight: 300;
text-align: right;
text-transform: uppercase;
text-decoration: underline;
margin-bottom: 10px;
// text-decoration: underline;
// margin-bottom: 10px;
padding-bottom: 2px;
margin-bottom: -3px;
line-height: 1;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: #bbbbbb;
}
}
._grid {
@@ -448,7 +472,7 @@ strong {
._city {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #bbbbbb;
// border-bottom: 1px solid #bbbbbb;
._description {
height: 100%;
@@ -468,20 +492,30 @@ strong {
display: block;
margin-bottom: 5px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: #fff246;
}
// &::after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 50%;
// transform: translateX(-50%);
// width: 50px;
// height: 2px;
// background: #fff246;
// }
}
strong {
position: relative;
&::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
background: #fff246;
}
}
}
}
@@ -550,6 +584,28 @@ strong {
gap: 40px;
}
&.export {
max-width: 920px;
._person__wrapp {
@include respond-above(md) {
flex-basis: 260px;
}
._person {
p {
strong {
font-weight: 700;
a {
font-weight: 700;
}
}
}
}
}
}
._person__wrapp {
flex-basis: 320px;
text-align: center;
@@ -676,8 +732,8 @@ strong {
}
._left {
width: 30%;
min-width: 350px;
width: 40%;
min-width: 520px;
background: url('/layout/images/contact-left-bg.png') no-repeat;
background-size: cover;
padding: 60px;
@@ -686,6 +742,11 @@ strong {
display: flex;
flex-direction: column;
@include respond-below(lg) {
padding: 60px 30px;
min-width: 410px;
}
@include respond-below(md) {
width: 100%;
min-width: unset;
@@ -739,6 +800,15 @@ strong {
grid-template-columns: 1fr;
gap: 10px;
._head_link {
> a {
color: #fff;
font-family: $font3;
font-weight: 600;
cursor: pointer;
}
}
._head {
font-weight: 600;
cursor: pointer;
@@ -776,14 +846,25 @@ strong {
}
._accounts {
margin-top: 400px;
margin-top: 280px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: 'icon text' 'numbers numbers';
align-items: center;
gap: 20px 30px;
@include respond-below(md) {
margin-top: 50px;
margin-bottom: 50px;
grid-template-columns: 1fr 1fr;
}
._icon {
margin-bottom: 20px;
grid-area: icon;
// margin-bottom: 20px;
width: 100%;
max-width: 78px;
margin-left: auto;
@include respond-below(md) {
filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
@@ -792,33 +873,54 @@ strong {
}
._text {
grid-area: text;
font-size: 15px;
margin: 0;
// @include respond-below(md) {
// margin-bottom: 20px;
// }
@include respond-below(md) {
margin-bottom: 20px;
text-align: left;
}
}
._accounts_numbers {
@include respond-above(md) {
display: none;
}
@include respond-below(md) {
margin-bottom: 50px;
grid-area: numbers;
font-size: 20px;
font-weight: 300;
// @include respond-above(md) {
// display: none;
// }
// @include respond-below(md) {
// margin-bottom: 50px;
// }
@include respond-below(lg) {
font-size: 17px;
}
}
}
}
._right {
width: 70%;
// width: 60%;
@include respond-below(md) {
width: 100%;
// @include respond-below(md) {
// width: 100%;
// }
._h1 {
color: #181c1d;
font-size: 32px;
font-family: $font3;
font-weight: 300;
padding: 40px 60px 0px 60px;
}
._map {
padding: 60px 60px 0 60px;
padding: 30px 60px 0 60px;
@include respond-below(md) {
padding: 60px 0;
@@ -826,7 +928,7 @@ strong {
}
.contact-form-box {
padding: 60px;
padding: 60px 30px 30px 30px;
background: #f5f5f5;
@include respond-below(md) {
@@ -834,13 +936,13 @@ strong {
}
}
._accounts_numbers {
padding: 120px 60px 60px 60px;
// ._accounts_numbers {
// padding: 120px 60px 60px 60px;
@include respond-below(md) {
display: none;
}
}
// @include respond-below(md) {
// display: none;
// }
// }
.c-row {
&-1 {
@@ -1074,10 +1176,29 @@ strong {
}
}
.form_actions {
@include respond-below(xs) {
flex-direction: column;
align-items: center;
row-gap: 20px;
}
}
.g-recaptcha {
@include respond-above(xs) {
max-width: fit-content;
margin-left: auto;
}
@include respond-below(xs) {
display: flex;
justify-content: center;
}
}
button[type='submit'] {
background: #fbf27a;
width: fit-content;
margin-left: auto;
// margin-left: auto;
border: none;
color: #1d1d1e;
@@ -1099,6 +1220,10 @@ strong {
img {
margin-left: 10px;
}
@include respond-above(xs) {
margin-left: 20px;
}
}
}
}