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>
    <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" class="selected">About</a></li>
          <li><a href="https://codepen.io/Ferrous/full/KwoBKJ">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="http://placehold.it/200x200" alt="Photograph of Devin Cooper" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Devin Cooper! This is my Sandwich portfolio where I share all of my favorite sandwiches. When I'm not making sandwiches, I enjoy exercising, playing video games, drinking good coffee, and more.</p>
        <p>If you'd like to follow me in Twitter, my username is <a href="https://twitter.com/devin_cooper">@devin_cooper</a>.</p>
      </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