Portfolio Website

by Venkatesh Dematti

HTML

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Single Page Portfolio | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">

     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav navbar-left">
         <li><a href="#home" class="scroll"><span class="fa fa-home"></span> Home</a></li>
         <li><a href="#about" class="scroll"><span class="fa fa-user"></span> About </a></li> 
         <li><a href="#experience" class="scroll"><span class="fa fa-space-shuttle"></span> Experience</a></li>
         <li><a href="#portfolio" class="scroll"><span class="fa fa-picture-o"></span> Portfolio</a></li>
         <li><a href="#contact" class="scroll"><span class="fa fa-envelope"></span> Contact</a></li>
       </ul>
     </div>
  </div>
</nav>
  
<!-- Section 1 -->
  <section class="banner text-center" id="home">
    <div id="overlay">
      <div class="title">
        <h1><strong> WEB DEV TRICK  SHAAN </strong></h1>
        <h3 id="qualif"><strong> Graphic Web Desginer, Web Developer, SEO </strong></h3>
      </div>
      <div class="row text-center">
        <div class="border contact"><a href="#"><h2 style="color: white;" id="borderText"><strong> CONTACT </strong></a></h2></div>
        <div class="border resume"><h2 style="color: white;" id="borderText"><a href="#"><strong>...

CSS

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html, body {
    background-color: white;
    color:white;
    font-family: 'Staatliches', cursive;
    letter-spacing: 3px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
  background-color: #ed5565;
}
h1 {
  padding-top: 10px;
  font-size: 10.0em;
}
h2 {
  font-size: 3.0em;
  color: white;
}
h3 {
  font-size: 2.5em;
}
a {
  text-decoration: none;
  color: white;
}
a:hover {
  color: #ff2a4a;
}
.banner {
  background:url("https://webdevtrick.com/wp-content/uploads/1st.jpg");
  background-size: cover;
  height: 1000px;
}
#overlay {
  background: rgba(0, 0, 0, 0.76);
  height: 1000px;
}
.skills {
  background:url("https://webdevtrick.com/wp-content/uploads/coding.jpg");
  background-size: cover;
  min-height: 100%;
  padding-bottom: 40px;
  padding-top:40px;
}
.ex-timeline {
  background:url("https://webdevtrick.com/wp-content/uploads/black-background.jpg");
  background-size: cover;
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 60px;
}
.portfolios {
  padding-top: 5px;
  margin-top: -20px;
  background: #212121;
}
.title {
  padding-bottom: 10px;
  width: 1100px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  top: 250px;
}
.titles {
  width: 790px;
  border-color: white;
  border-width: 5px;
  display: block;
  margin:0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
#title {
  font-size: 6.5em;
  padding-bottom: 15px;
}

#skills-label {
  font-size:5.0em; 
  padding-bottom:30px;
}
.project-img {
  height: 500px;
  width: 450px;
}
#projectTitle {
  text-align: center; 
  font-size: 2.8em;
  cursor: pointer;
  color: #212121;
}
.skill {
  background-color: white;
  color: #212121;
  font-size: 3rem;
  opacity: .8;
  padding: 15px;
  margin: 5px;
  border-radius: 15px;
  position: relative;
  display:...

JavaScript

// Code By Webdevtrick ( https://webdevtrick.com ) 
$(document).ready(function(){ 
	$(".scroll").click(function(event){
		event.preventDefault();
		$("html,body").animate({scrollTop:$(this.hash).offset().top}, 500);
		$('.navbar-default a').removeClass('selected');
		$(this).addClass('selected');
  });

});