index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tolumi Adamson Portfolio Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800' rel='stylesheet' type='text/css'>
  </head>

  <body>

    <nav id="top">
      <div class="container clearfix">
        <div class="logo">Tolumi Adamson</div>
        <ul class="navi clearfix">
          <li><a href="#top">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <button class="mobile-nav-btn">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </nav>

    <div id="profile">
      <div class="container">
        <div class="profile-section clearfix">
          <div class="profile-pic floattr">
            <img src="images/halfmeeye.jpg" alt="my eyes, well half of it">
          </div>

          <div class="profile-copy floattl">
            <p>
              Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!
            </p>
          </div>
        </div>
      </div>
    </div>

    <main>
      <div id="portfolio" class="container clearfix">

        <h2>Portfolio</h2>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-1.png" alt="marketing page image">
          </picture>
          <h3>Marketing Page</h3>
          <p>This project shows the front page of a marketing website meant for a specific bsiness I am interested in</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-2.png" alt="search page image">
          </picture>
          <h3>Search Page</h3>
          <p>This project searches through a specific database to find information that the user is trying to look up.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-3.png" alt="travel app image">
          </picture>
          <h3>Travel App</h3>
          <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-6.png" alt="maps of favourite sports">
          </picture>
          <h3>Maps of Favorite Sport</h3>
          <p>This project uses mapping apis to plot points for my favorite sports in the city for a do-it-yourself walking tour.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-5.png" alt="photo gallery">
          </picture>
          <h3>Photo Gallery</h3>
          <p>This project show pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-4.png" alt="calculator image">
          </picture>
          <h3>Calculator</h3>
          <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-10.png" alt="ajax loading screen">
          </picture>
          <h3>Ajax Loading</h3>
          <p>We are using ajax loading to ensure that the entire site loads only when all the elements on the page have fully loaded</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-14.png" alt="post it icons on site">
          </picture>
          <h3>Post It</h3>
          <p>With this project you can use custom css only post-its to leave messages for yourself on the website.</p>
        </div>

        <div class="portfolio-cards floattl">
          <picture>
            <img src="images/portfolio-15.png" alt="blank space">
          </picture>
          <h3>Blank Space</h3>
          <p>Sometimes less is more. This is a project which utilises blank space to create a sense of airyness</p>
        </div>

      </div>

      <div id="skills" class="container">
        <h2>Skills</h2>

        <div class="skills-card">
          <div class="font-awe">
            <i class="fa fa-html5 fa-2x" aria-hidden="true"></i>
          </div>
          <p>HTML5</p>
        </div>

        <div class="skills-card">
          <div class="font-awe">
            <i class="fa fa-css3 fa-2x" aria-hidden="true"></i>
          </div>
          <p>CSS3</p>
        </div>

        <div class="skills-card">
          <div class="font-awe">
            <i class="fa fa-database fa-2x" aria-hidden="true"></i>
          </div>
          <p>SQL</p>
        </div>

        <div class="skills-card">
          <div class="font-awe">
            <i class="fa fa-code fa-2x" aria-hidden="true"></i>
          </div>
          <p>JS</p>
        </div>
      </div>
    </main>

    <aside id="contact">

      <div class="container">
        <h2>Contact</h2>
        <p>Of you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
        <div class="contact-info">Phone <span>+1 (111)555-1234</span></div>
        <div class="contact-info">Email <span>email@yoursite.com</span></div>
      </div>

    </aside>

    <footer>

      <div class="container clearfix">
        <span class="footer-logo floatl">Tolumi Adamson</span>
        <ul class="navi floatr">
          <li><a href="#top">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <span class="btt floatr"><a href="#top">Back to Top</a></span>
      </div>

    </footer>

    <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

  </body>
</html>