fCC - Portfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>fCC - Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">sntmrtn</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#about">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#social">social</a>
      </li>
    </ul>
  </div>
</nav>
  <main>
    <div id ="about" class="about">
      <h2>About</h2>
      <div class="descrp">
        Portfolio training page for FreeCodeCamp.
      </div>
    </div>
    <div id="portfolio">
      <div class="row">
        <div class="col-12">
          <h2>Portfolio</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-sm-6">
          <img class="imgcont" src="http://placehold.it/400x300">
        </div>
        <div class="col-12 col-sm-6">
          <img class="imgcont" src="http://placehold.it/400x300">
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-sm-6">
          <img class="imgcont" src="http://placehold.it/400x300">
        </div>
        <div class="col-12 col-sm-6">
          <img class="imgcont" src="http://placehold.it/400x300">
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div id="social" class="social">
      <div class="col-12">
        <ul _ngcontent-fes-17="" class="nostyle">
          <li _ngcontent-fes-17="" class="inline"><a _ngcontent-fes-17="" href="#" rel="noopener" target="_blank"><i _ngcontent-fes-17="" class="fa fa-facebook fa-2x"></i></a></li>
          <li _ngcontent-fes-17="" class="inline leftpad"><a _ngcontent-fes-17="" href="#" rel="noopener" target="_blank"><i _ngcontent-fes-17="" class="fa fa-instagram fa-2x"></i></a></li>
          <li _ngcontent-fes-17="" class="inline leftpad"><a _ngcontent-fes-17="" href="#" rel="noopener" target="_blank"><i _ngcontent-fes-17="" class="fa fa-twitter fa-2x"></i></a></li>
        </ul>
      </div>    
    </div>
  </footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sntmrtn/fcc-portfolio-JbvYqP */
body {
  background-color: white;
  font-family: sans-serif;
}

footer {
  border-top: 1px solid #ccc;
  height: 100px;
  width: 100%;
}

main {
  display: block;
  width: 100%;
  height: 100%;
}

.nopadding {
  padding: 0;
}

.container1000 {
  max-width: 1000px;
  margin: 0 auto;
}

.about {
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #ccc;
}

.row {
  margin-bottom: 50px;
  margin-right: 0;
}

.imgcont {
  display: block;
  margin: 0 auto;
}

.descrp {
  max-width: 600px;
  text-align: center;
  margin: 100px auto;
}

h2 {
  text-align: center;
  margin-top: 50px;
}

.nostyle {
  list-style: none;
  text-align: center;
}

.social {
  margin-top: 40px;
}

.inline {
  display: inline-block;
}

.fa {
  margin: 0 10px;
}


Comments