Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: fixed issues

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 21d4342a6a
commit efcdf9b099
9 changed files with 150 additions and 31 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 75
      assets/css/index.css
  2. BIN
      assets/img/favicon.ico
  3. 2
      assets/js/nav.js
  4. 6
      assets/scss/_b-reset.scss
  5. 1
      assets/scss/_l-faq.scss
  6. 3
      assets/scss/_l-header.scss
  7. 33
      assets/scss/_l-step-by-step.scss
  8. 49
      assets/scss/_m-button.scss
  9. 10
      index.html

75
assets/css/index.css
Unescape View File

@ -55,6 +55,11 @@ body {
color: #2d2d2d;
background-color: #ededed;
}
@media (max-width: 992px) {
body.hidden {
overflow: hidden;
}
}
a,
button,
@ -277,6 +282,16 @@ h3 {
transition: all ease-in-out 0.1s;
cursor: pointer;
}
@keyframes move-light {
from {
transform: translateX(-40px) skewX(-45deg);
opacity: 1;
}
to {
transform: translateX(400px) skewX(-45deg);
opacity: 0.8;
}
}
.button--lg {
display: flex;
align-items: center;
@ -315,29 +330,59 @@ h3 {
background: url(../img/icons/ruble.svg) center no-repeat;
}
.button--light {
position: relative;
overflow: hidden;
color: #2d2d2d;
background-color: #ffffff;
}
.button--light:hover {
color: #609eff;
}
.button--light:hover::after {
animation: move-light 0.5s;
}
.button--light:active {
color: #3081ff;
}
.button--light::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 100%;
background-color: rgba(96, 158, 255, 0.5);
transform: translateX(-4em) skewX(-45deg);
}
.button--dark {
background-color: #609eff;
position: relative;
overflow: hidden;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
background-color: #609eff;
}
.button--dark:hover {
color: #609eff;
background-color: #ffffff;
border-color: #609eff;
}
.button--dark:hover::after {
animation: move-light 0.5s;
}
.button--dark:active {
color: #3081ff;
border-color: #3081ff;
}
.button--dark::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 100%;
background-color: rgba(96, 158, 255, 0.5);
transform: translateX(-4em) skewX(-45deg);
}
.button--dark::before {
filter: brightness(10);
}
@ -527,9 +572,12 @@ h3 {
top: 70px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
flex-direction: column;
gap: 0;
padding: 7px 7px 44px;
overflow: auto;
border-radius: 40px 7px;
background-color: #609eff;
transform: translateX(-200%);
@ -1369,8 +1417,10 @@ h3 {
justify-content: flex-start;
gap: 20px;
padding: 11px 29px 15px;
border: 1px solid rgba(98, 98, 98, 0.25);
color: #878787;
border: 1px solid #ffffff;
border-radius: 8px 25px;
background-color: #ffffff;
transition: all ease-in-out 0.1s;
cursor: pointer;
}
@ -1380,17 +1430,19 @@ h3 {
padding: 8px 21px;
}
}
.step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover {
.step-by-step__controls-button:hover {
background-color: #609eff;
border-color: #609eff;
color: #ffffff;
}
.step-by-step__controls-button:active, .step-by-step__controls-button.active:active {
.step-by-step__controls-button:active {
background-color: #3081ff;
border-color: #3081ff;
color: #ffffff;
}
.step-by-step__controls-button.active {
border-color: white;
background-color: #ffffff;
border-color: #609eff;
background-color: #609eff;
}
.step-by-step__controls-button-number {
font-weight: 500;
@ -1407,18 +1459,18 @@ h3 {
font-weight: 400;
font-size: 24px;
line-height: 146%;
color: #4d4d4d;
color: #878787;
font-size: 20px;
}
.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text, .step-by-step__controls-button:active .step-by-step__controls-button-number, .step-by-step__controls-button:active .step-by-step__controls-button-text {
color: #ffffff;
}
.step-by-step__controls-button.active .step-by-step__controls-button-number {
font-weight: 700;
color: #2d2d2d;
color: #ffffff;
}
.step-by-step__controls-button.active .step-by-step__controls-button-text {
font-weight: 500;
color: #4d4d4d;
}
.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text {
color: #ffffff;
}
.step-by-step__content {
@ -2787,6 +2839,7 @@ h3 {
font-size: 21px;
line-height: 146%;
color: #2d2d2d;
cursor: pointer;
}
@media (max-width: 768px) {
.faq__item-question {

BIN
assets/img/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 15 KiB

2
assets/js/nav.js
Unescape View File

@ -5,6 +5,7 @@ if (burger && headerNav) {
burger.addEventListener('click', () => {
headerNav.classList.toggle('active');
burger.classList.toggle('active');
document.body.classList.toggle('hidden')
});
headerNav.addEventListener('click', (event) => {
@ -15,6 +16,7 @@ if (burger && headerNav) {
if (isLink || isPhone || isButton) {
headerNav.classList.remove('active');
burger.classList.remove('active');
document.body.classList.remove('hidden')
}
});
}

6
assets/scss/_b-reset.scss
Unescape View File

@ -78,6 +78,12 @@ body {
overflow-y: scroll;
color: $black;
background-color: $greybg;
&.hidden {
@include laptop {
overflow: hidden;
}
}
}
a,

1
assets/scss/_l-faq.scss
Unescape View File

@ -60,6 +60,7 @@
font-size: 21px;
line-height: 146%;
color: $black;
cursor: pointer;
@include tablet {
font-size: 18px;

3
assets/scss/_l-header.scss
Unescape View File

@ -35,9 +35,12 @@
top: 70px;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
flex-direction: column;
gap: 0;
padding: 7px 7px 44px;
overflow: auto;
border-radius: 40px 7px;
background-color: $blue;
transform: translateX(-200%);

33
assets/scss/_l-step-by-step.scss
Unescape View File

@ -50,8 +50,10 @@
justify-content: flex-start;
gap: 20px;
padding: 11px 29px 15px;
border: 1px solid rgba(98, 98, 98, 0.25);
color: $grey;
border: 1px solid $white;
border-radius: 8px 25px;
background-color: $white;
transition: all ease-in-out 0.1s;
cursor: pointer;
@ -60,21 +62,21 @@
padding: 8px 21px;
}
&:hover,
&.active:hover {
&:hover {
background-color: $blue;
border-color: $blue;
color: $white;
}
&:active,
&.active:active {
&:active {
background-color: $darkblue;
border-color: $darkblue;
color: $white;
}
&.active {
border-color: rgba($color: $white, $alpha: 1);
background-color: $white;
border-color: $blue;
background-color: $blue;
}
&-number {
@ -92,23 +94,24 @@
font-weight: 400;
font-size: 24px;
line-height: 146%;
color: $darkgrey;
color: $grey;
font-size: 20px;
}
&:hover &-number,
&:hover &-text,
&:active &-number,
&:active &-text {
color: $white;
}
&.active &-number {
font-weight: 700;
color: $black;
color: $white;
}
&.active &-text {
font-weight: 500;
color: $darkgrey;
}
&:hover &-number,
&:hover &-text {
color: $white;
}
}

49
assets/scss/_m-button.scss
Unescape View File

@ -5,6 +5,17 @@
transition: all ease-in-out 0.1s;
cursor: pointer;
@keyframes move-light {
from {
transform: translateX(-40px) skewX(-45deg);
opacity: 1;
}
to {
transform: translateX(400px) skewX(-45deg);
opacity: 0.8;
}
}
&--lg {
display: flex;
align-items: center;
@ -50,27 +61,50 @@
}
&--light {
position: relative;
overflow: hidden;
color: $black;
background-color: $white;
&:hover {
color: $blue;
&::after {
animation: move-light 0.5s;
}
}
&:active {
color: $darkblue;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 100%;
background-color: rgba($color: $blue, $alpha: 0.5);
transform: translateX(-4em) skewX(-45deg);
}
}
&--dark {
background-color: $blue;
position: relative;
overflow: hidden;
color: $white;
border-color: rgba($color: $white, $alpha: 0.3);
background-color: $blue;
&:hover {
color: $blue;
background-color: $white;
border-color: $blue;
&::after {
animation: move-light 0.5s;
}
}
&:active {
@ -78,6 +112,17 @@
border-color: $darkblue;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 100%;
background-color: rgba($color: $blue, $alpha: 0.5);
transform: translateX(-4em) skewX(-45deg);
}
&::before {
filter: brightness(10);
}
@ -110,7 +155,7 @@
&--light {
color: #dcdcdc;
border-color: rgba($color: $white, $alpha: 1.0);
border-color: rgba($color: $white, $alpha: 1);
}
&--white {

10
index.html
Unescape View File

@ -109,9 +109,9 @@
<button class="button button--lg button--lg--consult button--light button--callback">
Получить консультацию
</button>
<button class="button button--lg button--lg--coin button--dark">
<a href="#price" class="button button--lg button--lg--coin button--dark">
Посмотреть цены
</button>
</a>
</div>
</div>
</div>
@ -518,6 +518,7 @@
type="text"
placeholder="Введите ваше имя"
autocomplete="off"
minlength="3"
required
/>
<input
@ -526,6 +527,7 @@
type="tel"
placeholder="Введите ваш телефон"
autocomplete="off"
pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
required
/>
<button class="button button--lg button--light">Получить помощь</button>
@ -1913,6 +1915,7 @@
type="text"
placeholder="Введите ваше имя"
autocomplete="off"
minlength="3"
required
/>
<input
@ -1921,6 +1924,7 @@
type="text"
placeholder="Введите ваш телефон"
autocomplete="off"
pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
required
/>
<button class="button button--lg button--light">Получить помощь</button>
@ -2007,6 +2011,7 @@
type="text"
placeholder="Введите ваше имя"
autocomplete="off"
minlength="3"
required
/>
<input
@ -2015,6 +2020,7 @@
type="tel"
placeholder="Введите ваш телефон"
autocomplete="off"
pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
required
/>
<button class="button button--lg button--light">Получить помощь</button>

Write Preview
Loading…
Cancel
Save