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.
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
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>❖</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"> </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"> </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"> </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"> </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>
If you want to directly copy and paste you canDownload Parallax Transition
