Building dyne solutions website

index_1505744088.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta name="description" content=" IT consultancy firm for dyne.org">
  7. <meta name="author" content="fredd">
  8. <title>Dyne Solutions - Consulting Firm</title>
  9. <!-- Bootstrap core CSS -->
  10. <!-- Custom styles for this template --> ]
  11. <link rel="stylesheet" href="components/pg.blocks/css/blocks.css">
  12. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  13. <link href="css/full-width-pics.css" rel="stylesheet" type="text/css">
  14. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  15. <link href="components/pg.blocks/css/style-library-1.css" rel="stylesheet" type="text/css">
  16. <link href="dyne-sol.css" rel="stylesheet" type="text/css">
  17. <link href="css/jumbotron.css" rel="stylesheet" type="text/css">
  18. <link href="components/pg.blocks/css/blocks.css" rel="stylesheet" type="text/css">
  19. <link href="components/pg.blocks/css/plugins.css" rel="stylesheet" type="text/css">
  20. <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
  21. <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  22. </head>
  23. <body style="background-image:url('images/Oval-big.svg');">
  24. <!-- Navigation -->
  25. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  26. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  27. <span class="navbar-toggler-icon"></span>
  28. </button>
  29. <a class="navbar-brand" href="https://www.dyne.org">Dyne Solution Consultancy bv</a>
  30. <div class="container">
  31. <div class="collapse navbar-collapse" id="navbarResponsive">
  32. <ul class="navbar-nav ml-auto">
  33. <li class="nav-item active">
  34. <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
  35. </li>
  36. <li class="nav-item">
  37. <a class="nav-link" href="#">Who we are</a>
  38. </li>
  39. <li class="nav-item">
  40. <a class="nav-link" href="#">What we do</a>
  41. </li>
  42. <li class="nav-item">
  43. <a class="nav-link" href="#">Contact us</a>
  44. </li>
  45. </ul>
  46. </div>
  47. </div>
  48. </nav>
  49. <!-- Header - set the background image for the header in the line below -->
  50. <div class="jumbotron">
  51. <div class="container">
  52. <div class="row">
  53. <div class="col-md-4">
  54. <img src="images/LOGO_big.svg" width="300" class="logo img-responsive pull-left" />
  55. </div>
  56. <div class="col-md-8">
  57. <h1>Hello, world!</h1>
  58. <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
  59. <a class="btn btn-dynesol btn-lg" href="#" data-placement="top" data-toggle="popover">learn more</a>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- Content section -->
  65. <section class="py-5">
  66. <div class="container">
  67. <h1>Section Heading</h1>
  68. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  69. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
  70. </div>
  71. </section>
  72. <div class="container">
  73. <div class="row">
  74. <div class="col-md-4">
  75. <h3>Column title</h3>
  76. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  77. </div>
  78. <div class="col-md-4">
  79. <h3>Column title</h3>
  80. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  81. </div>
  82. <div class="col-md-4">
  83. <h3>Column title</h3>
  84. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- Image Section - set the background image for the header in the line below -->
  89. <!-- Content section -->
  90. <section class="py-5">
  91. <div class="container">
  92. <h1>Section Heading</h1>
  93. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  94. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
  95. </div>
  96. </section>
  97. <div class="container">
  98. <div class="row">
  99. <div class="col-md-4">
  100. <h3>Column title</h3>
  101. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  102. </div>
  103. <div class="col-md-4">
  104. <h3>Column title</h3>
  105. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  106. </div>
  107. <div class="col-md-4">
  108. <h3>Column title</h3>
  109. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  110. </div>
  111. </div>
  112. </div>
  113. <section id="content-1-2" class="content-block content-1-2">
  114. <div class="container">
  115. <!-- Start Row -->
  116. <div class="row">
  117. <div class="col-sm-6">
  118. <section class="content-block team-2 team-2-1">
  119. <div class="container">
  120. <div class="underlined-title">
  121. <h1>Say hello to the team</h1>
  122. <hr>
  123. </div>
  124. <div class="row">
  125. <div class="col-sm-4 team-wrapper">
  126. <div class="team-item">
  127. <div class="team-thumb">
  128. <img src="images/Foto_Jaromil.png" class="img-responsive" alt="Member Image">
  129. <div class="image-overlay"></div>
  130. <a href="#" class="team-link"><i class="fa fa-3x fa-envelope-o"></i></a>
  131. </div>
  132. <div class="team-details">
  133. <h4>Denis Roio</h4>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="col-sm-4 team-wrapper">
  138. <div class="team-item">
  139. <div class="team-thumb">
  140. <img src="images/Foto_Marco.png" class="img-responsive" alt="Member Image">
  141. <div class="image-overlay"></div>
  142. <a href="#" class="team-link"><i class="fa fa-3x fa-envelope-o"></i></a>
  143. </div>
  144. <div class="team-details">
  145. <h4>Marco Sashy</h4>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="col-sm-4 team-wrapper">
  150. <div class="team-item">
  151. <div class="team-thumb">
  152. <img src="http://placehold.it/600x500" class="img-responsive" alt="Member Image">
  153. <div class="image-overlay"></div>
  154. <a href="#" class="team-link"><i class="fa fa-3x fa-envelope-o"></i></a>
  155. </div>
  156. <div class="team-details">
  157. <h4>Someone Else</h4>
  158. </div>
  159. </div>
  160. </div>
  161. <!-- /.gallery-item-wrapper -->
  162. </div>
  163. <!-- /.row -->
  164. </div>
  165. <!-- /.container -->
  166. </section>
  167. <h2>Copy & paste content blocks</h2>
  168. <p class="lead">For a professional startup site or prototype.</p>
  169. <p>Helvetica mustache squid plaid meh Brooklyn hashtag, retro chillwave YOLO four loko photo booth. Brooklyn kale chips, seitan hella 3 wolf moon slow-carb paleo.</p>
  170. </div>
  171. <div class="col-sm-5 col-sm-offset-1">
  172. <img class="img-rounded img-responsive" src="http://placehold.it/600x400">
  173. </div>
  174. </div>
  175. <!--// END Row -->
  176. </div>
  177. </section>
  178. <section id="content-1-4" class="content-block-nopad content-1-4">
  179. <div class="image-container col-md-5 col-sm-3 pull-left">
  180. <div class="background-image-holder">
  181. </div>
  182. </div>
  183. <div class="container">
  184. <!-- /.row-->
  185. </div>
  186. <!-- /.container -->
  187. </section>
  188. <!-- Footer -->
  189. <footer class="py-5 bg-inverse">
  190. <div class="container">
  191. <p class="m-0 text-center">Copyright &copy; Your Website 2017</p>
  192. </div>
  193. <!-- /.container -->
  194. </footer>
  195. <!-- Bootstrap core JavaScript -->
  196. <script src="vendor/jquery/jquery.min.js"></script>
  197. <script src="vendor/popper/popper.min.js"></script>
  198. <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  199. </body>
  200. </html>