Portfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://code.getmdl.io/1.3.0/material.light_blue-indigo.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top ">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a class="btn" role='button' href="#AboutMe">About Me</a></li>
      <li><a class="btn" role='button' href="#Portfolio">Portfolio</a></li>
      <li><a class="btn" role='button' href="#Messages">Messages</a></li>
    </ul>
  </nav>
  <div class="jumbotron">
      <h1 class="bg-info" id="AboutMe">About Me:-</h1>
    <div class="row">
      <div class="row">
        <div class="col-md-8">
          <div class="tabs ">
            <ul class="tab-links">
              <li class="active"><a href="#tab1">Personal</a></li>
              <li><a href="#tab2">Acadmic</a></li>
              <li><a href="#tab3">Skills</a></li>
              <li><a href="#tab4">Other Experiances</a></li>
            </ul>

            <div class="tab-content">
              <div id="tab1" class="tab active">
                <p> <address>
  								<strong>Prateek Srivastava</strong><br>
  								<a href="mailto:#">pratik9044536615@gmail.com</a><br>
  								<a href="mailto:#">pratik.srivastava007@gmail.com</a>
  							</address>
                  <address>
  								<strong><u>Mailing Address:-</u></strong><br>
  								#22, Preet Colony<br>
  								Rajpura, IN 140401<br>
  								<br>
  								<abbr title="Mobile">M:</abbr> 7837771731<br>
  								<abbr title="Home">H:</abbr> 7355442527
  							</address>

                </p>
              </div>

              <div id="tab2" class="tab">
                <p>I am from a small town called Kanpur(100 Km from Lucknow). I did my schooling at Chintels School. Its one of the well known school of the town. My subjects of study <abbr title="Physics">Phy</abbr>, <abbr title="Chemistry">Chem</abbr>,
                  <abbr title="Mathematics">Math</abbr> with <abbr title="Computers">Comp</abbr> </p>

                <p>Presently I am persuing my Under-Graduation as Computer Science Engg. at Chitkara Univeristy(UGC Affiliation). Chitkara University is a profound collage in the Northen India.</p>
              </div>

              <div id="tab3" class="tab">
                <p>I have a working knowledge of languages like PHP, C/C++, HTML, JS, JQuery. Presently i am lerning Python for Front End Development. Python is one of the most flexible lang. so it is used in various fields of the advance computers.</p>

                <p>I have even made few of the project for compitions like Innovation Jockey by Accenture, Innovation Mind by <abbr title="Confideration of Indian Institution">CII</abbr>.</p>
              </div>

              <div id="tab4" class="tab">
                <p>I was a part of a small research project so made a lookup table for the farmers. In this the farmers can enter the detains of the soil nutrients and it will tell the counter measures for the respective nutrient condition.</p>


                <p>Presently i am working a online test series for a company. They were looking forward to cut-down the human labour of checking the MCQ series which contain 10 different pillar. Each containing 90 questions. Every employee of the company
                  is under 4 of the 10 pillars at max.</p>

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

        </div>

        <div class="row col-md-4"><img src="https://avatars3.githubusercontent.com/u/19647764?v=3&u=bd994559546455afef5ff2ee16200ee0ee431d40&s=400" class="img-rounded img-responsive" alt="Responsive image">
        </div>
      </div>
    </div>


    <div id="Portfolio">
      <h1 class="bg-info">Porfolio:-</h1>
      <div class="col-xs-6">
        <button onclick="location.href='https://codepen.io/Prateek_1996/debug/rWqLNV'" type="button" class="btn btn-default"> <img src="https://res.cloudinary.com/dwiuszrnn/image/upload/v1482032450/steve_maec9o.png" class=" text-center img-rounded img-responsive" alt="Responsive image"></button>
      </div>
      <div class="col-xs-6" class="text-center">
        <button onclick="location.href='https://s.codepen.io/Prateek_1996/debug/aBewjE'" type="button" class=" text-center btn btn-default"> <img src="https://res.cloudinary.com/dwiuszrnn/image/upload/c_scale,h_568,w_765/movie_f2myny.png"class="img-rounded img-responsive" alt="Responsive image"></button>
      </div>
    </div>

  
  <!--<div ng-app="review-app">
     <h2 id="AboutMe">Messages:-</h2>
 <form name='reviewForm' ng-controller="reivew_data as reviewCtrl" ng-sumbit="reivewCtrl.addReview(product)">
   <blockquote>
     <b>Stars:{{reivewCtrl.review.stars}}</b>
     {{reivewCtrl.review.author}}
     <cite>by:{{reivewCtrl.review.author}}</cite>
     <select ng-model="review.start">
     <option value="1">1 Start</option>
       <option value="2">2 Start</option>
       <option value="3">3 Start</option>
       <option value="4">4 Start</option>
     </select>
     <textarea ng-model="review.body"></textarea>
     <label>by</label><input ng-model="review.author" type="email"/>
     <input type="submit" value="submit"/>
   </blockquote>
    </form>
  
  
  </div>-->
  
  <footer class="text-center">
    <hr>
       <p class="text-center"> <i class="fa fa-code" aria-hidden="true"></i> with <i style="color:red" class="fa fa-heart" aria-hidden="true"></i> and <i style="color:#DAA520" class="fa fa-beer" aria-hidden="true"></i>.</p>
    <div class="row">
      <button onclick="location.href='https://www.facebook.com/PRATEEK.SRIVASTAVA007'" type="button" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--accent mdl-button--icon"><i class="fa fa-facebook-square" aria-hidden="true"></i>
</button>
     
      <button onclick="location.href='https://twitter.com/PRAT33K_Sri'" type="button" class="mdl-button mdl-js-button mdl-button--icon"><i class="fa mdl-button--primary mdl-js-ripple-effect fa-twitter-square" aria-hidden="true"></i></i></button>
      
    <button onclick="location.href='https://in.linkedin.com/in/prateek-srivastava-57197611b'" type="button" class="mdl-js-ripple-effect mdl-button mdl-js-button mdl-button--accent mdl-button--icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></i></button>
    
<button onclick="location.href='https://github.com/Prateek2901'" type="button" class=" mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="fa fa-github" aria-hidden="true"></i></i></button>
    </div>
  </footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://code.getmdl.io/1.3.0/material.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Prateek_1996/portfolio-yVGQoZ */
body {
  padding-top: 70px;
}

background-color: transparent;
div {
  height: 100vh;
}


/*----- Tabs -----*/

.tabs {
  width: 100%;
  display: inline-block;
}


/*----- Tab Links -----*/


/* Clearfix */

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  float: left;
  list-style: none;
}

.tab-links a {
  padding: 9px 15px;
  display: inline-block;
  border-radius: 3px 3px 0px 0px;
  background: #7FB5DA;
  font-size: 16px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: #fff;
  color: #4c4c4c;
}


/*----- Content of Tabs -----*/

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
  font-size: small;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

.AboutMe,
.Messages,
.Portfolio {
  margen: 10px;
}

footer{
  margin-top: 10cm;
}

/*Downloaded from https://www.codeseek.co/Prateek_1996/portfolio-yVGQoZ */
jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});

Comments