123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>O.P.E.N</title>
- <link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.css">
- <link rel="stylesheet" type="text/css" href="css/style.css">
- <script src="./bower_components/jquery/dist/jquery.min.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
- </head>
- <body>
- <header>
- <div class="container">
- <div class="row">
- <div class="hamburger col-md-3">
- <nav>
- <div class="nav-container">
- <span class="button-nav"></span>
- </div>
- <ul class='menu'>
- <li><a href=".advantage">Advantage</a></li>
- <li><a href=".office" class=".office">Our offices</a></li>
- <li><a href=".discount">Discount</a></li>
- <li><a href=".statistic">Statistics</a></li>
- <li><a href=".reviews">Reviews</a></li>
- <li><a href=".location">Details</a></li>
- <li><a href=".contacts">Gift</a></li>
- <li><a href=".contacts">Contacts</a></li>
- </ul>
- </nav>
- </div>
- <div class="addres col-md-3 hidden-sm hidden-xs">
- <span>Kharkiv, 3, Sumskay st.</span>
- <span>info@open1969.com</span>
- </div>
- <div class="kontact col-md-3 hidden-sm hidden-xs">
- <span>+38 (068) 089-48-83</span>
- <span>+38 (099) 554-93-65</span>
- </div>
- <div class="folow col-md-3 hidden-sm hidden-xs">
- <a href="https://twitter.com"><img src="img/twitter.png"></a>
- <a href=""><img src="img/instagram.png"></a>
- <a href=""><img src="img/facebook.png"></a>
- </div>
- </div>
- </div>
- </header>
- <div id="scroll-top" class="scrollTop none"></div>
- <section class="popap col-md-6 col-md-offset-3">
- <div class="popap-top">
- <p>Thank you,</p>
- <p>your request has been accepted!</p>
- <span class="close-popap">
- <span>
- <img src="./img/close-popap.png">
- </span>
- </span>
- </div>
- <div class="popap-midle">
- <div>
- <p>We are glad that you joined us</p>
- </div>
- </div>
- <div class="popap-bottom">
- <p>We are glad that you joined us</p>
- </div>
- </section>
- <div class="popap-background">
- <section class="baner">
- <div class="container">
- <div class="row">
- <div class="col-md-3">
- <div class="title-baner">
- <h2>Coworking space</h2>
- <img src="img/LOGO.png">
- <p>EUROPEAN OFFICE IN THE CENTRE</p>
- </div>
- <form class="baner-form">
- <p>book your place right now</p>
- <div class="form-group">
- <input type="text" required class="form-control" placeholder="Your name">
- </div>
- <div class="form-group">
- <input type="number" required class="form-control" placeholder="Your phone number">
- </div>
- <div class="form-button">
- <button type="submit" class="btn btn-info">book</button>
- </div>
- </form>
- </div>
- </div>
- <a href=".whywe" class="scroll">
- <div></div>
- </a>
- </div>
- </section>
- <main>
- <section class="whywe container">
- <div class="blok-whywe">
- why <span>we</span>
- </div>
- <div class="row">
- <div class="col-md-6">
- <span>Great companies</br>start in good company</span>
- </div>
- <div class="whywe-text">
- <div class="col-md-3 whyWe-content-left">
- <div class="whyWe-laptop"><span>Modern equipment</br> Powerful computers</span></div>
- <div class="whyWe-diplomat"><span>Comfortable meeting</br> rooms, with the whole</br>set of equipment</span></div>
- <div class="whyWe-wath"><span>Access to the</br>office 24/7</span></div>
- </div>
- <div class="col-md-3 whyWe-content-right">
- <div class="whyWe-hand"><span>Various public</br> events</span></div>
- <div class="whyWe-sales"><span>Discounts </br>for regular</br> customers</span></div>
- <div class="whyWe-clian"><span>Quality daily</br> wet cleaning</span></div>
- </div>
- </div>
- <div>
- <div class="whywe-text-mobile none">
- <div class="mobile whyWe-content-left">
- <div class="whyWe-laptop"><span>Modern equipment</br> Powerful computers</span></div>
- <div class="whyWe-diplomat"><span>Comfortable meeting</br> rooms, with the whole</br>set of equipment</span></div>
- <div class="whyWe-wath"><span>Access to the</br>office 24/7</span></div>
- </div>
- <div class="mobile whyWe-content-right">
- <div class="whyWe-hand"><span>Various public</br> events</span></div>
- <div class="whyWe-sales"><span>Discounts </br>for regular</br> customers</span></div>
- <div class="whyWe-clian"><span>Quality daily</br> wet cleaning</span></div>
- </div>
- </div>
- </div>
- </section>
- <section class="office container">
- <div class="office1 row">
- <div class="graient-office1">
- <div class="content-office col-md-6">
- <div class="office-seats">
- <span>OFFICE 50 SEATS</span>
- </div>
- <div class="text-office">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
- </div>
- <div class="btn-ofice1">
- <button type="button">book</button>
- </div>
- </div>
- </div>
- </div>
- <div class="office2 row">
- <div class="graient-office2">
- <div class="content-office col-md-6">
- <div class="office-seats">
- <span>OFFICE 20 SEATS</span>
- </div>
- <div class="text-office">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
- </div>
- <div class="btn-ofice1">
- <button type="button">book</button>
- </div>
- </div>
- </div>
- </div>
- <div class="office3 row">
- <div class="graient-office3">
- <div class="content-office col-md-6">
- <div class="office-seats">
- <span>OFFICE 6 SEATS</span>
- </div>
- <div class="text-office">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.<a href=""><span>See more <img src="./img/arrow.png"></span></a></p>
- </div>
- <div class="btn-ofice1">
- <button type="button">book</button>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section class="discount container">
- <img src="./img/baba.png">
- <div class="row">
- <form class="form-discount col-md-4">
- <div class="text-discount">
- <p>hurry up</br><span>and get</br></span>40% discont</p>
- </div>
- <div class="form-group">
- <input required="" type="text" class="form-control" placeholder="Your name">
- </div>
- <div class="form-group">
- <input type="number" required="" class="form-control" placeholder="Your phone number">
- </div>
- <div class="form-button">
- <button type="submit" class="btn btn-info">book</button>
- </div>
- </form>
- </div>
- </section>
- <section class="statistic container">
- <div class="statistic-content row">
- <div class="col-md-3 statistic-space">
- <div class="number"><span>1,051</span></div>
- <div class="text"><span>space</span></div>
- </div>
- <div class="col-md-3 statistic-office">
- <div class="number"><span>15</span></div>
- <div class="text"><span>office</span></div>
- </div>
- <div class="col-md-3 statistic-computers">
- <div class="number"><span>670</span></div>
- <div class="text"><span>computers</span></div>
- </div>
- <div class="col-md-3 statistic-costumers">
- <div class="number"><span>5,780</span></div>
- <div class="text"><span>costumers</span></div>
- </div>
- </div>
- <div class="statistic-content-xs">
- <div class="row">
- <div class="col-xs-4 background-statistic">
- <div class="statistic-space">
- <div class="number"><span>1,051</span></div>
- <div class="text"><span>space</span></div>
- </div>
- </div>
- <div class="col-xs-4 background-statistic">
- <div class="statistic-office"">
- <div class="number"><span>15</span></div>
- <div class="text"><span>office</span></div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-4 background-statistic">
- <div class="statistic-computers">
- <div class="number"><span>670</span></div>
- <div class="text"><span>computers</span></div>
- </div>
- </div>
- <div class="col-xs-4 background-statistic">
- <div class="statistic-costumers">
- <div class="number"><span>5,780</span></div>
- <div class="text"><span>costumers</span></div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section class="reviews container">
- <img src="./img/arrow-left.png" class="arrow-left">
- <img src="./img/arrow-right.png" class="arrow-right">
- <svg width="1100" height="830">
- <g>
- <path d='M 182.85593,411.05618 1.7142743,0.16366901 362.51187,1.4589 Z' fill='url(#alex-koment)'></path>
- <defs>
- <pattern id="alex-koment" width="100%" height="100%">
- <image xlink:href="./img/alex-koment.png" width="360" height="412">
- </pattern>
- </defs>
- <g class='slider-text'>
- <text x='50' y='50'>Сonsectetuer adipiscing</text>
- <text x='63' y='75'>elit. Aenean commodo</text>
- <text x='95' y='97'>ligula eget dolor.</text>
- <text x='102' y='125'>Aenean massa.</text>
- </g>
- </g>
- <g>
- <path d='M 913.36534,410.29427 729.44276,0.39223942 1095.7641,0.23986007 Z' fill='url(#denis-koment)'></path>
- <defs>
- <pattern id="denis-koment" width="100%" height="100%">
- <image xlink:href="./img/denis-koment.png" width="360" height="412">
- </pattern>
- </defs>
- <g class='slider-text'>
- <text x='785' y='50'>Dis parturient montes,</text>
- <text x='780' y='75'>nascetur ridiculus mus</text>
- <text x='791' y='97'>Onec quam felis, ultrici</text>
- <text x='799' y='125'>esnec,pelentesque.</text>
- </g>
- </g>
- <g>
- <path d='M 367.84517,827.0534 189.96128,422.35301 543.91638,422.9995 Z' fill='url(#anna-koment)'></path>
- <defs>
- <pattern id="anna-koment" width="100%" height="100%">
- <image xlink:href="./img/anna-koment.png" width="360" height="412">
- </pattern>
- </defs>
- <g class='slider-text'>
- <text x='225' y='468'>Aenean massa. Cum sociis</text>
- <text x='245' y='498'>natoque penatibus et</text>
- <text x='244' y='527'>magnis dis parturient</text>
- <text x='270' y='555'>montes, nascetur.</text>
- </g>
- </g>
- <g>
- <path d='m 732.49036,838.17713 -181.03155,-416.14737 360.95876,0 z' fill='url(#jane-koment)'></path>
- <defs>
- <pattern id="jane-koment" width="100%" height="100%">
- <image xlink:href="./img/jane-koment.png" width="360" height="412">
- </pattern>
- </defs>
- <g class='slider-text'>
- <text x='593' y='468'>Fringilla vel, aliquet nec,</text>
- <text x='600' y='498'>vulputate eget, arcu. In</text>
- <text x='608' y='527'>enim justo, rhoncus ut,</text>
- <text x='629' y='555'>imperdiet a, venat.</text>
- </g>
- </g>
- <!-- main -->
- <g calss='main-slider'></g>
- <g>
- <path d='M 182.85593,411.05618 1.7142743,0.16366901 362.51187,1.4589 Z' fill='url(#left-top)' class='left-top'></path>
- <defs>
- <pattern id="left-top" width="100%" height="100%">
- <image xlink:href="./img/slider-left-top.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 367.10046,2.0246035 186.51332,414.59509 l 360.20454,0.10776 z' fill='url(#slider-alex)' id='alex'></path>
- <g class='name none'>
- <rect x='230' y='330' width='276' height='60' fill='#ffffff'></rect>
- <text x='247' y='357'>Alex, 35</text>
- <text x='310' y='385'>web-designer</text>
- </g>
- <defs>
- <pattern id="slider-alex" width="100%" height="100%">
- <image xlink:href="./img/slider-alex.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 549.76176,413.94859 371.73366,1.3242346 726.33525,1.485859 Z' fill='url(#middle-top)'></path>
- <defs>
- <pattern id="middle-top" width="100%" height="100%">
- <image xlink:href="./img/slider-middle-top.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 730.6452,4.9338217 550.39633,415.32281 910.15485,414.05635 Z' fill='url(#slider-denis)' id='denis'></path>
- <g class='name none'>
- <rect x='594' y='330' width='276' height='60' fill='#ffffff'></rect>
- <text x='615' y='357'>Denis, 28</text>
- <text x='665' y='385'>php developer</text>
- </g>
- <defs>
- <pattern id="slider-denis" width="100%" height="100%">
- <image xlink:href="./img/slider-denis.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 913.36534,410.29427 729.44276,0.39223942 1095.7641,0.23986007 Z' fill='url(#right-top)' class='right-top'></path>
- <defs>
- <pattern id="right-top" width="100%" height="100%">
- <image xlink:href="./img/slider-right-top.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 0,840 184.37972,420.65611 369.33087,840.00569 Z' fill='url(#slider-anna)' id='anna'></path>
- <g class='name none'>
- <rect x='44' y='742' width='276' height='60' fill='#ffffff'></rect>
- <text x='65' y='770'>Anna, 22</text>
- <text x='145' y='795'>art director</text>
- </g>
- <defs>
- <pattern id="slider-anna" width="100%" height="100%">
- <image xlink:href="./img/slider-anna.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 367.84517,827.0534 189.96128,422.35301 543.91638,422.9995 Z' fill='url(#left-bottom)' class='left-bottom'></path>
- <defs>
- <pattern id="left-bottom" width="100%" height="100%">
- <image xlink:href="./img/slider-left-bottom.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 370.65617,839.7722 727.95148,838.91021 549.30383,425.36998 Z' fill='url(#middle-bottom)'></path>
- <defs>
- <pattern id="middle-bottom" width="100%" height="100%">
- <image xlink:href="./img/slider-middle-bottom.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='m 732.49036,838.17713 -181.03155,-416.14737 360.95876,0 z' fill='url(#right-bottom)' class='right-bottom'></path>
- <defs>
- <pattern id="right-bottom" width="100%" height="100%">
- <image xlink:href="./img/slider-right-bottom.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- <g>
- <path d='M 916.08104,422.9995 732.47693,839.98769 1100,840.00024 Z' fill='url(#slider-jane)' id='jane'></path>
- <g class='name none'>
- <rect x='777' y='742' width='276' height='60' fill='#ffffff'></rect>
- <text x='808' y='770'>Jane, 27</text>
- <text x='890' y='795'>journalist</text>
- </g>
- <defs>
- <pattern id="slider-jane" width="100%" height="100%">
- <image xlink:href="./img/slider-jane.png" width="360" height="412">
- </pattern>
- </defs>
- </g>
- </svg>
- </section>
- <section class="advantage container">
- <div class="advantage-content row">
- <div class="advantage-left col-lg-6 col-xs-12">
- <span>It's all in the detais</span>
- </div>
- <div class="advantage-right col-lg-6 col-xs-12 row">
- <div class="metro col-lg-6"><span>Great location,</br>5 minutes to metro</span></div>
- <div class="tea col-lg-6"><span>Free tea, cofee</br>and sweets</span></div>
- <div class="library col-lg-6"><span>Our own little</br>Library</span></div>
- <div class="company col-lg-6"><span>Always good</br>company</span></div>
- </div>
- </div>
- </section>
- <section class="monthFree container">
- <div class="row">
- <div class="form-monthFree col-md-3">
- <h2>get a month free</h2>
- <p>Take part in the action simply<a href=""> subscribe </a>to us</p>
- <div class="form-group">
- <input type="text" required="" class="form-control" placeholder="Your name">
- </div>
- <div class="form-group">
- <input type="number" required="" class="form-control" placeholder="Your phone number">
- </div>
- <div class="form-button">
- <button type="button" class="btn btn-danger">take part</button>
- </div>
- </div>
- <img src="./img/baba2.png">
- <div class="withUs">
- <p>join the team</p>
- <p>work with us</p>
- </div>
- </div>
- </section>
- <section class="location container">
- <div class="text-location">
- <h2>location</h2>
- <p>Central Kharkiv is the perfect location because of</br> its close proximity to the commercial, retail and</br> entertainment hubs</p>
- </div>
- <span class="park">Park</span>
- <span class="market">Market</span>
- <span class="mac">MC Donald's</span>
- <span class="open">1969 OPEN</span>
- <span class="coffe">Coffe life</span>
- </section>
- </main>
- <footer class="contacts">
- <div class="container">
- <div class="addres-footer col-md-4 row">
- <h2>coworking space</h2>
- <span>Kharkiv, 3, Sumskay st.</span></br>
- <span>info@open1969.com</span>
- </div>
- <div class="logo-footer row col-md-4">
- <h2>Follow us</h2>
- <div class="icon-footer">
- <a href="https://twitter.com"><img src="img/twitter.png"></a>
- <a href=""><img src="img/instagram.png"></a>
- <a href=""><img src="img/facebook.png"></a>
- </div>
- <img src="img/LOGO.png">
- </div>
- <div class="contact-footer row col-md-4">
- <h2>contact</h2>
- <span>+38 (068) 089-48-83</span></br>
- <span>+38 (099) 554-93-65</span>
- </div>
- </div>
- </footer>
- </div>
- <script type="text/javascript" src="js/script.js"></script>
- </body>
- </html>
|