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

feat: added header adaptive

Browse Source
This commit is contained in:
Aliaksei Karzhou
2024-06-30 01:07:59 +03:00
parent 8653542a07
commit 086f0099ba
26 changed files with 387 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
assets/scss/_b-reset.scss
View File

@@ -1,6 +1,72 @@
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-Light.eot');
src: local('Gilroy Light'), local('Gilroy-Light'),
url('../fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-Light.woff') format('woff'),
url('../fonts/Gilroy-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-Regular.eot');
src: local('Gilroy Regular'), local('Gilroy-Regular'),
url('../fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-Regular.woff') format('woff'),
url('../fonts/Gilroy-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-RegularItalic.eot');
src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'),
url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-Medium.eot');
src: local('Gilroy Medium'), local('Gilroy-Medium'),
url('../fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-Medium.woff') format('woff'),
url('../fonts/Gilroy-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-SemiBold.eot');
src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),
url('../fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-SemiBold.woff') format('woff'),
url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('../fonts/Gilroy-Bold.eot');
src: local('Gilroy Bold'), local('Gilroy-Bold'),
url('../fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Gilroy-Bold.woff') format('woff'),
url('../fonts/Gilroy-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
html {
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-family: 'Gilroy', sans-serif;
font-weight: 400;
font-style: normal;
scroll-behavior: smooth;
@@ -18,7 +84,7 @@ a,
button,
input,
textarea {
font-family: 'Montserrat', sans-serif;
font-family: 'Gilroy', sans-serif;
text-decoration: none;
}

68
assets/scss/_l-header.scss
View File

@@ -1,11 +1,19 @@
.header {
padding: 26px 0 29px;
@include laptop {
padding: 17px 0 20px;
}
& .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
@include laptop {
gap: 16px;
}
}
&__nav {
@@ -14,9 +22,24 @@
gap: 36px;
padding: 0 30px 0 35px;
@include desktop {
flex: 1 1 auto;
justify-content: space-around;
gap: 16px;
padding: 0;
}
@include laptop {
display: none;
}
&-link {
font-weight: 400;
font-size: 15px;
@include desktop {
font-size: 14px;
}
}
}
@@ -24,5 +47,50 @@
display: flex;
align-items: center;
gap: 17px;
@include laptop {
gap: 13px;
}
& .social-link--phone {
margin-left: 17px;
@include desktop {
margin-left: 0;
}
}
}
&__buttons {
display: flex;
align-items: center;
gap: 13px;
& .button--order {
@include mobile {
display: none;
}
}
}
&__burger {
display: none;
height: 30px;
width: 30px;
border: none;
border-radius: 30px;
background: url(../img/icons/burger.svg) center no-repeat;
background-color: $blue;
transition: all ease-in-out 0.1s;
cursor: pointer;
@include laptop {
display: inline-block;
background-color: $blue;
}
&:active {
background-color: $darkblue;
}
}
}

14
assets/scss/_m-button.scss
View File

@@ -7,9 +7,21 @@
&--order {
display: inline-block;
padding: 14px 29px;
color: $grey;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.01em;
border: 1px solid #cacaca;
border: 1px solid $lightgrey;
&:hover {
color: $white;
border-color: $blue;
background-color: $blue;
}
&:active {
border-color: $darkblue;
background-color: $darkblue;
}
}
}

20
assets/scss/_m-logo.scss
View File

@@ -1,8 +1,14 @@
.logo {
flex: 0 0 auto;
&__link {
display: flex;
align-items: center;
gap: 22px;
@include desktop {
gap: 16px;
}
}
&__figure {
@@ -15,6 +21,10 @@
max-width: 100%;
width: 35px;
height: auto;
@include laptop {
width: 25px;
}
}
}
@@ -29,6 +39,11 @@
letter-spacing: 0.04em;
text-transform: uppercase;
color: $black;
@include laptop {
font-weight: 600;
font-size: 19px;
}
}
&-slogan {
@@ -37,6 +52,11 @@
letter-spacing: 0.05em;
text-transform: uppercase;
color: $grey;
@include laptop {
font-weight: 400;
font-size: 7px;
}
}
}
}

29
assets/scss/_m-social-link.scss
View File

@@ -6,6 +6,11 @@
background-position: center;
background-repeat: no-repeat;
@include laptop {
height: 23px;
width: 23px;
}
&--whatsapp {
background-image: url(../img/icons/whatsapp.svg);
background-color: #2aa81a;
@@ -27,9 +32,31 @@
&--phone {
width: auto;
height: auto;
margin-left: 17px;
font-weight: 600;
font-size: 24px;
color: $black;
@include desktop {
font-size: 20px;
}
@include laptop {
background-color: $blue;
background-image: url(../img/icons/phone.svg);
height: 23px;
width: 23px;
}
&:active {
@include laptop {
background-color: $darkblue;
}
}
& > * {
@include laptop {
display: none;
}
}
}
}