diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 9a4f581..d7c2d17 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -2,22 +2,22 @@
@font-face {
font-family: 'DIN Pro';
- src: url('fonts/DINPro-Medium.eot');
+ src: url('../fonts/DINPro-Medium.eot');
src: local('DIN Pro Medium'), local('DINPro-Medium'),
- url('fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
- url('fonts/DINPro-Medium.woff') format('woff'),
- url('fonts/DINPro-Medium.ttf') format('truetype');
+ url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DINPro-Medium.woff') format('woff'),
+ url('../fonts/DINPro-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DIN Pro';
- src: url('fonts/DINPro-Black.eot');
+ src: url('../fonts/DINPro-Black.eot');
src: local('DIN Pro Black'), local('DINPro-Black'),
- url('fonts/DINPro-Black.eot?#iefix') format('embedded-opentype'),
- url('fonts/DINPro-Black.woff') format('woff'),
- url('fonts/DINPro-Black.ttf') format('truetype');
+ url('../fonts/DINPro-Black.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DINPro-Black.woff') format('woff'),
+ url('../fonts/DINPro-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index d96a82b..2dc3c4e 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -47,8 +47,8 @@ body {
h1 {
font-family: 'DIN Pro', sans-serif;
font-weight: 500;
- font-size: 62px;
- line-height: 120%;
+ font-size: 66px;
+ line-height: 110%;
letter-spacing: -0.04em;
text-transform: uppercase;
background: linear-gradient(
@@ -112,7 +112,7 @@ h1 strong {
}
.header__container {
position: absolute;
- top: 28px;
+ top: 24px;
z-index: 2;
}
.header__logo {
@@ -156,8 +156,8 @@ h1 strong {
/* Hero */
.hero {
- padding-top: 170px;
- padding-bottom: 102px;
+ padding-top: 160px;
+ padding-bottom: 92px;
position: relative;
z-index: 1;
}
@@ -198,7 +198,7 @@ h1 strong {
}
.hero__content {
display: flex;
- align-items: flex-end;
+ align-items: flex-start;
gap: 64px;
justify-content: space-between;
position: relative;
@@ -208,7 +208,7 @@ h1 strong {
content: '';
position: absolute;
top: -60px;
- right: -590px;
+ right: -595px;
width: 1230px;
height: 830px;
pointer-events: none;
@@ -220,7 +220,7 @@ h1 strong {
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 32px;
+ gap: 42px;
max-width: 590px;
}
.hero__title {
@@ -230,23 +230,28 @@ h1 strong {
.hero__desc {
display: inline-flex;
align-items: center;
- gap: 14px;
- border: 2px solid rgba(28, 27, 27, 0.9);
- border-radius: 15px;
- padding: 13px 24px;
+ gap: 12px;
+}
+.hero__desc p {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 130%;
+ padding: 12px 20px 12px 18px;
+ border-radius: 12px;
+ border: 1px solid rgba(0, 7, 30, 0.15);
+ box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.01);
}
-.hero__desc::before {
+.hero__desc p::before {
+ display: none;
content: '';
width: 24px;
height: 24px;
background: url('../img/i-info.svg') center no-repeat;
background-size: cover;
}
-.hero__desc p {
- font-weight: 500;
- font-size: 20px;
- line-height: 130%;
-}
.hero__desc p b {
font-weight: 700;
}
@@ -262,50 +267,48 @@ h1 strong {
.hero__price-header {
display: flex;
align-items: center;
+ justify-content: center;
gap: 24px;
- border-radius: 24px;
- padding: 16px;
- background: linear-gradient(
- 142deg,
- rgba(255, 255, 255, 0) 0%,
- rgba(255, 255, 255, 0.2) 41.5%,
- rgba(255, 255, 255, 0) 100%
- ),
- #f7f5f3;
+ width: 100%;
+ margin-bottom: 4px;
}
.hero__price-header span {
display: flex;
align-items: center;
- gap: 10px;
+ justify-content: center;
+ gap: 12px;
border-radius: 14px;
- padding: 14px 20px;
- background: linear-gradient(
- 142deg,
- rgba(255, 255, 255, 0) 0%,
- rgba(255, 255, 255, 0.2) 41.5%,
- rgba(255, 255, 255, 0) 100%
- ),
- #d92d2d;
+ padding: 14px;
font-weight: 600;
font-size: 18px;
line-height: 140%;
color: #fff;
+ width: 100%;
+ border-right: 3px solid #54596c;
+ border-left: 3px solid #54596c;
+ background: linear-gradient(
+ 329deg,
+ rgba(255, 255, 255, 0) 9.59%,
+ rgba(255, 255, 255, 0.1) 47.6%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ var(--clr-general);
}
.hero__price-header span::before {
content: '';
- width: 24px;
- height: 24px;
+ width: 22px;
+ height: 22px;
background: url('../img/i-percent.svg') center no-repeat;
background-size: cover;
}
.hero__price-header p {
- font-weight: 400;
- font-size: 17px;
+ font-weight: 500;
+ font-size: 16.5px;
line-height: 130%;
- max-width: 220px;
}
.hero__price-header p b {
font-weight: 600;
+ color: #ffcc02;
}
.hero__price-content {
display: flex;
@@ -359,7 +362,8 @@ h1 strong {
max-width: 490px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 26px;
- padding: 32px;
+ padding: 12px;
+ padding-bottom: 32px;
box-shadow: 0 10px 42px 0 rgba(0, 0, 0, 0.17);
background: linear-gradient(
142deg,
@@ -370,10 +374,15 @@ h1 strong {
#f2f2f2;
}
.hero__form-title {
+ padding-left: 12px;
+ padding-right: 12px;
+ max-width: 320px;
+ margin-left: auto;
+ margin-right: auto;
}
.hero__form-title p {
- font-weight: 400;
- font-size: 18px;
+ font-weight: 500;
+ font-size: 17.5px;
line-height: 130%;
letter-spacing: -0.02em;
text-align: center;
@@ -382,6 +391,8 @@ h1 strong {
font-weight: 600;
}
.hero__form-action {
+ padding-left: 24px;
+ padding-right: 24px;
}
.hero__form-action form {
display: flex;
@@ -485,7 +496,8 @@ h1 strong {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
- margin-top: 102px;
+ margin-top: 92px;
+ margin-top: 72px;
position: relative;
z-index: 1;
}
@@ -589,7 +601,6 @@ h1 strong {
width: 44px;
height: 44px;
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.07);
- /* background: #282828; */
background: rgba(255, 255, 255, 0.1);
transition: transform 0.2s ease-in-out;
}
@@ -629,9 +640,6 @@ h1 strong {
width: 100%;
height: 100%;
background: rgba(0, 7, 30, 0.8);
- /* background: #00071e; */
- /* -webkit-backdrop-filter: blur(2px);
- backdrop-filter: blur(2px); */
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
opacity: 1;
@@ -727,7 +735,7 @@ h1 strong {
}
.modal__title p {
font-family: 'DIN Pro', sans-serif;
- font-size: 23px;
+ font-size: 26px;
font-weight: 500;
line-height: 130%;
text-align: center;
diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css
index 5da0eba..ec774e7 100644
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -6,12 +6,31 @@
right: -320px;
top: 290px;
}
+ .hero__desc {
+ gap: 6px;
+ }
+ .hero__desc p {
+ font-size: 13px;
+ padding: 8px 12px;
+ border-radius: 10px;
+ }
+ .hero__desc img {
+ width: 24px;
+ height: 24px;
+ }
+ .hero__leftside {
+ gap: 18px;
+ }
+ .hero__advantages {
+ margin-top: 42px;
+ }
}
@media screen and (max-width: 540px) {
.header__container {
align-items: flex-start;
gap: 24px;
- padding-bottom: 24px;
+ padding-bottom: 20px;
+ top: 20px;
}
.header__container::after {
content: '';
@@ -25,23 +44,29 @@
.header__logo {
max-width: 240px;
}
+ .header__logo img {
+ width: 50px;
+ }
.header__logo p {
- font-size: 12px;
+ font-size: 9px;
+ }
+ .header__socials {
+ gap: 6px;
}
.header__contacts {
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
- row-gap: 24px;
+ gap: 6px;
}
- .header__contacts button.btn {
+ .header__contacts .header__tel {
}
.header__tel {
font-size: 20px;
margin: 0;
}
.hero {
- padding-top: 170px;
+ padding-top: 110px;
}
}
@media screen and (max-width: 470px) {
@@ -55,19 +80,19 @@
.hero__price {
margin-top: 12px;
}
- .hero__price-header p {
- max-width: 160px;
- }
.hero__content {
gap: 34px;
}
.hero__content::after {
- opacity: 1;
- right: -290px;
- width: 520px;
- height: 320px;
+ opacity: 0.6;
+ right: -125px;
+ width: 200px;
+ height: 140px;
background-size: contain;
- top: 280px;
+ top: 0px;
+ }
+ .hero::before {
+ opacity: 0.4;
}
.hero__form-gift {
overflow: hidden;
@@ -88,15 +113,24 @@
.hero__price-header {
gap: 10px;
padding: 10px;
+ padding-bottom: 0;
border-radius: 10px;
+ margin-bottom: 0;
}
.hero__price-header p {
- font-size: 14px;
+ font-size: 13px;
}
.hero__price-header span {
- padding: 8px 12px;
border-radius: 10px;
- font-size: 14px;
+ border: none;
+ padding-left: 2px;
+ padding-right: 2px;
+ gap: 7px;
+ }
+ .hero__price-header span::before {
+ min-width: 18px;
+ width: 18px;
+ height: 18px;
}
.hero__price-stock p {
font-size: 20px;
@@ -111,19 +145,11 @@
.hero__price-unit p {
font-size: 13px;
}
- .hero__price-header span::before {
- width: 16px;
- height: 16px;
- }
.hero__price-content {
gap: 10px;
}
.header__logo {
- /* flex-direction: column;
- align-items: flex-start; */
- }
- .header__logo p {
- /* max-width: 100%; */
+ width: 100%;
}
.header__container {
align-items: center;
@@ -133,7 +159,7 @@
}
.hero__form {
gap: 20px;
- padding: 20px 14px;
+ padding: 0 0 20px 0;
border-radius: 16px;
}
.hero__form-title p {
@@ -145,10 +171,10 @@
font-size: 36px;
}
.header__logo img {
- width: 46px;
+ width: 42px;
}
.header__logo p {
- font-size: 11px;
+ font-size: 9px;
}
.header__tel {
font-size: 17px;
@@ -174,12 +200,32 @@
display: none;
}
.header__logo img {
- width: 44px;
- }
- .header__logo p {
- font-size: 10px;
+ width: 39px;
}
.header__tel {
font-size: 16.5px;
}
+ .hero__form-action select,
+ .hero__form-action input {
+ font-size: 13.5px;
+ }
+}
+@media screen and (max-width: 360px) {
+ .hero__desc {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .hero__price-header span {
+ padding-left: 20px;
+ padding-right: 20px;
+ gap: 12px;
+ }
+ .hero__content {
+ gap: 20px;
+ }
+ .hero__price-header span::before {
+ min-width: 20px;
+ width: 20px;
+ height: 20px;
+ }
}
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index af758f4..c998802 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -23,21 +23,28 @@ h1 {
.header__contacts {
gap: 10px;
}
-.header__tel {
- order: 3;
- margin-left: 14px;
-}
-.header__contacts button.btn p {
+.header__contacts button.btn,
+.header__contacts .header__tel p {
display: none;
}
-.header__contacts button.btn {
+.header__contacts .header__tel {
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 47px;
height: 47px;
border-radius: 9px;
position: relative;
padding: 0;
-}
-.header__contacts button.btn::before {
+ background: linear-gradient(
+ 322deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.32) 41.5%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #fc0;
+}
+.header__contacts .header__tel::before {
content: '';
width: 24px;
height: 24px;
@@ -95,7 +102,7 @@ h1 {
@media screen and (max-width: 670px) {
.header__socials-link,
.footer__socials-link,
- .header__contacts button.btn {
+ .header__contacts .header__tel {
width: 40px;
height: 40px;
}
@@ -104,7 +111,7 @@ h1 {
width: 24px;
height: 24px;
}
- .header__contacts button.btn::before {
+ .header__contacts .header__tel::before {
width: 20px;
height: 20px;
}
@@ -153,7 +160,7 @@ h1 {
}
.header__socials-link,
.footer__socials-link,
- .header__contacts button.btn {
+ .header__contacts .header__tel {
width: 37px;
height: 37px;
}
@@ -162,7 +169,7 @@ h1 {
width: 22px;
height: 22px;
}
- .header__contacts button.btn::before {
+ .header__contacts .header__tel::before {
width: 18px;
height: 18px;
}
@@ -177,10 +184,6 @@ h1 {
width: 20px;
height: 20px;
}
- .hero__desc {
- padding: 10px 20px;
- border-radius: 12px;
- }
.hero__desc p {
font-size: 16px;
}
@@ -197,15 +200,6 @@ h1 {
align-items: center;
text-align: center;
}
- .hero__price-header span {
- padding: 12px 16px;
- border-radius: 12px;
- font-size: 16px;
- }
- .hero__price-header span::before {
- width: 19px;
- height: 19px;
- }
.hero__price-header p {
font-size: 16px;
}
diff --git a/assets/img/footer-logo.webp b/assets/img/footer-logo.webp
index 75007ab..23a1d8c 100644
Binary files a/assets/img/footer-logo.webp and b/assets/img/footer-logo.webp differ
diff --git a/assets/img/i-delivery.svg b/assets/img/i-delivery.svg
new file mode 100644
index 0000000..91556cc
--- /dev/null
+++ b/assets/img/i-delivery.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/img/i-info.svg b/assets/img/i-info.svg
index fdb37d4..fc5671f 100644
--- a/assets/img/i-info.svg
+++ b/assets/img/i-info.svg
@@ -1,17 +1,16 @@