index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>O.P.E.N</title>
  7. <link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.css">
  8. <link rel="stylesheet" type="text/css" href="css/style.css">
  9. <script src="./bower_components/jquery/dist/jquery.min.js"></script>
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  11. </head>
  12. <body>
  13. <header>
  14. <div class="container">
  15. <div class="row">
  16. <div class="hamburger col-md-3">
  17. <nav>
  18. <div class="nav-container">
  19. <span class="button-nav"></span>
  20. </div>
  21. <ul class='menu'>
  22. <li><a href=".advantage">Advantage</a></li>
  23. <li><a href=".office" class=".office">Our offices</a></li>
  24. <li><a href=".discount">Discount</a></li>
  25. <li><a href=".statistic">Statistics</a></li>
  26. <li><a href=".reviews">Reviews</a></li>
  27. <li><a href=".location">Details</a></li>
  28. <li><a href=".contacts">Gift</a></li>
  29. <li><a href=".contacts">Contacts</a></li>
  30. </ul>
  31. </nav>
  32. </div>
  33. <div class="addres col-md-3 hidden-sm hidden-xs">
  34. <span>Kharkiv, 3, Sumskay st.</span>
  35. <span>info@open1969.com</span>
  36. </div>
  37. <div class="kontact col-md-3 hidden-sm hidden-xs">
  38. <span>+38 (068) 089-48-83</span>
  39. <span>+38 (099) 554-93-65</span>
  40. </div>
  41. <div class="folow col-md-3 hidden-sm hidden-xs">
  42. <a href="https://twitter.com"><img src="img/twitter.png"></a>
  43. <a href=""><img src="img/instagram.png"></a>
  44. <a href=""><img src="img/facebook.png"></a>
  45. </div>
  46. </div>
  47. </div>
  48. </header>
  49. <div id="scroll-top" class="scrollTop none"></div>
  50. <section class="popap col-md-6 col-md-offset-3">
  51. <div class="popap-top">
  52. <p>Thank you,</p>
  53. <p>your request has been accepted!</p>
  54. <span class="close-popap">
  55. <span>
  56. <img src="./img/close-popap.png">
  57. </span>
  58. </span>
  59. </div>
  60. <div class="popap-midle">
  61. <div>
  62. <p>We are glad that you joined us</p>
  63. </div>
  64. </div>
  65. <div class="popap-bottom">
  66. <p>We are glad that you joined us</p>
  67. </div>
  68. </section>
  69. <div class="popap-background">
  70. <section class="baner">
  71. <div class="container">
  72. <div class="row">
  73. <div class="col-md-3">
  74. <div class="title-baner">
  75. <h2>Coworking space</h2>
  76. <img src="img/LOGO.png">
  77. <p>EUROPEAN OFFICE IN THE CENTRE</p>
  78. </div>
  79. <form class="baner-form">
  80. <p>book your place right now</p>
  81. <div class="form-group">
  82. <input type="text" required class="form-control" placeholder="Your name">
  83. </div>
  84. <div class="form-group">
  85. <input type="number" required class="form-control" placeholder="Your phone number">
  86. </div>
  87. <div class="form-button">
  88. <button type="submit" class="btn btn-info">book</button>
  89. </div>
  90. </form>
  91. </div>
  92. </div>
  93. <a href=".whywe" class="scroll">
  94. <div></div>
  95. </a>
  96. </div>
  97. </section>
  98. <main>
  99. <section class="whywe container">
  100. <div class="blok-whywe">
  101. why <span>we</span>
  102. </div>
  103. <div class="row">
  104. <div class="col-md-6">
  105. <span>Great companies</br>start in good company</span>
  106. </div>
  107. <div class="whywe-text">
  108. <div class="col-md-3 whyWe-content-left">
  109. <div class="whyWe-laptop"><span>Modern equipment</br> Powerful computers</span></div>
  110. <div class="whyWe-diplomat"><span>Comfortable meeting</br> rooms, with the whole</br>set of equipment</span></div>
  111. <div class="whyWe-wath"><span>Access to the</br>office 24/7</span></div>
  112. </div>
  113. <div class="col-md-3 whyWe-content-right">
  114. <div class="whyWe-hand"><span>Various public</br> events</span></div>
  115. <div class="whyWe-sales"><span>Discounts </br>for regular</br> customers</span></div>
  116. <div class="whyWe-clian"><span>Quality daily</br> wet cleaning</span></div>
  117. </div>
  118. </div>
  119. <div>
  120. <div class="whywe-text-mobile none">
  121. <div class="mobile whyWe-content-left">
  122. <div class="whyWe-laptop"><span>Modern equipment</br> Powerful computers</span></div>
  123. <div class="whyWe-diplomat"><span>Comfortable meeting</br> rooms, with the whole</br>set of equipment</span></div>
  124. <div class="whyWe-wath"><span>Access to the</br>office 24/7</span></div>
  125. </div>
  126. <div class="mobile whyWe-content-right">
  127. <div class="whyWe-hand"><span>Various public</br> events</span></div>
  128. <div class="whyWe-sales"><span>Discounts </br>for regular</br> customers</span></div>
  129. <div class="whyWe-clian"><span>Quality daily</br> wet cleaning</span></div>
  130. </div>
  131. </div>
  132. </div>
  133. </section>
  134. <section class="office container">
  135. <div class="office1 row">
  136. <div class="graient-office1">
  137. <div class="content-office col-md-6">
  138. <div class="office-seats">
  139. <span>OFFICE 50 SEATS</span>
  140. </div>
  141. <div class="text-office">
  142. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  143. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  144. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  145. consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
  146. </div>
  147. <div class="btn-ofice1">
  148. <button type="button">book</button>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="office2 row">
  154. <div class="graient-office2">
  155. <div class="content-office col-md-6">
  156. <div class="office-seats">
  157. <span>OFFICE 20 SEATS</span>
  158. </div>
  159. <div class="text-office">
  160. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  161. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  162. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  163. consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
  164. </div>
  165. <div class="btn-ofice1">
  166. <button type="button">book</button>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. <div class="office3 row">
  172. <div class="graient-office3">
  173. <div class="content-office col-md-6">
  174. <div class="office-seats">
  175. <span>OFFICE 6 SEATS</span>
  176. </div>
  177. <div class="text-office">
  178. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  179. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  180. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  181. consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
  182. </div>
  183. <div class="btn-ofice1">
  184. <button type="button">book</button>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </section>
  190. <section class="discount container">
  191. <img src="./img/baba.png">
  192. <div class="row">
  193. <form class="form-discount col-md-4">
  194. <div class="text-discount">
  195. <p>hurry up</br><span>and get</br></span>40% discont</p>
  196. </div>
  197. <div class="form-group">
  198. <input required="" type="text" class="form-control" placeholder="Your name">
  199. </div>
  200. <div class="form-group">
  201. <input type="number" required="" class="form-control" placeholder="Your phone number">
  202. </div>
  203. <div class="form-button">
  204. <button type="submit" class="btn btn-info">book</button>
  205. </div>
  206. </form>
  207. </div>
  208. </section>
  209. <section class="statistic container">
  210. <div class="statistic-content row">
  211. <div class="col-md-3 statistic-space">
  212. <div class="number"><span>1,051</span></div>
  213. <div class="text"><span>space</span></div>
  214. </div>
  215. <div class="col-md-3 statistic-office">
  216. <div class="number"><span>15</span></div>
  217. <div class="text"><span>office</span></div>
  218. </div>
  219. <div class="col-md-3 statistic-computers">
  220. <div class="number"><span>670</span></div>
  221. <div class="text"><span>computers</span></div>
  222. </div>
  223. <div class="col-md-3 statistic-costumers">
  224. <div class="number"><span>5,780</span></div>
  225. <div class="text"><span>costumers</span></div>
  226. </div>
  227. </div>
  228. <div class="statistic-content-xs">
  229. <div class="row">
  230. <div class="col-xs-4 background-statistic">
  231. <div class="statistic-space">
  232. <div class="number"><span>1,051</span></div>
  233. <div class="text"><span>space</span></div>
  234. </div>
  235. </div>
  236. <div class="col-xs-4 background-statistic">
  237. <div class="statistic-office"">
  238. <div class="number"><span>15</span></div>
  239. <div class="text"><span>office</span></div>
  240. </div>
  241. </div>
  242. </div>
  243. <div class="row">
  244. <div class="col-xs-4 background-statistic">
  245. <div class="statistic-computers">
  246. <div class="number"><span>670</span></div>
  247. <div class="text"><span>computers</span></div>
  248. </div>
  249. </div>
  250. <div class="col-xs-4 background-statistic">
  251. <div class="statistic-costumers">
  252. <div class="number"><span>5,780</span></div>
  253. <div class="text"><span>costumers</span></div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. </section>
  259. <section class="reviews container">
  260. <img src="./img/arrow-left.png" class="arrow-left">
  261. <img src="./img/arrow-right.png" class="arrow-right">
  262. <svg width="1100" height="830">
  263. <g>
  264. <path d='M 182.85593,411.05618 1.7142743,0.16366901 362.51187,1.4589 Z' fill='url(#alex-koment)'></path>
  265. <defs>
  266. <pattern id="alex-koment" width="100%" height="100%">
  267. <image xlink:href="./img/alex-koment.png" width="360" height="412">
  268. </pattern>
  269. </defs>
  270. <g class='slider-text'>
  271. <text x='50' y='50'>Сonsectetuer adipiscing</text>
  272. <text x='63' y='75'>elit. Aenean commodo</text>
  273. <text x='95' y='97'>ligula eget dolor.</text>
  274. <text x='102' y='125'>Aenean massa.</text>
  275. </g>
  276. </g>
  277. <g>
  278. <path d='M 913.36534,410.29427 729.44276,0.39223942 1095.7641,0.23986007 Z' fill='url(#denis-koment)'></path>
  279. <defs>
  280. <pattern id="denis-koment" width="100%" height="100%">
  281. <image xlink:href="./img/denis-koment.png" width="360" height="412">
  282. </pattern>
  283. </defs>
  284. <g class='slider-text'>
  285. <text x='785' y='50'>Dis parturient montes,</text>
  286. <text x='780' y='75'>nascetur ridiculus mus</text>
  287. <text x='791' y='97'>Onec quam felis, ultrici</text>
  288. <text x='799' y='125'>esnec,pelentesque.</text>
  289. </g>
  290. </g>
  291. <g>
  292. <path d='M 367.84517,827.0534 189.96128,422.35301 543.91638,422.9995 Z' fill='url(#anna-koment)'></path>
  293. <defs>
  294. <pattern id="anna-koment" width="100%" height="100%">
  295. <image xlink:href="./img/anna-koment.png" width="360" height="412">
  296. </pattern>
  297. </defs>
  298. <g class='slider-text'>
  299. <text x='225' y='468'>Aenean massa. Cum sociis</text>
  300. <text x='245' y='498'>natoque penatibus et</text>
  301. <text x='244' y='527'>magnis dis parturient</text>
  302. <text x='270' y='555'>montes, nascetur.</text>
  303. </g>
  304. </g>
  305. <g>
  306. <path d='m 732.49036,838.17713 -181.03155,-416.14737 360.95876,0 z' fill='url(#jane-koment)'></path>
  307. <defs>
  308. <pattern id="jane-koment" width="100%" height="100%">
  309. <image xlink:href="./img/jane-koment.png" width="360" height="412">
  310. </pattern>
  311. </defs>
  312. <g class='slider-text'>
  313. <text x='593' y='468'>Fringilla vel, aliquet nec,</text>
  314. <text x='600' y='498'>vulputate eget, arcu. In</text>
  315. <text x='608' y='527'>enim justo, rhoncus ut,</text>
  316. <text x='629' y='555'>imperdiet a, venat.</text>
  317. </g>
  318. </g>
  319. <!-- main -->
  320. <g calss='main-slider'></g>
  321. <g>
  322. <path d='M 182.85593,411.05618 1.7142743,0.16366901 362.51187,1.4589 Z' fill='url(#left-top)' class='left-top'></path>
  323. <defs>
  324. <pattern id="left-top" width="100%" height="100%">
  325. <image xlink:href="./img/slider-left-top.png" width="360" height="412">
  326. </pattern>
  327. </defs>
  328. </g>
  329. <g>
  330. <path d='M 367.10046,2.0246035 186.51332,414.59509 l 360.20454,0.10776 z' fill='url(#slider-alex)' id='alex'></path>
  331. <g class='name none'>
  332. <rect x='230' y='330' width='276' height='60' fill='#ffffff'></rect>
  333. <text x='247' y='357'>Alex, 35</text>
  334. <text x='310' y='385'>web-designer</text>
  335. </g>
  336. <defs>
  337. <pattern id="slider-alex" width="100%" height="100%">
  338. <image xlink:href="./img/slider-alex.png" width="360" height="412">
  339. </pattern>
  340. </defs>
  341. </g>
  342. <g>
  343. <path d='M 549.76176,413.94859 371.73366,1.3242346 726.33525,1.485859 Z' fill='url(#middle-top)'></path>
  344. <defs>
  345. <pattern id="middle-top" width="100%" height="100%">
  346. <image xlink:href="./img/slider-middle-top.png" width="360" height="412">
  347. </pattern>
  348. </defs>
  349. </g>
  350. <g>
  351. <path d='M 730.6452,4.9338217 550.39633,415.32281 910.15485,414.05635 Z' fill='url(#slider-denis)' id='denis'></path>
  352. <g class='name none'>
  353. <rect x='594' y='330' width='276' height='60' fill='#ffffff'></rect>
  354. <text x='615' y='357'>Denis, 28</text>
  355. <text x='665' y='385'>php developer</text>
  356. </g>
  357. <defs>
  358. <pattern id="slider-denis" width="100%" height="100%">
  359. <image xlink:href="./img/slider-denis.png" width="360" height="412">
  360. </pattern>
  361. </defs>
  362. </g>
  363. <g>
  364. <path d='M 913.36534,410.29427 729.44276,0.39223942 1095.7641,0.23986007 Z' fill='url(#right-top)' class='right-top'></path>
  365. <defs>
  366. <pattern id="right-top" width="100%" height="100%">
  367. <image xlink:href="./img/slider-right-top.png" width="360" height="412">
  368. </pattern>
  369. </defs>
  370. </g>
  371. <g>
  372. <path d='M 0,840 184.37972,420.65611 369.33087,840.00569 Z' fill='url(#slider-anna)' id='anna'></path>
  373. <g class='name none'>
  374. <rect x='44' y='742' width='276' height='60' fill='#ffffff'></rect>
  375. <text x='65' y='770'>Anna, 22</text>
  376. <text x='145' y='795'>art director</text>
  377. </g>
  378. <defs>
  379. <pattern id="slider-anna" width="100%" height="100%">
  380. <image xlink:href="./img/slider-anna.png" width="360" height="412">
  381. </pattern>
  382. </defs>
  383. </g>
  384. <g>
  385. <path d='M 367.84517,827.0534 189.96128,422.35301 543.91638,422.9995 Z' fill='url(#left-bottom)' class='left-bottom'></path>
  386. <defs>
  387. <pattern id="left-bottom" width="100%" height="100%">
  388. <image xlink:href="./img/slider-left-bottom.png" width="360" height="412">
  389. </pattern>
  390. </defs>
  391. </g>
  392. <g>
  393. <path d='M 370.65617,839.7722 727.95148,838.91021 549.30383,425.36998 Z' fill='url(#middle-bottom)'></path>
  394. <defs>
  395. <pattern id="middle-bottom" width="100%" height="100%">
  396. <image xlink:href="./img/slider-middle-bottom.png" width="360" height="412">
  397. </pattern>
  398. </defs>
  399. </g>
  400. <g>
  401. <path d='m 732.49036,838.17713 -181.03155,-416.14737 360.95876,0 z' fill='url(#right-bottom)' class='right-bottom'></path>
  402. <defs>
  403. <pattern id="right-bottom" width="100%" height="100%">
  404. <image xlink:href="./img/slider-right-bottom.png" width="360" height="412">
  405. </pattern>
  406. </defs>
  407. </g>
  408. <g>
  409. <path d='M 916.08104,422.9995 732.47693,839.98769 1100,840.00024 Z' fill='url(#slider-jane)' id='jane'></path>
  410. <g class='name none'>
  411. <rect x='777' y='742' width='276' height='60' fill='#ffffff'></rect>
  412. <text x='808' y='770'>Jane, 27</text>
  413. <text x='890' y='795'>journalist</text>
  414. </g>
  415. <defs>
  416. <pattern id="slider-jane" width="100%" height="100%">
  417. <image xlink:href="./img/slider-jane.png" width="360" height="412">
  418. </pattern>
  419. </defs>
  420. </g>
  421. </svg>
  422. </section>
  423. <section class="advantage container">
  424. <div class="advantage-content row">
  425. <div class="advantage-left col-lg-6 col-xs-12">
  426. <span>It's all in the detais</span>
  427. </div>
  428. <div class="advantage-right col-lg-6 col-xs-12 row">
  429. <div class="metro col-lg-6"><span>Great location,</br>5 minutes to metro</span></div>
  430. <div class="tea col-lg-6"><span>Free tea, cofee</br>and sweets</span></div>
  431. <div class="library col-lg-6"><span>Our own little</br>Library</span></div>
  432. <div class="company col-lg-6"><span>Always good</br>company</span></div>
  433. </div>
  434. </div>
  435. </section>
  436. <section class="monthFree container">
  437. <div class="row">
  438. <div class="form-monthFree col-md-3">
  439. <h2>get a month free</h2>
  440. <p>Take part in the action simply<a href=""> subscribe </a>to us</p>
  441. <div class="form-group">
  442. <input type="text" required="" class="form-control" placeholder="Your name">
  443. </div>
  444. <div class="form-group">
  445. <input type="number" required="" class="form-control" placeholder="Your phone number">
  446. </div>
  447. <div class="form-button">
  448. <button type="button" class="btn btn-danger">take part</button>
  449. </div>
  450. </div>
  451. <img src="./img/baba2.png">
  452. <div class="withUs">
  453. <p>join the team</p>
  454. <p>work with us</p>
  455. </div>
  456. </div>
  457. </section>
  458. <section class="location container">
  459. <div class="text-location">
  460. <h2>location</h2>
  461. <p>Central Kharkiv is the perfect location because of</br> its close proximity to the commercial, retail and</br> entertainment hubs</p>
  462. </div>
  463. <span class="park">Park</span>
  464. <span class="market">Market</span>
  465. <span class="mac">MC Donald's</span>
  466. <span class="open">1969 OPEN</span>
  467. <span class="coffe">Coffe life</span>
  468. </section>
  469. </main>
  470. <footer class="contacts">
  471. <div class="container">
  472. <div class="addres-footer col-md-4 row">
  473. <h2>coworking space</h2>
  474. <span>Kharkiv, 3, Sumskay st.</span></br>
  475. <span>info@open1969.com</span>
  476. </div>
  477. <div class="logo-footer row col-md-4">
  478. <h2>Follow us</h2>
  479. <div class="icon-footer">
  480. <a href="https://twitter.com"><img src="img/twitter.png"></a>
  481. <a href=""><img src="img/instagram.png"></a>
  482. <a href=""><img src="img/facebook.png"></a>
  483. </div>
  484. <img src="img/LOGO.png">
  485. </div>
  486. <div class="contact-footer row col-md-4">
  487. <h2>contact</h2>
  488. <span>+38 (068) 089-48-83</span></br>
  489. <span>+38 (099) 554-93-65</span>
  490. </div>
  491. </div>
  492. </footer>
  493. </div>
  494. <script type="text/javascript" src="js/script.js"></script>
  495. </body>
  496. </html>