Mys2010 on Codepen

Memasang Kode Flatscroller Bootstrap V.3.0
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">

<style class="cp-pen-styles">
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} 
.pricing-table {
text-align:center;
font-weight:400;
border:6px solid #1ABC9C;
margin-bottom:30px;
background:#fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pricing-table:hover{
-moz-box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
}
.rounded{
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}
.pricing-table.green {
text-align:center;
font-weight:400;
border:6px solid #2ECC71;
}
.pricing-table.red {
text-align:center;
font-weight:400;
border:6px solid #E74C3C;
}
.pricing-table.orange {
text-align:center;
font-weight:400;
border:6px solid #F39C12;
}
.pricing-table.dark-blue {
text-align:center;
font-weight:400;
border:6px solid #34495E;
}
.pricing-table.blue {
text-align:center;
font-weight:400;
border:6px solid #3498DB;
}
.pricing-table-sign-up {
 border-top:1px solid #BDC3C7;
 padding:10px 20px;
 text-align:center;
 background:#ECF0F1;
}
.pricing-table-features p { 
 padding:5px 20px;
 text-align:center;
}
.pricing-table-features p:nth-child(2n){
 background:#ECF0F1;
}
.pricing-table-features, .pricing-table-space{
 background:#fff;
}
.pricing-table p{
  padding:5px;
  margin-top:5px;
  font-size:110%;
  font-weight:400;
  background:#fff;
 }
 .pricing-table p strong{
  font-weight:600;
 } 
 .pricing-table .pricing-table-header {
 color:#fff;
 background: #1ABC9C;
 padding:0px;
}
.pricing-table-header .heading{
 display:inline-block;
 width:100%;
 padding:15px 0px;
 text-transform:uppercase;
 } 
 .pricing-table.orange .heading{
  background: #F39C12;
 } 
 .pricing-table.green .heading{
  background: #2ECC71;
 } 
 .pricing-table.red .heading{
 background: #E74C3C;
 } 
 .pricing-table.dark-blue .heading{
 background: #34495E;
 } 
 .pricing-table.blue .heading{
 background: #3498DB;
 }
.pricing-table .pricing-table-header .price-value{
 background: #16A085;
}
.pricing-table.red .pricing-table-header .price-value{
 background: #C0392B;
}
.pricing-table.orange .pricing-table-header .price-value{
 background: #D35400;
}
.pricing-table.green .pricing-table-header .price-value{
 background: #27AE60;
}

.pricing-table.dark-blue .pricing-table-header .price-value{
 background: #2C3E50;
}
.pricing-table.blue .pricing-table-header .price-value{
 background: #2980B9;
}
.pricing-table-header .price-value {
 display:inline-block;
 width:100%;
 padding:20px 0px;
 background: #1ABC9C;
}
.pricing-table-header .price-value span{
 font-size:300%;
}
.pricing-table-header .price-value span.mo{
 font-size:200%;
}
body{
 color:#34495E;
}
h1 {
  font-size: 32px;
  font-weight: 900; 
  text-transform:uppercase;
  }
h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 2px; }
h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  margin-top: 2px; }
h4 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 4px; }
h5 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase; }
h6 {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase; } 
  .btn {
   border: none;
   background: #34495e;
   color: white;
   font-size: 16.5px;
   text-decoration: none;
   text-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;
   -webkit-backface-visibility: hidden;    
   }   
  .btn:hover, .btn:focus {
    background-color: #4e6d8d;
    color: white;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; 
 } 
  .btn:active, .btn.active {
    background-color: #2c3e50;
    color: rgba(255, 255, 255, 0.75);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; 
 } 
  .btn.btn-large {
    padding-bottom: 12px;
    padding-top: 13px;  
 }
  .btn.btn-primary {
    background-color: #1abc9c; 
 }
  .btn.btn-primary:hover, .btn.btn-primary:focus {
      background-color: #2fe2bf; 
   }
    .btn.btn-primary:active, .btn.btn-primary.active {
      background-color: #16a085; 
   }   
  .btn.btn-info {
    background-color: #3498db; 
 }
    .btn.btn-info:hover, .btn.btn-info:focus {
      background-color: #5dade2; 
   }
    .btn.btn-info:active, .btn.btn-info.active {
      background-color: #2383c4; 
   }
   
  .btn.btn-danger {
    background-color: #e74c3c; 
 }
    .btn.btn-danger:hover, .btn.btn-danger:focus {
      background-color: #ec7063; 
   }
    .btn.btn-danger:active, .btn.btn-danger.active {
      background-color: #dc2d1b; 
   }   
  .btn.btn-success {
    background-color: #2ecc71; 
 }
    .btn.btn-success:hover, .btn.btn-success:focus {
      background-color: #55d98d; 
   }
    .btn.btn-success:active, .btn.btn-success.active {
      background-color: #27ad60; 
   }   
  .btn.btn-warning {
    background-color: #f1c40f; 
 }
    .btn.btn-warning:hover, .btn.btn-warning:focus {
      background-color: #f4d03f; 
   }
    .btn.btn-warning:active, .btn.btn-warning.active {
      background-color: #cea70c; 
   }  
 /* global styles */
      body {
        padding-top: 60px;
        padding-bottom: 0px;
  background:#F7F7F7;
  font-size:16px;
      }   
   header{
  padding-top:50px;
   }
   section {
  position:relative;
  padding-top:70px;
  padding-bottom:80px;
  width:100%;
  min-width:100%;
  margin-top:-5px;
   }   
   .page-header{
  padding-top:20px;
   }    
 .justify{
  text-align:justify;
 }   
  #head-top {
   position:relative;
  background:#292C37;
  padding-top:0px;
  padding-bottom:0px;
  margin-top:-60px;
  display:inline-block;
  width:100%;
  height:100%;
  overflow:hidden;
  min-height:630px;
   }   
   #head-top .jumbotron{
  background:none;
  min-height:300px;
  color:#ffffff;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  padding-top:160px;
 }
 #head-top .jumbotron h1{
 text-shadow: 2px 2px 0px rgba(150, 150, 150, 0.65); 
 } 
 .gobtnwrapper{
  position:absolute;
  bottom:0px;
  right:0px;
  left:0px;
  display:block;
  width:100%;
  height:40px;
  text-align:center;
 }
 .gobtn{
  display:inline-block;
  width:70px;
  height:40px;
  background:#fc5242;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-box-shadow: 3px -3px 0px rgba(50, 50, 50, 0.25);
  -moz-box-shadow:    3px -3px 0px rgba(50, 50, 50, 0.25);
  box-shadow:         3px -3px 0px rgba(50, 50, 50, 0.25);
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
   border-top-left-radius: 3px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  padding-top:15px;  
 }
 .gobtn i{
  color:#292C37;
 }
 .gobtn:hover{
  opacity:0.9;
  text-decoration:none;
 }    
 #Section-1{
 background:#fc5242;
 color:#fff;
 }   
#Section-2{
  background:#1dbb90;
  color:#fff;
   }   
.well{
  border:none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
#Section-1 .well{
  /*background-color:#34495e;*/      
  background:url(http://sitediscount.ru/flatscrollerbs3/images/bgredtwo.png) 0% 0% fixed repeat;
  color:#fff;
  margin-bottom:-100px;
  margin-top:60px;
  padding-top:60px;
  padding-bottom:60px;
   }
   .well .lead{
  font-size:220%;
   }
   #Section-2 .well{
  background:url(http://sitediscount.ru/flatscrollerbs3/images/bgredtwo.png) 0% 0% fixed repeat;
  margin-bottom:-100px;
  margin-top:60px;
  padding-top:60px;
  padding-bottom:60px;
   }
   #Section-3{
  background:#4F92BF;
   } 
   #Section-3 h2,
   #Section-3 h3{
  color:#fff;  
   }     
   #Section-4{
  background:#5dade2;
   } 
   #Section-4 h2,
   #Section-4 h3{
  color:#fff;  
   }   
 hr{
  margin:40px 0px;
 }
 hr, 
 .page-header {
  border-color:rgba(250,250,250, 0.1)
   }    
   #Section-2 p{
  color:rgba(250,250,250, 0.9);
   }
   #Section-2 h3 {  
   }
   .page-header h2,
   .page-header h3{
  font-weight:100;
  font-size:46px;
  line-height:46px;
   }   
   .box{
  margin-bottom:30px;
   }
   .about-box {
  margin-bottom:20px;
  margin-top:20px;
  color:#fff;
   }   
   .about-box h3,
   .about-box h4{
  border-bottom:1px solid #fff;
   }
   .about-box h3 span,
   .about-box h4 span{
  border-bottom:2px solid #fff;
  display:inline-block;
   }   
/* FOOTER*/
     footer{
  display:inline-block;
  width:100%;
  min-width:100%;
  padding-top:50px;
  padding-bottom:50px;
  min-height:200px;
  background:#292C37;
  color:#fff;
   }   
   footer .circ-wrap{
  float:left;
  margin:10px;  
   }
    footer .circ-wrap a{
   color:#fff;
    }    
    footer .circ-wrap a:hover{
   text-decoration:none;
    }

/* Navigations*/
 .navbar .nav > li > a {
  float: none;
  padding: 30px 20px 30px;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
  font-size:14px;
  font-wight:bold;
  text-transform:uppercase;
  border-top: 10px solid transparent;
 }
 .navbar .nav > .active > a, 
 .navbar .nav > .active > a:hover, 
 .navbar .nav > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background: none;
  border-top: 10px solid #fc5242;
  -webkit-box-shadow:  none;
   -moz-box-shadow:   none;
    box-shadow:  none;
 }
 .navbar .navbar-brand {
  padding: 30px 15px 30px 15px;
  color:#fc5242;
  text-shadow:none;
  font-size:26px;
  font-weight:100;
  margin-right:30px;
  max-width:300px;
 }
 .navbar {
  -webkit-box-shadow: 0 3px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 3px 0px rgba(0, 0, 0, 0.1);
     box-shadow:0 3px 0px rgba(0, 0, 0, 0.1);
 }
 .navbar {
  min-height: 60px;
  padding-right: 20px;
  padding-left: 20px;
  background: #2b2b2b;
  background-image: none;
  background-repeat: repeat-x;
  border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  filter: none;
  -webkit-box-shadow: none;
   -moz-box-shadow: none;
    box-shadow: none;
 }   
 .circ-wrap{
  width: 98px;
  height: 98px;
  margin: 0 auto 10px;
  line-height: 95px;
  text-align: center;
  border: 1px solid rgba(250,250,250,.9);
  border-radius: 50px;
  padding-top:15px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
 }   
 .carousel-indicators{
  top:0px;
  left:95%;;
 }
 .carousel-control {
  position: absolute;
  top: 0%;
  width: 40px;
  height: 100%;
  font-size: 30px;
  padding-top:10px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: none;
  border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
 }
 .carousel-control i{
  position: absolute;
  top: 40%;
  z-index: 5;
  display: inline-block;
 }
 .carousel-control.right {
  right: -50px;
  left: auto;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
   border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background:none;
 }
 .carousel-control.left {
  left: -70px;
  right: auto;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background:none;
 }  
 .social-contacts a i{
  text-decoration:none;
  color:#3F7497;
 }
 .social-contacts a i:hover{
  color:#335E7C;
  text-decoration:none;
  transition: all ease-in-out 0.3s;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
 }
 .social-contacts a:hover{
  text-decoration:none;
 }  
 .thumbnail.product-item{
  border-top:0px;
  border-left:0px;
  border-right:0px;
  overflow:hidden;
  max-height:300px;
  padding-top:20px;
  background:none;
  border-bottom:4px solid rgba(0,0,0, 0.1);
  -moz-box-shadow:none;
  box-shadow:none;
  -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
    box-sizing:border-box;
  -webkit-border-radius:0px;
   -moz-border-radius:0px;
    border-radius:0px;
 } 
 .btn {
   border: none;
   background: #34495e;
   color: white;
   font-size: 16.5px;
   text-decoration: none;
   text-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;
   -webkit-backface-visibility: hidden; 
 } 
  .btn:hover, 
  .btn:focus {
    background-color: #4e6d8d;
    color: white;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; 
 }
  .btn:active, .btn.active {
  background-color: #2c3e50;
  color: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
 }
  .btn.disabled, 
  .btn[disabled] {
  background-color: #95a5a6;
  color: white; 
 } 
  .btn.btn-large {
  padding-bottom: 12px;
  padding-top: 13px; 
 }
  .btn.btn-primary {
  background-color: #1abc9c; 
 }
    .btn.btn-primary:hover, 
 .btn.btn-primary:focus {
      background-color: #2fe2bf; 
 }
    .btn.btn-primary:active, 
 .btn.btn-primary.active {
      background-color: #16a085;
  }
 .btn.btn-info {
  background-color: #3498db; 
 }
    .btn.btn-info:hover, 
 .btn.btn-info:focus {
      background-color: #5dade2; 
  }
    .btn.btn-info:active, 
 .btn.btn-info.active {
      background-color: #2383c4; 
 }
  .btn.btn-danger {
  background-color: #e74c3c; 
 }
    .btn.btn-danger:hover, 
 .btn.btn-danger:focus {
      background-color: #ec7063; 
 }
    .btn.btn-danger:active, 
 .btn.btn-danger.active {
      background-color: #dc2d1b; 
 }
  .btn.btn-success {
    background-color: #2ecc71; 
 }
    .btn.btn-success:hover, 
 .btn.btn-success:focus {
      background-color: #55d98d; 
  }
    .btn.btn-success:active, 
 .btn.btn-success.active {
      background-color: #27ad60; 
 }
  .btn.btn-warning {
  background-color: #FFAA49; 
 }
    .btn.btn-warning:hover, 
 .btn.btn-warning:focus {
      background-color: #f4d03f; 
 }
    .btn.btn-warning:active, 
 .btn.btn-warning.active {
      background-color: #cea70c; 
  } 
  .progress, 
  .ui-slider {
    background: #e8edf2;
    border-radius: 32px;
    height: 20px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
  }
  .progress .bar{
 height:20px;
  }
  .progress .bar, 
  .ui-slider .bar {
  background: #1abc9c;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 }
  .progress .bar-success, 
  .ui-slider .bar-success {
  background-color: #2ecc71;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 }
  .progress .bar-warning, 
  .ui-slider .bar-warning {
  background-color: #FFAA49;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 }
  .progress .bar-danger, .ui-slider .bar-danger {
  background-color: #e74c3c;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 }
  .progress .bar-info, .ui-slider .bar-info {
  background-color: #3498db;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 } 
 .navbar .btn-navbar {
  float: right;
  padding: 20px 20px;
  margin:0px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #292425;
  background-image: none;
  border-color: none;
  filter: none;
  -webkit-box-shadow: none;
   -moz-box-shadow: none;
    box-shadow: none;
  -webkit-border-radius:0px;
   -moz-border-radius:0px;
    border-radius:0px;
 }  
 @media (max-width: 979px){
   .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
   padding-bottom: 0px;
   padding-top: 0px;
  }
  .navbar-fixed-top, .navbar-fixed-bottom {
   position: fixed !important;
  } 
.navbar .nav > li > a  {
 padding:30px 10px;
}
.jumbotron h1 {
font-size: 40px;
}
.carousel-control{
 top:0%;
}
.carousel-control.left {
 left: -10px;
 z-index:1020;
}
.carousel-control.right {
 right: 5px;
 z-index:1020;
}
 #head-top {
  min-height: auto;
 }
}
 @media (max-width: 767px){
  body {
   padding-right: 0px;
   padding-left: 0px;
  }
  .container{
   padding-right: 20px;
   padding-left: 20px;
  }  
  .navbar-inverse .navbar-inner {
   min-height: 30px;
  }  
  .navbar .navbar-brand {
   padding: 15px 0px 10px;
  }
  .navbar .navbar-brand{
   margin-left:20px;
   font-size:20px;
   text-align:left;
   margin-left:-20px;
  }
  .navbar .nav > li > a {
   float: none;
   padding: 15px 20px 15px;
   -webkit-border-radius:0px;
    -moz-border-radius:0px;
     border-radius:0px;
  }  
  #head-top .jumbotron {
   padding-right:0px;
   padding-left:0px;
   padding-top:100px;
   padding-bottom:15px;
  }  
  #head-top .jumbotron h1{
   font-size:24px;
   text-align:center;
  }
  #head-top .jumbotron .lead{
   font-size:16px;
   text-align:center;
  }
  .page-header h3 {
   font-weight: 100;
   font-size: 32px;
   line-height: 34px;
  }} 
</style>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.sitediscount.ru/flatscrollerbs3/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  <body data-spy="scroll" data-target=".top-spy">   
 <div id="topnav" class="navbar navbar-fixed-top">
 <div class="container"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button> 
        <a class="navbar-brand" href="#head-top"><i class="icon-twitter-sign icon-x3"></i> FLATSCROLLER</a>
  <div class="nav-collapse collapse navbar-responsive-collapse top-spy">
    <ul  class="nav navbar-nav pull-right ">
       <li class="active"><a href="#head-top">Home</a></li>
      <li><a href="#Section-1">Section-1</a></li>
      <li><a href="#Section-2">Section-2</a></li>
      <li><a href="#Section-3">Section-3</a></li>
      <li><a href="#foot-sec">Footer</a></li>
    </ul>
   </div>
  </div>
   </div>

<header id="head-top">      
      <div class="jumbotron"> 
  <div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>    
  </ol>
 <div class="container"> 
  <div class="carousel-inner"> 
    <div class="active item">   
   <div class="row">
    <div class="text-right col-6 col-lg-8" style="padding-top:40px; ">
     <h1 class="">FLATSCROLLER Bootstrap 3.0.!</h1>
     <p class="lead">
      Now Bootstrap 3.0. supported! A good starting point for your new project. Fully adaptive flat design. Smooth scrolling and parallax effects. Just choose the appropriate colors for your project, or use ready-made skins and ... done
     </p>
    </div>
    <div class="text-center col-6 col-lg-4">
     <img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png" alt="">
    </div>
   </div>
 </div>
    <div class="item">
    <div class="row">
     <div class="text-center col-6 col-lg-4">
      <img src="images/flatphone.png" alt="">
     </div>
     <div class="col-6 col-lg-8" style="padding-top:40px; ">
      <h1 class="">FLATSCROLLER Bootstrap 3.0.!</h1>
      <p class="lead">
       Now Bootstrap 3.0. supported! Here goes marketing paragraph. A good starting point for your new project. Fully adaptive flat design. Smooth scrolling and parallax effects. Just choose the appropriate colors for your project, or use ready-made skins and ... done
      </p>
     </div>     
    </div>   
  </div>
    </div>
 </div>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a>   
  </div>
      </div> 
   <div class="gobtnwrapper">
  <a class="gobtn" href="#Section-1"><i class="icon-chevron-down icon-large"></i></a>
   </div>  
 </header>
<section id="Section-1">
 <div class="container">    
    <div class="row">
  <div class="page-header text-center col-sm-12 col-lg-12">
   <h3>Section-1 We provide awesome services</h3>
   <p class="lead">
    A good starting point for your new project. Fully adaptive flat design. Smooth scrolling and parallax effects. 
   </p>
  </div> 
 </div> 
 
 <div class="row">
        <div class="text-center box col-12 col-lg-4">
  <div class="circ-wrap">
   <i class="icon-html5 icon-4x"></i>
  </div>
          <h3>1. HTML5 STANDARD </h3>
          <p class="justify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>         
        </div>
<div class="text-center box col-12 col-lg-4">
   <div class="circ-wrap">
   <i class="icon-css3 icon-4x"></i>
   </div>
          <h3>2. CSS3 EFFECTS</h3>
          <p class="justify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>         
       </div>
        <div class="text-center box col-12 col-lg-4">
  <div class="circ-wrap">
   <i class="icon-tablet icon-4x"></i>
   </div>
          <h3>3. MOBILE READY</h3>
          <p class="justify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>        
        </div>
 </div> 
 <div class="row">
  <div class="text-center box col-12 col-lg-4">
  <div class="circ-wrap">
   <i class="icon-rocket icon-4x"></i>
   </div>
          <h3>4. FASTER START</h3>
          <p class="justify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>        
        </div>
  <div class="text-center box col-12 col-lg-4">
  <div class="circ-wrap">
   <i class="icon-beaker icon-4x"></i>
   </div>
          <h3>5. FONT AWESOME 3.1.1.</h3>
          <p class="justify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>        
        </div>
  <div class="text-center box col-12 col-lg-4">
  <div class="circ-wrap">
   <i class="icon-thumbs-up icon-4x"></i>
   </div>
          <h3>6. BOOTSTRAP 3.0.!</h3>
          <p class="justify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>        
        </div>
 </div> 
 </div>
 <div class="well">
  <div class="container">
   <div class="row">
    <div class="col-sm-12 col-lg-9">
     <p class="lead">
      Be the first who get Bootstrap 3.0. template!
     </p>     
    </div>
    <div class="text-left col-sm-12 col-lg-3">
     <a class="btn btn-large btn-block btn-danger" href="http://www.bootstraptor.com">Get it now!</a>
    </div>
   </div>
  </div>
 </div>
</section>
<section id="Section-2">
 <div class="container">
   <div class="row">
  <div class="page-header text-center col-sm-12 col-lg-12">
   <h3>We provide an awesome products</h3>
   <p class="lead">
  </p></div> 
 </div>  
          <div class="row">
        <div class="text-center col-sm-4 col-lg-4">
          <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/iMac.png"></a> 
        </div>  
        <div class="col-sm-8 col-lg-8">
          <h3>Heading Heading Heading Heading</h3>
          <p class="lead">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-large btn-default" href="http://www.bootstraptor.com">View details »</a></p>
       </div>    
      </div>
   <hr>      
<div id="myCarousel2" class="carousel slide"> 
  <div class="carousel-inner">  
  <div class="item active">
  <div class="row text-center">
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>   
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>   
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>
 </div>
 </div> 
 <div class="item">
 <div class="row text-center"> 
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>  
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div> 
        <div class="col-6 col-lg-3">
   <div class="thumbnail product-item">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/flatphone.png"></a>
   </div>
   <h3>Product name</h3>
   <p><a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">View details »</a></p> 
        </div>
 </div>
 </div>
</div>
  <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
  <a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a> 
</div>
  </div>
 <div class="well">
  <div class="container">
   <div class="row">
    <div class="col-12 col-lg-9">
     <p class="lead">
      Marketing slogan awesome call to action with button!
     </p>     
    </div>
    <div class="text-left col-12 col-lg-3">
     <a class="btn btn-large btn-block btn-default" href="http://www.bootstraptor.com">Get it now!</a>
    </div>
   </div>
  </div>
 </div>
 </section> 
<section id="Section-3">
 <div class="container">
  <div class="row">
   <div class="page-header text-center col-sm-12 col-lg-12">
    <h3>Our team - who build this awesome project</h3>
    <p class="lead">
   </p></div> 
  </div>  
  <div class="row text-center">
   <div class="col-6 col-lg-3">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/avaone.jpg" width="160" height="160" class="img-circle"></a>
    <h3>John Doe</h3>
     <p class="text-center social-contacts"> <a href="#"><i class="icon-facebook-sign icon-2x"></i></a> <a href="#"><i class="icon-twitter-sign icon-2x"></i></a> <a href="#"><i class="icon-github-sign icon-2x"></i></a> <a href="#"><i class="icon-linkedin-sign icon-2x"></i></a> <a href="#"><i class="icon-google-plus-sign icon-2x"></i></a></p>
   </div>
   <div class="col-6 col-lg-3">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/avatwo.jpg" width="160" height="160" class="img-circle"></a>
    <h3>John Doe</h3>
     <p class="text-center social-contacts"> <a href="#"><i class="icon-facebook-sign icon-2x"></i></a> <a href="#"><i class="icon-twitter-sign icon-2x"></i></a> <a href="#"><i class="icon-github-sign icon-2x"></i></a> <a href="#"><i class="icon-linkedin-sign icon-2x"></i></a> <a href="#"><i class="icon-google-plus-sign icon-2x"></i></a></p>
   </div>
   <div class="col-6 col-lg-3">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/avathree.jpg" width="160" height="160" class="img-circle"></a>
    <h3>John Doe</h3>     <p class="text-center social-contacts"> <a href="#"><i class="icon-facebook-sign icon-2x"></i></a> <a href="#"><i class="icon-twitter-sign icon-2x"></i></a> <a href="#"><i class="icon-github-sign icon-2x"></i></a> <a href="#"><i class="icon-linkedin-sign icon-2x"></i></a> <a href="#"><i class="icon-google-plus-sign icon-2x"></i></a></p>
   </div>
   <div class="col-6 col-lg-3">
    <a href="#"><img src="http://sitediscount.ru/flatscrollerbs3/images/avafour.jpg" width="160" height="160" class="img-circle"></a>
    <h3>John Doe</h3>
     <p class="text-center social-contacts"> <a href="#"><i class="icon-facebook-sign icon-2x"></i></a> <a href="#"><i class="icon-twitter-sign icon-2x"></i></a> <a href="#"><i class="icon-github-sign icon-2x"></i></a> <a href="#"><i class="icon-linkedin-sign icon-2x"></i></a> <a href="#"><i class="icon-google-plus-sign icon-2x"></i></a></p>
   </div>   
  </div>
  <hr>  
<div class="row">
<div class="col-sm-7 col-lg-7"> 
 <h3 class="main-color">OUR SERVICES</h3>
 <div class="about-box row">
  <div class="col-sm-3 col-lg-3">
   <div class="circ-wrap">
    <i class="icon-beaker icon-4x"></i>
   </div>
  </div>
  <div class="col-sm-8 col-lg-8">  
   <h4><span>WEB &amp; UI DESIGN</span></h4>   
   <p class="">
   There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
   </p>
  </div>
 </div>
 <div class="about-box row">
  <div class="col-sm-3 col-lg-3">
   <div class="circ-wrap">
    <i class="icon-beaker icon-4x"></i>
   </div>
  </div>
  <div class="col-sm-8 col-lg-8">  
   <h4><span>WEB &amp; UI DESIGN</span></h4>   
   <p class="">
   There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
   </p>
  </div>
 </div> 
 <div class="about-box row">
  <div class="col-sm-3 col-lg-3">
   <div class="circ-wrap">
    <i class="icon-beaker icon-4x"></i>
   </div>
  </div>
  <div class="col-sm-8 col-lg-8">  
   <h4><span>WEB &amp; UI DESIGN</span></h4>
   
   <p class="">
   There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
   </p>
  </div>
 </div>
</div>
<div class="col-sm-5 col-lg-5"> 
 <h3 class="main-color">MAIN SKILLS</h3>
 <h4>DESIGN</h4>
  <div class="progress">
            <div class="bar" style="width: 75%;"></div>
        </div>
 <h4>HTML5</h4>
  <div class="progress">
            <div class="bar bar-danger" style="width: 60%;"></div>
        </div> 
 <h4>CSS3</h4>
  <div class="progress">
            <div class="bar bar-success" style="width: 55%;"></div>
        </div>  
  <h4>JQUERY</h4>
  <div class="progress">
            <div class="bar bar-warning" style="width: 75%;"></div>
        </div> 
  <h4>PHP</h4>
  <div class="progress">
            <div class="bar bar-info" style="width: 55%;"></div>
        </div> 
 </div>
</div>
</div>
</section> 
<section id="Section-4">
<div class="container">
   <div class="row">
  <div class="page-header text-center col-sm-12 col-lg-12">
   <h3>Section-3 Plans &amp; Pricing</h3>
  </div> 
 </div>    
   <div class="row">   
    <div class="col-12 col-lg-3">
    <div class="pricing-table blue">
<div class="pricing-table-header">
<span class="heading">Single applications</span>
      <span class="price-value">$<span>14</span><span class="mo">/mo</span></span>     
     </div>
      
    <div class="pricing-table-space"></div>
    <div class="pricing-table-features">
     <p> <strong>Single</strong> installation</p>
     <p><strong> Unlimited </strong> Support</p>
     <p><strong>Validation</strong> W3C</p>
     <p><strong>Bootstrap</strong> 2.3.0</p>
     <p><strong>HTML5</strong> &amp; <strong> CSS3</strong></p>
    </div>
      
     <div class="pricing-table-sign-up">
      <a href="#" class="btn btn-large btn-block btn-info">BUY NOW!</a>
     </div>      
    </div>
   </div>   
   <div class="col-12 col-lg-3">
    <div class="pricing-table blue">
<div class="pricing-table-header">           <span class="heading">Single applications</span>
      <span class="price-value">$<span>14</span><span class="mo">/mo</span></span>          
     </div>      
    <div class="pricing-table-space"></div>
    <div class="pricing-table-features">
     <p> <strong>Single</strong> installation</p>
     <p><strong> Unlimited </strong> Support</p>
     <p><strong>Validation</strong> W3C</p>
     <p><strong>Bootstrap</strong> 2.3.0</p>
     <p><strong>HTML5</strong> &amp; <strong> CSS3</strong></p>
    </div>      
    <div class="pricing-table-sign-up">
     <a href="#" class="btn btn-large btn-block btn-info">BUY NOW!</a>
    </div>      
    </div>
   </div>   
   <div class="col-12 col-lg-3">
   <div class="pricing-table blue">
    <div class="pricing-table-header">       
     <span class="heading">Single applications</span>
     <span class="price-value">$<span>14</span><span class="mo">/mo</span></span>          
    </div>      
    <div class="pricing-table-space"></div>
    <div class="pricing-table-features">
     <p> <strong>Single</strong> installation</p>
     <p><strong> Unlimited </strong> Support</p>
     <p><strong>Validation</strong> W3C</p>
     <p><strong>Bootstrap</strong> 2.3.0</p>
     <p><strong>HTML5</strong> &amp; <strong> CSS3</strong></p>
    </div>      
    <div class="pricing-table-sign-up">
     <a href="#" class="btn btn-large btn-block btn-info">BUY NOW!</a>
    </div>     
   </div>
   </div>   
   <div class="col-12 col-lg-3">
   <div class="pricing-table blue">
<div class="pricing-table-header">    
   <span class="heading">Single applications</span>
   <span class="price-value">$<span>14</span><span class="mo">/mo</span></span>         
   </div>     
   <div class="pricing-table-space"></div><!-- CONTENT BOX-->
   <div class="pricing-table-features">
   <p> <strong>Single</strong> installation</p>
   <p><strong> Unlimited </strong> Support</p>
   <p><strong>Validation</strong> W3C</p>
   <p><strong>Bootstrap</strong> 2.3.0</p>
   <p><strong>HTML5</strong> &amp; <strong> CSS3</strong></p>
   </div>     
   <div class="pricing-table-sign-up">
   <a href="#" class="btn btn-large btn-block btn-info">BUY NOW!</a>
   </div>     
   </div>
   </div>   
   </div>
 </div>
</section> 

</section>    
<footer id="foot-sec">
 <div class="container">   
   <div class="row">
    <div class="page-header text-center col-sm-12 col-lg-12">
<h3 class="">Stay in touch with us</h3>       </div>
    <hr>
   </div>
   <div class="row">
    <div class="col-12 col-lg-12 text-center">
     <div style="display:inline-block">
      <div class="circ-wrap">
       <a href="http://www.bootstraptor.com"><i class="icon-facebook icon-4x"></i></a>
      </div>
      <div class="circ-wrap">
       <a href="http://www.bootstraptor.com"><i class="icon-twitter icon-4x"></i></a>
      </div>     
      <div class="circ-wrap">
       <a href="http://www.bootstraptor.com"><i class="icon-github icon-4x"></i></a>
      </div>     
      <div class="circ-wrap">
       <a href="http://www.bootstraptor.com"><i class="icon-linkedin icon-4x"></i></a>
      </div>     
      
      <div class="circ-wrap">
       <a href="http://www.bootstraptor.com"><i class="icon-google-plus icon-4x"></i></a>
      </div>
     </div>
    </div>
   </div>   
   <div class="row">
   <hr>
    <div class="text-center col-sm-12 col-lg-12">
      <p>© 2013 FlatScroller | Built with <a href="http://www.bootstraptor.com">www.Bootstraptor.com</a></p>
    </div>
   </div>
 </div>
</footer>

<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://sitediscount.ru/flatscrollerbs3/assets/css/font-awesome.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<code-js>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.parallax-1.1.3.js"></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.localscroll-1.2.7-min.js"></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.scrollTo.min.js" ></script>
<script src="http://sitediscount.ru/flatscrollerbs3/assets/js/jquery.nicescroll.min.js"></script>

<script>
jQuery(document).ready(function(){
 jQuery('#topnav').localScroll(3000); jQuery('.gobtnwrapper').localScroll(3000);
 jQuery('.well').parallax("50%", 0.1);
})
</script>
<script>
 jQuery(document).ready(
  function() {      jQuery("html").niceScroll({cursorcolor:"#ffffff"});
  }
);
</script>
<script>
jQuery('.navbar .nav > li > a').click(function(){
  jQuery('.nav-collapse.navbar-responsive-collapse.in').removeClass('in').addClass('collapse').css('height', '0');
  });
</script>
<script>
 jQuery('.carousel').carousel({
  interval: 7000
})
</script>

Code by. All Source
Edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  &  paste you canGet code Flatscroller Bootstrap V.3.0  

Memasang Kode Tooltip
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="M2010-styles">
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQVAeELBFv0lzvxLWjN-oq68HQ4CLjCcAtOusXcyGGs9fP0J5Mxjd_yBEtsJYq0HJD4sjceR_aKrzHu0bLWeFPtnCuFSY2XIw3iCnW-WWCqFNctmn5ehdkQ-we5sp8RE9_aSdWf2VE2Sn/s1600/Transparent-M2010.png);color:red;height:100%;overflow:hidden;}
body {);color:red;height:100%;overflow:hidden;} 
body {
  background-color: #1f253d;
  font: 100%/1 "Futura", sans-serif;
  margin: 0;
  padding: 0;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  height:50px;
  text-align: center;
  font-size:  6px;
   background: linear-gradient(270deg,#b27000, #0033ff, #b27000);    
  border-bottom:1px solid #111;
} 
.ap {
position: fixed;
right: 0;
bottom:-23px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background: linear-gradient(270deg,#0033ff,#b27000,#0033ff );
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #0a0 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:35px;
}
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  margin-top:-130px;
  left:190px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden} 
.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}
.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
 width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWFzFsPjPC4nesKOSPCUWZJPVVr1NJqzf-rHuH6Ev13x0LQXDoALj_nQbAzR9BBNaeJ4YVpei8Xb99wPFvU50FGaliJOmCgn0N8jun3vwqxRXc3IO1YK-M4UnBZu5CK_rsJB_eiAKD1k/s1600-r/Mari-belajar-mys2010.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}
.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}
.small {font-size:14px; display:block; margin-top:10px; 
}
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080
  margin-top:-130px;
  left:190px;
}
.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent
}
p 
{ margin: 55px auto 0 auto;
  font-size:150px;
  font-weight:bold;
  font-family: Serif;
  text-align:center;
  color:rgba(0,0,255,0.1);
  text-shadow: 0 1px 0 #000,
               0 2px 0 #111,
               0 3px 0 #222,
               0 4px 0 #333,
               0 5px 0 #444,
               0 6px 1px rgba(0,0,0,1),
               0 12px 2px rgba(0,0,0,1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 3px 8px rgba(255,255,255,.2);}
.illuminated
{   color: rgba(100,100,255,0.3);
    text-shadow: 0 1px 0 #000,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15),
               0 0px 6px rgba(255,255,255,.3),
               0 8px 8px rgba(255,255,255,.6),
               0 16px 16px rgba(255,255,255,.3),
               0 0 150px rgba(255,255,255,.4),
               0 0 500px rgba(255,255,255,.2);
}
img{
 -webkit-filter: grayscale(1);
 cursor: pointer;
 transition: all .5s ease;
}
img:hover{
 -webkit-filter: grayscale(0);
  transform: scale(1.2,1.2);
}
@keyframes rotation{
 from{
  transform: rotateY(0deg);
 }
 to{
  transform: rotateY(360deg);
 }}

.klapklip {
  -webkit-animation: fade-in 6.2s linear infinite alternate;
  -moz-animation: fade-in 6.2s linear infinite alternate;
  animation: fade-in 6.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 
.klapklip {
  font-family: 'Rye', cursive;
  text-transform: uppercase;
  text-align: center;
  margin-top:80px;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 1px 1px 0px white;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
.klapklip  {
  padding: 10px;
  font-size: 25.5em;
  color: #f00; }
  @media all and (min-width: 50em) {
.klapklip  {
      padding: 15px;
      font-size: 4.5em; } }
</style>

<p class="illuminated" id="lbl">
Myscript2010</p>
<div class="klapklip">a WEB<br>DESIGNER</div>
</div></div>
<div id="tooltip-image"> 
<div class="container">
     <a class="buttonLogo" 
       expr:href="data:blog.homepageUrl"></a>
         <div class="name">
                    M-2010
                      <span class="small">
                             Cibeber Cimahi</span> 
                        </div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLd904FR7TGg2PjSfTLxV-lG75Ijksy73gOgv4AZQiewbIua8_HEjr_ru1VmALqyqHZqgCvY9i7sp8kCkidIGQQXApUJDWN5bx7hGaXT__iV3if5riTOdo2bm6HHeRQ2eS3A6TKaRSm4/s1600-r/Mys2010.jpg" alt="Sule" class="pic">
        </div>
<div class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheb66-ruExEUMAvtdukc4QeS06_iwDlHuz1l59OtQbZKZVg_Z_4BeyYr7iVJ8UpWpJFOsWDPIIQGMyBAE7ql82rL6EPE80luKzQ8l6pPmGeTHC2F37X3pjbBSmaycBL9Jvu8A9hse7Ks8/s1600/Bloggers-M2010.png" alt="Mys2010" class="pic">
    </div>
</div>
<p class="comment">
<font size="3" color="green"face="vivaldi"> 
Mari Belajar</font></p>
</div>

<header> 
<a href="http://Link Judul" target="_blank"title="Mari Belajar">
<h2>
<span style="color:#000; font-size: 10pt">TOOLTIP</a>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#f00;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family:arial;font-size:12px;color:#f00;"> COPYRIGHT <a href="http://tools-gradiend.blogspot.co.id/2017/02/building-bditor.html"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; EDITORS </a> 
</div>
<h2>
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Visit Website">
<img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2>
</a></div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<link<script>
function flicker(){
  $("#lbl").removeClass("illuminated");
  setTimeout(function()
  {
    $("#lbl").addClass("illuminated");
  },50);}
function triggerFlicker(){  
setTimeout(flicker,/*i**/100); 
setTimeout(triggerFlicker,Math.floor(Math.random()*2000)/*+(times*100)+(250)*/);}
triggerFlicker();
</script> href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

Code by. All Source
Edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload  Tooltip

Memasang Kode Parallax Scrolling Text Simple
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
body {
margin: 0;
font-family:'Latha', sans-serif;
color:#000;
} 
#bg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQVAeELBFv0lzvxLWjN-oq68HQ4CLjCcAtOusXcyGGs9fP0J5Mxjd_yBEtsJYq0HJD4sjceR_aKrzHu0bLWeFPtnCuFSY2XIw3iCnW-WWCqFNctmn5ehdkQ-we5sp8RE9_aSdWf2VE2Sn/s1600/Transparent-M2010.png");
  position: fixed;
  width: 100%;
  height: 4000px;
  z-index: 1;
  top: 0;
}
h1 {
  font-family: 'agency fb', serif;
  text-align: center;
  color:#333;
  font-size: 2.5em;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border: 1px dotted #000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px #222;
}
h3 {  
  font-family: 'Playbill', serif;
  text-align: center;
  font-size:3em;
  color:#ff0;
  background-color: rgba(13, 255, 151, 0.1);
  margin-top:-40px;
  padding: 16px;
  border: 1px dotted #000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px #222;
}
 
#content {
  position: relative;
  z-index: 5;
  width: 800px;
  margin: 0 auto;
}
#content p {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin: 50px 0px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  line-height: 1.8em;
  border: 1px dotted #000;
}
a {
  display: inline-block;
  padding: 10px 15px;
  background:#dad;
  color: #fff;   
  border-top: none;
  text-decoration: none;
  -webkit-transition: background .5s;
  transition: background .5s;  
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
a:hover {
  background: #000;
}
a[href='#content'] {
  float: right;
  border: 1px solid #fff;
  border-bottom: none;
}
</style>

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arbutus+Slab' rel='stylesheet' type='text/css'>

<div id="bg"></div>
<div id="content"><br>
  <a rel="nofollow" rel="noreferrer"href="#bottom">Ke Bawah</a>

<h1>YOUR TEXT HERE</h1>  
 <p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>
   
<p>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br>
Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br> Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda Teks anda <br></p>

<p id="bottom"> Edited by. Myscript2010</p>

<a rel="nofollow" rel="noreferrer"href="#content">Ke Atas</a>
</div>

<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

<script>
    // Parallax function
function p() {
  // Get the scrollbar position
  var topPos = $(window).scrollTop();
  // Move our background at a slower rate than content
  $('#bg').css('top', (0 - (topPos * .2)) + 'px');
}
// Bind the Parallax function to the Scroll Event
$(window).on('scroll', function (e) {
    p();
});
// This just gives us the ability to scroll automatically, it is just a bonus...not needed for this to function.
$("a").click(function (event) {
    event.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top
      }, 2500, 'easeInOutQuad');
  }); 
  </script>

Code by. All Source
Edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload  Parallax Scrol Text Simple  

Memasang Kode Parallax Transition
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  * Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 

<style class="Mys2010-styles">
body {
  margin: 0;
  padding: 0; 
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  background-attachment: fixed;
  background-size: cover;
height:30:px;
}
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}
#simple {
}    
header {
  text-align: center;
  background-color: rgba(113, 0, 112, 0.6);
  color: white;
}
header .container {
  padding-top: 100px;
  padding-bottom: 50px;
}
header img {
  display: block;
  margin: 0 auto 20px;
}
header .intro-text .name {
  display: block;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2em;
}
header .intro-text .skills {
  font-size: 1.25em;
  font-weight: 300;
}
@media (min-width: 768px) {
  header .container {
    padding-top: 200px;
    padding-bottom: 100px;
  }
  header .intro-text .name {
    font-size: 4.75em;
  }
  header .intro-text .skills {
    font-size: 1.75em;
  }
}
.navbar-custom {
  background: #2C3E50;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}
.navbar-custom a:focus {
  outline: none;
}
.navbar-custom .navbar-brand {
  color: white;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: white;
}
.navbar-custom .navbar-nav {
  letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
  color: white;
}
.navbar-custom .navbar-nav li a:hover {
  color: #677077;
  outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: white;
}
.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #252839;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #252839;
}
.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #252839;
  color: white;
  border-color: #252839;
}
@media (min-width: 768px) {
  .navbar-custom {
    padding:5px 0;
    -webkit-transition: padding 2.3s;
    -moz-transition: padding 2.3s;
    transition: padding 2.3s;
  }
  .navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom.affix {
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
  }
}
section {
  padding: 100px 0;
}
section h2 {
  margin: 0;
  font-size: 3em;
}
section.success {
  background: #18BC9C;
  color: #eee;
}
@media (max-width: 767px) {
  section {
    padding: 75px 0;
  }
  section.first {
    padding-top: 75px;
  }
}
#parallax .parallax-item {
  margin: 0 0 15px;
  right: 0;
}
#parallax .parallax-item .parallax-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
#parallax .parallax-item .parallax-link .caption {
  background: rgba(24, 188, 156, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#parallax .parallax-item .parallax-link .caption:hover {
  opacity: 1;
}
#parallax .parallax-item .parallax-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: #eee;
}
#parallax .parallax-item .parallax-link .caption .caption-content i {
  margin-top: -12px;
}
#parallax .parallax-item .parallax-link .caption .caption-content h3,
#parallax .parallax-item .parallax-link .caption .caption-content h4 {
  margin: 0;
}
#parallax * {
  z-index: 2;
}
@media (min-width: 767px) {
  #parallax .parallax-item {
    margin: 0 0 30px;
  }
}
.floating-label-form-group {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #eeeeee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}
.floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}
.floating-label-form-group:not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {
  color: #18BC9C;
}
form .row:first-child .floating-label-form-group {
  border-top: 1px solid #eeeeee;
}
footer {
  color: white;
}
footer h3 {
  margin-bottom: 30px;
}
footer .footer-above {
  padding-top: 50px;
  background-color: rgba(28, 0, 112, 0.6);
}
footer .footer-col {
  margin-bottom: 75px;
}
footer .footer-below {
  padding: 50px 0;
  background-color: #233140;
}
.parallax-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
  text-align: center;
}
.parallax-modal .modal-content h2 {
  margin: 0;
  font-size: 3em;
}
.parallax-modal .modal-content img {
  margin-bottom: 30px;
}
.parallax-modal .modal-content .item-details {
  margin: 30px 0;
}
.parallax-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.parallax-modal .close-modal:hover {
  opacity: 0.3;
}
.parallax-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #2C3E50;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.parallax-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #2C3E50;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.parallax-modal .modal-backdrop {
  opacity: 0;
  display: none;
}
.M2010 > sosial {}
.intro > h1 {
  margin-top:-3%;
  text-align: center;
  font-size: 5em;
  font-family: agency fb;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 1px 5px 2px #222;
}
.intro > h3 {
  text-align: center;
  color: rgba(5, 5, 5, 0.7);
  text-shadow: 1px 1px 1px #222;
}
ul.intro-social-buttons > li {
  margin-bottom: 20px;
}
.intro-social-buttons {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}
@media(max-width:767px) {
  .intro {
    padding-bottom: 15%;
  }
  .intro > h1 {
    font-size: 3em;
  }
  ul.intro-social-buttons > li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.intro-social-buttons > li:last-child {
    margin-bottom: 0;
  }
  .intro-divider {
    width: 100%;
  }
}
.btn {
  display: inline-block;
  color: #000;
  border: 2px outset rgba(0, 0, 0, 20);
  background: #111;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 20);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  transition: 0.5s;
}
.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;
  }
.btn:hover {
  color: #000;
  background: #f00;
  transform: scale(1.2);
}
 
.klapklip {
  -webkit-animation: fade-in 7.6s linear infinite alternate;
  -moz-animation: fade-in 7.6s linear infinite alternate;
  animation: fade-in 7.6s linear infinite alternate;
}
.klapklip {
  font-family: 'Rye', cursive;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 1px 1px 0px white;
  -webkit-transition: all 0.8s;
  transition: all 0.8s; }
.klapklip  {
  padding: 10px;
  font-size: 25.5em;
  color: #dad; }
  @media all and (min-width: 50em) {
.klapklip  {
      padding: 15px;
      font-size: 1.5em; } }

@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 
#Box Menu{M-2010}
 .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
    .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #888;
      color: #000;
  }

@import url(http://fonts.googleapis.com/css?family=Lato);
body {
 margin:0;
 font-family:"Lato", sans-serif;
}
.para-slide {
 width:100%;
 position:relative;
 text-align:center;
 height:100vh;
margin-top:-55px;
}
.para-slide h1 {
 margin:0;
 padding-top:5%;
 font-size:3.5em;
 color:white;
}
.para-slide h2 {
 margin:0;
 padding-top:5%;
 color:white;
 font-size:2.75em;
}
.para-slide h3 {
 color:white;
 margin-top:0;
}
.para-slide p {
 color:white;
 font-size:1.5em;
 margin:0;
 padding-top:3%;
 padding-bottom:3%;
 max-width:65%;
 margin:auto;
}
.dockposition {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0px;
}
.dockposition .content {
  width: 680px;
  margin: auto;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.2);
  border-radius: 4px 4px 0px 0px;
  position: relative;
}
.dockposition .content .back {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  overflow: hidden;
}
.dockposition .content .back:after {
  content: '';
  background-color: rgba(255, 0, 255, 0.2);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.dockposition .icons {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.dockposition .icons > .icon {
  margin: auto;
  display: inline-block;
  box-sizing: border-box;
  width:60px;
  height: 60px;
  border-radius: 10px;
  background-color: rgba(96, 79, 3, 0.6);
  border: 0px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-style: flat;
          transform-style: flat;
  outline: none;
  cursor: pointer;
}
.dockposition .icons > .icon:focus:not(#downloads) {
 background: rgba(255, 255, 255, 0.5);
  -webkit-animation: bounce 1s;
          animation: bounce 1s;
}
.dockposition .icons > .icon i {
  margin: auto;
  color: red;
  font-size: 36px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.dockposition .icons > .icon .title {
  z-index: 2;
  position: absolute;
  top: -110%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: rgba(220, 97, 192, 0.4);
  padding: 10px 15px;
  border-radius: 4px;
  opacity: 0;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.dockposition .icons > .icon .title:after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top: 10px solid yellow;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(0px);
          transform: translateX(-50%) translateY(0px);
}
.dockposition .icons > .icon:hover .title {
  opacity: 1;
}
.dockposition .icons > .icon#downloads {
  margin-left: 40px;
}
.dockposition .icons > .icon#downloads:before {
  content: '';
  height: 100%;
  position: absolute;
  left: -26px;
  border-left: 1px solid rgba(116, 71, 194, 0.4);
}
.dockposition .icons > .icon#downloads:after {
  position: absolute;
  content: '6';
  width: 30px;
  height: 30px;
  font-size: 14px;
  background: #f22;
  opacity: 0.8;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 100%;
  line-height: 30px;
  left: 70%;
  top: -6px;
}
.dockposition .icons > .icon#downloads:focus, .dockposition .icons > .icon#downloads.demo {
  pointer-events: none;
}
.dockposition .icons > .icon#downloads:focus .download, .dockposition .icons > .icon#downloads.demo .download {
  opacity: 1;
}
.dockposition .icons > .icon#downloads .download {
  position: absolute;
  top: -120%;
  right: 8%;
  width: 350px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 1;
  text-align: right;
}
.dockposition .icons > .icon#downloads .download .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  text-align: right;
  margin: auto;
  padding: 5px 10px;
  background: #dad;
  border-radius: 4px;
  vertical-align: top;
  margin-top: 14px;
}
.dockposition .icons > .icon#downloads .download .icon {
  display: inline-block;
  width: 60px;
  text-align: right;
  vertical-align: top;
}
.dockposition .icons > .icon#downloads .download .icon i {
  color: #dad;
  font-size: 60px;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
  25% {
    -webkit-transform: translateY(-40px) translateX(0.1px);
            transform: translateY(-40px) translateX(0.1px);
  }
  50% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
  75% {
    -webkit-transform: translateY(-20px) translateX(0.1px);
            transform: translateY(-20px) translateX(0.1px);
  }
  100% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
  25% {
    -webkit-transform: translateY(-40px) translateX(0.1px);
            transform: translateY(-40px) translateX(0.1px);
  }
  50% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
  75% {
    -webkit-transform: translateY(-20px) translateX(0.1px);
            transform: translateY(-20px) translateX(0.1px);
  }
  100% {
    -webkit-transform: translateY(0px) translateX(0.1px);
            transform: translateY(0px) translateX(0.1px);
  }
}
</style>

<div class="para-slide" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtbL5XuCPnQA3pCk51taUDyuiyUitcTreeKE_0DinWMg7Z9FeGVanLfEIRXR9cUUeLfhBgNYCmcr0ktFXO6p2JTKlS-xiKePvyHFBVc5-1kQltGSiiLQJjpinEXVSQQJouc658FpO1dQ/s1600/Wallp-M2010s.jpg) center no-repeat;background-size: cover;background-attachment:fixed;">
 <h1></h1>
<span style="font-family:Courier;">
<h1>&#10070;</h1></span>
</div> 
<font face="agency fb"size="6" color="yellow">
 <div class="dockposition">
  <div class="content">
    <div class="back">
</div>
    <div class="icons">
  <div class="icon" tabindex="1"> 
  <a rel="nofollow" rel="noreferrer"href="https://Link Judul"style="text-decoration:none"target="_blank"title="Visit Liknks"class="hover-box btn-lg">
<i class="fa fa-link"style="font-size:30px;color:808"> </i> </a></i>
        <div class="title">Links</div>
      </div>
      <div class="icon" tabindex="1"> 
  <a rel="nofollow" rel="noreferrer"href="https://Link Judul"style="text-decoration:none"title="Get Ful Code"class="hover-box btn-lg">
<i class="fa fa-download"style="font-size:30px;color:808"></i> </a></i>
        <div class="title">Download</div>
      </div>
      <div class="icon" tabindex="1"> 
  <a rel="nofollow" rel="noreferrer"href="https://Link Judul"style="text-decoration:none"target="_blank"title="M-2010"class="hover-box btn-lg">
 <i class="fa fa-edit"style="font-size:30px;color:808"> </i> </a></i>
        <div class="title">Editors</div>
      </div>       
           </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
</font>
 <header> 
<div align="center" style="margin-top:10px">  
 <div class="intro-text"> 
            <span class="name">
<div class="klapklip"> PARALLAX</div>
      </div></span>  
 <p class="lead text-center"> 
<a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"style="text-decoration:none"target="_blank"title="M-2010"class="btn btn-default btn-lg">
<span class="fa fa-google-plus-official"style="font-size:18px;color:silver">&nbsp;</span>Google-Plus</a> 
    
     <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:silver">&nbsp;</span>Pinterest</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:silver">&nbsp;</span>Facebook</a> 

<a rel="nofollow" rel="noreferrer"href="https://www.freecodecamp.com/signin"style="text-decoration:none"target="_blank"title="freecodecamp"class="btn btn-default btn-lg">
<span class="fa fa-free-code-camp" style="font-size:18px;color:silver">&nbsp;</span>Codecamp</a> 
    </p> 
            <hr class="star-light">
            <span class="skills"><h2>PARALLAX TRANSITION </h2></span>
<h3>Terimakasih Sudah Mendownload File yang saya bagikan untuk belajar mendesain weblogs<br> 
Jika terjadi  kesalahan   mohon bantuannya untuk memberikan masukan  baik saran maupun kritik<br>
  melalui alamat email : <a href="http://sule-entertainment.blogspot.co.id/2017/05/email.html"target="_blank" title=" myscript2010s@gmail.com"><span style="color:blue;font-size:11pt"> M-2010 </a>  hingga dapat mengkoreksi 
dan membangun blog yang bermanfaat 
<span style="color:blue;font-size:11pt">@ 2017</font></a></p>    
<hr><br> 
      </div>
      </div>
    </div>
          </div>
        </div>
      </div>
    </div>
   </header>

<section id="parallax">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
<font size="7"color="#333"face="agency fb">Let's share <br>Website design knowledge sharing for everyone</font>
<h4><i class="fa fa-crosshairs" style="font-size:48px;color:red"> </i></h4>
          <hr class="star-primary">
        </div>
      </div> 
      <div class="row">                    
       <!-- simple-2 Teks -->
<div id="simple2" class="pad-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">        
<!-- simple - Menu Awal -->
   
<!-- simple - Menu kode items 1-->
    <div class="row">      
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
<!-- simple - Menu kode items 2-->
    <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
<!-- simple - Menu kode items 3-->
    <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
<!-- simple - Menu kode items 4-->
    <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
<h2 class="panel-title">
Judul <a href="http://Link Judul"style="text-decoration:none"target="_blank"title="M-2010">
<span style="color:red;"> Links</a> Demo</h2>
           </div>
           <div class="panel-body lead">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Cd3AY25vs8Yf2AYs2dmACK_qwyTOPcohRbx5E_7lW80srIQiTzQfE_BLnjdNWfyl8kiS3uTD0pps68GzReAkh13SRGwp9PxEFC30rs5xO8Y27BWKmahaglA7op0lgTOrURM0cJo44T0/s1600/Tutorial-M2010.jpg"/>
           </div>
        </div>
      </div>
<!--Off The End -->
  </section>         
        <div class="col-lg-8 col-lg-offset-2 text-center">
        </div>
      </div>
    </div>
  </section>
<!--footer Gradient AP --> 
  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">             
          </div>
        </div>
      </div>
    </div>
  </footer>

<div align="center">
</div>
</div>
 <header2></header2>
  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Source code  </h3>
            <p>Supported by. W3School
              <br>bootstrap, codepen and all Sources</p>
          </div>
          <div class="footer-col col-md-4">
            <h3>Developers</h3>             
<p>Powered by <a href="https://www.blogger.com/about/?r=1-null_user"style="text-decoration:none"target="_blank" title="Mari Belajar"><span style="color:green;font-size:11pt"> blogger</a> com <br>beautiful blog, It’s easy and free.</p</a>          
             </li>
            </ul>
          </div>
          <div class="footer-col col-md-4">
            <h3>Designed by</h3>             
                <p>Beginners create blogs
              <br>Myscript2010 Cibeber Cimahi</p>
            </a>              
          </div>
        </div>
      </div>
    </div>
    <div class="footer-below">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
<p>W3school <a href="https://www.w3schools.com"style="text-decoration:none"target="_blank" title="Mari Belajar">
<span style="color:green;font-size:11pt"> Tutor </a> Html Css 
| Editor <a href="https://blog.codepen.io/documentation"style="text-decoration:none"target="_blank" title="Mari Belajar"><span style="color:green;font-size:11pt"> View  </a> Codepen
| Bootstrap <a href="http://getbootstrap.com/getting-started"style="text-decoration:none"target="_blank" title="Mari Belajar"><span style="color:green;font-size:11pt"> Getting  </a> Started</p>
          </div>
        </div>
      </div>
    </div>
  </footer>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
 <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Ubuntu'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
</body>
</html>

Code by. All Source
Edited by. Mys2010 On Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload  Parallax Transition