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

Contact new tabs

Browse Source
This commit is contained in:
Roman Pyrih
2025-02-05 12:38:49 +01:00
parent 874b2352e2
commit 6fdf88eca9
4 changed files with 1393 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/kontakt.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/kontakt.css.map
View File

File diff suppressed because one or more lines are too long

688
layout/style-scss/kontakt.scss
View File

@@ -1,375 +1,443 @@
._urw_text { ._urw_text {
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 15px; font-size: 15px;
} }
} }
.contact-form { .contact-form {
display: grid; display: grid;
grid-template-columns: 580px 1fr; grid-template-columns: 580px 1fr;
column-gap: 70px; column-gap: 70px;
@media (max-width: 1024px) { @media (max-width: 1024px) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
column-gap: 20px; column-gap: 20px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
row-gap: 50px; row-gap: 50px;
} }
h1 { h1 {
font-size: 50px; font-size: 50px;
font-weight: 200; font-weight: 200;
text-transform: uppercase; text-transform: uppercase;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 30px; font-size: 30px;
} }
} }
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
font-size: 34px; font-size: 34px;
font-weight: 300; font-weight: 300;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 24px; font-size: 24px;
} }
} }
._right { ._right {
h2 { h2 {
margin-bottom: 30px; margin-bottom: 30px;
} }
._text { ._text {
@extend ._urw_text; @extend ._urw_text;
} }
form { form {
margin-top: 48px; margin-top: 48px;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 10px; gap: 10px;
input[type="submit"], input[type='submit'],
button[type="submit"] { button[type='submit'] {
background: rgba(251, 242, 122, 1); background: rgba(251, 242, 122, 1);
height: 60px; height: 60px;
padding: 21px 36px; padding: 21px 36px;
color: #000; color: #000;
gap: 7px; gap: 7px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
border: 0; border: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
._file { ._file {
background: #FFF; background: #fff;
height: 95px; height: 95px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid rgba(223, 223, 223, 1); border: 1px solid rgba(223, 223, 223, 1);
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
gap: 20px; gap: 20px;
@media (max-width: 768px) { @media (max-width: 768px) {
gap: 10px; gap: 10px;
font-size: 14px; font-size: 14px;
} }
button { button {
display: flex; display: flex;
height: 60px; height: 60px;
padding: 20px 36px; padding: 20px 36px;
font-weight: 700; font-weight: 700;
color: #FFF; color: #fff;
background-color: rgba(29, 29, 30, 1); background-color: rgba(29, 29, 30, 1);
border: 0; border: 0;
text-transform: uppercase; text-transform: uppercase;
gap: 10px; gap: 10px;
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 20px; padding: 20px;
} }
} }
} }
._2_columns { ._2_columns {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 10px; gap: 10px;
} }
._1_column { ._1_column {
display: flex; display: flex;
&._right { &._right {
justify-content: flex-end; justify-content: flex-end;
} }
} }
._1_column, ._1_column,
._2_columns { ._2_columns {
._checkbox {
font-size: 12px;
display: flex;
gap: 10px;
align-items: flex-start;
}
._checkbox { ._radio {
font-size: 12px; display: flex;
display: flex; gap: 5px;
gap: 10px; font-size: 14px;
align-items: flex-start;
}
._radio { input[type='radio'] {
display: flex; border: 1px solid rgba(223, 223, 223, 1);
gap: 5px; }
font-size: 14px; }
input[type="radio"] { input[type='text'],
border: 1px solid rgba(223, 223, 223, 1); input[type='email'],
} textarea,
} select {
display: flex;
height: 38px;
width: 100%;
padding: 0 15px;
justify-content: center;
align-items: center;
border: 1px solid rgba(223, 223, 223, 1);
font-size: 14px;
font-weight: 300;
color: rgba(0, 0, 0, 1);
input[type="text"], &::placeholder {
input[type="email"], font-size: 14px;
textarea, font-weight: 300;
select { color: rgba(0, 0, 0, 0.5);
display: flex; }
height: 38px; }
width: 100%;
padding: 0 15px;
justify-content: center;
align-items: center;
border: 1px solid rgba(223, 223, 223, 1);
font-size: 14px;
font-weight: 300;
color: rgba(0, 0, 0, 1);
&::placeholder { textarea {
font-size: 14px; height: 177px;
font-weight: 300; padding: 15px;
color: rgba(0, 0, 0, 0.5); }
} }
} }
}
textarea { ._left {
height: 177px; padding: 48px;
padding: 15px;
}
}
}
}
._left { @media (max-width: 1024px) {
padding: 48px; padding: 0;
}
@media (max-width: 1024px) { h1 {
padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} padding-bottom: 48px;
max-width: 350px;
h1 { @media (max-width: 768px) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 20px;
padding-bottom: 48px; }
max-width: 350px; }
@media (max-width: 768px) { ._contact_data {
padding-bottom: 20px; padding-top: 48px;
} display: flex;
} row-gap: 48px;
flex-direction: column;
._contact_data { @media (max-width: 768px) {
padding-top: 48px; padding-top: 24px;
display: flex; padding-bottom: 24px;
row-gap: 48px; }
flex-direction: column;
@media (max-width: 768px) { ._title {
padding-top: 24px; font-size: 24px;
padding-bottom: 24px; font-weight: 500;
} text-transform: uppercase;
._title { &._bordered {
font-size: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 500; max-width: 350px;
text-transform: uppercase; padding-bottom: 30px;
}
}
&._bordered { ._icon_data {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex;
max-width: 350px; gap: 21px;
padding-bottom: 30px;
}
}
._icon_data { ._text {
display: flex; font-size: 16px;
gap: 21px; font-weight: 300;
._text { a {
font-size: 16px; text-transform: uppercase;
font-weight: 300; text-decoration: underline;
font-weight: 700;
}
a { &._phones,
text-transform: uppercase; &._mails {
text-decoration: underline; display: flex;
font-weight: 700; flex-direction: column;
} gap: 24px;
&._phones, a {
&._mails { font-weight: 300;
display: flex; text-transform: none;
flex-direction: column; }
gap: 24px; }
}
a { }
font-weight: 300; }
text-transform: none; }
}
}
}
}
}
}
} }
.contact-form-bottom { .contact-form-bottom {
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
._text { ._text {
@extend ._urw_text; @extend ._urw_text;
} }
} }
.contact_accordion { .contact_accordion {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-direction: column; flex-direction: column;
._left { ._left {
border-right: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1);
a { a {
display: flex; display: flex;
gap: 10px; gap: 10px;
text-transform: uppercase; text-transform: uppercase;
padding: 5px; padding: 5px;
&:hover { &:hover {
img { img {
display: block; display: block;
} }
} }
img { img {
width: 10px; width: 10px;
transform: rotate(-90deg); transform: rotate(-90deg);
display: none; display: none;
} }
} }
} }
._title { ._title {
padding: 20px 25px; padding: 20px 25px;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
text-transform: uppercase; text-transform: uppercase;
background: rgba(223, 223, 223, 1); background: rgba(223, 223, 223, 1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 18px; font-size: 18px;
} }
&._active { &._active {
background: rgba(251, 242, 122, 1); background: rgba(251, 242, 122, 1);
} }
} }
._content { ._content {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
&._2_columns { &._2_columns {
display: grid; display: grid;
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;
gap: 50px; gap: 50px;
._city_content { ._city_content {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
display: none; display: none;
} }
} }
._city { ._city {
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
padding-bottom: 33px; padding-bottom: 33px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
max-width: 350px; max-width: 350px;
margin-bottom: 33px; margin-bottom: 33px;
} }
._city_content { ._city_content {
display: grid; display: grid;
grid-template-columns: 1fr 350px; grid-template-columns: 1fr 350px;
gap: 30px; gap: 30px;
._persons { ._city_content_nav {
display: grid; margin-bottom: 30px;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
._person { ul {
._name { padding: 0;
font-weight: 600; margin: 0;
font-size: 16px; list-style: none;
margin-bottom: 30px; display: flex;
} flex-direction: row;
column-gap: 70px;
._phone, li {
._mail { a {
display: flex; display: block;
gap: 20px; padding: 18px 36px;
margin-bottom: 20px; border-radius: 5px;
align-items: flex-start; border: 1px solid #000000;
a { color: #000000;
text-decoration: underline; font-size: 14px;
font-size: 16px; font-weight: 700;
font-weight: 300; font-family: 'URW Form', sans-serif;
} text-transform: uppercase;
}
}
}
._button { &.active {
a { color: #fff;
background: rgba(29, 29, 30, 1); background: #1d1d1e;
color: #FFF; }
font-weight: 700; }
text-transform: uppercase; }
padding: 21px 36px; }
display: flex; }
align-items: center;
justify-content: center; ._cities {
gap: 7px; display: none;
width: fit-content;
} &.active {
} display: grid;
} grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} gap: 20px;
} }
._city {
._name {
font-size: 14px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
color: #232323;
text-align: center;
font-weight: 700;
margin-bottom: 10px;
}
._description {
display: flex;
flex-direction: column;
hr {
width: 80%;
}
p {
text-align: center;
margin: 0;
text-transform: initial;
}
}
}
}
._persons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
._person {
._name {
font-weight: 600;
font-size: 16px;
margin-bottom: 30px;
}
._phone,
._mail {
display: flex;
gap: 20px;
margin-bottom: 20px;
align-items: flex-start;
a {
text-decoration: underline;
font-size: 16px;
font-weight: 300;
}
}
}
}
._button {
a {
background: rgba(29, 29, 30, 1);
color: #fff;
font-weight: 700;
text-transform: uppercase;
padding: 21px 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: fit-content;
}
}
}
}
}

1029
templates_user/page-contact.php
View File

File diff suppressed because it is too large Load Diff