diff --git a/assets/css/index.css b/assets/css/index.css index 66735ad..271bc30 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -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; } \ No newline at end of file diff --git a/assets/fonts/Gilroy-Bold.eot b/assets/fonts/Gilroy-Bold.eot new file mode 100644 index 0000000..edc385a Binary files /dev/null and b/assets/fonts/Gilroy-Bold.eot differ diff --git a/assets/fonts/Gilroy-Bold.ttf b/assets/fonts/Gilroy-Bold.ttf new file mode 100644 index 0000000..10bc23b Binary files /dev/null and b/assets/fonts/Gilroy-Bold.ttf differ diff --git a/assets/fonts/Gilroy-Bold.woff b/assets/fonts/Gilroy-Bold.woff new file mode 100644 index 0000000..8db9403 Binary files /dev/null and b/assets/fonts/Gilroy-Bold.woff differ diff --git a/assets/fonts/Gilroy-Light.eot b/assets/fonts/Gilroy-Light.eot new file mode 100644 index 0000000..48d7c55 Binary files /dev/null and b/assets/fonts/Gilroy-Light.eot differ diff --git a/assets/fonts/Gilroy-Light.ttf b/assets/fonts/Gilroy-Light.ttf new file mode 100644 index 0000000..d8c2bb9 Binary files /dev/null and b/assets/fonts/Gilroy-Light.ttf differ diff --git a/assets/fonts/Gilroy-Light.woff b/assets/fonts/Gilroy-Light.woff new file mode 100644 index 0000000..f5fb531 Binary files /dev/null and b/assets/fonts/Gilroy-Light.woff differ diff --git a/assets/fonts/Gilroy-Medium.eot b/assets/fonts/Gilroy-Medium.eot new file mode 100644 index 0000000..0f079bf Binary files /dev/null and b/assets/fonts/Gilroy-Medium.eot differ diff --git a/assets/fonts/Gilroy-Medium.ttf b/assets/fonts/Gilroy-Medium.ttf new file mode 100644 index 0000000..bdbe5de Binary files /dev/null and b/assets/fonts/Gilroy-Medium.ttf differ diff --git a/assets/fonts/Gilroy-Medium.woff b/assets/fonts/Gilroy-Medium.woff new file mode 100644 index 0000000..7e6cd8e Binary files /dev/null and b/assets/fonts/Gilroy-Medium.woff differ diff --git a/assets/fonts/Gilroy-Regular.eot b/assets/fonts/Gilroy-Regular.eot new file mode 100644 index 0000000..786562b Binary files /dev/null and b/assets/fonts/Gilroy-Regular.eot differ diff --git a/assets/fonts/Gilroy-Regular.ttf b/assets/fonts/Gilroy-Regular.ttf new file mode 100644 index 0000000..6cb332c Binary files /dev/null and b/assets/fonts/Gilroy-Regular.ttf differ diff --git a/assets/fonts/Gilroy-Regular.woff b/assets/fonts/Gilroy-Regular.woff new file mode 100644 index 0000000..65da963 Binary files /dev/null and b/assets/fonts/Gilroy-Regular.woff differ diff --git a/assets/fonts/Gilroy-RegularItalic.eot b/assets/fonts/Gilroy-RegularItalic.eot new file mode 100644 index 0000000..c17336a Binary files /dev/null and b/assets/fonts/Gilroy-RegularItalic.eot differ diff --git a/assets/fonts/Gilroy-RegularItalic.ttf b/assets/fonts/Gilroy-RegularItalic.ttf new file mode 100644 index 0000000..29a6795 Binary files /dev/null and b/assets/fonts/Gilroy-RegularItalic.ttf differ diff --git a/assets/fonts/Gilroy-RegularItalic.woff b/assets/fonts/Gilroy-RegularItalic.woff new file mode 100644 index 0000000..b76d32a Binary files /dev/null and b/assets/fonts/Gilroy-RegularItalic.woff differ diff --git a/assets/fonts/Gilroy-SemiBold.eot b/assets/fonts/Gilroy-SemiBold.eot new file mode 100644 index 0000000..7a8676c Binary files /dev/null and b/assets/fonts/Gilroy-SemiBold.eot differ diff --git a/assets/fonts/Gilroy-SemiBold.ttf b/assets/fonts/Gilroy-SemiBold.ttf new file mode 100644 index 0000000..30b5d25 Binary files /dev/null and b/assets/fonts/Gilroy-SemiBold.ttf differ diff --git a/assets/fonts/Gilroy-SemiBold.woff b/assets/fonts/Gilroy-SemiBold.woff new file mode 100644 index 0000000..53aaed3 Binary files /dev/null and b/assets/fonts/Gilroy-SemiBold.woff differ diff --git a/assets/img/icons/burger.svg b/assets/img/icons/burger.svg new file mode 100644 index 0000000..bd82162 --- /dev/null +++ b/assets/img/icons/burger.svg @@ -0,0 +1,5 @@ + diff --git a/assets/scss/_b-reset.scss b/assets/scss/_b-reset.scss index f7363c1..c106cc1 100644 --- a/assets/scss/_b-reset.scss +++ b/assets/scss/_b-reset.scss @@ -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; } diff --git a/assets/scss/_l-header.scss b/assets/scss/_l-header.scss index 1cf76a4..b72e43d 100644 --- a/assets/scss/_l-header.scss +++ b/assets/scss/_l-header.scss @@ -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; + } } } diff --git a/assets/scss/_m-button.scss b/assets/scss/_m-button.scss index 189e428..3bc2c19 100644 --- a/assets/scss/_m-button.scss +++ b/assets/scss/_m-button.scss @@ -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; + } } } diff --git a/assets/scss/_m-logo.scss b/assets/scss/_m-logo.scss index bc6e177..08f130e 100644 --- a/assets/scss/_m-logo.scss +++ b/assets/scss/_m-logo.scss @@ -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; + } } } } diff --git a/assets/scss/_m-social-link.scss b/assets/scss/_m-social-link.scss index f32d879..daa5919 100644 --- a/assets/scss/_m-social-link.scss +++ b/assets/scss/_m-social-link.scss @@ -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; + } + } } } diff --git a/index.html b/index.html index 956cd23..a3e4cdf 100644 --- a/index.html +++ b/index.html @@ -35,11 +35,15 @@