Building dyne solutions website

index.html 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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. <link href="css/floaters.css" rel="stylesheet" type="text/css">
  23. </head>
  24. <body style="background-image:url('images/Oval-big.svg');">
  25. <!-- Navigation -->
  26. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  27. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  28. <span class="navbar-toggler-icon"></span>
  29. </button>
  30. <a class="navbar-brand" href="https://www.dyne.org">Dyne Solution Consultancy bv</a>
  31. <div class="container">
  32. <div class="collapse navbar-collapse" id="navbarResponsive">
  33. <ul class="navbar-nav ml-auto">
  34. <li class="nav-item active">
  35. <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link" href="#">Who we are</a>
  39. </li>
  40. <li class="nav-item">
  41. <a class="nav-link" href="#">What we do</a>
  42. </li>
  43. <li class="nav-item">
  44. <a class="nav-link" href="#">Contact us</a>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. </nav>
  50. <!-- Header - set the background image for the header in the line below -->
  51. <div class="row">
  52. <div class="col-md-3 col-sm-3 col-xs-3">
  53. <img src="images/LOGO_big.svg" width="200" class="logo img-responsive pull-left" />
  54. </div>
  55. <div class="col-md-4 col-sm-3 col-xs-2">
  56. <h1 data-pgc>Hello, world!</h1>
  57. <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>
  58. </div>
  59. <div class="col-md-3 col-xs-3 col-sm-3">
  60. <div class="container">
  61. <i class="icon">MEDIA</i>
  62. <i class="icon"><a href="clients.html">
  63. <div class="btn">
  64. clients
  65. </div>
  66. </a></i>
  67. <i class="icon">PROJECTS</i>
  68. <i class="icon">FOCUS</i>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="jumbotron">
  73. </div>
  74. <!-- Content section -->
  75. <section class="py-3">
  76. <div class="container">
  77. <h1>Section Heading</h1>
  78. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  79. <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.<button type="button" class="btn">Button</button></p>
  80. </div>
  81. </section>
  82. <div class="container">
  83. <div class="row">
  84. <div class="col-md-4">
  85. <h3>Column title</h3>
  86. <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>
  87. </div>
  88. <div class="col-md-4">
  89. <h3>Column title</h3>
  90. <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>
  91. </div>
  92. <div class="col-md-4">
  93. <h3>Column title</h3>
  94. <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>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- Image Section - set the background image for the header in the line below -->
  99. <!-- Content section -->
  100. <section class="py-5">
  101. <div class="container">
  102. <h1>Section Heading</h1>
  103. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  104. <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>
  105. </div>
  106. </section>
  107. <div class="container">
  108. <div class="row">
  109. <div class="col-md-4">
  110. <h3>Column title</h3>
  111. <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>
  112. </div>
  113. <div class="col-md-4">
  114. <h3>Column title</h3>
  115. <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>
  116. </div>
  117. <div class="col-md-4">
  118. <h3>Column title</h3>
  119. <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>
  120. </div>
  121. </div>
  122. </div>
  123. <section id="content-1-2" class="content-block content-1-2">
  124. <div class="container">
  125. <!-- Start Row -->
  126. <div class="row">
  127. <div class="col-sm-6">
  128. <section class="content-block team-2 team-2-1">
  129. <div class="container">
  130. <div class="underlined-title">
  131. <h1>Say hello to the team</h1>
  132. <hr>
  133. </div>
  134. <div class="row">
  135. <div class="col-sm-4 team-wrapper">
  136. </div>
  137. <div class="col-sm-4 team-wrapper">
  138. </div>
  139. <!-- /.gallery-item-wrapper -->
  140. </div>
  141. <!-- /.row -->
  142. </div>
  143. <!-- /.container -->
  144. </section>
  145. <h2>Copy & paste content blocks</h2>
  146. <p class="lead">For a professional startup site or prototype.</p>
  147. <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>
  148. </div>
  149. <div class="col-sm-5 col-sm-offset-1">
  150. <img class="img-responsive hidden-xs hidden-sm" src="images/map.png" width="500px">
  151. </div>
  152. </div>
  153. <!--// END Row -->
  154. </div>
  155. </section>
  156. <section id="content-1-4" class="content-block-nopad content-1-4">
  157. <div class="image-container col-md-5 col-sm-3 pull-left">
  158. <div class="background-image-holder">
  159. </div>
  160. </div>
  161. <div class="container">
  162. <!-- /.row-->
  163. </div>
  164. <!-- /.container -->
  165. </section>
  166. <!-- Footer -->
  167. <footer class="py-5 bg-inverse">
  168. <div class="container">
  169. <p class="m-0 text-center">Copyright &copy; dyne consulting 2017</p>
  170. </div>
  171. <!-- /.container -->
  172. </footer>
  173. <!-- Bootstrap core JavaScript -->
  174. <script src="vendor/jquery/jquery.min.js"></script>
  175. <script src="vendor/popper/popper.min.js"></script>
  176. <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  177. </body>
  178. </html>