Portfolio project

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

A personal portfolio Webpage project from FreeCodeCamp

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Portfolio project</title>
  <link href='https://fonts.googleapis.com/css?family=Permanent+Marker|Kalam' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<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>

  <section id="main">
  <div>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
          <!--           <a class="navbar-brand" href="#">Juan Garcia</a> -->
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="pull-left">
              <a href="#"></a>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contacts</a></li>
            <li class="social pull-right">
              <a href="#"></a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div>
    <h1 class="text-center about-header">About</h1>
    <p class="text-xs-center container about-p" id="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at nulla tempor, bibendum quam nec, tincidunt est. Praesent vulputate mauris et leo dignissim elementum. Etiam at elementum ipsum. In vulputate vitae mi non dapibus. Pellentesque eget
      felis augue. Phasellus sit amet auctor quam. Quisque scelerisque orci eget mauris pellentesque, sagittis laoreet nulla bibendum. In et orci ligula. Nam rutrum arcu eget maximus porta. In ante neque, rhoncus quis rhoncus ut, pharetra non orci. In
      eu molestie nulla. Vestibulum vulputate massa sem, sit amet convallis libero blandit vel. In hac habitasse platea dictumst. Pellentesque pulvinar fermentum semper. Proin a fermentum elit.</p>
</section>
</div>


<div class="port">
  <section>
    <h1 class="text-center black-heading p-b-3">Portolio</h1>
    <div class="container">
      <div class="card-deck-wrapper">
        <div class="card-deck">
          <div class="card">
            <img class="card-img-top center-block img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">

              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>
            </div>
          </div>
          <div class="card">
            <img class="card-img-top img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">

              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>

            </div>
          </div>
          <div class="card">
            <img class="card-img-top img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">

              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- container-->
    <br>
    <div class="container">
      <div class="card-deck-wrapper">
        <div class="card-deck">
          <div class="card">
            <img class="card-img-top img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">

              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>

            </div>
          </div>
          <div class="card">
            <img class="card-img-top img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">

              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>

            </div>
          </div>
          <div class="card">
            <img class="card-img-top img-fluid" src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg" alt="Card image cap">
            <div class="card-block">
              <p class="card-text text-xs-center">Vestibulum sed posuere neque. Nam eu libero quis mauris scelerisque vulputate id at enim.</p>
            </div>

          </div>
        </div>
      </div>
    </div>
</div>


</section>
</div>
<div id="contact">
  <section>
    <h1 class="black-heading text-center contact-me p-y-3">Contact Me</h1>

    <div class="container center">
      <form>
        <fieldset class="form-group">
          <div>
            <input type="text" class="form-control" placeholder="Name">
          </div>
        </fieldset>
        <fieldset class="form-group">
          <div>
            <input type="text" class="form-control" placeholder="Email address">
          </div>
        </fieldset>
        <fieldset class="form-group">
          <div>
            <input type="text" class="form-control" placeholder="Subject">
          </div>
        </fieldset>

        <fieldset class="form-group">

          <textarea class="form-control" placeholder="Your message" rows="4"></textarea>
        </fieldset>

      </form>
    </div>

    <div class="container links text-center flex">
      <a class="btn btn-primary-outline btn-lg" href="https://www.facebook.com" target="_blank">Facebook</a>
      <a class="btn btn-info-outline btn-lg" href="https://twitter.com/" target="_blank" role="button">Twitter</a>
      <a class="btn btn-danger-outline btn-lg" href="https://plus.google.com/explore" target="_blank" role="button">Google+</a>
      <a class="btn btn-primary-outline btn-lg" href="https://www.linkedin.com/" target="_blank" role="button">LinkedIn</a>
    </div>
  </section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/portfolio-project-mPQWwQ */
body {
  background: black;
}
.navbar {
  background: black;
}
.navbar-nav {
  background: black;
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
li a:link {
  color: white;
}
li a:visited {
  color: lightgrey;
}
li a:hover {
  border-bottom: 3px solid white;
  font-weight: bold;
}
li a:active {
  border-bottom: 3px solid white;
  font-weight: bold;
}
li {
  font-size: 18px;
}
#main {
  background-image: url('http://cdn.pcwallart.com/images/chicago-at-night-black-and-white-wallpaper-1.jpg');
  height: 800px;
  background-size: cover;
  background-attachment: fixed;
}
.about-header {
  padding: 90px 0 20px 0;
}
h1 {
  font-family: 'Permanent Marker', cursive;
}
h1,
p {
  color: white;
}
.about-p {
  padding: 0 15px 80px 15px;
  text-shadow: 2px 2px 2px black;
}
.black-heading {
  color: white;
}
footer {
  background-color: black;
  height: 100px;
}
.social-media {
  list-style: none;
  padding: 15px 0 15px 0;
}
.center-block {
  background-size: cover;
}
img {
  background-size: cover;
}
.card {
  box-shadow: 1px 8px 20px grey;
}
divp,
.card-text {
  color: black;
}
/* BUTTONS */
.btn {
  border: 2px solid;
  margin: 4px;
}
.btn:visited {
  color: white;
}
.btn:hover {
  color: white;
}
.btn:active {
  color: white;
}
.port {
  padding: 50px;
}
.links {
  padding: 20px;
}
#contact {
  background: white;
}
.contact-me {
  color: black;
}
/* FORM */
.center form {
  margin-left: auto;
  margin-right: auto;
}
/* MEDIA QUERIES */
@media (min-width: 1050px) {
  img[src="http://www.medicaltestingsolutions.com/wp-content/uploads/2016/02/placeholder-350x300.jpg"] {
    width: 400px;
  }
}
@media (max-width: 520px) {
  .flex {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 568px) {
  form {
    width: 500px;
  }
}

Comments