Add files via upload

index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Advogrand Grid CSS</title>
+    <!-- Styles CSS -->
+    <link rel="stylesheet" href="src/styles/style.css">
+    <link rel="stylesheet" href="src/styles/media.css">
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <div class="header-content">
+                <div class="header-content_top">
+                    <nav>
+                        <ul>
+                            <li class="header-telephone"><a href="#">+7 499 322-85-80</a></li>
+                            <li><a href="#">Как мы работаем</a></li>
+                            <li><a href="#">Преимущества</a></li>
+                            <li><a href="#">Отзывы</a></li>
+                            <li><a href="#">Тарифы</a></li>
+                            <li><a href="#">Партнеры</a></li>
+                            <li><a href="#">Контакты</a></li>
+                            <button class="header-btn_call">Перезвоните мне</button>
+                        </ul>
+                    </nav>
+                </div>
+                <div class="header-content_bottom">
+                    <div class="header-bottom_logo">
+                        <img src="src/img/header-logo.png" alt="Advogrand">
+                    </div>
+                    <div class="header-bottom_text">
+                        <span>Ваш личный юрист всегда на связи</span>
+                    </div>
+                    <div class="header-bottom_info">
+                        <a href="#">+7 499 322-85-80</a>
+                        <div class="android">
+                            <a href="#"></a>
+                        </div>
+                        <div class="apple">
+                            <a href="#"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main>
+        <section id="first">
+            <div class="container">
+                <div class="section-first_wrap">
+                    <h1>Годовой абонемент на услуги <br><span>«личного юриста»</span></h1>
+                    <p>
+                        24 часа в сутки Ваш личный юрист<br> – <b>Advogrand</b> на связи<br>
+                        всего <b>за 12 рублей в день</b>
+                    </p>
+                    <form action="#">
+                        <button type="submit" class="btn-red">Хочу «личного юриста»!</button>
+                    </form>
+                </div>
+            </div>
+        </section>
+        <section id="services">
+            <div class="container">
+                <h2>Услуги предоставляемые сервисом Advogrand</h2>
+                <div class="section-services_wrap">
+                    <div>
+                        <p>Устные <br>консультации</p>
+                    </div>
+                    <div>
+                        <p>Звонок <br>юриста</p>
+                    </div>
+                    <div>
+                        <p>Модели <br>договора</p>
+                    </div>
+                    <div>
+                        <p>Устные <br>бизнес-консультации</p>
+                    </div>
+                    <div>
+                        <p>Содействие <br>в переговорах</p>
+                    </div>
+                    <div>
+                        <p>Обзор изменений <br> в законодательстве</p>
+                    </div>
+                    <div>
+                        <p>Письменные <br>консультации</p>
+                    </div>
+                    <div>
+                        <p>Консультации <br>в отношении третьих лиц</p>
+                    </div>
+                    <div>
+                        <p>Все области <br>права</p>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+        <section id="about">
+            <div class="container">
+                <h2>О сервисе Advogrand</h2>
+                <p>
+                    В составе нашей команды трудятся профессионалы, имеющие огромный опыт реальной юридической практики.
+                    Благодаря этому мы всегда можем найти юридически верное решение, защищающее интересы, сглаживающее
+                    конфликтные ситуации.
+
+                    Наше абонентское обслуживание позволяет сохранить нашим клиентам время, деньги и душевное
+                    спокойствие,
+                    ведь ваши интересы находятся под круглосуточной защитой «личного адвоката».
+
+                </p>
+                <p>
+                    Наше абонентское обслуживание позволяет сохранить нашим клиентам время, деньги и душевное
+                    спокойствие,
+                    ведь ваши интересы находятся под круглосуточной защитой «личного адвоката».
+                </p>
+                <div class="section-about_wrap">
+                    <div class="section-about_feature">
+                        <p><span>9</span><br>лет на российском<br> рынке</p>
+                    </div>
+                    <div class="section-about_feature">
+                        <p><span>289</span><br>квалифицированных<br> специалистов</p>
+                    </div>
+                    <div class="section-about_feature">
+                        <p><span>>2,5 млн.</span><br>решенных вопросов</p>
+                    </div>
+                    <div class="section-about_feature">
+                        <p><span>3</span><br>работаем<br> в 3-х странах мира</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="turn">
+            <div class="container">
+                <h2>Как называется услуга</h2>
+                <div class="section-turn_wrap">
+                    <div class="section-turn_feature">
+                        <div class="wrap-img_feature">
+                            <img src="src/img/turn/1.png" alt="#">
+                        </div>
+                        <p>
+                            Появился вопрос –
+                            звоните по бесплатному номеру
+                        </p>
+                    </div>
+                    <div class="section-turn_feature">
+                        <div class="wrap-img_feature">
+                            <img src="src/img/turn/2.png" alt="#">
+                        </div>
+                        <p>
+                            Описываете ситуацию –
+                            получаете ответ в течении 15 минут
+                        </p>
+                    </div>
+                    <div class="section-turn_feature">
+                        <div class="wrap-img_feature">
+                            <img src="src/img/turn/3.png" alt="#">
+                        </div>
+                        <p>
+                            <b>Ваш вопрос решен!</b>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+
+</html>

src/img/android.svg

@@ -0,0 +1,15 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M15.5089 2.4896L16.6041 0.664193C16.7286 0.456302 16.6615 0.187009 16.4536 0.0624495C16.2453 -0.0625483 15.9765 0.00455577 15.8519 0.212885L14.6962 2.13917C14.0081 1.89443 13.2712 1.75409 12.5002 1.75409C11.7292 1.75409 10.9923 1.89443 10.3042 2.13917L9.14851 0.212885C9.02395 0.00455577 8.75465 -0.0621097 8.54676 0.0624495C8.33887 0.187009 8.27177 0.456302 8.39633 0.664193L9.49148 2.4896C7.37442 3.58388 5.92137 5.78998 5.92137 8.33336C5.92137 8.5759 6.11786 8.77195 6.35996 8.77195H18.6404C18.8825 8.77195 19.079 8.5759 19.079 8.33336C19.0786 5.79042 17.626 3.58432 15.5089 2.4896ZM6.81522 7.89477C7.03977 4.95491 9.50376 2.6317 12.5002 2.6317C15.4966 2.6317 17.9606 4.95491 18.1852 7.89477H6.81522Z" fill="#E42626"/>
+<path d="M15.5602 4.98412H14.9822C14.8225 4.98412 14.6931 5.11351 14.6931 5.27315V5.85121C14.6931 6.01086 14.8225 6.14024 14.9822 6.14024H15.5607C15.7203 6.14024 15.8497 6.01086 15.8497 5.85121V5.27315C15.8497 5.11351 15.7199 4.98412 15.5602 4.98412Z" fill="#E42626"/>
+<path d="M10.0178 4.98412H9.4393C9.27965 4.98412 9.15027 5.11351 9.15027 5.27315V5.85121C9.15027 6.01086 9.27965 6.14024 9.4393 6.14024H10.0178C10.1774 6.14024 10.3068 6.01086 10.3068 5.85121V5.27315C10.3068 5.11351 10.1774 4.98412 10.0178 4.98412Z" fill="#E42626"/>
+<path d="M18.64 9.2108H6.35953C6.11743 9.2108 5.92094 9.40685 5.92094 9.64939V18.4962C5.92094 19.6641 6.87224 20.6141 8.04108 20.6141H8.55248V23.2483C8.55248 24.214 9.3393 25 10.3068 25C11.2744 25 12.0612 24.214 12.0612 23.2483V20.6141H12.9384V23.2483C12.9384 24.214 13.7252 25 14.6927 25C15.6602 25 16.4471 24.214 16.4471 23.2483V20.6141H16.9585C18.1277 20.6141 19.0786 19.6641 19.0786 18.4962V9.64939C19.0786 9.40685 18.8826 9.2108 18.64 9.2108ZM18.2014 18.4962C18.2014 19.1804 17.644 19.7369 16.9585 19.7369H16.0085C15.7664 19.7369 15.5699 19.933 15.5699 20.1755V23.2483C15.5699 23.7307 15.1765 24.1228 14.6927 24.1228C14.209 24.1228 13.8155 23.7303 13.8155 23.2483V20.1755C13.8155 19.933 13.6191 19.7369 13.377 19.7369H11.6226C11.3805 19.7369 11.184 19.933 11.184 20.1755V23.2483C11.184 23.7307 10.7906 24.1228 10.3068 24.1228C9.82307 24.1228 9.42965 23.7303 9.42965 23.2483V20.1755C9.42965 19.933 9.23317 19.7369 8.99106 19.7369H8.04152C7.35601 19.7369 6.79812 19.1799 6.79812 18.4962V10.088H18.2014V18.4962Z" fill="#E42626"/>
+<path d="M21.0522 9.2108C20.2058 9.2108 19.5172 9.90026 19.5172 10.7476V16.8844C19.5172 17.7317 20.2058 18.4212 21.0522 18.4212C21.8987 18.4212 22.5873 17.7317 22.5873 16.8844V10.7476C22.5873 9.90026 21.8987 9.2108 21.0522 9.2108ZM21.7101 16.8844C21.7101 17.2479 21.415 17.544 21.0522 17.544C20.6895 17.544 20.3944 17.2479 20.3944 16.8844V10.7476C20.3944 10.384 20.6895 10.088 21.0522 10.088C21.415 10.088 21.7101 10.384 21.7101 10.7476V16.8844Z" fill="#E42626"/>
+<path d="M3.94729 9.2108C3.10082 9.2108 2.41223 9.90026 2.41223 10.7476V16.8844C2.41223 17.7317 3.10082 18.4212 3.94729 18.4212C4.79377 18.4212 5.48235 17.7317 5.48235 16.8844V10.7476C5.48235 9.90026 4.79377 9.2108 3.94729 9.2108ZM4.60518 16.8844C4.60518 17.2479 4.31001 17.544 3.94729 17.544C3.58458 17.544 3.28941 17.2479 3.28941 16.8844V10.7476C3.28941 10.384 3.58458 10.088 3.94729 10.088C4.31001 10.088 4.60518 10.384 4.60518 10.7476V16.8844Z" fill="#E42626"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/img/apple.svg

@@ -0,0 +1,10 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M23.2597 17.6377C23.2597 17.5939 23.2597 17.5939 23.2597 17.55V17.1118L23.0406 16.9803C21.0683 15.9284 20.1479 14.4383 20.1479 12.4222C20.1479 10.7129 20.893 9.26656 22.2517 8.30237L22.7776 8.03942L22.427 7.60117C21.5504 6.50548 20.0603 5.01535 17.7374 5.01535C17.2948 5.01535 16.8832 5.12406 16.4748 5.28547C17.436 4.24506 17.9566 2.92449 17.9566 1.42148C17.9566 1.15853 17.9566 0.89554 17.9127 0.588731V0.501051V0.457235L17.8689 0.325739C17.8251 0.238058 17.7813 0.106611 17.6498 0.0627951C17.5183 0.0189793 17.4307 -0.0248854 17.2992 0.0189793C14.9763 0.676412 12.5219 2.51716 12.5219 5.76041C12.5219 5.94739 12.5222 6.13465 12.542 6.34149C12.1599 6.2417 11.8248 6.05502 11.4701 5.84809C10.8565 5.49747 10.1991 5.10303 9.19102 5.10303C4.76441 5.10303 1.69647 9.13521 1.69647 12.7291C1.69647 14.7013 2.31004 18.1199 4.06316 21.2755C5.42184 23.7299 6.9996 25.0009 8.66508 25.0009C9.27865 25.0009 9.89227 24.7818 10.5935 24.5626C11.2948 24.2558 12.0836 23.9929 12.8726 23.9929C13.53 23.9929 14.1874 24.2558 14.8448 24.475C15.5022 24.6941 16.2035 24.9571 16.9047 24.9571C20.3671 24.9571 23.3036 20.6182 23.3036 17.9008C23.3036 17.813 23.2597 17.7254 23.2597 17.6377ZM17.0362 1.02699C17.08 1.2023 17.08 1.3338 17.0362 1.46524C17.0362 4.44555 14.801 5.76037 13.3985 6.2863C13.3547 6.06717 13.3547 5.89186 13.3547 5.76037C13.3546 3.21836 15.1954 1.68437 17.0362 1.02699ZM22.427 17.7254C22.427 17.7692 22.427 17.813 22.427 17.8569C22.427 21.1439 19.0084 24.0366 16.9047 24.0366C16.3349 24.0366 15.7213 23.8175 15.1078 23.5983C14.3627 23.3353 13.6176 23.0724 12.8287 23.0724C11.8645 23.0724 10.988 23.3792 10.2429 23.686C9.67314 23.9051 9.10339 24.1242 8.66508 24.1242C6.99964 24.1242 5.64097 22.3711 4.85209 20.881C3.18665 17.8569 2.57303 14.6136 2.57303 12.729C2.57303 8.74067 6.07927 5.97949 9.19102 5.97949C9.93608 5.97949 10.462 6.2863 11.0756 6.63693C11.6892 6.98755 12.3028 7.33817 13.1794 7.33817C14.3189 7.33817 15.2393 6.89992 16.0282 6.50543C16.6856 6.19862 17.2115 5.93568 17.7813 5.93568C19.4906 5.93568 20.6739 6.85605 21.5067 7.82029C20.1042 8.91598 19.3153 10.5376 19.3153 12.4222C19.3153 14.7013 20.3233 16.4105 22.427 17.5939C22.427 17.6377 22.427 17.6815 22.427 17.7254Z" fill="#E42626"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/styles/media.css

@@ -0,0 +1,78 @@
+@media (max-width: 870px) {
+    #about .section-about_wrap {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+@media (max-width: 860px) {
+    ul {
+        flex-direction: column;
+    }
+    ul li {
+        margin-bottom: 10px;
+    }
+    header .header-content_bottom {
+        flex-direction: column;
+    }
+    header .header-content_bottom div {
+        margin-bottom: 10px;
+    }
+    #first {
+        padding-top: 60px;
+    }
+}
+@media (max-width: 770px) {
+    .section-services_wrap {
+        grid-template-columns: 1fr 1fr;
+        grid-column-gap: 120px;
+        padding-left: 25px;
+    }
+}
+@media (max-width: 768px) {
+    #turn .section-turn_wrap {
+        grid-template-columns: 1fr 1fr;
+    }
+    #turn .section-turn_wrap div:nth-child(3) {
+        grid-column: 1/3;
+        margin-top: 40px;
+    }
+}
+@media (max-width: 576px) {
+    #first .section-first_wrap h1 br {
+        display: none;
+    }
+    #first .section-first_wrap h1 {
+        font-size: 30px;
+    }
+}
+@media (max-width: 548px) {
+    .section-services_wrap {
+        grid-template-columns: 1fr;
+        padding-left: 0px;
+    }
+    .section-services_wrap div p {
+        text-align: center;
+        padding-left: 0;
+    } 
+    .section-services_wrap div::before {
+        left: 15px;
+    }  
+}
+@media (max-width: 460px) {
+    #about .section-about_wrap {
+        grid-template-columns: 1fr;
+    }
+    #turn .section-turn_wrap {
+        grid-template-columns: 1fr;
+    }
+    #turn .section-turn_wrap div:nth-child(3) {
+        grid-column: 1;
+    }
+}
+@media (max-width: 360px) {
+    #first .section-first_wrap h1 {
+        font-size: 28px;
+    }
+    #first .btn-red {
+        width: 100%;
+    }
+}

src/styles/style.css

@@ -0,0 +1,334 @@
+@font-face {
+    font-family: ProximaNovaLight;
+    src: url(../fonts/ProximaNovaLight.ttf);
+}
+
+@font-face {
+    font-family: ProximaNovaBold;
+    /* Имя шрифта */
+    src: url(../fonts/ProximaNovaBold.ttf);
+    /* Путь к файлу со шрифтом */
+}
+
+@font-face {
+    font-family: ProximaNovaExtrabld;
+    /* Имя шрифта */
+    src: url(../fonts/ProximaNovaExtrabld.ttf);
+    /* Путь к файлу со шрифтом */
+}
+@font-face {
+    font-family: MullerLight;
+    /* Имя шрифта */
+    src: url(../fonts/MullerLight.otf);
+    /* Путь к файлу со шрифтом */
+}
+@font-face {
+    font-family: MullerBold;
+    /* Имя шрифта */
+    src: url(../fonts/MullerBold.otf);
+    /* Путь к файлу со шрифтом */
+}
+@font-face {
+    font-family: MullerMedium;
+    /* Имя шрифта */
+    src: url(../fonts/MullerMedium.otf);
+    /* Путь к файлу со шрифтом */
+}
+body {
+    padding: 0;
+    margin: 0;
+}
+h1,h2,h3,h4,h5,h6 {
+    padding: 0;
+    margin: 0;
+}
+p {
+    padding: 0;
+    margin: 0;
+}
+h2 {
+    font-family: ProximaNovaBold;
+    font-size: 30px;
+    text-align: center;
+}
+.btn-red {
+    height: 65px;
+    width: 300px;
+    background-color: #c70f0f;
+    color: #fff;
+    font-family: ProximaNovaBold;
+    font-size: 18px;
+    border: none;
+    cursor: pointer;
+    transition: all .2s;
+    border-radius: 5px;
+    outline: none;
+}
+.btn-red:hover {
+    background-color: #d15252;
+} 
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 15px;
+    padding-right: 15px;
+    max-width: 960px;
+}
+ul li {
+    display: inline-block;
+    list-style: none;
+    font-size: 16px;
+    font-family: ProximaNovaBold;
+}
+ul {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+a {
+    text-decoration: none;
+    color: #1c1c1c;
+}
+header {
+    margin-top: 20px;
+}
+.header-btn_call {
+    height: 30px;
+    background-color: #ff0000;
+    border: none;
+    color: #fff;
+    font-size: 14px;
+    font-family: ProximaNovaBold;
+    cursor: pointer;
+    padding-left: 11px;
+    padding-right: 11px;
+    border-radius: 5px;
+    max-width: 140px;
+}
+.header-telephone {
+    font-family: ProximaNovaBold;
+}
+.header-content_top {
+    margin-bottom: 30px;
+}
+.header-bottom_text {
+    color: #1c1c1c;
+    font-size: 16px;
+    font-family: ProximaNovaBold;
+}
+.header-bottom_info a {
+    font-size: 18px;
+    font-family: ProximaNovaBold;
+    margin-right: 30px;
+}
+.header-bottom_info {
+    display: flex;
+    align-items: center;
+}
+.header-content_bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.android {
+    margin-right: 10px;
+    background: url(../img/android.svg) no-repeat center center;
+}
+.apple {
+    background: url(../img/apple.svg) no-repeat center center;
+    background-position-y: 6px;
+    background-position-x: 7px;
+}
+.android, .apple {
+    height: 40px;
+    width: 40px;
+    display: inline-block;
+    border-radius: 5px;
+    border: 1px solid #e42626;
+    cursor: pointer;
+}
+/* First Section */
+#first {
+    margin-top: 35px;
+    min-height: 610px;
+    background: url(../img/section-first_background.jpg) no-repeat center center;
+    background-size: cover;
+    color: #fff;
+    padding-top: 130px;
+}
+.section-first_wrap {
+    font-family: ProximaNovaBold;
+}
+.section-first_wrap h1 {
+    font-size: 36px;
+    line-height: 50px
+}
+.section-first_wrap h1 span {
+    text-transform: uppercase;
+    font-family: ProximaNovaExtrabld;
+}
+.section-first_wrap p {
+    font-size: 24px;
+    line-height: 32px;
+    font-family: ProximaNovaLight;
+    margin-bottom: 70px;
+    margin-top: 65px;
+}
+.section-first_wrap p b {
+    font-family: ProximaNovaBold;
+}
+/* Secction Services */
+#services {
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+#services h2 {
+    text-align: center;
+}
+.section-services_wrap {
+    margin-top: 85px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-row-gap: 85px;
+    grid-column-gap: 100px;
+}
+.section-services_wrap div {
+    font-family: ProximaNovaLight;
+    font-size: 16px;
+}
+.section-services_wrap div p {
+    position: relative;
+    padding-left: 70px;
+    top: 7px
+}
+.section-services_wrap div:nth-child(1)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/consultation-logo.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(2)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/phone-call.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(3)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/file.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(4)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/tactics.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(5)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/work-communication.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(6)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/law-book.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(7)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/exam.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(8)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/lawyer.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+.section-services_wrap div:nth-child(9)::before {
+    content: '';
+    height: 50px;
+    width: 50px;
+    background: url(../img/services/balance.png) no-repeat center center;
+    display: inline-block;
+    position: absolute;
+}
+/* Section About */
+#about {
+    padding-top: 100px;
+    padding-bottom: 100px;
+    min-height: 600px;
+    background: url(../img/about/about_background.jpg) no-repeat center center;
+    background-size: cover;
+}
+#about h2 {
+    color: #fff;
+}
+#about p {
+    font-family: ProximaNovaLight;
+    font-size: 16px;
+    text-align: center;
+    color: #fff;
+    margin-top: 85px;
+}
+#about p:nth-child(3) {
+    margin-top: 30px;
+}
+.section-about_feature span {
+    font-size: 48px;
+    font-family: ProximaNovaBold;
+}
+.section-about_wrap {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    margin-top: 85px;
+}
+/* Section About-Turn */
+#turn {
+    padding-top: 100px;
+    padding-bottom: 100px;
+    background-color: #f5f5f5;
+}
+.section-turn_wrap {
+    margin-top: 100px;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.section-turn_feature {
+    margin-top: 20px;
+}
+.wrap-img_feature {
+    min-height: 90px;
+    max-height: 90px;
+}
+.section-turn_feature p {
+    font-family: ProximaNovaLight;
+    font-size: 16px;
+    margin-top: 55px;
+}
+.section-turn_feature p b {
+    font-family: ProximaNovaBold;
+}