Bootstrap Snippet 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 ---------->
<nav id="header" class="navbar navbar-fixed-top">
  <div id="header-container" class="container navbar-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      <a id="brand" class="navbar-brand" href="#">HARUN PEHLİVAN</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul id="nav-links" class="nav navbar-nav">
        <li><a class="nav-anchor" href="#about">About</a></li>
        <li><a class="nav-anchor" href="#portfolio">Portfolio</a></li>
        <li><a class="nav-anchor" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-9">
      <p class="pull-right visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
      </p>
      <div id="about" class="jumbotron">
        <h1>IT FOUNDER CEO BLOGGER INITIATIVE AR-GE</h1>
        <hr>
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
/* Palette: "Corporate and Sleek" */
html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  padding-top: 70px;
  background-color: #E8E8E8;
  /* "CLEAN" */
}
footer {
  padding: 30px 0;
}
.navbar-brand {
  font-size: 24px;
}
.navbar-container {
  padding: 20px 0 20px 0;
  font-size: 14px;
}
.navbar.navbar-fixed-top.fixed-theme {
  background-color: #333A56;
  /* "VERMILLION" */
  border-color: #080808;
  box-shadow: 0 0 5px rgba(0, 0, 0, .8);
}
.navbar-brand.fixed-theme {
  font-size: 18px;
}
.fixed-theme a {
  color: #F7F5E6 !important; /* FRESH */
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 myNavBar = {
    flagAdd: true,
    elements: [],
    init: function (elements) {
        this.elements = elements;
    },
    add : function() {
        if(this.flagAdd) {
            for(var i=0; i < this.elements.length; i++) {
                document.getElementById(this.elements[i]).className += " fixed-theme";
            }
            this.flagAdd = false;
        }
    },
    remove: function() {
        for(var i=0; i < this.elements.length; i++) {
            document.getElementById(this.elements[i]).className =
                    document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
        }
        this.flagAdd = true;
    }
};
myNavBar.init(  [
    "header",
    "header-container",
    "brand"
]);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Portfolio Webpage"
Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Portfolio Webpage" Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Portfolio Webpage"
Bootstrap 4.1.1 Snippet by harunpehlivan