Good-Production/triumf-landing
9
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 committed 2024-06-30 01:07:59 +03:00
1 parent 8653542a07
commit 086f0099ba
26 files changed
+387 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/index.css
+179 -3
View File
@@ -1,6 +1,48 @@
@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 +60,7 @@ a,
button,
input,
textarea {
font-family: "Montserrat", sans-serif;
font-family: "Gilroy", sans-serif;
text-decoration: none;
}
@@ -49,11 +91,19 @@ img {
box-sizing: border-box;
}
.logo {
flex: 0 0 auto;
}
.logo__link {
display: flex;
align-items: center;
gap: 22px;
}
@media (max-width: 1240px) {
.logo__link {
gap: 16px;
}
}
.logo__figure {
display: flex;
align-items: center;
@@ -65,6 +115,11 @@ img {
width: 35px;
height: auto;
}
@media (max-width: 992px) {
.logo__figure-image {
width: 25px;
}
}
.logo__text {
display: flex;
flex-direction: column;
@@ -77,6 +132,12 @@ img {
text-transform: uppercase;
color: #2d2d2d;
}
@media (max-width: 992px) {
.logo__text-name {
font-weight: 600;
font-size: 19px;
}
}
.logo__text-slogan {
font-weight: 400;
font-size: 9px;
@@ -84,6 +145,12 @@ img {
text-transform: uppercase;
color: #878787;
}
@media (max-width: 992px) {
.logo__text-slogan {
font-weight: 400;
font-size: 7px;
}
}
.social-link {
display: inline-block;
@@ -93,6 +160,12 @@ img {
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 992px) {
.social-link {
height: 23px;
width: 23px;
}
}
.social-link--whatsapp {
background-image: url(../img/icons/whatsapp.svg);
background-color: #2aa81a;
@@ -110,11 +183,33 @@ img {
.social-link--phone {
width: auto;
height: auto;
margin-left: 17px;
font-weight: 600;
font-size: 24px;
color: #2d2d2d;
}
@media (max-width: 1240px) {
.social-link--phone {
font-size: 20px;
}
}
@media (max-width: 992px) {
.social-link--phone {
background-color: #609eff;
background-image: url(../img/icons/phone.svg);
height: 23px;
width: 23px;
}
}
@media (max-width: 992px) {
.social-link--phone:active {
background-color: #3081ff;
}
}
@media (max-width: 992px) {
.social-link--phone > * {
display: none;
}
}
.button {
border-radius: 100px;
@@ -125,33 +220,114 @@ img {
.button--order {
display: inline-block;
padding: 14px 29px;
color: #878787;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.01em;
border: 1px solid #cacaca;
}
.button--order:hover {
color: #ffffff;
border-color: #609eff;
background-color: #609eff;
}
.button--order:active {
border-color: #3081ff;
background-color: #3081ff;
}
.header {
padding: 26px 0 29px;
}
@media (max-width: 992px) {
.header {
padding: 17px 0 20px;
}
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
@media (max-width: 992px) {
.header .container {
gap: 16px;
}
}
.header__nav {
display: flex;
align-items: center;
gap: 36px;
padding: 0 30px 0 35px;
}
@media (max-width: 1240px) {
.header__nav {
flex: 1 1 auto;
justify-content: space-around;
gap: 16px;
padding: 0;
}
}
@media (max-width: 992px) {
.header__nav {
display: none;
}
}
.header__nav-link {
font-weight: 400;
font-size: 15px;
}
@media (max-width: 1240px) {
.header__nav-link {
font-size: 14px;
}
}
.header__social {
display: flex;
align-items: center;
gap: 17px;
}
@media (max-width: 992px) {
.header__social {
gap: 13px;
}
}
.header__social .social-link--phone {
margin-left: 17px;
}
@media (max-width: 1240px) {
.header__social .social-link--phone {
margin-left: 0;
}
}
.header__buttons {
display: flex;
align-items: center;
gap: 13px;
}
@media (max-width: 576px) {
.header__buttons .button--order {
display: none;
}
}
.header__burger {
display: none;
height: 30px;
width: 30px;
border: none;
border-radius: 30px;
background: url(../img/icons/burger.svg) center no-repeat;
background-color: #609eff;
transition: all ease-in-out 0.1s;
cursor: pointer;
}
@media (max-width: 992px) {
.header__burger {
display: inline-block;
background-color: #609eff;
}
}
.header__burger:active {
background-color: #3081ff;
}
assets/fonts/Gilroy-Bold.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Bold.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Bold.woff
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Light.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Light.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Light.woff
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Medium.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Medium.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Medium.woff
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Regular.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Regular.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-Regular.woff
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-RegularItalic.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-RegularItalic.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-RegularItalic.woff
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-SemiBold.eot
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-SemiBold.ttf
BIN
View File
Binary file not shown.
assets/fonts/Gilroy-SemiBold.woff
BIN
View File
Binary file not shown.
assets/img/icons/burger.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2891 2.72605C13.6436 2.7636 13.9922 2.94716 14.1445 3.18079C14.2148 3.28509 14.2236 3.32473 14.2236 3.51873C14.2236 3.71689 14.2148 3.75027 14.1416 3.85666C14.0303 4.01728 13.8281 4.15704 13.5938 4.23631L13.4033 4.30097L7.55859 4.30723C2.27344 4.3114 1.70215 4.30932 1.55566 4.27803C1.21875 4.20919 0.93457 4.01728 0.814453 3.7753C0.732422 3.60634 0.74707 3.34767 0.855469 3.18497C1.0166 2.93465 1.3418 2.76568 1.73145 2.72605C1.95703 2.7031 13.0664 2.7031 13.2891 2.72605Z" fill="white"/>
<path d="M13.4531 7.56014C13.7666 7.63308 14.0039 7.77896 14.1416 7.98945C14.2148 8.0999 14.2236 8.13741 14.2236 8.32289C14.2236 8.50419 14.2148 8.54587 14.1445 8.65007C14.0537 8.79179 13.8691 8.93767 13.6963 9.00852C13.4092 9.12939 13.5352 9.12523 9.75586 9.12523C6.97266 9.12523 6.25195 9.11897 6.12012 9.09605C5.54883 9.00227 5.16797 8.59381 5.27051 8.19368C5.34082 7.92068 5.56055 7.71436 5.91211 7.59766L6.1084 7.53097L9.69727 7.5268C13.0986 7.52263 13.2949 7.52472 13.4531 7.56014Z" fill="white"/>
<path d="M13.4501 12.0262C13.7655 12.0986 14.0751 12.3304 14.1715 12.5665C14.2416 12.743 14.2153 12.9961 14.1072 13.1556C13.9992 13.3151 13.8035 13.4576 13.5815 13.5384L13.4063 13.6001H7.49212H1.57795L1.41148 13.5427C1.19536 13.4704 0.985075 13.3151 0.874093 13.1535C0.798158 13.0365 0.789396 13.0067 0.789396 12.8025C0.789396 12.5984 0.798158 12.5686 0.874093 12.4516C0.985075 12.29 1.18075 12.1475 1.40272 12.0667L1.57795 12.005L7.44831 12.0007C12.4133 11.9986 13.3391 12.0007 13.4501 12.0262Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

assets/scss/_b-reset.scss
+68 -2
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;
}
assets/scss/_l-header.scss
+68
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;
}
}
}
assets/scss/_m-button.scss
+13 -1
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;
}
}
}
assets/scss/_m-logo.scss
+20
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;
}
}
}
}
assets/scss/_m-social-link.scss
+28 -1
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;
}
}
}
}