01-00 Web Design, How to Make a Website

In this example below you will see how to do a 01-00 Web Design, How to Make a Website with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ferrous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ferrous ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>01-00 Web Design, How to Make a Website</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/azqror.css'>

  
  
</head>

<body>

  <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://i.icomoon.io/public/temp/f2a2aa00d1/UntitledProject/style-svg.css">
<script src="https://i.icomoon.io/public/temp/f2a2aa00d1/UntitledProject/svgembedder.js"></script>
    <meta charset="utf-8">
    <title>Devin Cooper | Sandwich Maker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Devin Cooper</h1>
        <h2>Sandwich Maker</h2>
      </a>
      <nav>
        <ul>
          <li><a href="https://codepen.io/Ferrous/full/azqROr">Portfolio</a></li>
          <li><a href="https://codepen.io/Ferrous/full/wBmyVX">About</a></li>
          <li><a href="https://codepen.io/Ferrous/full/KwoBKJ" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I am available to make you a sandwich... or even two!. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent sandwich making inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <!-- the svg links inside the li's below are provided free from icomoon.io. because they are provided as a trial they are only active for 24 hours -->
          <li class="phone"><a href="tel:999.555.6425"><svg class="icon icon-phone"><use xlink:href="#icon-phone"></use></svg>&nbsp&nbsp&nbsp&nbsp770.867.5309<br><br></a></li>
          <li class="email"><a href="mailto:devin@example.com"><svg class="icon icon-mail2"><use xlink:href="#icon-mail2"></use></svg>&nbsp&nbsp&nbsp&nbspdevin@example.com<br><br></a></li>
          <li class="twitter"><a href="https://twitter.com/intent/tweet?screen_name=devin_cooper"><svg class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg>&nbsp&nbsp&nbsp&nbsp@devin_cooper<br><br></a></li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/devin_cooper">
          <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" alt="Twitter Logo" height="42" width="42" class="social-icon">
        </a>
        <a href="https://www.facebook.com/devincooper">
          <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-512.png" alt="Facebook Logo" height="42" width="42" class="social-icon">
        </a>
        <p>&copy; 2015 Devin Cooper.</p>
      </footer>
    </div>
  </body>
</html>
  
  

</body>

</html>

Comments