сделал footer для пк и телефон

8 months ago · 73acc61c2b
parent 3396d6e974
commit 73acc61c2b
8 changed files with 235 additions and 6 deletions
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@ -57,6 +57,8 @@
  --background-grey: #2a2a2d;
  --background-grey-hover: #46464a;

+  --link: #86868b;
+
  --text-white: #fff;
 } 

@ -126,10 +128,17 @@ body{
    background-color: var(--blood);
 }

-
 .btn--100-per{
    width: 100%;
 }
+
+.link{
+    font-weight: 400;
+    text-transform: uppercase;
+    text-decoration: underline;
+    text-decoration-skip-ink: none;
+    color: var(--link);
+}
 /* components */

 /* header */
@ -142,3 +151,52 @@ body{
    background-size: contain;
 }
 /* header */
+
+/* footer */
+.footer__logo{
+    width: 74px;
+    height: 64px;
+}
+.footer__menu{
+    display: flex;
+}
+.footer-menu__list{
+    list-style-type: none;
+
+    font-weight: 400;
+    text-transform: uppercase;
+    color: var(--text-white);
+}
+.footer-menu__list a{
+    color: var(--text-white);
+    text-decoration: none;
+}
+.footer__text{
+    margin-top: 24px;
+
+    font-weight: 400;
+    color: var(--text-white);
+}
+.footer__text:first-child{
+    margin-top: 0;
+}
+.footer__text--no-line{
+    text-decoration: none;
+}
+.footer__media{
+    margin-top: 24px;
+
+    display: flex;
+    align-items: center;
+}
+.footer__review{
+    width: 309px;
+    height: 146px;
+}
+.footer__about{
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--link);
+}
+/* footer */
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@ -98,10 +98,47 @@
 /* header */


+/* footer */
+.footer{
+    padding: 56px 0;
+}
+.footer__wrapper{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}

+.footer-menu__item{
+    margin-left: 40px;
+}
+.footer-menu__item:first-child{
+    margin-left: 0;
+}
+.footer-menu__list{
+    font-size: 16px;
+}
+.footer-menu__list li{
+    margin-top: 16px;
+}
+.footer-menu__list li:first-child{
+    margin-top: 0px;
+}
+.footer__text{
+    display: block;

+    max-width: 297px;

+    font-size: 24px;
+}
+.footer__about{
+    margin-top: 33px;

+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+/* footer */



--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@ -1,5 +1,19 @@
 /* Стили для мобильных устройств  */
@media only screen and (max-width: 576px) {
+.wrapper{
+    width: 100%;
+}
+.phone--hone{
+    display: none;
+}
+
+
+
+/* component */
+.link{
+    font-size: 14px;
+}
+
 /* header */
 .header{
    padding: 24px 16px;
@ -10,7 +24,9 @@

    position: relative;
 }
-
+.header__wrapper{
+    padding: 0;
+}
 .header__phone{
    display: flex;
    align-items: center;
@ -150,4 +166,45 @@
    align-items: center;
 }
 /* header */
+
+
+/* footer */
+.footer{
+    padding: 40px 16px;
+}
+.footer__wrapper{
+    display: block;
+}
+.footer__item{
+    margin-top: 40px;
+}
+.footer-menu__item{
+    margin-left: 53px;
+}
+.footer-menu__item:first-child{
+    margin-left: 0;
+}
+.footer-menu__list{
+    font-size: 14px;
+}
+.footer-menu__list li{
+    margin-top: 16px;
+}
+.footer-menu__list li:first-child{
+    margin-top: 0;
+}
+.footer__text{
+    display: block;
+
+    font-size: 18px;
+}
+.footer__about{
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+.footer-about__link{
+    margin-top: 24px;
+}
+/* footer */
 }
--- a/assets/img/photo/review.png
+++ b/assets/img/photo/review.png
--- a/assets/img/social/YouTube.svg
+++ b/assets/img/social/YouTube.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58364 19.1684H19.4163C21.401 19.1684 23.008 17.4219 23 15.2543V8.25102C23 6.09212 21.401 4.33691 19.4163 4.33691H4.58364C2.60702 4.33691 1 6.08334 1 8.25102V15.2543C1 17.4132 2.59898 19.1684 4.58364 19.1684ZM9.65166 8.04453L15.8914 11.6427L9.65166 15.2409V8.04453Z" fill="white"/>
+</svg>
--- a/assets/img/social/yandex-zen.svg
+++ b/assets/img/social/yandex-zen.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7357 13.7357C12.3214 15.195 12.225 17.0143 12.0964 21C15.8121 21 18.3771 20.9871 19.7014 19.7014C20.9871 18.3771 21 15.69 21 12.0964C17.0143 12.225 15.195 12.3214 13.7357 13.7357ZM11.9036 21C8.18786 21 5.62286 20.9871 4.29857 19.7014C3.01286 18.3771 3 15.69 3 12.0964C6.98571 12.225 8.805 12.3214 10.2643 13.7357C11.6786 15.195 11.775 17.0143 11.9036 21ZM10.2643 10.2643C8.805 11.6786 6.98571 11.775 3 11.9036C3 8.31 3.01286 5.62286 4.29857 4.29857C5.62286 3.01286 8.19429 3 11.9036 3C11.775 6.98571 11.6786 8.805 10.2643 10.2643ZM12.0964 3C12.2186 6.98571 12.3214 8.805 13.7357 10.2643C15.195 11.6786 17.0143 11.775 21 11.9036C21 8.31 20.9871 5.62286 19.7014 4.29857C18.3771 3.01286 15.8121 3 12.0964 3Z" fill="white"/>
+</svg>
--- a/assets/img/social/Вконтакте.svg
+++ b/assets/img/social/Вконтакте.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0789 17.9498C13.0789 17.9498 13.476 17.9077 13.6793 17.6988C13.8655 17.5075 13.859 17.1464 13.859 17.1464C13.859 17.1464 13.8343 15.4602 14.6531 15.2112C15.4601 14.9664 16.4964 16.8418 17.596 17.563C18.4267 18.1083 19.0573 17.9889 19.0573 17.9889L21.9959 17.9498C21.9959 17.9498 23.5325 17.8593 22.804 16.704C22.7437 16.6093 22.379 15.8491 20.6197 14.2874C18.7764 12.6526 19.0239 12.917 21.2427 10.0889C22.5942 8.36672 23.1343 7.3153 22.9654 6.86572C22.8051 6.43569 21.8108 6.54989 21.8108 6.54989L18.5031 6.56943C18.5031 6.56943 18.2578 6.53754 18.076 6.64145C17.8984 6.7433 17.7833 6.98095 17.7833 6.98095C17.7833 6.98095 17.2603 8.31322 16.562 9.44694C15.0889 11.8378 14.5003 11.9644 14.2593 11.8162C13.6987 11.4695 13.8386 10.4253 13.8386 9.68356C13.8386 7.36571 14.2066 6.39968 13.123 6.14969C12.7636 6.06636 12.4989 6.01183 11.5789 6.00257C10.3985 5.99126 9.4 6.00669 8.83401 6.27109C8.4574 6.44701 8.16688 6.84 8.34442 6.86264C8.56285 6.89041 9.05782 6.99021 9.32037 7.33176C9.65932 7.77311 9.64748 8.7628 9.64748 8.7628C9.64748 8.7628 9.84224 11.4911 9.19233 11.8296C8.74685 12.0621 8.13567 11.5878 6.82185 9.41814C6.14934 8.30705 5.64146 7.07868 5.64146 7.07868C5.64146 7.07868 5.54354 6.84926 5.36815 6.72581C5.15617 6.57664 4.86027 6.53034 4.86027 6.53034L1.71721 6.54989C1.71721 6.54989 1.24484 6.56223 1.0716 6.75873C0.917726 6.93259 1.05976 7.2937 1.05976 7.2937C1.05976 7.2937 3.52062 12.7987 6.30751 15.5734C8.86306 18.1165 11.764 17.9498 11.764 17.9498H13.0789Z" fill="white"/>
+</svg>
--- a/index.html
+++ b/index.html
@ -52,12 +52,12 @@
            <div class="wrapper header__wrapper">
                <div class="header__logo"></div>

-                <div class="header__text">
+                <div class="header__text phone--hone">
                    Работаем с гос.заказчиками <br>
                    по <a href="#">44-ФЗ/223-ФЗ</a>
                </div>

-                <div class="header__main">
+                <div class="header__main phone--hone">
                    <div class="header-main__item">
                        <a href="tel:+74957988081" class="header__text header__text--bo-line">+7 (495) 798-80-81</a>
                    </div>
@ -101,7 +101,7 @@
                </div>
            </div>

-            <div class="header__menu">
+            <div class="header__menu phone--hone">
                <div class="wrapper header-menu__wrapper">
                    <ul class="header-menu__list">
                        <li>
@ -183,7 +183,75 @@
                </div>
            </div>
        </header>
+        <footer class="footer">
+            <div class="wrapper footer__wrapper">
+                <img src="/assets/img/main/logo.svg" alt="" class="footer__logo">

+                <div class="footer__item">
+                    <div class="footer__menu">
+                        <div class="footer-menu__item">
+                            <ul class="footer-menu__list">
+                                <li><a href="">О компании</a></li>
+                                <li><a href="">каталог</a></li>
+                                <li><a href="">бренды</a></li>
+                                <li><a href="">зонирование</a></li>
+                            </ul>
+                        </div>
+                        <div class="footer-menu__item">
+                            <ul class="footer-menu__list">
+                                <li><a href="">проекты</a></li>
+                                <li><a href="">интересное</a></li>
+                                <li><a href="">контакты</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="footer__item">
+                    <p class="footer__text">
+                        г. Москва, улица Обручева, 52с3, офис 406 (Бизнес-центр⠀«РТС»)
+                    </p>
+                </div>
+
+                <div class="footer__item">
+                    <a href="tel:+74957988081" class="footer__text footer__text--no-line">+7 (495) 798-80-81</a>
+
+                    <a href="mailto:sales@bestinfitness.ru" class="footer__text footer__text--no-line">sales@bestinfitness.ru</a>
+
+                    <div class="footer__media">
+                        <a href="#" class="btn-social">
+                            <img src="/assets/img/social/telegram.svg" alt="">                        
+                        </a>
+
+                        <a href="#" class="btn-social">
+                            <img src="/assets/img/social/whatsapp.svg" alt="">                        
+                        </a>
+
+                        <a href="#" class="btn-social">
+                            <img src="/assets/img/social/YouTube.svg" alt="">                        
+                        </a>
+
+                        <a href="#" class="btn-social">
+                            <img src="/assets/img/social/Вконтакте.svg" alt="">                        
+                        </a>
+
+                        <a href="#" class="btn-social">
+                            <img src="/assets/img/social/yandex-zen.svg" alt="">                        
+                        </a>
+                    </div>
+                </div>
+                
+                <div class="footer__item">
+                    <img src="/assets/img/photo/review.png" alt="" class="footer__review">
+                </div>
+
+                <div class="footer__item footer__about">
+                    <p>©️2024. BEST IN FITNESS на базе «ООО ЛАЙФ-ИН-ФИТНЕС»</p>
+                
+                    <a href="#" class="link footer-about__link">политика конфиденциальности</a>
+                </div>
+            </div>
+        </footer>

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