Design1

HTML

              
                <div class="navbar" id="navbar">
<img src="https://s17.postimg.cc/sho3bv3wv/Asset_2.png" class="logonavbar">
  <ul>
    <li><a href="#linkhome">Home</a></li>
    <li><a href="#linkme">About me</a></li>
    <li><a href="#linkfort">Fort Bourtange</a></li>
    <li><a href="#linkservices">Services</a></li>
    <li><a href="#linkcontact">Contact</a></li>
  </ul>
  </div>

<a href="#linkhome"></a>
<div id="box1">
  <div class="text">  
  <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 718.6 226.6" style="enable-background:new 0 0 718.6 226.6;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:#FFF;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
  </style>
  <g>
    <path class="st0" d="M233.2,127.5c-3.8,3.6-9.3,8-16.7,13.1c-7.3,5.1-15.5,10.5-24.6,16.2c-9.1,5.7-18.6,11.4-28.5,17.2
      c-10,5.8-19.5,11.1-28.5,16.1c-9.1,4.9-17.3,9.3-24.7,13s-13,6.4-16.8,8c-9.4,3.9-17.9,6.8-25.6,8.6c-7.7,1.8-14.4,2.8-20.1,2.8
      c-8.1,0-14.2-1.6-18.5-4.8c-4.3-3.2-6.4-7.7-6.4-13.4c0-5.1,1.8-11.1,5.3-17.9c3.5-6.8,9-14.4,16.4-22.7
      c7.4-8.3,16.9-17.1,28.4-26.5c11.5-9.4,25.4-19.1,41.5-29.3c0.8-0.3,1.6-0.8,2.5-1.4c0.8-0.6,1.6-1.1,2.5-1.6
      c-2.8,0.8-6.1,1.7-9.8,2.6c-3.7,1-7.7,1.8-11.9,2.6c-4.2,0.8-8.6,1.5-13.1,2.2c-4.5,0.6-8.9,1-13.2,1c-2.8,0-5.9-0.3-9.4-0.9
      c-3.5-0.6-6.8-1.5-9.9-2.8c-3.1-1.3-5.7-3.2-7.8-5.6c-2.1-2.4-3.1-5.4-3.1-9c0-3.3,1-6.5,3-9.8c2-3.2,4.3-6,6.9-8.3
      c6.6-5.4,14.9-11.6,24.9-18.6c10-7,20.7-13.7,32.1-20c11.4-6.3,23-11.7,35-16.1c11.9-4.4,23.2-6.5,33.7-6.5
      c7.2,0,13.3,1.7,18.2,5.2c4.9,3.5,7.3,9.3,7.3,17.5c0,2.8-0.5,5.1-1.5,6.9c-1,1.8-2.4,2.7-4.2,2.7c-1.6-0.3-2.5-1.8-2.6-4.3
      c-0.1-2.6-0.5-5.3-1.2-8.3c-0.7-3-2.3-5.6-4.7-8c-2.4-2.4-6.6-3.6-12.7-3.6c-4,0-8.9,0.7-14.9,2.1c-6,1.4-13.5,3.8-22.4,7.1
      c-3,1.2-7.2,3-12.6,5.6c-5.4,2.6-11.4,5.6-17.9,9.2c-6.5,3.6-13.2,7.4-20,11.6c-6.8,4.2-13.1,8.5-18.6,12.8
      c-5.6,4.3-10.2,8.5-13.7,12.5c-3.5,4-5.3,7.7-5.3,11c0,3.1,1.5,5.3,4.6,6.6c3,1.2,7.2,1.9,12.5,1.9c4.8,0,10.2-0.5,16.2-1.4
      c6-0.9,12.2-2,18.6-3.3c6.4-1.3,12.8-2.8,19-4.3c6.3-1.6,12-3,17.2-4.4c5.2-1.4,9.6-2.6,13.2-3.5c3.6-0.9,6-1.4,7.2-1.4
      c1.3,0,2.4,0.4,3.2,1.1c0.8,0.7,1.2,1.6,1.2,2.6c0,2.1-1.8,3.9-5.4,5.2c-5.9,2.1-13.2,5.5-21.7,10.1c-8.6,4.6-17.5,10-26.8,16.2
      c-9.3,6.2-18.5,12.9-27.7,20.1c-9.1,7.2-17.4,14.5-24.7,21.7c-7.3,7.2-13.3,14.3-17.8,21.2c-4.5,6.9-6.8,13.1-6.8,18.5
      c0,4.6,1.4,7.7,4.2,9.3c2.8,1.6,6.3,2.3,10.4,2.3c5.9,0,12.9-1.2,20.9-3.5c8-2.3,15.8-5,23.3-8c7.6-3,14.4-6,20.4-8.9
      c6-2.9,10-4.8,12-5.8c5.9-3.1,13.2-7.1,21.9-12c8.6-4.9,17.5-10,26.4-15.3c9-5.3,17.5-10.5,25.7-15.6c8.2-5,14.8-9.3,19.9-12.7
      c4.8-3.3,8.6-5.6,11.4-7c2.8-1.4,4.8-2.1,5.9-2.1c0.7,0.8,0.8,1.5,0.5,2.1C234.3,125.9,233.9,126.6,233.2,127.5z"/>
    <path class="st0" d="M229,130.9c-0.3-1.8-0.9-3.7-1.7-5.8c-0.8-2.1-1.2-3.8-1.2-5.3c0-1,0.3-1.9,1-2.7c0.7-0.8,1.5-1.2,2.5-1.2
      c1.5,0,2.7,0.5,3.7,1.6c1,1.1,1.8,2.3,2.3,3.8c0.6,1.5,1,3,1.2,4.6c0.2,1.6,0.4,2.9,0.4,4.1c0,0.5,0,1,0,1.6c0,0.6,0.2,0.9,0.5,1.1
      h0.5c0.8,0,1.4-0.2,1.7-0.5c0.3-0.3,0.7-0.7,1-1c2.6-2.6,4.7-4.9,6.1-6.7c1.4-1.8,2.8-4.7,4.1-8.6c0.7-2,1.6-3.5,3-4.7
      c1.3-1.2,2.7-1.7,4.2-1.7c1.2,0,2.3,0.4,3.5,1.1c1.2,0.7,1.7,1.8,1.7,3.1c0,1.2-0.4,2.3-1.1,3.6c-0.7,1.2-1.6,2.4-2.6,3.6
      c-1,1.2-2,2.2-3.1,3.1c-1.1,0.9-1.9,1.6-2.3,2.1c-3.3,2.6-6.2,5.6-8.6,8.9c-2.5,3.3-4.9,6.7-7.2,10.1c-0.3,0.3-0.6,0.7-0.9,1.2
      s-0.5,0.9-0.9,1.2c-0.7,0.8-1.3,1.6-2,2.3c-0.7,0.7-1.4,1.1-2.2,1.1c-1.2,0-2-0.4-2.6-1.1c-0.6-0.7-0.9-1.6-0.9-2.6
      c0-2.5,0.1-4.4,0.2-5.8c0.2-1.4,0.2-2.8,0.2-4.3c0-0.8,0-1.7-0.1-2.7C229.3,133.4,229.2,132.2,229,130.9z"/>
    <path class="st0" d="M283.4,146.2c-2.6,0-4.8-1.3-6.5-3.8c-0.6-1.1-1.4-1.7-2.2-1.7c-1,0-1.8,0.5-2.4,1.4c-0.6,0.6-1.4,1.4-2.3,2.3
      c-0.9,0.9-1.9,1.8-2.9,2.7c-1,0.9-2.1,1.6-3,2.3c-1,0.6-1.9,1-2.7,1c-1.2,0-2.4-0.4-3.7-1.2c-1.3-0.8-2.9-2.1-5-4
      c-1.1-1.3-1.7-2.9-1.7-4.7c0-1.8,0.5-3.7,1.6-5.7c1.1-2,2.4-3.8,3.9-5.6c1.6-1.7,3.1-3.4,4.8-4.9c1.6-1.6,3.1-2.9,4.4-4.1
      c3.3-2.8,7-4.2,11.3-4.2c1,0,2.2,0.2,3.6,0.6c1.4,0.4,2.7,1,4.1,1.7c1.3,0.7,2.4,1.6,3.3,2.6c0.9,1,1.4,2.1,1.4,3.2
      c0,0.8-0.3,1.8-1,3c-0.5,0.7-1.3,1.9-2.4,3.8c-1.1,1.9-1.7,3.3-1.7,4.1c0,0.5,0.1,1,0.4,1.6c0.2,0.6,0.7,0.9,1.3,0.9
      c1.1,0,2.6-0.5,4.5-1.5c1.9-1,3.8-2.1,5.8-3.5c2-1.3,3.8-2.7,5.6-4.1c1.7-1.4,3.1-2.5,4.1-3.3c1.8-1.3,3.1-2,4-2
      c1.1,0,1.7,0.7,1.7,2c0,1.6-1.2,3.7-3.5,6.1c-2.3,2.4-5,4.7-8.2,6.9c-3.1,2.2-6.3,4.1-9.4,5.7C287.4,145.4,285,146.2,283.4,146.2z
       M261.8,141.3c0.6-0.5,2-1.5,4.1-2.9c2.1-1.4,4.2-3,6.3-4.6c2.1-1.7,4-3.3,5.7-4.9c1.7-1.6,2.6-2.8,2.6-3.6c0-0.8-0.4-1.3-1.1-1.5
      c-0.7-0.2-1.4-0.3-2.1-0.3c-1.3,0-2.9,0.6-4.9,1.8c-2,1.2-3.9,2.6-5.7,4.4c-1.9,1.8-3.5,3.5-5,5.4c-1.5,1.8-2.2,3.3-2.2,4.5
      s0.5,1.8,1.5,1.8H261.8z"/>
    <path class="st0" d="M418.4,138.6c5.8,0.3,10.4,0.7,14,1.2c3.5,0.5,6.5,0.7,8.8,0.7c2.5,0,4.6-0.4,6.3-1.2c1.7-0.8,3.7-2.3,5.8-4.4
      c2.1-2.1,4.7-5.1,7.8-8.9c3-3.8,7.2-8.6,12.5-14.6c4.6-5.3,9.9-11.4,15.9-18.4c6-7,11.8-13.8,17.4-20.5
      c5.6-6.7,10.5-12.7,14.8-18.2c4.3-5.4,7-9.1,8.2-11.1c2.1-4.3,4.7-7.4,7.5-9.4c2.9-2,5.4-3,7.5-3c2.3,0,3.5,1.2,3.5,3.5
      c0,1.8-0.8,4-2.5,6.7l-4.2,5.2c-1.6,1.3-4.5,4-8.5,8.2c-4,4.1-8.7,9.1-14.1,14.8c-5.4,5.8-11.1,12.1-17.2,18.9
      c-6.1,6.8-12,13.6-17.7,20.4c-5.7,6.8-10.9,13.1-15.7,19.1c-4.8,6-8.5,10.9-11.1,14.7c0.7,0.6,1.6,0.9,3,0.9c1.3,0,2.6-0.2,3.8-0.7
      c1.2-0.5,2.3-1.1,3.3-2c11.4-9.5,24.2-19.3,38.7-29.3c14.4-10,29.3-19.6,44.7-29c15.4-9.4,30.8-18.2,46.3-26.4
      c15.5-8.2,30.1-15.3,43.7-21.2c5.3-2.1,9.2-3.2,11.9-3.2c3.3,0,4.9,1.4,4.9,4.2c0,1.5-0.4,3.2-1.2,5.1c-0.8,1.9-1.8,3.7-3,5.3
      c-1.2,1.6-2.3,3-3.5,4c-1.2,1-2.1,1.3-2.7,1c-1.5-0.7-2.2-1.8-2.2-3.5c0-0.7,0.1-1.3,0.2-2c0.2-0.7,0.2-1.2,0.2-1.7
      c0-0.7-0.4-1-1.2-1c-0.3,0-0.7,0-1.2,0.1c-0.5,0.1-1.1,0.3-1.7,0.6c-6.1,2.1-13.5,5.4-22.2,9.8c-8.7,4.4-18.1,9.3-28,14.9
      c-10,5.6-20.3,11.6-30.9,18s-20.7,12.8-30.4,19c-9.6,6.3-18.5,12.2-26.7,17.8c-8.2,5.6-14.8,10.4-19.9,14.3c-2.8,2.3-4.9,4-6.4,5.1
      c-1.5,1.1-2.2,2-2.2,2.8c0,0.8,1.3,1.4,3.8,1.7c2.6,0.3,6.5,1,11.9,2c5.3,1,12.1,2.6,20.1,4.8c8.1,2.2,17.7,5.6,28.9,10
      c13,5.3,23.7,10.3,32,14.9c8.3,4.7,14.8,8.9,19.5,12.7c4.7,3.8,7.9,7.2,9.6,10.1c1.7,3,2.6,5.4,2.6,7.4c0,1.5-0.4,2.6-1.1,3.3
      c-0.7,0.7-1.6,1.1-2.6,1.1c-1.5,0-2.6-0.7-3.2-2.2c-3-5.6-7.8-10.9-14.6-15.9c-6.8-5-14.4-9.7-23.1-14c-8.6-4.3-17.8-8.2-27.4-11.7
      c-9.6-3.5-18.7-6.5-27.3-9c-8.6-2.5-16.1-4.4-22.7-5.7c-6.6-1.3-11.2-2-13.8-2c-1.2,0-3.4,1.2-6.8,3.7c-3.4,2.5-7.4,5.6-12,9.5
      c-4.6,3.9-9.5,8.2-14.6,12.8c-5.1,4.7-9.9,9.2-14.3,13.5c-4.4,4.3-8.3,8.2-11.5,11.6c-3.2,3.5-5.1,5.8-5.8,7.2
      c-1,1.6-2.6,2.5-4.9,2.5c-3,0-6.6-1.1-11-3.3c-4.4-2.2-8.6-4.9-12.8-8c-4.2-3.1-7.9-6.3-11.2-9.6c-3.3-3.3-5.3-6-5.9-8.1
      c-0.8-2.8-1.2-5.3-1.2-7.6c0-3.4,0.7-6.9,2.1-10.5c1.4-3.5,3.3-6.8,5.7-9.8c2.4-3,5.2-5.7,8.4-8.1c3.2-2.4,6.7-4.2,10.5-5.5
      c6.1-2.1,12.1-3.4,18.2-3.8C406,138.8,412.2,138.6,418.4,138.6z M365.1,173.6c-0.5,1.5-0.7,3-0.7,4.4c0,3.1,1,5.8,3,7.9
      c2,2.1,4.4,4.1,7.4,5.8c3,1.7,6.1,3.4,9.5,5.1c3.4,1.6,6.5,3.5,9.3,5.7c1.3,0,2.9-1,4.8-3c1.9-2,4-4.4,6.3-7.4
      c2.3-3,4.7-6.1,7.3-9.4c2.6-3.3,5.1-6.3,7.8-9.1c0.5-0.5,1.9-2,4.2-4.4c2.3-2.5,4.7-5.2,7.3-8.2c2.6-3,4.8-5.7,6.7-8.2
      c1.9-2.5,2.5-4,1.9-4.4c-0.8-0.8-2.3-1.4-4.4-1.6c-2.1-0.2-4.5-0.4-7.2-0.4c-2,0-3.9,0-5.8,0.1c-1.9,0.1-3.6,0.1-5.1,0.1
      c-5.9,0-11.6,0.1-17,0.4c-5.4,0.2-10.4,1.2-14.9,3c-4.5,1.7-8.5,4.4-12,8C369.8,161.7,367.1,166.9,365.1,173.6z M453.3,150.9
      c-0.5-0.5-1-0.7-1.5-0.7c-1,0-2.4,1-4.2,3l-7.4,9.1c1.8-1.5,3.8-3.1,6.1-4.9c2.2-1.8,4.7-3.8,7.5-5.9L453.3,150.9z"/>
    <path class="st0" d="M562.4,131.8c-3.8,1.2-7,2.7-9.6,4.5c-2.6,1.8-5,3.6-7.2,5.3c-2.1,1.7-4.3,3.2-6.4,4.5
      c-2.1,1.2-4.5,1.9-7.2,1.9c-2.6,0-5.1-0.6-7.5-1.9s-3.6-3.4-3.6-6.6c0-1.8,0.5-3.9,1.5-6.2c1.3-3.3,3-6.3,4.9-9.1
      c2-2.7,3.9-5.5,5.7-8.3c1.5-2.2,3.4-3.2,5.7-3.2c2,0.3,3.2,1.2,3.7,2.5c0.5,1.3,1.2,1.8,2.2,1.5c0.8-0.3,1.6-0.9,2.2-1.9
      c0.7-0.9,1.5-1.5,2.5-1.9c1.6-0.3,2.9-0.5,3.7-0.5c1,0,1.9,0.3,2.8,0.7c0.9,0.5,1.6,1.4,2.1,2.7c0.8,2.2,1.3,4.1,1.4,5.7
      c0.1,1.7,0.9,2.5,2.6,2.5c1.5-0.2,2.8-0.3,4-0.4c1.2-0.1,2.2-0.1,3.2-0.1c2.5,0,3.8,0.7,4,2.2c0.3,1.7-0.4,2.8-2.2,3.4
      C569,129.8,566.2,130.6,562.4,131.8z M548.1,128.8c0-1.7-0.4-2.7-1.1-3.1c-0.7-0.4-1.6-0.7-2.6-0.7c-1-0.1-1.9-0.3-2.7-0.5
      c-0.8-0.3-1.3-1-1.5-2.4c0-0.2-0.2-0.3-0.6-0.3c-0.4,0-0.8,0-1.1,0c-1.8,2.7-3.5,5.1-5.1,7.4c-1.6,2.3-3.1,4.6-4.6,6.9
      c-0.5,1-0.7,1.8-0.7,2.3c0,1,1,1.5,3,1.5c3.8-0.2,7-1.3,9.5-3.3c2.6-2,5-4.3,7.3-6.8L548.1,128.8z"/>
    <path class="st0" d="M604.7,131.8c-3.8,1.2-7,2.7-9.6,4.5c-2.6,1.8-5,3.6-7.2,5.3c-2.1,1.7-4.3,3.2-6.4,4.5
      c-2.1,1.2-4.5,1.9-7.2,1.9c-2.6,0-5.1-0.6-7.5-1.9c-2.4-1.2-3.6-3.4-3.6-6.6c0-1.8,0.5-3.9,1.5-6.2c1.3-3.3,3-6.3,4.9-9.1
      c2-2.7,3.9-5.5,5.7-8.3c1.5-2.2,3.4-3.2,5.7-3.2c2,0.3,3.2,1.2,3.7,2.5c0.5,1.3,1.2,1.8,2.2,1.5c0.8-0.3,1.6-0.9,2.2-1.9
      c0.7-0.9,1.5-1.5,2.5-1.9c1.6-0.3,2.9-0.5,3.7-0.5c1,0,1.9,0.3,2.8,0.7c0.9,0.5,1.6,1.4,2.1,2.7c0.8,2.2,1.3,4.1,1.4,5.7
      c0.1,1.7,0.9,2.5,2.6,2.5c1.5-0.2,2.8-0.3,4-0.4c1.2-0.1,2.2-0.1,3.2-0.1c2.5,0,3.8,0.7,4,2.2c0.3,1.7-0.4,2.8-2.2,3.4
      C611.3,129.8,608.5,130.6,604.7,131.8z M590.3,128.8c0-1.7-0.4-2.7-1.1-3.1s-1.6-0.7-2.6-0.7c-1-0.1-1.9-0.3-2.7-0.5
      c-0.8-0.3-1.3-1-1.5-2.4c0-0.2-0.2-0.3-0.6-0.3c-0.4,0-0.8,0-1.1,0c-1.8,2.7-3.5,5.1-5.1,7.4c-1.6,2.3-3.1,4.6-4.6,6.9
      c-0.5,1-0.7,1.8-0.7,2.3c0,1,1,1.5,3,1.5c3.8-0.2,7-1.3,9.5-3.3c2.6-2,5-4.3,7.3-6.8L590.3,128.8z"/>
    <path class="st0" d="M612.1,118.1c1.8,0.2,3.8,1.6,5.9,4.2c0.5,0.8,1.1,1.2,1.7,1.2c0.5,0,0.9-0.2,1.4-0.5c0.4-0.3,0.8-0.7,1.1-1
      c2.5-1.3,4.9-2.7,7.4-4.1c2.5-1.4,5.1-2.5,7.9-3.3c1.3-0.3,2.4-0.5,3.2-0.5c3.1,0,5.1,1.7,5.9,5.2c0.5,2,1.4,3.3,2.7,4.1
      c1.3,0.7,2.9,1.1,4.7,1.1c1.2,0,2.3-0.1,3.5-0.2c1.2-0.2,2.1-0.4,3-0.7c0.7-0.3,1.6-0.5,2.7-0.5c1.8,0,2.7,0.6,2.7,1.7
      c0,0.8-0.5,1.6-1.4,2.5c-0.9,0.8-2.3,1.4-4.1,1.7c-9.4,1.8-16.8,4.8-22.2,8.9c-1.5,0.8-3,1.6-4.4,2.5c-1.5,0.8-3,1.6-4.7,2.5
      c-1.2,0.7-2.7,1-4.7,1c-1.5,0-2.9-0.5-4.3-1.4c-1.4-0.9-2.1-2.3-2.1-4.2c0-1.2,0.5-1.9,1.4-2.2c0.9-0.3,1.8-0.4,2.6-0.4
      c1,0,2.6-0.4,4.7-1.1c2.1-0.7,4.2-1.7,6.3-2.8c2.1-1.1,3.9-2.4,5.4-3.8c1.6-1.4,2.3-2.6,2.3-3.8c0-0.8-0.3-1.5-0.9-1.9
      c-0.6-0.5-1.2-0.7-1.9-0.7c-0.7,0-1.2,0.2-1.7,0.5c-0.5,0.3-1.1,0.7-1.7,1c-7.6,3.3-14.1,7.7-19.5,13.2
      c-5.4,5.5-10.2,11.7-14.3,18.6c-0.7,1.2-1.5,2.7-2.6,4.6c-1.1,1.9-2.2,3.8-3.5,5.8c-1.2,2-2.4,3.8-3.6,5.6
      c-1.2,1.7-2.2,3.1-3.2,4.1c-0.3,0.3-0.7,0.6-1.1,0.9c-0.4,0.2-0.9,0.4-1.4,0.4c-0.8,0-1.6-0.4-2.2-1.2c-0.7-0.8-1-1.6-1-2.5
      c0-0.5,0.6-1.9,1.7-4.2c1.2-2.3,2.4-4.8,3.8-7.5c1.4-2.7,2.8-5.2,4.1-7.5c1.3-2.3,2.2-3.7,2.7-4.2c2.3-2.3,4.4-4.8,6.2-7.4
      c1.8-2.6,3.4-5.5,4.7-8.6c0.7-1.3,1.2-2.8,1.6-4.6c0.4-1.7,0.8-3.4,1.2-4.9c0.4-1.6,0.9-2.8,1.5-3.8
      C610.3,118.6,611.1,118.1,612.1,118.1z"/>
    <path class="st0" d="M624.4,190.7c0-1.3,0.4-2.8,1.2-4.4c1.6-3.3,4.6-6.9,8.8-10.7c4.2-3.9,8.5-7.5,12.8-11c4.4-3.5,8.3-6.5,11.7-9
      c3.5-2.6,5.3-4.2,5.4-4.8c0.2-0.3-0.1-0.9-0.9-1.6c-0.7-0.7-1.6-1.7-2.6-3c-1-1.2-1.9-2.7-2.7-4.4c-0.8-1.7-1.2-3.8-1.2-6.3
      c0-3.6,0.8-7,2.5-10.3c1.7-3.2,3.7-6.1,6.1-8.8c3.1-3.3,6.3-5.7,9.4-7.3c3.1-1.6,6.9-2.3,11.4-2.3c1.3,0,2.5,0.1,3.6,0.4
      c1.1,0.2,1.7,1.3,1.9,3.1c0,1-0.2,1.6-0.7,1.9s-1.1,0.5-1.7,0.6c-2,1-4.3,2.3-7,3.8c-2.7,1.6-5.3,3.3-7.8,5.3
      c-2.5,2-4.6,4.1-6.3,6.3c-1.7,2.2-2.6,4.6-2.6,7c0,2.3,0.6,4.5,1.9,6.5c1.3,2.1,2.8,3.1,4.6,3.1c1.3,0,2.3-0.3,3.1-1l30.1-18.5
      c2-1.5,3.8-2.2,5.4-2.2c1.5,0,2.2,0.6,2.2,1.7c0,1.5-1.2,3.1-3.5,4.9l-25.9,17.5c-2.6,1.8-4.3,3.4-5.1,4.8
      c-0.7,1.4-1.1,2.8-1.1,4.1c0,1.2,0.1,2.3,0.2,3.5c0.2,1.2,0.2,2.5,0.2,4c0,4.8-1.3,9.4-3.8,14c-2.6,4.5-5.8,8.5-9.9,12
      c-4,3.5-8.4,6.3-13.2,8.4c-4.8,2.1-9.4,3.2-13.8,3.2c-3.3,0-6.3-0.9-8.9-2.6C625.8,196.7,624.4,194.1,624.4,190.7z M668.6,158.6
      c-0.7,0-2.9,1.3-6.7,3.8c-3.8,2.5-7.8,5.6-12.1,9.1c-4.3,3.5-8.2,7.1-11.6,10.8c-3.5,3.7-5.2,6.6-5.2,8.7c0.7,1.3,1.8,2.2,3.5,2.6
      c1.6,0.4,2.9,0.6,3.7,0.6c3.5,0,7-1.3,10.6-3.8c3.6-2.5,6.9-5.5,9.9-9s5.4-7,7.3-10.5c1.9-3.6,2.8-6.5,2.8-8.8
      C670.9,160.2,670.1,159.1,668.6,158.6z"/>
  </g>
  </svg>

  </div>
  <!--<div class="center">
	<div class="down"></div>
    tutorial: https://www.youtube.com/watch?v=m_lYfI2p5hs
-->
</div>
  </div>
        

<a name="linkme"></a>
<div id="box2">
  <div class="texts">
  <h1>Hi, I'm Eva Koops</h1>
  <p> Welcome to my website. And precisely <br>
  right here, will I tell you about myself <br>
    when i think of something.
  </p>
  </div>
  </div>
   

<a name="linkfort"></a>
<div id="box3">    
  <div class="texts">
 <h1>Fort Bourtange</h1>
</div>
</div>


<a name="linkservices"></a>
<div id="box4">   
  <div class="portfolio">
 <h1>SERVICES</h1>
</div>
  <div class="wrapper-fotos">
    
    
    <div class="foto">
           <p> LOGO DESIGN </p>
      <img src="https://www.designscanyon.com/wp-content/uploads/2018/02/PSD-Mockup-Templates-2.jpg" class="image"> 
    </div>
    
    <div class="foto">
     <p> PHOTOGRAPHY </p>

    <img src="https://gloimg.gbtcdn.com/gb/pdm-product-pic/Electronic/2018/01/24/goods-img/1517180248367329040.jpg" class="image">
     </div>
    
    
    <div class="foto">
      <p> WEB DESIGN </p>
      <img src="https://i.pinimg.com/originals/3d/d3/10/3dd310659165c9f31a184453a1c05b39.jpg" class="image">
    </div>
  </div>
</div>


    <a name="linkcontact"></a>
<div id="box5"> 
  <div class="texts">
 <h1>Thank you</h1>
    <p> Hier komt een heel leuk tekstje <br>
    blalalalaalalalalalalalalalallala</p>
</div>
</div>

<!--<img class="travel" src="http://www.tokkoro.com/picsup/2808975-landscape-nature-kauai-hawaii-beach-cliff-sea-mountain-coast-aerial-view___landscape-nature-wallpapers.jpg" alt="travel"/>-->

CSS

              
                /*ALGEMEEN*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Sacramento');

html {
  overflow: auto;
  overflow-x: hidden;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
  background-color: #262626;
}
/*ALGEMEEN*/




/*NAVIGATIE*/
.navbar {
  /*background-color: #1D1F20; GREY COLORCODE*/
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 30px;
  font-size: 20px;
  position: fixed;
  margin: 0;
  width: 100%;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  background-color: transparent;
  transition: background-color 200ms linear;
}

.logonavbar {
  height: 40px;
  width: auto;
  padding-left: 8px;
}

ul {
  list-style-type: none;
  padding: 0;  
  display: inline;
  margin-left: 55%;
}

li {
  display: inline;
  color: white;
  text-decoration: none;
  margin-left: 15px;
  margin-right: 15px;
}

li a {
  text-decoration: none;
  color: white;
  position: relative;
  content: "";
}

li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

li a:hover {
 color: white;
 transition-duration: 0.8s;
}

li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

li a:active {
  underline: white;
}
/*NAVIGATIE*/




/*BOX1*/
 #box1 {
   height: 100vh;
   width: 100%;
   background-image: url("https://s7.postimg.cc/nkd16x257/20170113_164455.jpg");
   background-size: cover;
   display: table;
   background-attachment: fixed;
}

.text {
  width: 50%;
  text-align: center;
  z-index: 0;
  position: absolute;
  margin-top: 300px;
  margin-left: 50%;
  color: white;
  transform: translate( -50%, -50%);
}

path {
  stroke: #FFF;
  fill: #FFF;
  stroke-dasharray: 1420;
  opacity: 1;
  animation: animate 3s cubic-bezier(0,0.23,1,.1);
}
  
  @keyframes animate {
    0% {
      opacity: 0;
      fill: none;
      stroke-dashoffset: 1420;
    }
    
    30% {
      opacity: 10;
      fill: none;
      stroke-dashoffset: 1420;
    }
    
    90% {
      fill: rgba(255, 255, 255, 0);
    }
    
    100% {
      opacity: 10;
      fill: rgba(255, 255, 255, 1);
      stroke-dashoffset: 0;
    }
 }
/*BOX1*/




/*BOX2*/
#box2 {
  height: 100vh;
  width: 100%;
  /*background-image: url("https://images6.alphacoders.com/830/830984.jpg");*/
  background-size: cover;
  display: table;
  background-attachment: fixed;
}

.texts {
  margin-top: 20%;
}
/*BOX2*/




/*BOX3*/
 #box3 {
  height: 100vh;
  width: 100%;
  background-image: url("https://s7.postimg.cc/gwgfkn3az/DJI_0052.jpg");
  background-size: cover;
  display: table;
  background-attachment: fixed;
}
/*BOX3*/




/*BOX4*/
 #box4 {
  height: 100vh;
  width: 100%;
  background-color: #262626;
  background-size: cover;
  display: table;
  background-attachment: fixed;
}

.portfolio {
  margin-top: 5%;
}

.wrapper-fotos {
  width: 100%;
  display: block;
  margin-left: 3%;
}

.foto {
  width: 30%;
  padding: 10px;
  display: inline-block;
  margin: 0 auto;
}

.foto:hover .image {
    opacity: 0.5;
}

.image {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}
/*BOX4*/




/*BOX5*/
 #box5 {
  height: 100vh;
  width: 100%;
  background-image: url("https://media.giphy.com/media/1jaJRdZHNZtT0HMIpX/giphy.gif");
  background-color: #262626;
  background-size: cover;
  display: table;
  background-attachment: fixed;
}
/*BOX5*/




/*ALGEMEEN*/
h1 {
  font-family: 'Open Sans';
  font-size: 50px;
  font-weight: bold;
  z-index: 0;
  margin: 0px;
  text-align: center;
  color: white;
}

p {
  font-family: 'Open Sans';
  z-index: 0;
  margin: 0px;
  text-align: center;
  vertical-align: middle;
  color: white;
}
/*ALGEMEEN*/

JS

              
                $(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll >= 150) {
	    $(".navbar").css("background" , "#1D1F20");
	    $(".navbar").css("box-shadow" , "0 0 50px 0");
	  }

	  else{
		  $(".navbar").css("background" , "transparent"); 
      $(".navbar").css("box-shadow" , "0 0 0 0");
	  }
  })
})



var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

$(document).ready(function() {
   $('.navbar').localScroll({duration:800});
});





// //Select all links with hashes
// $('a[href*="#"]')
//   // Remove links that don't actually link to anything
//   .not('[href="#"]')
//   .not('[href="#0"]')
//   .click(function(event) {
//     // On-page links
//     if (
//       location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
//       && 
//       location.hostname == this.hostname
//     ) {
//       // Figure out element to scroll to
//       var target = $(this.hash);
//       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
//       // Does a scroll target exist?
//       if (target.length) {
//         // Only prevent default if animation is actually gonna happen
//         event.preventDefault();
//         $('html, body').animate({
//           scrollTop: target.offset().top
//         }, 1000, function() {
//           // Callback after animation
//           // Must change focus!
//           var $target = $(target);
//           $target.focus();
//           if ($target.is(":focus")) { // Checking if the target was focused
//             return false;
//           } else {
//             $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
//             $target.focus(); // Set focus again
//           };
//         });
//       }
//     }
//   });

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions