Personal Portfolio Webpage 24-10-2017

In this example below you will see how to do a Personal Portfolio Webpage 24-10-2017 with some HTML / CSS and Javascript

done with bootstrap, some custom css, font awesome, google font looking at stackoverflow, adding jquery

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio Webpage 24-10-2017</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

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

  
</head>

<body>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />


<div class="fixed-top mb-4">
  <nav class="navbar navbar-expand-md navbar-dark bg-primary p-1 pl-2">
    <a class="navbar-brand" href="#home">8020code</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <div class="nav-item nav-link">
          <a class="btn btn-sm btn-outline-light" role="button" href="#home">Home
                            <span class="sr-only">(current)</span>
                        </a>
        </div>

        <div class="nav-item nav-link">
          <a class="btn btn-sm  btn-outline-light" role="button" href="#about">About</a>
        </div>

        <div class="nav-item nav-link">
          <a class="btn btn-sm btn-outline-light" role="button" href="#content2">Portfolio</a>
        </div>

        <div class="nav-item nav-link">
          <a href="#contact" class="btn btn-sm btn-outline-light" role="button">Contact</a>
        </div>


        <div class="nav-item">
          <a target="_blank" class="nav-link" href="https://goo.gl/vaZ2JS" role="button" aria-label="GitHub">
            <i class="fa fa-github align-bottom" aria-hidden="true"></i>
          </a>
        </div>

        <div class="nav-item">
          <a target="_blank" class="nav-link" href="https://goo.gl/j6Djzf">
            <i class="fa fa-twitter  align-bottom" aria-hidden="true"></i>
          </a>
        </div>
        <div class="nav-item">
          <a target="_blank" class="nav-link" href="https://goo.gl/dYR1BD">
            <i class="fa fa-codepen  align-bottom" aria-hidden="true"></i>
          </a>
        </div>
        <div class="nav-item">
          <a target="_blank" class="nav-link" href="https://goo.gl/ArzjeE">
            <i class="fa fa-youtube  align-bottom" aria-hidden="true"></i>
          </a>
        </div>
        <div class="nav-item">
          <a target="_blank" class="nav-link" href="https://goo.gl/8SdvkS">
            <i class="fa fa-free-code-camp align-bottom" aria-hidden="true"></i>
          </a>
        </div>

      </div>
    </div>
  </nav>
</div>
<div id="home" class="container">
  <div class="card">
    <div class="container">
      <header id="header" class="display-1 text-center mt-3">8020code</header>
      <div id="content">
        <hr>
        <h1 id="about" class="">About</h1>
        <p class="text-justify">Hi and welcome to 8020code.
          <em>8020code</em> seemed like a good short name to use online.</p>
        <p class="text-justify">I myself am a beginner front end developer, looking forward to becoming a full stack developer. I have some experience with Java and currently diving deep into the front end development world. My previous experience is in finance and accounting
          mostly.
        </p>
      </div>
      <hr>
      <div id="content2">

      </div>
    </div>


    <div id="portfolio" class="container">
      <h1 class="mt-3">Portfolio</h1>
      <p class="text-justify">At this point there is not much to show for, but here are some nice looking pictures for now.</p>
      <div class="row">

        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1465237392552-2f11d0f540d4?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=1922afd60b610072de6ca34903c38a89" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #1.</p>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1477092881686-6e1eec0878d5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=25749e6512bab734bbdcb4a5c620d9f1" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #2.</p>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1489376646075-cd00ac377106?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=90df60d4f9cd9e8d2f5c82589b666536" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #3.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1465237392552-2f11d0f540d4?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=1922afd60b610072de6ca34903c38a89" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #4.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1477092881686-6e1eec0878d5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=25749e6512bab734bbdcb4a5c620d9f1" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #5.</p>
            </div>
          </div>

        </div>
        <div class="col">
          <div class="card border-primary mb-3" style="width: 20rem;">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1489376646075-cd00ac377106?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=90df60d4f9cd9e8d2f5c82589b666536" alt="Card image cap">
            <div class="card-body">
              <p class="card-text text-primary">Project #6.</p>
            </div>
          </div>
        </div>
      </div>
      <hr>
    </div>

    <!--Portfolio end-->

    <div id="contact" class="container">
      <h1>Contact</h1>
      <div class="alert alert-danger" role="alert">
        <p>form is disabled for now</p>
      </div>
    </div>

    <div id="cform" class="container">
      <form>
        <div class="form-group">
          <label class="col-form-label" for="cfname">Your Name</label>
          <div class="form-row">
            <div class="col-xs">
              <div class="input-group">
                <input class="form-control" type="text" placeholder="Your name" id="cfname" disabled/>
              </div>
            </div>
          </div>
          <label class="col-form-label" for="cfmessage">Message</label>
          <div class="form-row">
            <div class="col-sm">
              <div class="input-group ">
                <textarea placeholder="Message" class="form-control" id="cfmessage" disabled></textarea>
              </div>
            </div>
          </div>

          <label class="col-form-label" for="cfemail">Email</label>
          <div class="form-row">
            <div class="col-xs">
              <div class="input-group">
                <div class="input-group-addon">@</div>
                <input class="form-control" type="email" placeholder="Email" id="cfemail" disabled>
              </div>
            </div>
            <div class="col-auto">
              <button class="btn btn-primary" type="submit" disabled>Submit</button>
            </div>
          </div>
        </div>
      </form>
      <hr>
    </div>
    <!--footer-->
    <!--<div class="container">
                <h1>Social media</h1>
                <div class="row text-center">
                    <div class="col">
                        <a class="btn btn-primary rounded-circle border border-white" href="https://goo.gl/vaZ2JS" role="button">
                            <i class="fa fa-github" aria-hidden="true"></i>
                        </a>
                    </div>

                    <div class="col">
                        <a class="btn btn-primary rounded-circle border border-white" href="https://goo.gl/j6Djzf">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </a>
                    </div>
                    <div class="col">
                        <a class="btn btn-primary rounded-circle border border-white" href="https://goo.gl/dYR1BD">
                            <i class="fa fa-codepen" aria-hidden="true"></i>
                        </a>
                    </div>
                    <div class="col">
                        <a class="btn btn-primary rounded-circle border border-white" href="https://goo.gl/ArzjeE">
                            <i class="fa fa-youtube" aria-hidden="true"></i>
                        </a>
                    </div>
                    <div class="col">
                        <a class="btn btn-primary rounded-circle border border-white" style="padding: 0.4rem 0.55rem;" href="https://goo.gl/8SdvkS">
                            <i class="fa fa-free-code-camp" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
                <hr>
            </div>-->
  </div>
</div>
<nav id="bottom" class="navbar navbar-dark bg-white border border-primary">
  <div class="row text-right text-primary">
    <div class="col">
      <a class="nav-link" href="#home">Top</a>
    </div>
    <div class="navbar-nav flex-row">
      <div class="col">
        <a target="_blank" class="btn btn-primary rounded-circle border border-dark" href="https://goo.gl/vaZ2JS" role="button">
          <i class="fa fa-github" aria-hidden="true"></i>
        </a>
      </div>

      <div class="col">
        <a target="_blank" class="btn btn-primary rounded-circle border border-dark" href="https://goo.gl/j6Djzf">
          <i class="fa fa-twitter" aria-hidden="true"></i>
        </a>
      </div>
      <div class="col">
        <a target="_blank" class="btn btn-primary rounded-circle border border-dark" href="https://goo.gl/dYR1BD">
          <i class="fa fa-codepen" aria-hidden="true"></i>
        </a>
      </div>
      <div class="col">
        <a target="_blank" class="btn btn-primary rounded-circle border border-dark" href="https://goo.gl/ArzjeE">
          <i class="fa fa-youtube" aria-hidden="true"></i>
        </a>
      </div>
      <div class="col">
        <a target="_blank" class="btn btn-primary rounded-circle border border-dark" style="padding: 0.4rem 0.55rem;" href="https://goo.gl/8SdvkS">
          <i class="fa fa-free-code-camp" aria-hidden="true"></i>
        </a>
      </div>
    </div>

  </div>
</nav>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/heroone/personal-portfolio-webpage-24-10-2017-OxqOPj */
@import url('https://fonts.googleapis.com/css?family=Raleway:700');
.container, .fixed-top, .navbar {
  font-family: 'Raleway', sans-serif;
}

*[id]:before {
  display: block;
  content: " ";
  margin-top: -75px;
  height: 75px;
  visibility: hidden;
}

#home {
  margin-top: 50px;
}

#bottom {
  margin-top: 80px;
}

body {
  background: url("http://img03.deviantart.net/94a6/i/2006/106/6/a/blue_matrix_by_bboisupafly.jpg");
  
}

.btn-circle {
  border-radius: 50%;
}


/*Downloaded from https://www.codeseek.co/heroone/personal-portfolio-webpage-24-10-2017-OxqOPj */
        $(document).on('click', '.navbar-collapse.collapse', function (e) {
            if ($(e.target).is('a')) {
                $(this).collapse('hide');
            }
        });

Comments