Simple parallax

Simple Parallax Css

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style class="M-2010-styles">
body {
  background: #222222;
}
 .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #fff;
      color: #000;
  }
 .modal-header, h4, .close {
      background-color: #333;
      color: #fff !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-header, .modal-body {
      padding: 40px 50px;
  }
  .nav-tabs li a {
      color: #777;
  }
.navbar {
      margin-bottom: 0;
      background-color: #2d2d30;
      border: 0;
      font-size: 11px !important;
      letter-spacing: 4px;
      opacity: 0.9;
  }
  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #29292c !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: red !important;
  }

/*simple-Parallax*/
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://4.bp.blogspot.com/-xu6O_xJ7DRM/WNfeqkLIThI/AAAAAAAAdns/eQuB5yOwJVMnFPN5icTeuv-TXSUUrSQLQCK4B/s1600/Triplekred-M2010.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.simple {
  padding-top: 50px;
}
.texttop {
font-family: agency fb, sans-serif;
  font-size: 5em;
 text-shadow: 8px 8px 8px rgba(0,0,0, 20);
}
 .btn:hover {
 color: #fff;
  background-color: #1A4666;
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}
#simple {
}
#simple1 {
  background: url("https://4.bp.blogspot.com/-rC1LuMbuQ6o/WAI9xGmfVNI/AAAAAAAAc3I/p3o4RvHmVuoxBVaVSxcxHoU6JMD5SnkxwCK4B/s1600/bedroom-M2010s.jpg") no-repeat center center fixed; 
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#simple2 {
}
#bg {
 background: url("https://2.bp.blogspot.com/-MlH6tOB-USU/WAO2Bg8C7fI/AAAAAAAAc4I/VMlSqLRm-N4j8i7qRID0TcWvC6HePEDogCK4B/s1600/bedrooms-M2010.jpg") no-repeat center center fixed; 
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ul li.poto-circle {
  float: right;
}
#poto-circle{
  background-color: rgba(0, 0, 255, .15);
  width:250px;
  height:250px;
  border-width:6px; 
  border-style: inset;
  border-radius: 60%;
  border-color: #12127D #FFFF00;
}
</style>

Simple Parallax HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="simple" class="simple pad-section">
  <div class="text-center">
    <h1 class="text-primary texttop">SIMPLE PARALLAX</h1>
    <span style="color:#CC0099"><h3> Web designed by. M2010</h3>
    <!-- using FontAwesome for button icons -->
    <a rel="nofollow" rel="noreferrer"href="https://id.pinterest.com/myscript2010"style="text-decoration:none"target="_blank"title="Pinterest"class="btn btn-default btn-lg">
<span class="fa fa-pinterest"style="font-size:18px;color:#FFFF00">&nbsp;</span>Pinterest</a>
<a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"style="text-decoration:none"target="_blank"title="G-Plus"class="btn btn-default btn-lg">
<span class="fa fa-google-plus-official"style="font-size:18px;color:#FFFF00">&nbsp;</span>G-Plus</a>
        <a rel="nofollow" rel="noreferrer"href="https://www.facebook.com/learn.editing.myscript2010"style="text-decoration:none"target="_blank"title="Facebook"class="btn btn-default btn-lg">
<span class="fa fa-facebook-official"style="font-size:18px;color:#FFFF00">&nbsp;</span>Facebook</a>
  </div>
</div>

<div id="simple1" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">       
 <li class="poto-circle">
<img id="poto-circle"src="https://2.bp.blogspot.com/-iB0sb9HN8gE/WNe1x1xFnUI/AAAAAAAAdnc/AXxGqhBCJUAVis57L2xxH6TUTgx0qZi-wCK4B/s1600/Ikan-M2010.jpg" name="e902" border="0" width=" 250" height="250" /></a></li>
    </ul>
      </div>
      <div class="col-sm-6 text-center bg-primary">
        <h2>SIMPLE PARALLAX</h2>
        <p class="lead">Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
Simple Parallax - Simple Parallax - Simple Parallax <br>
        </p>
      </div>
    </div>
  </div>
</div>

<!-- simple-2 Teks -->
<div id="simple2" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <span style="color:#8E006B"><h2>Let's share</h2>
        <span style="color:#FEBFEF"><p>Website design knowledge sharing for everyone</p>
      </div>
    </div>
<!-- simple-2 Menu items 1-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
          <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>   
    </div>
<!-- simple-3 Menu items 2-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
  </div>
<!-- simple-4 Menu items 3-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
           <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
             <h2 class="panel-title">Contoh Gambar</h2>
           </div>
           <div class="panel-body lead">
           <img src="https://3.bp.blogspot.com/-y-zZ8narFcI/WNlzcWbik6I/AAAAAAAAdoU/HqSLGettC1g8FdHRvrNhqTD6rynctjQWACK4B/s1600/Kereta-Senja-M2010.jpg"/>
           </div>
        </div>
      </div>
  </div>
</div>
<!--Off The End -->
<!-- bg -->
<div id="bg" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center bg-primary pad-section">        
        <!-- using FontAwesome for button icons -->
        <a rel="nofollow" rel="noreferrer"href="https://trello.com/m2010"style="text-decoration:none"target="_blank"title="Trello"class="btn btn-default btn-lg">
<span class="fa fa-trello"style="font-size:18px;color:#FFFF00">&nbsp;</span>Trello</a>
        <a rel="nofollow" rel="noreferrer"href="https://myscript2010s.tumblr.com"style="text-decoration:none"target="_blank"title="Tumblr"class="btn btn-default btn-lg">
<span class="fa fa-tumblr-square"style="font-size:18px;color:#FFFF00">&nbsp;</span>Tumblr</a>
        <a rel="nofollow" rel="noreferrer"href="https://dribbble.com/Myscript2010s"style="text-decoration:none"target="_blank"title="Dribbble"class="btn btn-default btn-lg">
<span class="fa fa-dribbble"style="font-size:18px;color:#FFFF00">&nbsp;</span>Dribbble</a>
 <h2>Let's share together M-2010</h2>
<h5>Mari berbagi bersama Myscript2010 tentang seputar webblog</h5>
      </div>
    </div>
  </div>
<footer>
   <hr />
   <div class="container">
     <p class="text-right">
 <span style="color:#CC0099">2010 @ 2017</p>
  </div>
 </footer>
<footer 2>
</div>
 <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 140%"> </a>
             </div>
          </div>            
        </div>
       </div>
    </div>
  </div>
<div align="center">
<font color='#333'>  
<h1>Footer Navigation with Simple Parallax</h1><br>     
       <p><font color='#666'>Copyright @ 2017 Cibeber Cimahi</p><br>     
   <i class="fa fa-handshake-o"style="font-size:30px;color:red"></i> 
  </center>
</div>

<div class="container">
<p class="pull-right">
<a href="https://codepen.io/Myscript2010/"style="text-decoration:none"target="_blank"title="Codepen"> CODEPEN &emsp;
    <i class="fa fa-codepen" style="font-size:30px;color:#dad"></i> &emsp;&emsp;&emsp;&emsp;</a></font></p>
    <p><a href="https://gist.github.com/Myscript2010"style="text-decoration:none"target="_blank"title="Github">
&emsp;&emsp;&emsp;&emsp; <i class="fa fa-github" style="font-size:30px;color:#dad"></i>&emsp; GITHUB </a></font></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>