FreeCodeCamp: Portfolio

In this example below you will see how to do a FreeCodeCamp: Portfolio with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp: Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<head>
  <div class="head">
    <div class="row">
      <div class="col-md-8 col-xs-4">
        <a href="https://codepen.io/antiaccess/"><img src="http://qlip.in/sites/default/files/qlip.png" style="width: 40px; margin-left: 5%;"></a>
      </div>
      <div class="col-md-4 col-xs-8" id="navbar">
        <a href="#about"><button class="btn btn-default" id="target4">About</button></a>
        <a href="#portfolio"><button class="btn btn-default" id="target5">Portfolio</button></a>
        <a href="#contact"><button class="btn btn-default" id="target6">Contact</button></a>
      </div>
    </div>
  </div>
</head>
<body>
  <div class="container">
    <div class="row" style="background-color: grey; text-align: right;">
      <br>
      <div class="col-md-8" id="about" style="color: white">
        <h4><br><br>The name is Justin and I'm a UX/UI design-developer, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</h4>
        <h2>---------------------------/------</h2>
        <h3>Web Developer - Graphic Artist - UX Designer</h3>
      </div>
      <div class="col-md-4" style="text-align: left;">
        <img src="http://qlip.in/avatar.png" id="avatar">
      </div>
    </div>
    <div class="row" id="portfolio" style="background-color: lightgrey; text-align: center;">
      <div>
        <h2>PORTFOLIO</h2>
        <p>-------------------------/------</p>
      </div>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/YMCA-Realtor-Donation-3.jpg" class="portfolio" style="text-align: right">
      </div>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/webcaballero.jpg" class="portfolio" style="text-align: left">
      </div><br><br>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/webmarqas.jpg" class="portfolio" style="text-align: right">
      </div>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/webbrandaxis.jpg" class="portfolio" style="text-align: left">
      </div><br>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/panacea1.jpg" class="portfolio" style="text-align: right">
      </div>
      <div class="col-md-6">
        <img src="http://qlip.in/sites/default/files/webgatomalo.jpg" class="portfolio" style="text-align: left">
      </div>
    </div>
    <div class="row" id="contact" style="background-color: lightgrey; text-align: center;">
      <div>
        <h2>CONTACT ME</h2>
        <p>---------------------------/------</p>
      </div>
      <div class="col-md-6">
        <form action="/submit-contact-info">
          <input type="text" class="form-control" placeholder="<Name>" required>
          <input type="text" class="form-control" placeholder="<Email Address>" required>
          <input type="text" class="form-control" placeholder="<Phone Number>" required>
          <input type="text" class="form-control" placeholder="<Message>" required>
          <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
        </form>
      </div>
      <div class="col-md-6">
        <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here
          in stunning Toronto... just feel free to drop me a line anytime. <br><br>I promise to reply A.S.A.P.<br><br>No spam or I'll neck you (jks this form doesn't even go anywhere!)</p>
      </div>
    </div>
  </div>
</body>
<footer>
  <div class="foot">
    <div class="row">
      <div class="col-md-6" style="text-align: center">
        <h3>ABOUT THIS PAGE</h3><br>
        <p>Made with love and coffee by <em>Anthony</em>.</p>
      </div>
      <div class="col-md-6" style="text-align: center">
        <h3>AROUND THE WEB</h3><br>
        <p>[] [] [] []</p>
      </div>
    </div>
  </div>
  <div class="head">
    <div class="row" style="text-align: center">
      <h4>qlip © 2016. All Rights Reversed (this is a coding project, not a serious website)</h4>
    </div>
  </div>
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/antiaccess/freecodecamp-portfolio-zBrWPd */
body {
  line-height: 140%;
  font-family: Lato;
}

h2, h1, h3 {
  font-family: Oswald;
}

#avatar {
  border-radius: 100%;
  width: 100%;
  padding: 20px;
}

.portfolio {
  width: 90%;
  margin-bottom: 2rem;
}

.head {
  background-color: purple;
  padding: 2%;
}

.foot {
  background-color: orange;
  padding: 2%;
}

#navbar {
  text-align: right;
}

Comments