index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Global</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="description" content="HTML5 website template">
  9. <meta name="keywords" content="global, template, html, sass, jquery">
  10. <meta name="author" content="Bucky Maler">
  11. <link rel="stylesheet" href="assets/css/main.css">
  12. </head>
  13. <body>
  14. <!-- notification for small viewports and landscape oriented smartphones -->
  15. <div class="device-notification">
  16. <a class="device-notification--logo" href="#0">
  17. <img src="assets/img/logo.png" alt="Global">
  18. <p>Global</p>
  19. </a>
  20. <p class="device-notification--message">Global has so much to offer that we must request you orient your device to portrait or find a larger screen. You won't be disappointed.</p>
  21. </div>
  22. <div class="perspective effect-rotate-left">
  23. <div class="container"><div class="outer-nav--return"></div>
  24. <div id="viewport" class="l-viewport">
  25. <div class="l-wrapper">
  26. <header class="header">
  27. <a class="header--logo" href="#0">
  28. <img src="assets/img/logo.png" alt="Global">
  29. <p>Имка</p>
  30. </a>
  31. <button class="header--cta cta">Заказать</button>
  32. <div class="header--nav-toggle">
  33. <span></span>
  34. </div>
  35. </header>
  36. <nav class="l-side-nav">
  37. <ul class="side-nav">
  38. <li class="is-active"><span>Главная</span></li>
  39. <li><span>Работы</span></li>
  40. <li><span>Контакты</span></li>
  41. <li><span>Заказать</span></li>
  42. </ul>
  43. </nav>
  44. <ul class="l-main-content main-content">
  45. <li class="l-section section section--is-active">
  46. <div class="intro">
  47. <div class="intro--banner">
  48. <h1>Моя работа<br>всегда<br>на высоте!</h1>
  49. <button class="cta">Заказать
  50. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
  51. <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
  52. <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
  53. </g>
  54. </svg>
  55. <span class="btn-background"></span>
  56. </button>
  57. <img src="assets/img/introduction-visual.png" alt="Welcome">
  58. </div>
  59. <div class="intro--options">
  60. </a>
  61. <a href="#0">
  62. <h3>Максим Кошелев</h3>
  63. <p>Системный администратор и еденственный в этой команде</p>
  64. </a>
  65. </div>
  66. </div>
  67. </li>
  68. <li class="l-section section">
  69. <div class="work">
  70. <h2>Выберите работу</h2>
  71. <div class="work--lockup">
  72. <ul class="slider">
  73. <li class="slider--item slider--item-left">
  74. <a href="#0">
  75. <div class="slider--item-image">
  76. <img src="assets/img/work-victory.jpg" alt="Victory">
  77. </div>
  78. <p class="slider--item-title">Развертывание сетевой инфраструктуры</p>
  79. <p class="slider--item-description">Делаю качественную развертку и настройку инфраструктуры.</p>
  80. </a>
  81. </li>
  82. <li class="slider--item slider--item-center">
  83. <a href="#0">
  84. <div class="slider--item-image">
  85. <img src="assets/img/work-metiew-smith.jpg" alt="Metiew and Smith">
  86. </div>
  87. <p class="slider--item-title">Работа с отказоустойчивостью</p>
  88. <p class="slider--item-description">Делаю качественную работу с разворачеванием сервисов по отказоустойчивости.</p>
  89. </a>
  90. </li>
  91. <li class="slider--item slider--item-right">
  92. <a href="#0">
  93. <div class="slider--item-image">
  94. <img src="assets/img/work-alex-nowak.jpg" alt="Alex Nowak">
  95. </div>
  96. <p class="slider--item-title">Настройка служб на сервере</p>
  97. <p class="slider--item-description">Делаю качественную настройку служб для коректной работы.</p>
  98. </a>
  99. </li>
  100. </ul>
  101. <div class="slider--prev">
  102. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  103. viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
  104. <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
  105. <path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
  106. c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
  107. c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
  108. </g>
  109. </svg>
  110. </div>
  111. <div class="slider--next">
  112. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
  113. <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
  114. <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
  115. </g>
  116. </svg>
  117. </div>
  118. </div>
  119. </div>
  120. </li>
  121. <li class="l-section section">
  122. <div class="contact">
  123. <div class="contact--lockup">
  124. <div class="modal">
  125. <div class="modal--information">
  126. <p>Москва, Ленинградское шоссе, дом 13А</p>
  127. <a href="mailto:e1mky@bk.ru">e1mky@bk.ru</a>
  128. <a href="tel:+148126287560">+7(901)732-72-39</a>
  129. </div>
  130. <ul class="modal--options">
  131. <li><a href="mailto:e1mky@bk.ru">Связаться</a></li>
  132. </ul>
  133. </div>
  134. </div>
  135. </div>
  136. </li>
  137. <li class="l-section section">
  138. <div class="hire">
  139. <h2>Что вы ходите чтобы мы вам сделали</h2>
  140. <!-- checkout formspree.io for easy form setup -->
  141. <form class="work-request">
  142. <div class="work-request--options">
  143. <span class="options-a">
  144. <input id="opt-1" type="checkbox" value="app design">
  145. <label for="opt-1">
  146. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  147. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  148. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  149. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  150. </g>
  151. </svg>
  152. Настройка сервера
  153. </label>
  154. <input id="opt-2" type="checkbox" value="graphic design">
  155. <label for="opt-2">
  156. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  157. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  158. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  159. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  160. </g>
  161. </svg>
  162. Установка служб
  163. </label>
  164. <input id="opt-3" type="checkbox" value="motion design">
  165. <label for="opt-3">
  166. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  167. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  168. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  169. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  170. </g>
  171. </svg>
  172. Мониторинг сервера
  173. </label>
  174. </span>
  175. <span class="options-b">
  176. <input id="opt-4" type="checkbox" value="ux design">
  177. <label for="opt-4">
  178. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  179. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  180. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  181. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  182. </g>
  183. </svg>
  184. Установка сайта
  185. </label>
  186. <input id="opt-5" type="checkbox" value="webdesign">
  187. <label for="opt-5">
  188. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  189. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  190. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  191. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  192. </g>
  193. </svg>
  194. Обслуживание сети
  195. </label>
  196. <input id="opt-6" type="checkbox" value="marketing">
  197. <label for="opt-6">
  198. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  199. viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
  200. <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
  201. <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
  202. </g>
  203. </svg>
  204. Отказоустойчивость
  205. </label>
  206. </span>
  207. </div>
  208. <div class="work-request--information">
  209. <div class="information-name">
  210. <input id="name" type="text" spellcheck="false">
  211. <label for="name">Имя</label>
  212. </div>
  213. <div class="information-email">
  214. <input id="email" type="email" spellcheck="false">
  215. <label for="email">Электронная почта</label>
  216. </div>
  217. </div>
  218. <input type="submit" value="Отправить">
  219. </form>
  220. </div>
  221. </li>
  222. </ul>
  223. </div>
  224. </div>
  225. </div>
  226. <ul class="outer-nav">
  227. <li class="is-active">Главная</li>
  228. <li>Работы</li>
  229. <li>Контакты</li>
  230. <li>Заказать</li>
  231. </ul>
  232. </div>
  233. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  234. <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
  235. <script src="assets/js/functions-min.js"></script>
  236. </body>
  237. </html>