diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 662f04f..7143121 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -118,6 +118,11 @@ button{ cursor: pointer; } +.wrapper{ + margin: 0 auto; + + width: 1280px; +} /* компоненты */ @@ -394,4 +399,134 @@ button{ .form__button:hover{ opacity: .8; } -/* form */ \ No newline at end of file +/* form */ + + +/* social media */ +.social-media{ + display: flex; + align-items: center; +} +.social-media__item{ + margin-left: 32px; +} +.social-media__item:first-child{ + margin-left: 0px; +} +.social-media__icon{ + width: 32px; + aspect-ratio: 1; +} +/* social media */ + + +/* product */ +.product{ + margin: -24px; + + width: 100%; + + display: flex; + align-items: start; +} +.product__item{ + margin: 24px; + + width: calc(33.3% - 48px); + + background-color: var(--background-grey); + + border-radius: 24px; +} +.product__product-card{ + height: 274px; + + display: flex; + justify-content: center; + align-items: center; +} +.product__images{ + height: 242px; + object-fit: contain; +} +.product__content-card{ + padding: 15px; +} +.product__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.product__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + color: var(--text-black); +} +.product__price::after{ + content: '₽'; +} +.product__bye{ + margin-top: 8px; +} +/* product */ + +/* compound */ +.compound{ + margin: -5px; + + display: flex; + align-items: start; +} +.compound__item{ + margin: 5px; + + padding: 4px 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + border-radius: 16px; + background-color: var(--background-white); +} +.compound__item:first-child{ + margin-left: 0; +} +/* compound */ + +/* button */ +.button{ + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-radius: 20px; +} +.button--white{ + width: 100%; + + padding: 12px; + + text-align: center; + + background-color: var(--background-white); + border: 1px solid var(--background-black); + + transition: opacity .2s ease-out; +} +.button--white:hover{ + opacity: .8; +} +/* button */ \ No newline at end of file diff --git a/assets/img/product/image.png b/assets/img/product/image.png new file mode 100644 index 0000000..aaef248 Binary files /dev/null and b/assets/img/product/image.png differ diff --git a/assets/img/svg/social-media/tg.svg b/assets/img/svg/social-media/tg.svg new file mode 100644 index 0000000..332942a --- /dev/null +++ b/assets/img/svg/social-media/tg.svg @@ -0,0 +1,3 @@ + diff --git a/assets/img/svg/social-media/vk.svg b/assets/img/svg/social-media/vk.svg new file mode 100644 index 0000000..ef5cadf --- /dev/null +++ b/assets/img/svg/social-media/vk.svg @@ -0,0 +1,3 @@ + diff --git a/assets/img/svg/social-media/ya.svg b/assets/img/svg/social-media/ya.svg new file mode 100644 index 0000000..055175d --- /dev/null +++ b/assets/img/svg/social-media/ya.svg @@ -0,0 +1,6 @@ + diff --git a/ui_kit.html b/ui_kit.html index c8ac42f..65045d7 100644 --- a/ui_kit.html +++ b/ui_kit.html @@ -114,7 +114,7 @@ --> -