Bootstrap Snippet Personal Portfolio Webpage using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- HEADER -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
  <div class="container justify-content-lg-between justify-content-center align-content-center">
<!--   remove onclick attribute to activate -->
  <a class="navbar-brand mr-0 mb-1 mb-lg-0" href="#" onclick="return false;">
HARUN PEHLİVAN
</a>
  <div class="navbar-expand mb-1" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#about">CV</a>
      </li>
      <li class="nav-item ml-2 ml-sm-4">
        <a class="nav-link" href="#portfolio">PROJECT</a>
      </li>
      <li class="nav-item ml-2 ml-md-4">
        <a class="nav-link" href="#contact">CONTACT</a>
      </li>
    </ul>
  </div>
  </div>
  <div class="shadow"></div>
</nav>
<!-- 3D CUBE EFFECT -->
<div class="cube"><div class="black-outline"></div></div>
<!-- MAIN SECTION WITH CARDS -->
<main class="content">
<!--   ABOUT -->
  <div id="about" class="card">
    <div class="card-body">
      <h5 class="card-title"><span>
HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  font-family: "Courier New";
}
.navbar-dark.bg-dark {
  background-color: #009 !important;
  z-index: 2000;
  height: 62px;
}
.navbar.fixed-top {
  padding: 0;
}
.navbar-brand {
  font-size: 1.5em;
  font-weight: 600;
}
.nav-item.active .nav-link {
  border: 2px solid #fff;
}
.nav-link {
  font-size: 1.1em;
  border: 2px solid #009;
}
.cube {
  position: fixed;
  width: 100%;
  background-color: transparent;
  border: 14px solid #000;
  border-left: 60px solid #888;
  border-right: 100px solid #888;
  top: 62px;
}
.black-outline {
  height: 100%;
  width: 100%;
  border: 1px solid #000;
  border-bottom: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
  
  var navbar = $("#navbar"),
      navItems = navbar.find(".nav-item"),
      navLinks = navItems.find(".nav-link"),
      srCurrent = $('<span class="sr-only">(current)</span>'),
      cube = $(".cube"),
      cards = $(".content").find(".card"),
      footer = $("#footer"),
      scrollContext = $("html, body"),
      navHt, footerHt, cubeHt, vh;
  function fitElements(){
    navHt = navbar.outerHeight();
    footerHt = footer.outerHeight();
    
    vh = "innerHeight" in window 
    ? window.innerHeight
    : document.documentElement.offsetHeight;
    cubeHt = vh - ( navHt + footerHt );
    
    cube.css({
      "height": cubeHt,
      "top": navHt
    });
  };
  
  function setActiveNav(){
    cards.each(function(i,el){
      if( window.scrollY >= $(el).offset().top - (navHt + cubeHt*0.45) ){
        navItems
          .removeClass("active")
          .eq(i).addClass("active")
                .append(srCurrent);
        
        navLinks
          .remove(srCurrent)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Personal Portfolio Webpage"
Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Personal Portfolio Webpage" Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Personal Portfolio Webpage"
Bootstrap 4.1.1 Snippet by harunpehlivan