save

10 months ago · 64e0310bb7
parent 8b8d010f45
commit 64e0310bb7
6 changed files with 190 additions and 3 deletions
--- 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 */
+/* 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 */
--- a/assets/img/product/image.png
+++ b/assets/img/product/image.png
--- a/assets/img/svg/social-media/tg.svg
+++ b/assets/img/svg/social-media/tg.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 0C7.16387 0 0 7.16387 0 16C0 24.8361 7.16387 32 16 32C24.8361 32 32 24.8361 32 16C32 7.16387 24.8361 0 16 0ZM23.8555 10.9626L21.2335 23.3394C21.0374 24.2168 20.5213 24.4335 19.7884 24.0206L15.7832 21.0684L13.8529 22.9265C13.6361 23.1432 13.4606 23.3187 13.0477 23.3187L13.3265 19.2516L20.7381 12.5523C21.0581 12.2735 20.6658 12.1084 20.2426 12.3871L11.0761 18.1574L7.1329 16.929C6.27613 16.6606 6.25548 16.0723 7.31871 15.6594L22.751 9.70323C23.4632 9.44516 24.0929 9.87871 23.8555 10.9626Z" fill="white"/>
+</svg>
--- a/assets/img/svg/social-media/vk.svg
+++ b/assets/img/svg/social-media/vk.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25023 2.25053C0 4.50106 0 8.1189 0 15.3588V16.6369C0 23.8769 0 27.4989 2.25023 29.7495C4.50046 32 8.11782 32 15.361 32H16.639C23.8779 32 27.4995 32 29.7498 29.7495C32 27.4989 32 23.8811 32 16.6369V15.3588C32 8.1189 32 4.49682 29.7498 2.24628C27.4995 0 23.8779 0 16.639 0H15.361C8.11782 0 4.50046 0 2.25023 2.25053ZM5.40056 9.73673C5.57463 18.0552 9.73544 23.0573 17.0253 23.0573H17.4372V18.2972C20.1162 18.5648 22.1414 20.5223 22.9566 23.0573H26.7438C25.7036 19.2696 22.9694 17.1762 21.2626 16.3779C22.9694 15.3928 25.3682 12.9894 25.9414 9.73673H22.5023C21.7551 12.3779 19.5431 14.7771 17.4372 15.0021V9.73673H13.9981V18.9639C11.8668 18.4289 9.17076 15.8429 9.05188 9.73673H5.40056Z" fill="white"/>
+</svg>
--- a/assets/img/svg/social-media/ya.svg
+++ b/assets/img/svg/social-media/ya.svg
@ -0,0 +1,6 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.568 0C15.3825 2.50628 15.3939 5.04672 14.9687 7.51149C14.1605 12.1873 11.5304 14.5683 6.79636 15.1227C4.54453 15.3866 2.2659 15.4261 0 15.5674C0 15.0765 0.160702 13.7889 0.188825 13.6262C1.18518 7.88646 4.32691 3.76713 9.62271 1.37266C11.0322 0.736552 15.0772 0 15.568 0Z" fill="white"/>
+<path d="M0 16.4092C1.98668 16.5478 3.98207 16.6134 5.9567 16.8504C7.26575 17.0071 8.59221 17.2817 9.82962 17.7276C12.4651 18.6778 14.1652 20.6477 14.6935 23.3508C15.2399 26.1477 15.4375 29.0136 15.8051 31.9933C13.2814 32.0689 11.2063 31.5179 9.25913 30.5624C4.19768 28.0795 1.14634 24.0512 0.190834 18.4682C0.156685 18.268 0 16.9007 0 16.4092Z" fill="white"/>
+<path d="M19.7049 0.420142C26.3895 1.89994 31.7127 8.12046 32.0114 14.8057C32.0207 15.0126 32.0127 15.2201 32.0127 15.5657C28.4491 15.4398 24.8916 15.6045 21.5845 14.0684C18.8217 12.7848 17.514 10.3837 17.0841 7.51381C16.7741 5.44276 16.7259 3.33287 16.5545 1.24039C16.5203 0.825915 16.4587 0.414116 16.4092 0.000977742C16.9 0.00030815 19.0963 0.284885 19.7049 0.420142Z" fill="white"/>
+<path d="M16.3945 31.937C16.6202 29.4173 16.7032 26.9653 17.0862 24.5608C17.7719 20.2546 20.1751 17.8106 24.4544 17.1008C26.8897 16.6971 29.3799 16.6221 31.844 16.3984C32.5009 23.4211 25.5157 32.1385 16.3945 31.937Z" fill="white"/>
+</svg>
--- a/ui_kit.html
+++ b/ui_kit.html
@ -114,7 +114,7 @@
        </li>
    </ul> -->
    
-    <form class="form" method="post" action="/send-telegram.php">
+    <!-- <form class="form" method="post" action="/send-telegram.php">
        <p class="form__title">
            Форма обратной связи
        </p>
@ -130,7 +130,47 @@
        <div class="form__item">
            <input class="form__button" type="submit" value="Отправить">
        </div>
-    </form>
+    </form> -->
+
+    <!-- <div class="social-media">
+        <a href="#" class="social-media__item">
+            <img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
+        </a>
+        <a href="#" class="social-media__item">
+            <img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
+        </a>
+        <a href="#" class="social-media__item">
+            <img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
+        </a>
+    </div> -->
+
+    <div class="wrapper">
+        <div class="product">
+            <div class="product__item">
+                <div class="product__product-card">
+                    <img src="assets/img/product/image.png" alt="" class="product__images">
+                </div>
+                <div class="product__content-card">
+                    <div class="compound">
+                        <div class="compound__item">Индейка </div>
+                        <div class="compound__item">Индейка </div>  
+                    </div>
+                    <p class="product__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
+                    <p class="product__price">
+                        1 304
+                    </p>
+                    <div class="product__bye">
+                        <button class="button button--white">
+                            Купить
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="product__item">
+                
+            </div>
+        </div>
+    </div>

    <script src="/assets/js/gp-main.js"></script>
 </body>