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 ashoksuthar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ashoksuthar ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

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

  
</head>

<body>

   <div id="main-body">
   <nav id="navigation-bar" class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
            <!--Logo-->
     <div class="navbar-header">
       <a href="#" class="navbar-brand"><strong style="font-size: 24px;">Ashok Suthar</strong></a>
     </div>
     <!--Logo-->
     <div>
       <ul class="nav navbar-nav navbar-right navbar-fixed">
         <li class="active"><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </div>
   </div>
</nav>

<div class="container">
  <div id="about" class="row">
    <h2 >About</h2>
    <hr>
    <div class="col-xs-8 col-md-9">
      <p id="info-text" class="text-justify">
        I am a student currently pursuing my B.tech degree in Sapthagiri college of Engineering and currently in the 4th year. Have knowledge of C/C++, Java, Python and HTML/CSS/javaScript with Bootstrap.This is a project i am working as part of my learning process to hone my skills.
      </p>
      <blockquote class="blockquote-reverse">
        <p>
          <em>"Ashok Suthar"</em>
        </p>
      </blockquote>
      <hr>
    </div>
    <div class="col-xs-4 col-md-3 ">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/732869/profile/profile-512_1.jpg" class="img-circle" width="200px" height="269px">
     </div>
  </div>
  <div id="portfolio" class="row">
     <h2>Portfolio</h2>
     <hr>
     <div class="col-xs-4 col-md-4">
        <img class="thumbnail" src="#" width="100%" height="240px">
     </div>
     <div class="col-xs-4 col-md-4">
        <img class="thumbnail" src="#" width="100%" height="240px">
     </div>
     <div class="col-xs-4 col-md-4">
        <img class="thumbnail" src="#" width="100%" height="240px">
     </div>
  </div>
  <div id="contact" class="row">
    <h2>Contact Me</h2>
    <hr>
    <div class="col-xs-8 col-md-8">
        <form style="padding: 20px;"role="form" >
          <div class="form-group">
            <label style="white-space: pre" for="name">Name:  </label>
            <input id="name" type="text" placeholder="Name">
            <label style="white-space: pre" for="email">Email:     </label>
            <input id="email" type="email" placeholder="Email Address">
          </div>
          <div class="form-group">
             <label for="number">Phone: </label>
             <input id="number" type="number" placeholder="Phone No.">
             <label for="message">Message: </label>
             <textarea id="message" placeholder="Message"></textarea>
          </div>
          <div>
            <button class="btn btn-primary pull-right" onclick="window.alert('Submitted')" >Submit</button>
          </div>
      </form>
    </div>
    <div class="col-xs-4 col-md-4">
      <p >
        You can get in touch with me by filling up the details in this form and sending me your queries,suggestions or complaints. I would make sure to reply as soon as possible.
      </p>
      <br>
      <br>
      <p>
         No spam and keep it clean, please. :)
      </p>
    </div>
  </div>
</div>
</div>
<div id="footer" class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-6">
      <h3> Created By Ashok Suthar<br> with <i class="fa fa-fw fa-coffee"></i> and <i class="fa fa-fw fa-music"></i></h3>
    </div>
    <div class="col-xs-6 col-md-6">
      <h3>Around the Web</h3>
      <ul class="text-center" id="list">
        <li><a href="#" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
        <li><a href="https://github.com/AshokSuthar" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
        <li><a href="https://twitter.com/AshokSuthar93" class="button social"><i class="fa fa-fw fa-twitter"></i></a></li>
        <li><a href="#" title="My Flickr" class="button social"><i class="fa fa-fw fa-flickr"></i></a></li>
      </ul>
    </div>
      <div class="text-center">Ashok's Portfolio © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ashoksuthar/portfolio-BzVVJy */
body {
  background:#666;
}

#main-body {
            margin: 40px;
             padding:40px;
             background:#666;
             font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
             font-size:20px;
         }
        h2,h3{
            font-weight:bold;
            text-align:center;
            text-transform:uppercase;
        }
        hr {
            border-color: #222;
        }
        a{
            bacground:#FFF !important;
        }

        #about {
            background-color: #888;
            margin:0px 0px 20px 0px;
        }
        
        #portfolio {
            background-color: rgb(250,250,250);
            padding-bottom:30px;
            margin:0px 0px 20px 0px;
        }
#contact {
            background-color: rgb(250,250,250);
            padding-bottom:30px;
            margin:0px 0px 20px 0px;
        }

#info-text {
            font-size: 20px;
            padding: 40px;
        }
#footer {
  margin: 0px;
  padding:10px;
  background:#111;
  color:white;
  font-size:20px;
}

#list {
  list-style-type:none;
  margin: 0;
  padding: 0;
}

li {
  display:inline;
}

Comments