сделал services и call сделал пк версии

8 months ago · dd58ea60e5
parent 077f5baf53
commit dd58ea60e5
9 changed files with 226 additions and 12 deletions
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@ -77,10 +77,20 @@ body{
 .title-2{
    font-weight: 700;
    color: var(--text-white);
+
+    text-decoration: none;
 }
 .title-3{
    font-weight: 700;
    color: var(--text-white);
+
+    text-decoration: none;
+}
+.title-4{
+    font-weight: 700;
+    color: var(--text-white);
+
+    text-decoration: none;
 }
 .text-1{
    font-weight: 400;
@ -148,10 +158,27 @@ body{
 .btn-big--border--blood{
    border-color: var(--blood);
 }
+.btn-big--border--white{
+    border-color: var(--text-white);
+}
 .btn-big--blood{
    background-color: var(--blood);
 }

+.btn-big--social{
+    padding-right: 66px;
+
+    background-position: top 20px  right 34px;
+    background-size: 24px;
+    background-repeat: no-repeat;
+}
+.btn-big--tg{
+    background-image: url(/assets/img/social/telegram.svg);
+}
+.btn-big--ws{
+    background-image: url(/assets/img/social/whatsapp.svg);
+}
+
 .btn--100-per{
    width: 100%;
 }
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@ -14,6 +14,9 @@
 .title-3{
    font-size: 40px;
 }
+.title-4{
+    font-size: 24px;
+}
 .text-1{
    font-size: 24px;
 }
@ -117,6 +120,8 @@

 /* footer */
 .footer{
+    margin-top: 200px;
+
    padding: 56px 0;
 }
 .footer__wrapper{
@ -353,4 +358,82 @@
    width: 100% !important;
 }
 }
+
+/* projects */
+.projects{
+    margin: 34px -20px -20px -20px;
+}
+/* projects */
+
+/* services */
+.services{
+    margin: 34px -20px -20px -20px;
+
+    display: flex;
+    flex-wrap: wrap;
+}
+.services__item{
+    margin: 20px;
+
+    height: 257px;
+
+    padding: 24px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    background-color: var(--background-grey);
+    border-radius: 4px;
+}
+.services__item:nth-child(1),
+.services__item:nth-child(2),
+.services__item:nth-child(3){
+    width: calc(33.3% - 40px);
+}
+.services__item:nth-child(n+4){
+    width: calc(50% - 40px);
+}
+.services__img{
+    width: 88px;
+    aspect-ratio: 1;
+}
+.services__content{
+    height: 89px;
+
+    /* display: flex; */
+}
+.services__content .title-4{
+    margin-bottom: 16px;
+}
+/* services */
+
+
+/* call */
+.call{
+    padding: 88px 64px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: var(--background-grey);
+}
+.call__content{
+    margin-top: 56px;
+
+    width: 910px;
+    height: 152px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.call__item{
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+/* call */
@media only screen and (min-width: 992px) and (max-width: 1032px) {}
--- a/assets/img/icon/services-1.svg
+++ b/assets/img/icon/services-1.svg
@ -0,0 +1,7 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55 7.33325V43.9999C55 48.0333 51.7 51.3333 47.6667 51.3333H7.33337V21.9999C7.33337 13.8966 13.8967 7.33325 22 7.33325H55Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80.6667 51.3333V62.3333C80.6667 68.4199 75.7534 73.3333 69.6667 73.3333H66C66 69.2999 62.7 65.9999 58.6667 65.9999C54.6334 65.9999 51.3334 69.2999 51.3334 73.3333H36.6667C36.6667 69.2999 33.3667 65.9999 29.3334 65.9999C25.3 65.9999 22 69.2999 22 73.3333H18.3334C12.2467 73.3333 7.33337 68.4199 7.33337 62.3333V51.3333H47.6667C51.7 51.3333 55 48.0333 55 43.9999V18.3333H61.7467C64.3867 18.3333 66.8067 19.7633 68.1267 22.0366L74.3967 32.9999H69.6667C67.65 32.9999 66 34.6499 66 36.6666V47.6666C66 49.6833 67.65 51.3333 69.6667 51.3333H80.6667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.3333 80.6667C33.3834 80.6667 36.6667 77.3834 36.6667 73.3333C36.6667 69.2832 33.3834 66 29.3333 66C25.2832 66 22 69.2832 22 73.3333C22 77.3834 25.2832 80.6667 29.3333 80.6667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.6667 80.6667C62.7168 80.6667 66 77.3834 66 73.3333C66 69.2832 62.7168 66 58.6667 66C54.6166 66 51.3334 69.2832 51.3334 73.3333C51.3334 77.3834 54.6166 80.6667 58.6667 80.6667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80.6667 44V51.3333H69.6667C67.65 51.3333 66 49.6833 66 47.6667V36.6667C66 34.65 67.65 33 69.6667 33H74.3967L80.6667 44Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/icon/services-2.svg
+++ b/assets/img/icon/services-2.svg
@ -0,0 +1,4 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 55C50.0751 55 55 50.0751 55 44C55 37.9249 50.0751 33 44 33C37.9249 33 33 37.9249 33 44C33 50.0751 37.9249 55 44 55Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.33337 47.2266V40.7733C7.33337 36.9599 10.45 33.8066 14.3 33.8066C20.9367 33.8066 23.65 29.1133 20.3134 23.3566C18.4067 20.0566 19.5434 15.7666 22.88 13.8599L29.2234 10.2299C32.12 8.5066 35.86 9.53326 37.5834 12.4299L37.9867 13.1266C41.2867 18.8833 46.7134 18.8833 50.05 13.1266L50.4534 12.4299C52.1767 9.53326 55.9167 8.5066 58.8134 10.2299L65.1567 13.8599C68.4934 15.7666 69.63 20.0566 67.7234 23.3566C64.3867 29.1133 67.1 33.8066 73.7367 33.8066C77.55 33.8066 80.7034 36.9233 80.7034 40.7733V47.2266C80.7034 51.0399 77.5867 54.1933 73.7367 54.1933C67.1 54.1933 64.3867 58.8866 67.7234 64.6433C69.63 67.9799 68.4934 72.2333 65.1567 74.1399L58.8134 77.7699C55.9167 79.4933 52.1767 78.4666 50.4534 75.5699L50.05 74.8733C46.75 69.1166 41.3234 69.1166 37.9867 74.8733L37.5834 75.5699C35.86 78.4666 32.12 79.4933 29.2234 77.7699L22.88 74.1399C19.5434 72.2333 18.4067 67.9433 20.3134 64.6433C23.65 58.8866 20.9367 54.1933 14.3 54.1933C10.45 54.1933 7.33337 51.0399 7.33337 47.2266Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/icon/services-3.svg
+++ b/assets/img/icon/services-3.svg
@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.4146 60.6667H35.2439L31.0732 57.1944M21.3415 30.1111H27.5746C28.5726 30.1111 29.2456 31.1306 28.8524 32.0471L25.5122 39.8333M58.878 27.3333L50.5366 49.5556M70 19L63.4656 26.8336C63.2015 27.1502 62.8102 27.3333 62.3976 27.3333H50.5366M27.6542 69H58.8942C62.7243 69 65.8293 65.8981 65.8293 62.0717C65.8293 59.4994 64.4027 57.1388 62.1242 55.9407L34.4793 41.405C24.7209 36.274 13 43.3434 13 54.3601C13 62.4455 19.5609 69 27.6542 69ZM31.0732 53.7222C31.0732 56.0234 29.2059 57.8889 26.9024 57.8889C24.599 57.8889 22.7317 56.0234 22.7317 53.7222C22.7317 51.421 24.599 49.5556 26.9024 49.5556C29.2059 49.5556 31.0732 51.421 31.0732 53.7222Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M84.3332 58.5566C84.3332 72.7466 72.8565 84.2233 58.6665 84.2233L62.5165 77.8066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.66663 29.2233C3.66663 15.0333 15.1433 3.55664 29.3333 3.55664L25.4833 9.97331" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/icon/services-4.svg
+++ b/assets/img/icon/services-4.svg
@ -0,0 +1,8 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66 26.2533C65.78 26.2166 65.5233 26.2166 65.3033 26.2533C60.2433 26.0699 56.21 21.9266 56.21 16.7933C56.21 11.5499 60.4266 7.33325 65.67 7.33325C70.9133 7.33325 75.1299 11.5866 75.1299 16.7933C75.0933 21.9266 71.06 26.0699 66 26.2533Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62.2233 52.9467C67.2466 53.79 72.7833 52.91 76.67 50.3067C81.84 46.86 81.84 41.2134 76.67 37.7667C72.7466 35.1634 67.1366 34.2833 62.1133 35.1633" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.89 26.2533C22.11 26.2166 22.3667 26.2166 22.5867 26.2533C27.6467 26.0699 31.68 21.9266 31.68 16.7933C31.68 11.5499 27.4633 7.33325 22.22 7.33325C16.9767 7.33325 12.76 11.5866 12.76 16.7933C12.7967 21.9266 16.83 26.0699 21.89 26.2533Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.6667 52.9467C20.6434 53.79 15.1067 52.91 11.22 50.3067C6.05003 46.86 6.05003 41.2134 11.22 37.7667C15.1434 35.1634 20.7534 34.2833 25.7767 35.1633" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44 53.6434C43.78 53.6067 43.5233 53.6067 43.3033 53.6434C38.2433 53.4601 34.21 49.3167 34.21 44.1834C34.21 38.9401 38.4266 34.7234 43.67 34.7234C48.9133 34.7234 53.13 38.9767 53.13 44.1834C53.0933 49.3167 49.06 53.4967 44 53.6434Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.33 65.1933C28.16 68.64 28.16 74.2866 33.33 77.7333C39.1967 81.6566 48.8033 81.6566 54.67 77.7333C59.84 74.2866 59.84 68.64 54.67 65.1933C48.84 61.3067 39.1967 61.3067 33.33 65.1933Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/icon/services-5.svg
+++ b/assets/img/icon/services-5.svg
@ -0,0 +1,3 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.3333 77C75.4085 77 80.3333 72.0751 80.3333 66C80.3333 59.9249 75.4085 55 69.3333 55M69.3333 77C63.2582 77 58.3333 72.0751 58.3333 66C58.3333 59.9249 63.2582 55 69.3333 55M69.3333 77H14.7632C10.4757 77 7 73.5243 7 69.2368C7 65.3002 9.9465 61.9867 13.8562 61.5267L69.3333 55M69.3333 55L58.3333 22M69.3333 11L49.6911 28.8566C49.3537 29.1633 48.914 29.3333 48.4579 29.3333H34.5M71.1667 66C71.1667 64.9875 70.3459 64.1667 69.3333 64.1667C68.3208 64.1667 67.5 64.9875 67.5 66M71.1667 66C71.1667 67.0125 70.3459 67.8333 69.3333 67.8333C68.3208 67.8333 67.5 67.0125 67.5 66M71.1667 66H67.5" stroke="#F2F2F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,14 +1,8 @@
 'use strict';

-window.addEventListener('resize', (e) => {
-    if (window.innerWidth) {
-        
-    }
-});
-
-
-const swiper = new Swiper('.gym-swiper', {
+const gymSwiper = new Swiper('.gym-swiper', {
    direction: 'horizontal',
+    slidesPerView: 1.20,
    breakpoints: {
        320:{
            slidesPerView: 1.20,
@ -17,8 +11,7 @@ const swiper = new Swiper('.gym-swiper', {
        996: {
            slidesPerView: 3
        },
-        1920: {
-            slidesPerView: 3
-        },
    }
 });
+
+// gymSwiper.destroy();
--- a/index.html
+++ b/index.html
@ -298,6 +298,90 @@
                    </div>
                </article>
            </div>
+
+            <div class="main__item">
+                <p class="title-1">
+                    Разработанные проекты
+                </p>
+
+                <article class="projects">
+                    
+                </article>
+            </div>
+
+            <!-- <div class="main__item">
+                <p class="title-1">
+                    Дополнительные услуги
+                </p>
+
+                <article class="services">
+                    <div class="services__item">
+                        <img src="/assets/img/icon/services-1.svg" alt="" class="services__img">
+                        
+                        <div class="services__content">
+                            <p class="title-4">Доставка</p>
+                            <p class="text-2">Быстрая доставка по всей России и СНГ</p>
+                        </div>
+                    </div>
+                    <div class="services__item">
+                        <img src="/assets/img/icon/services-2.svg" alt="" class="services__img">
+                        
+                        <div class="services__content">
+                            <p class="title-4">Сервис и запчасти</p>
+                            <p class="text-2">Большой ассортимент запчастей и качественный сервис</p>
+                        </div>
+                    </div>
+                    <div class="services__item">
+                        <img src="/assets/img/icon/services-3.svg" alt="" class="services__img">
+                        
+                        <div class="services__content">
+                            <p class="title-4">Трейд-Ин</p>
+                            <p class="text-2">Забираем старое оборудование и даем скидку на новое</p>
+                        </div>
+                    </div>
+                    <div class="services__item">
+                        <img src="/assets/img/icon/services-4.svg" alt="" class="services__img">
+                        
+                        <div class="services__content">
+                            <p class="title-4">Обучение персонала</p>
+                            <p class="text-2">Обучаем полный состав персонала навыкам повышающим эффективность работы клуба</p>
+                        </div>
+                    </div>
+                    <div class="services__item">
+                        <img src="/assets/img/icon/services-5.svg" alt="" class="services__img">
+                        
+                        <div class="services__content">
+                            <p class="title-4">Лизинг</p>
+                            <p class="text-2">Предоставляем оборудование в аренду с правом выкупа</p>
+                        </div>
+                    </div>
+                </article>
+            </div>
+
+            <div class="main__item">
+                <article class="call">
+                    <p class="title-1">
+                        Свяжитесь с нами
+                    </p>
+
+                    <div class="call__content">
+                        <div class="call__item">
+                            <a href="tel:+74957988081" class="title-3">+7 (495) 798-80-81</a>
+
+                            <a href="mailto:sales@bestinfitness.ru" class="title-3">sales@bestinfitness.ru</a>
+                        </div>
+                        <div class="call__item">
+                            <a href="" class="btn-big btn-big--border btn-big--border--white btn-big--social btn-big--ws">
+                                написать в whatsaap
+                            </a>
+
+                            <a href="" class="btn-big btn-big--border btn-big--border--white btn-big--social btn-big--tg">
+                                написать в telegram
+                            </a>
+                        </div>
+                    </div>
+                </article>
+            </div> -->
        </main>

        <footer class="footer">