Untitled

<!doctype html>
<html>
  <head>
        <title>Costenslayer</title>
  </head>
  <body>
    <div class="box">
      <img class="Costenslayer" src="https://mozillians.org/media/uploads/sorl-cache/e1/dc/e1dc3522437126fba90fa166b6225492.jpg" alt="Costenslayer">
          <h1>Stefan Costen</h1>
          <h2>Acting Mozilla Rep</h2>
      <div id="contact">

        <a title="Email" href="mailto:stefancosten@mozilla.org.uk"><img class="contact" src="https://designmodo.github.io/Flat-UI/img/icons/svg/mail.svg" alt="Email"></a>

        <a title="Twitter" href="https://twitter.com/costenslayer"><img class="contact" src="https://g.twimg.com/Twitter_logo_blue.png" width="50px" alt="Twitter"></a>

                <a title="LinkedIn" href="https://www.linkedin.com/in/stefancosten"><img class="contact" src="http://press.linkedin.com/display-media/209/4" alt="LinkedIN"></a>

              <a title="Mozillians Profile" href="https://mozillians.org/en-US/u/costenslayer/"><img class="decoded" alt="https://mozillians.org/static/mozillians/img/mozillians-logo.png" src="https://mozillians.org/static/mozillians/img/mozillians-logo.png"
alt="Twitter"></a>

</div>

      <div id="text"><p>Hay there <b>Stefan Costen</b> The Vast majority of internet people Know me as Costenslayer, its been a name iv had for many years.</p><p>
   I'm a Webmaker mentor out there to #TeachTheWeb There for helping others teach others.
<p>
On of the projects i work with Is EPIK (epik.org.uk) to help teach young people to code using Minecraft as a TOOL.
<p>
I'm looking to promote all things Open source And An all round Supporter of Mozilla and the Mozilla Mission
<p>
  <p class="footer">

      Background photo: <a href="https://pbs.twimg.com/profile_background_images/378800000120497515/d692dc536b3fc5511599b81840941d58.jpeg">Costenslayer</a></p>
        </div></div>
  </body>

  <style>
    body {
      background:url(https://pbs.twimg.com/profile_background_images/378800000120497515/d692dc536b3fc5511599b81840941d58.jpeg);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: top center;
    }

    iframe {
      text-align:center;
      padding-left:15px;
    }

    div.box {
      background-color:#fff;
      padding:1%;
      min-width:250px;
      max-width:650px;
      margin:3% auto 5%;
      position: relative;
      border: 1px #fff solid;
    }

    h1 {
      font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
      padding-right:10px;
      padding-left:10px;
      margin-bottom:-15px;
      color:#3498db;
      font-size:3em;
      vertical-align:text-top;
    }

    h2 {
      font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
      padding: 5px 10px 10px 5px;
      color:#7f8c8d;
      font-size:1.5em;
      vertical-align:text-top;
    }

    p {
      font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
      padding-right:10px;
      padding-left:10px;
      color:#333;
      font-size:18px;
      vertical-align:text-top;
    }

    p.footer {
      font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
      padding: 10px 0px 5px;
      color:#333;
      font-size:12px;
      text-align:center;
    }

    a {
      color:#333;
    }

    img.Costenslayer {
      max-width:200px;
      float:left;
      margin:10px 20px 10px 10px;
      border:1px #333 solid;
    }

    #left {
      float:left;
      width:33%;
    }

    #right {
      float:right;
      min-width:100px;
      max-width:450px;
    }

    #contact {
      font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size:0.8em
    }

    #text {
      padding-top:10px;
    }


    img.contact {
      width:50px;
      padding-right:2%;
    }


  </style>
</html>