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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

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

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed|Poiret+One|Kalam:400,300|Josefin+Slab:400|Josefin+Sans:400italic|Lato' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="container-fluid">
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">Abhishek Baliyan</a>
				<button type="button" class="navbar-toggle"
						  data-toggle="collapse"
						  data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			
			
			<div class="navbar-collapse collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-right">
					<li ><a href="#home"> Home </a></li>
					<li ><a href="#work"> Work </a></li>
					<li ><a href="#about"> About </a></li>
					<li ><a href="#contact"> Contact </a></li>
				</ul>
			</div><!-- .navbar-collapse -->
		</div><!-- .container -->
	</nav><!-- .navbar -->

	<div id="home" class="text-center">
		<div class="container">
			<h2>Abhishek Baliyan</h2>
			<h3>A web Developer from Delhi, India</h3>
		</div>
	</div>
	
	<div id="about" class="text-center">
		<div class="container-fluid">
			<h1>About Me</h1>
			<div class="row">
				 <div class="col-md-4"><img class="image img-responsive center-block img-circle" src="https://scontent.fdel1-1.fna.fbcdn.net/v/t1.0-9/13344687_1147555321962313_2298113931926465810_n.jpg?oh=a1e614567def304f9bc6b12bee7b887f&oe=57FE7BE3">
        </div>
			<div class="col-md-8">
				<p>I'm a beginner as a web developer and learn from FCC and books.Now i've less skills but i'm sure that i'll cover good knowledge of HTML, CSS, JavaScript and etc.	within two to three months. And i'll make sure that i'll complete projects as many as possible.<br /> I love coding but when i stuck in code it also cause headache sometimes, Actually this is the main part of coding i love most.<br /> Feel free to look at my work and don't hesitate to contact me after 30-45 days because on that time i'll be ready to solve your all problems related to web development.</p>
				</div>
			</div>
		</div>
	</div>
	
	<div id="work" class="text-center">
    <h2>Portfolio</h2>
    <div class="row imgp">
      <div class="col-md-4 ">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
      </div>
      <div class="col-md-4">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
      </div>
      <div class="col-md-4">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
        <img class="img-responsive thumbnail" src="http://www.mjdwebdesign.com/img/coming-soon.gif">
      </div>


    </div>
  </div>
	
	
	<div id="contact" class="text-center">
    <div class="container-fluid">
      <h1>Connect with Me</h1>
      <form>
        <div class="row">
          <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12"><input type="text" placeholder="Enter Name" required>
          </div>
          <div class="col-md-6 col-lg-6 col-xs-12 col-sm-6"><input type="text" placeholder="Enter Email Id" required></div>
        </div>
        <div class="row">
          <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12"><input type="text" placeholder="Enter Subject" required></div>
        </div>


        <div class="row">
          <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 "><textarea type="text" placeholder="Enter Message" required></textarea></div>
        </div>
        <button class="btn send-btn" type="submit">Submit</button>

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

  <footer>
    <div class="container-fluid">
      <div class="row">
        <div class="location text-center col-md-4 col-lg-4  ">
          <h3>Location</h3>
          <p>shahdara Delhi, India</p>
        </div>


        <div class="social-links text-center col-md-4 col-lg-4">
          <ul class="social-icon-list list-unstyled list-inline">
            
            <li>
              <a href="https://www.facebook.com/abhishek.baliyan2" target="_blank">
                <i class="fa fa-fw fa-facebook fa-lg fa"></i>
              </a>
            </li>
            <li>
              <a href="https://in.linkedin.com/in/abhishek-baliyan-a9859a122" target="-blank">
                <i class="fa fa-fw fa-linkedin fa-lg fa"></i></a>
            </li>
            <li>
              <a href="https://github.com/abhishekdevinfo" target="-blank">
                <i class="fa fa-fw fa-github fa-lg fa">   
        </i></a>
            </li>

          </ul>
        </div>

        <div class="contact-details col-md-4  col-lg-4">

          <ul class="icon-list list-unstyled">

            <li>
              <h3>Get in touch</h3>
            </li>
            <li>
              <i class="fa fa-phone"></i> +919650876177
            </li>

            <li>
              <i class="fa fa-envelope-o"></i>abhi.info.dev@gmail.com
            </li>
          </ul>
        </div>

      </div>

  </footer>
  <div class="end text-center"> &copy; 2016 Abhishek Baliyan</div>
  </div>
</div>
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/abhishekdevinfo/portfolio-kXGWYO */
body {
  margin-left: -15px;
  margin-right: -15px;
  overflow-x: hidden;
}
.navbar {
  background-color: rgba(30, 39, 50, 0.9);
  box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.2);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
}
#home {
  padding: 250px 0 200px 0;
  margin-top: auto;
  background: url("http://www.pixelstalk.net/wp-content/uploads/2016/04/Amazing-Star-Wallpaper-HD.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  letter-spacing: 3px;
  overflow-x: hidden;
}
#home h1 {
  padding-top: 20px;
  padding-bottom: 10px;
  font-family: 'Josefin Slab', serif;
  font-size: 75px;
  letter-spacing: 5px;
}
#home p {
  padding-bottom: 30px;
  font-family: 'Poiret One', cursive;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 4px;
  line-height: 40px;
  font-size: 30px;
}
.image {
  width: 230px;
  border: 1px solid black;
}
#about {
  background: url("https://wallpaperscraft.com/image/macbook_apple_laptop_camera_cup_99153_1920x1080.jpg") center center;
  padding-top: 120px;
  padding-bottom: 100px;
  background-size: cover;
  overflow-x: hidden;
}

#about h1 {
  text-shadow: 0 0 5px black;
  font-family: 'Josefin Slab', serif;
  font-size: 55px;
  font-weight: 550;
  padding-bottom: 15px;
}

#about p {
  font-family: 'Kalam', cursive;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 37px;
  word-spacing: 5px;
  padding-bottom: 30px;
  padding-top: 20px;
}

#work {
  padding-top:20px;
  padding-bottom:100px;
  margin-left: -15px;
  margin-right: -15px;
  background: url("https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xaf1/t31.0-8/13227598_664898716981412_6561342402967583417_o.jpg") center center;
  backgrund-size: cover;
  color: white;
}
#work h2
{
  padding-top:50px;
  padding-bottom:30px;
  font-family: 'Josefin Slab', serif;
  font-size: 60px;
  font-weight: 800;
  color: #00004d;
  text-shadow: 0 0 5px white;
  letter-spacing:3px;
}
.thumbnail
{
  background-color:black;;
}

#contact {
  padding-top: 70px;
  padding-bottom: 100px;
  background: url("https://scontent-sit4-1.xx.fbcdn.net/t31.0-8/13173362_664898883648062_5927696911550058597_o.jpg") center center;
  background-size: cover;
}

#contact h1 {
  font-family: 'Josefin Slab', serif;
  font-size: 55px;
  font-weight: 570;
  padding-bottom: 25px;
  color: rgb(70, 10, 0);
  text-shadow: 0 0 5px white;
}
#contact form {
  font-family: Kalam;
  margin-top: 5px;
  color: rgba(29, 37, 41);
  font-size: 22px;
  letter-spacing: 10px;
  line-heght: 50px;
}

#contact input {
  margin-top: 5px;
}

#contact textarea {
  margin-top: 5px;
  min-height: 200px;
}

.send-btn {
  color: rgba(70, 10, 0, 0.9);
  border-radius: 8px;
  font-size: 24px;
  border: 2px solid #0d0d0d;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

.send-btn:hover {
  background-color: rgba(70, 10, 0, 0.7);
  color: white;
}


/*******footer**********/

footer {
  color: #888;
  background-color: #1c1c1c;
  border-top: 2px solid #424e57;
  clear: both;
  font-size: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  padding-top: 50px;
  padding-bottom: 20px;
}

.social-links {
  padding-top: 20px;
}

footer h3 {
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

footer ul.social-icon-list > li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border: 1px solid #c9c9c9;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

footer ul.social-icon-list > li a:hover {
  background-color: white;
}

footer ul.social-icon-list > li {
  padding-bottom: 20px;
}

.fa {
  color: #3B5998;
}

footer ul.icon-list > li {
  padding-bottom: 10px;
  text-align: left;
}

footer ul.icon-list > li > i {
  padding-right: 10px;
}

.contact-details {
  padding-top: 5px;
}

.end {
  margin-left: -15px;
  margin-right: -15px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  background-color: #161616;
  padding: 15px 0px;
  border-top: 1px solid rgba(114, 114, 114, 0.25);
}


Comments