nerds/index.html at master · mpoliakov/nerds · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>Нёрдс</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;subset=cyrillic" rel="stylesheet">
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="visually-hidden">Веб-студия Нёрдс</h1>
    <header class="site-header">
      <nav class="wrapper">
        <a href="index.html" class="nerds-logo"><img src="img/nerds-logo.svg" width="160" height="65" alt="Нёрдс"></a>
        <ul class="site-navigation">
          <li class="site-navigation-item"><a href="#">Студия</a></li>
          <li class="site-navigation-item"><a href="#">Клиенты</a></li>
          <li class="site-navigation-item"><a href="catalog.html">Магазин</a></li>
          <li class="site-navigation-item"><a href="#">Контакты</a></li>
        </ul>
        <a href="#" class="cart">
          <span>Корзина</span>
        </a>
      </nav>
    </header>
    <main>
      <section class="promos">
        <div class="wrapper promos-wrapper">
          <h2 class="visually-hidden">Преимущества</h2>
          <input class="visually-hidden" type="radio" id="slide-1" name="toggle" checked>
          <input class="visually-hidden" type="radio" id="slide-2" name="toggle">
          <input class="visually-hidden" type="radio" id="slide-3" name="toggle">
          <div class="slider-controls">
            <label class="slider-controls-item slider-controls-item--1" for="slide-1">Слайд 1</label>
            <label class="slider-controls-item slider-controls-item--2" for="slide-2">Слайд 2</label>
            <label class="slider-controls-item slider-controls-item--3" for="slide-3">Слайд 3</label>
          </div>
          <ul class="promo-list">
            <li class="promo-list-item slide-1">
              <div class="slide-content">
                <p class="tagline">Долго, дорого,<br>скрупулезно.</p>
                <p class="comment">Математически выверенный дизайн<br>для вашего сайта или мобильного приложения.</p>
                <a href="#" class="btn">Узнать больше</a>
              </div>
            </li>
            <li class="promo-list-item slide-2">
              <div class="slide-content">
                <p class="tagline">Любим математику<br>как никто другой</p>
                <p class="comment">Никакого креатива, только математические формулы<br>для расчета идеальных пропорций.</p>
                <a href="#" class="btn">Узнать больше</a>
              </div>
            </li>
            <li class="promo-list-item slide-3">
              <div class="slide-content">
                <p class="tagline">Только ночь,<br>только хардкор</p>
                <p class="comment">Работать днем, как все? Мы против этого.<br>Ближе к полуночи работа только начинается.</p>
                <a href="#" class="btn">Узнать больше</a>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <div class="wrapper">
        <ul class="service-list">
          <li class="service-item web-sites">
            <img src="img/service-web-sites.png" width="300" height="160" alt="Веб-сайты">
            <h3>Веб-сайты</h3>
            <p>Мир никогда не будет прежним<br>после того как увидит ваш сайт!</p>
            <button type="button" class="btn">Заказать</button>
          </li>
          <li class="service-item apps">
            <img src="img/service-apps.png" width="300" height="160" alt="Приложения">
            <h3>Приложения</h3>
            <p>Покорите топ-10 приложений в<br>AppStore и Google Play</p>
            <button type="button" class="btn btn-green">Заказать</button>
          </li>
          <li class="service-item presentations">
            <img src="img/service-presentations.png" width="300" height="160" alt="Презентации">
            <h3>Презентации</h3>
            <p>Вы даже не представляете,<br>насколько вы изумительны!</p>
            <button type="button" class="btn btn-yellow">Заказать</button>
          </li>
        </ul>
        <section class="description">
          <h2 class="visually-hidden">Описание</h2>
          <div class="description-services">
            <p class="about-us">Мы — маленькая, но гордая дизайн-студия из Краснодара.</p>
            <p class="about-us-comment">Исповедуем принципы минимализма и чистоты. Ставим математический рассчет превыше креатива. Работаем не покладая рук, как роботы.</p>
            <div class="about-us-services">
              <p>Выполняем заказы на разработку:</p>
              <ul>
                <li>Веб-сайтов любой сложности</li>
                <li>Мобильных приложений для iOS и Android</li>
                <li>Слайдшоу и видео для корпоративных презентаций</li>
              </ul>
            </div>
          </div>
          <div class="description-credo">
            <img src="img/nerds-illustration.png" width="360" height="208" alt="Нёрдс">
            <p>С 2004 года любим точность во всём:</p>
            <table class="indicators">
              <tr class="indicators-values">
                <td><b>146</b><sup>%</sup></td>
                <td><b>100</b><sup>%</sup></td>
                <td><b>50</b><sup>%</sup></td>
              </tr>
              <tr class="indicators-names">
                <td>Уровень самоотдачи</td>
                <td>Соблюдение сроков</td>
                <td>Минимальная предоплата</td>
              </tr>
            </table>
          </div>
        </section>
        <ul class="client-list">
          <li class="client-list-item htmlacademy"><a href="https://htmlacademy.ru/intensive/htmlcss" target="_blank"><img src="img/htmlacademy-logo.png" width="199" height="68" alt="Htmlacademy"></a></li>
          <li class="client-list-item borodinski"><a href="#" target="_blank"><img src="img/borodinski-logo.png" width="209" height="87" alt="Borodinski"></a></li>
          <li class="client-list-item pink"><a href="#" target="_blank"><img src="img/pink-logo.png" width="185" height="52" alt="Pink"></a></li>
          <li class="client-list-item mishka"><a href="#" target="_blank"><img src="img/mishka-logo.png" width="173" height="84" alt="Mishka"></a></li>
        </ul>
      </div>
      <section class="contacts">
        <h2 class="visually-hidden">Контактная информация</h2>
        <div class="wrapper contacts-wrapper">
          <div class="write-to-us">
            <h3 class="studio-title">Nёrds Design Studio</h3>
            <p class="address">191186, Санкт-Петербург,<br>ул. Б. Конюшенная, д. 19/8</p>
            <p class="phone">тел. +7 (812) 275-75-75</p>
            <a href="writeus.html" role="button" class="btn btn-write-to-us">Напишите нам</a>
          </div>
        </div>
        <iframe id="yandex-map-widget" class="contacts-map" src="https://yandex.ru/map-widget/v1/?um=constructor%3A81f0e26d3cea681d6700aa56528544226a73ad35117e62fce6620ceb9d56d83a&amp;source=constructor"></iframe>
      </section>
    </main>
    <footer>
      <div class="wrapper footer-wrapper">
        <ul class="social-networks">
          <li class="social-network vk">
            <a href="#" class="social-network-link">
              <span class="visually-hidden">VK</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="15" viewBox="0 0 26 15"><path fill="#FFF" d="M16.138 11.51c.956-.309 2.18 2.04 3.483 2.939.978.681 1.727.534 1.727.534l3.473-.05s1.815-.112.957-1.554c-.071-.12-.503-1.069-2.585-3.022-2.177-2.043-1.882-1.712.739-5.244 1.597-2.153 2.236-3.468 2.036-4.028-.192-.539-1.365-.399-1.365-.399L20.69.713c-.381.001-.704.119-.851.515-.003.004-.621 1.666-1.445 3.079-1.741 2.989-2.436 3.148-2.724 2.961-.661-.433-.494-1.737-.494-2.664 0-2.897.432-4.105-.846-4.417-.427-.104-.739-.172-1.828-.182-1.392-.021-2.574 0-3.244.329-.445.223-.786.712-.579.74.26.035.843.16 1.155.586.401.552.389 1.789.389 1.789s.229 3.411-.54 3.834c-.528.29-1.25-.302-2.803-3.016-.793-1.388-1.392-2.922-1.392-2.922s-.116-.285-.326-.441c-.25-.185-.6-.244-.6-.244L.848.684S.29.7.085.946c-.182.218-.015.668-.015.668s2.909 6.881 6.203 10.347c3.02 3.182 6.452 2.971 6.452 2.971h1.555s.469-.054.709-.312c.224-.24.214-.691.214-.691s-.031-2.109.935-2.419z"/></svg>
            </a>
          </li>
          <li class="social-network facebook">
            <a href="#" class="social-network-link">
              <span class="visually-hidden">Facebook</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="22" viewBox="0 0 12 22"><path fill="#FFF" d="M12 4V0H8a4 4 0 0 0-4 4v4H0v4h4v10h4V12h4V8H8V4h4z"/></svg>
            </a>
          </li>
          <li class="social-network instagram">
            <a href="#" class="social-network-link">
              <span class="visually-hidden">Instagram</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><path fill="#FFF" d="M18 0H3C1.35 0 0 1.35 0 3v15c0 1.65 1.35 3 3 3h15c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3zm-7.5 7c1.93 0 3.5 1.57 3.5 3.5S12.43 14 10.5 14 7 12.43 7 10.5 8.57 7 10.5 7zM18 18H3V9h1.181A6.504 6.504 0 0 0 4 10.5a6.5 6.5 0 1 0 13 0 6.45 6.45 0 0 0-.181-1.5H18v9zm0-11h-4V3h4v4z"/></svg>
            </a>
          </li>
        </ul>
        <div class="social-engagement">
          <p class="friends">Давайте дружить, это выгодно!</p>
          <p class="discount">Скидка 10% для друзей из социальных сетей.</p>
        </div>
      </div>
    </footer>
    <div id="contact-dialog" class="modal-dialog">
      <h3>Напишите нам</h3>
      <button type="button" class="btn-close">
        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><path fill="#FB565A" d="M13.328 10.5l7.371-7.371a1.003 1.003 0 0 0 0-1.414L19.285.3a1.003 1.003 0 0 0-1.414 0L10.5 7.672 3.129.301a1.003 1.003 0 0 0-1.414 0L.301 1.715a1.003 1.003 0 0 0 0 1.414L7.672 10.5.301 17.871a1.003 1.003 0 0 0 0 1.414l1.415 1.414a1.003 1.003 0 0 0 1.414 0l7.371-7.371 7.371 7.371a1.003 1.003 0 0 0 1.414 0l1.414-1.414a1.003 1.003 0 0 0 0-1.414L13.328 10.5z"/></svg>
        <span class="visually-hidden">Закрыть</span>
      </button>
      <form action="https://echo.htmlacademy.ru" method="post" class="contact-form">
        <div class="contact-form-input">
          <label for="contact-form-name">Ваше имя:</label>
          <input id="contact-form-name" name="name" type="text" placeholder="Имя Фамилия">
        </div>
        <div class="contact-form-input">
          <label for="contact-form-email">Ваш e-mail:</label>
          <input id="contact-form-email" name="email" type="email" placeholder="email@example.com">
        </div>
        <div class="contact-form-input textarea">
          <label for="contact-form-message">Текст письма:</label>
          <textarea id="contact-form-message" name="message" placeholder="В свободной форме"></textarea>
        </div>
        <button type="submit" class="btn">Отправить</button>
      </form>
    </div>
    <script src="js/script.min.js"></script>
  </body>
</html>