diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index d297201..8c06960 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -101,6 +101,7 @@ --text-dark: #2b2b3b; --text-grey: #999; --text-red: #fa0505; + --text-green: #2ED15D; --text-0: #000; --text-3: #333; --text-6: #666; @@ -109,6 +110,9 @@ --background-white: #fff; --background-black: #121212; --background-grey: #f2f2f2; + --background-green: #2ED15D; + --background-9: #999; + /* gradient */ --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 5cf9750..ba8a20a 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1260,6 +1260,240 @@ main{ /* gallery */ + +/* registration */ +.registration{ + padding: 24px; + + display: flex; + justify-content: space-between; +} +.registration__orders{ + width: calc((100% - 48px) / 3); +} +.registration__profile{ + width: calc(((100% - 48px) / 3) * 2); +} + +.registration-card{ + margin-top: 32px; + + padding: 1px; + + border-radius: 20px; +} +.registration-card:first-child{ + margin-top: 0; +} +.registration-card--green{ + background: var(--background-green); +} +.registration-card--red-blue{ + background: var(--gradient-red); +} +.registration-card__content{ + padding: 23px; + + border-radius: 19px; + + background-color: var(--background-white); +} +.registration-card__element{ + margin-top: 24px; + + position: relative; +} +.registration-card__element--margin-top-32{ + margin-top: 32px; +} +.registration-card__element:first-child, +.registration-card__element--margin-top-32:first-child{ + margin-top: 0 +} +.registration-card__element-change{ + position: absolute; + top: 14px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/change-dot.svg); + border: none; + background-color: var(--background-white); + + transition: opacity .2s ease-out; +} +.registration-card__element-change:hover{ + opacity: .8; +} +.registration-card__text{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + + color: var(--text-black); +} +.registration-card__text--grey{ + color: var(--text-grey); +} +.registration-card__label{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + + color: var(--text-3); +} +.registration-card__status{ + padding-left: 20px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + position: relative; +} +.registration-card__status--chek{ + color: var(--text-green); +} +.registration-card__status--chek::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-chek.svg); + object-fit: contain; +} +.registration-card__status--cancelled{ + color: var(--text-red); +} +.registration-card__status--cancelled::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-cancelled.svg); + object-fit: contain; +} +.registration-card__block-accounts{ + display: flex; +} +.registration-card__account{ + margin-left: 16px; + + width: 40px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-9); + border-radius: 50%; +} +.registration-card__account:first-child{ + margin-left: 0; +} +.registration-card__block-buttons{ + display: flex; + justify-content: space-between; + align-items: center; +} +.registration-card__button{ + padding: 8px 8px 6px 0; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: none; + border: none; + + position: relative; +} +.registration-card__button::before{ + content: ''; + + position: absolute; + bottom: 6px; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); + + transition: opacity .2s ease-out; +} +.registration-card__button:hover{ + opacity: .8; +} +.registration-card__text, .registration-card__label, .registration-card__status, .registration-card__block-accounts, .registration-card__block-buttons{ + margin-top: 8px; +} +.registration-card__text:first-child, .registration-card__label:first-child, .registration-card__status:first-child, .registration-card__block-accounts:first-child, .registration-card__block-buttons:first-child{ + margin-top: 0px; +} +.registration-card__block-add-pets{ + width: 100%; + + display: flex; + align-items: center; + + background: none; + border: none; +} +.registration-card-add-pets__circle{ + width: 48px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--text-6); + border-radius: 50%; +} +.registration-card-add-pets__text{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + + color: var(--text-6); + + position: relative; +} +.registration-card-add-pets__text::after{ + content: ''; + + position: absolute; + left: 0; + bottom: -4px; + + width: 100%; + height: 1px; + + background: var(--text-6); +} +/* registration */ + @media only screen and (max-width: 1600px) { .wrapper{ diff --git a/assets/img/svg/main/change-dot.svg b/assets/img/svg/main/change-dot.svg new file mode 100644 index 0000000..f38b6c9 --- /dev/null +++ b/assets/img/svg/main/change-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svg/main/google-white.svg b/assets/img/svg/main/google-white.svg new file mode 100644 index 0000000..4040621 --- /dev/null +++ b/assets/img/svg/main/google-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/svg/main/plus-grey.svg b/assets/img/svg/main/plus-grey.svg new file mode 100644 index 0000000..6fa9039 --- /dev/null +++ b/assets/img/svg/main/plus-grey.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/svg/main/status-cancelled.svg b/assets/img/svg/main/status-cancelled.svg new file mode 100644 index 0000000..f96648a --- /dev/null +++ b/assets/img/svg/main/status-cancelled.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svg/main/status-chek.svg b/assets/img/svg/main/status-chek.svg new file mode 100644 index 0000000..836d49b --- /dev/null +++ b/assets/img/svg/main/status-chek.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svg/main/vk-white.svg b/assets/img/svg/main/vk-white.svg new file mode 100644 index 0000000..556d386 --- /dev/null +++ b/assets/img/svg/main/vk-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/svg/main/ya-white.svg b/assets/img/svg/main/ya-white.svg new file mode 100644 index 0000000..a6b4ece --- /dev/null +++ b/assets/img/svg/main/ya-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/registration.html b/registration.html new file mode 100644 index 0000000..a2aa9da --- /dev/null +++ b/registration.html @@ -0,0 +1,412 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ +
+
+
+
+
+
+

Имя и фамилия не указано

+
+ +
+

Телефон:

+

Не заполнено

+
+ +
+

Почта:

+

example@example.com

+

Почта подтверждена

+ +
+ +
+

Связанные аккаунты:

+
+ + + +
+
+ +
+
+ + + +
+
+
+
+ +
+
+

Мои адреса

+ +
+

Курьер

+

Не заполнено

+ + +
+ +
+ +
+
+
+ +
+
+ +
+
+
+
+ s +
+
+
+ + + + + + + \ No newline at end of file