Memasang kode Personal Portfolio
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<SKILL JS > 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<style class="M2010-styles">      
/* animated text */
a:hover,a:focus{text-decoration:none;}
.svg-wrapper {
  position: relative;
  top: 35%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 320px;
  max-height:60px;
  cursor:default;
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 10px;
  fill: transparent;
  stroke: #FF5733;  
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: serif;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #000;
  top: -48px;
  position: relative;
  text-align:center;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}/*end*/
body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 15px;
  line-height: 1.42857143;
  color: #2c3e50;
  background-color: #ffffff;
}
header img {
  border-radius: 50%;
  margin: 30px 0 10px;
  max-width: 100%;
  height: auto;
  width: 200px;
}
.navbar {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
.navbar-default {
  background-color: #2c3e50;
  border:0;
  box-shadow:0;
  border-radius:0;
}
.navbar-default .navbar-brand {
  color: #ffffff;
  font-size: 1.5em;
}
.navbar-default .navbar-brand:hover {
  color: #18BC9C;
}
.navbar-default .navbar-nav>li>a {
  color: #ffffff;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #18BC9C;
}
.navbar-fixed-top {
  padding: 20px;
  z-index: 99;
}
header {
  text-align: center;
  background: #0DA3BC;
  color: white;
  padding: 90px 0 40px 0;
}
header .intro-text .name {
  font-size: 3em;
}
header .intro-text .name {
  display: block;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;    
}

header .intro-text .skills {
  font-size: 1.75em;
  font-weight: 900; 
}
section h2 {    
  font-size: 2.5em;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}

section {
  padding: 30px 0 30px 0;    
}
section.success {
  background: #0DA3BC;
  color: white;
  padding-bottom: 50px;
}
p {
  font-size: 20px;
  margin-bottom: 50px;
  text-align: left;
}
.thumbnail>img {
    display: block;
    max-width: 100%;
    height: 250px;
}
.btn-lg {
  width: 200px;  
}
.fa {
  font-weight: bold;  
}
footer .footer-above {
  padding-top: 50px;
  background-color: #2c3e50;
}
footer {
  color: white;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
  color: #18bc9c;
  background: white;
  border: solid 2px white;
}
.btn-social {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 2px solid white;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 45px;
  color: white;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
/*Button Footer*/
body {
  background-color: #7f7f7f;
  font-family: 'Coda Caption', sans-serif;  
}
footer {
  top: 0px;
  position: relative;
}
#contact .form-control {
  color: #2a459e;
  border: 1px solid rgba(42, 69, 158, 0.51);
}
#contact .input-group-addon {
  background-color: rgba(42, 69, 158, 0.19);
  border: 1px solid rgba(42, 69, 158, 0.51);
}
footer .col-md-3 {
  padding: 20px 100px 20px 0px;
}
footer a.navbar-brand {
  width: 100%;
  text-shadow: 0px 5px 14px rgba(0, 0, 0, .5);
}
footer h6 {
  font-family: 'Josefin Slab', serif;
  color: #fff;
  font-size: 16px;
  text-shadow: 0px 6px 6px rgba(0, 0, 0, .5);
}
footer .list-inline {
  padding: 30px 0 0 100px;
}
footer .list-inline li {
  border: 2px solid #fff;
  padding: 5px 10px;
  width: 100px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .075);
  box-shadow: 3px 9px 20px 4px rgba(0, 0, 0, .25);
}
footer .list-inline li:nth-child(1) {
  margin: 0 10px 0 0px;
}
footer .list-inline li:nth-child(2),
footer .list-inline li:nth-child(3) {
  margin: 0 10px 0 10px;
}
footer .list-inline li:nth-child(4) {
  margin: 0 0px 0 10px;
}
footer .list-inline a p {
  font-family: 'Josefin Slab', serif;
  color: #fff;
  margin: 0;
  font-size: 16px;
}
footer .list-inline a {
  text-decoration: none;
  color: #fff;
  font-size: 24px;
  transition: .5s;
  display: block;
}
footer .list-inline a,
footer .list-inline a p,
footer .list-inline a i {
  /* Webkit for Chrome and Safari */
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  /* Webkit for Mozila Firefox */
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}
footer .list-inline a:hover p {
  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(0, 0);
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(0, 0);
}
footer .list-inline a:hover i {
  /* Webkit for Chrome and Safari */
  transform: scale(2.7) translate(10.5px, -5.1px);
  transform: scale(2.7) translate(10.5px, -5.1px);
  /* Webkit for Mozila Firefox */
  transform: scale(2.7) translate(10.5px, -5.1px);
  /* Webkit for IE( Version: 11, 10 ) */
  transform: scale(2.7) translate(10.5px, -5.1px);
} 
footer .col-md-3 {
    padding: 20px 30px 20px 0px;
}
  footer a.navbar-brand {
    width: 100%;
    text-shadow: 0px 5px 14px rgba(0, 0, 0, .5);
    text-align: center;
    font-size: 18px;
    padding: 0;
    height: auto;
}
 footer h6 {
    text-align: center !important;
    font-size: 12px;
  }
}
hr { box-shadow: 0px 5px 14px rgba(44, 0, 66, .8);
    display: block;
    background:#868; 
    height:1px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width:1px;
}
/* Tab footer hover */
.footerBox3 {
  padding-left: 40px;
  margin: 20px 0;
  position: relative;
}
.footerBox3 .footer {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.4em;
  color: #ffa726;
}
.footerTabs .nav1 a {
  position: relative;
  padding: 15px 20px 20px 60px;
  color: #51556a;
  background: #f3f8fa;
  display: block;
  margin-bottom: 10px;
  -moz-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  transition: all linear 0.3s;
} 
.footerTabs .nav1 a .footer {
  position: absolute;
  left: 20px;
  top: 25px;
  font-size: 1.5em;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footerTabs .nav1 a h6 {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: .85em;
  -moz-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  transition: all linear 0.3s;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #23344b;
  line-height: 1.4;
}
.footerTabs .nav1 a p {
  margin-bottom: 0;
  font-size: .85em;
}
.footerTabs .nav1 a.active,
.footerTabs .nav1 a:hover {
  background: #ffa726;
  color: #fff;
}
.footerTabs .nav1 a.active,
.footerTabs .nav1 a:hover {
  background: #ffa726;
  color: #fff;
}
/*Menu Hover Transisi*/
.box{width:300px; height:250px; border:2px solid #6f6bec; border-radius:2px; float:left; margin:36px 40px;  }
.box img{width:300px; height:250px;}
.box .overlay{width:300px; height:250px; background:#fff; margin:-250px 0px 0px 0px; opacity:0.5; }
.box a{padding:5px 7px; border:1px solid #000; text-decoration:none; font-family:sans-serif; font-size:14px; margin:-140px 0px 0px 15px; display:inline-block; opacity:0; transition:all 0.5s ease-in-out;cursor: pointer;/* z-index: 10000; */position: absolute;}
.box .overlay:hover{opacity:0.1; transition:all 0.5s ease-in-out; width:300px; margin-left:50px; float:right; }
.box:hover{box-shadow:0px 0px 10px #6A6A6A; border:2px solid #ff0;transition:all 0.5s ease-in-out;}
.box:hover a{opacity:1; background:#FFFFFF; color:#000000; margin:-40px 0px 0px 15px;  border-radius:1px; }
.box a:hover{border:1px solid #00DFDF;transition:all 0.5s ease-in-out;   }

/* price Animation*/
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
 position: relative;
 display:inline;
 display: inline-block;
 float: left;
 margin-right: 2%;
 margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: rgba(102, 82, 125, 0.9); padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;color:darkblue;  
margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body id="page-top" class="index">
  <!--  begin navigation  -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
<a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/quote-share.html"target="_blank"title="Quote share">
<i class="fa fa-quote-right"style="font-size:23px;color:#b6b716"></i>
<font face="agency fb"size="5" color="#a4daf4"> quote</a></li></font>
      </div>
      <div style="height: 1px;" class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">          
          <li class="page-scroll">
<li><a rel="nofollow" rel="noreferrer"href="https://Link Download"title="Download">
<i class="fa fa-download "style="font-size:21px;color:#1992ce"></i></a></li>
          </li>
          <li class="page-scroll">
<li><a rel="nofollow" rel="noreferrer"href="mailto:myscript2010s@gmail.com"target="_blank"title="Let's Share">
<i class="fa fa-envelope "style="font-size:20px;color:#1992ce"></i></a></li>
          </li>
           <li class="page-scroll">
<li><a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/don-williams-i-would-like-to-see-you.html"target="_blank"title="My Music"> 
<i class="fa fa-music "style="font-size:22px;color:#1992ce"></i></a></li>
          </li>
          <li class="page-scroll">
<li><a class="navbar-brand" href="http://sule-tema.blogspot.co.id/2017/06/ada-apa-dengan-web.html"target="_blank"title="Behind the future">
<i class="fa fa-user-md "style="font-size:22px;color:#1992ce"></i></a></li>   
          </li>
          <li class="page-scroll">
<li><a class="navbar-brand" href="http://sule-hiburan.blogspot.co.id/2017/04/connie-cover.html"target="_blank"title="Music Cover"> 
<i class="fa fa-headphones "style="font-size:22px;color:#1992ce"></i></a></li>
          </li>
          <li class="page-scroll">
<a class="navbar-brand" href="http://sample-mys2010.blogspot.co.id/2017/07/personal-portfolio.html"target="_blank"title="Visit Link">
<i class="fa fa-link"style="font-size:22px;color:#1992ce"></i></a></li>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!--   end navigation -->
  <!--   begin header -->
  <header id="home">
    <div class="container text-center">
      <div class="row">
        <div class="col-md-12">
          <img src="https://sites.google.com/site/sule62001/sule2001code/Mylogo-M2010.png"alt="Logo">          
<div id="header" class="container-fluid">
      <div id="welcome">
        <div class="svg-wrapper">
          <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
          <rect class="shape" height="60" width="320" />
<div class="text"> M-2010 a Developer </div>
          </svg>
        </div>
      </div>
    </div>
  </div>
 </div>
</div>
  </header>
<!--   end header -->
<!--   begin portfolio -->
<section id="portfolio">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2><font face="agency fb"size="6" color="#990099">skill i learn</h2></font>
        <hr>       
    </div>
  </div>
<!--   Menu 1 -->
  <div class="container">
 <div class="main">
     <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zK9eVCELSbexWCj-TzAx83cPdQKJrAaWOVBjkIDHs1s_0gQ8wJYrFzOywQXcDgvKAg2H5WZueMYdw87YtVSEN0x_VEXS_1hhGAEXlCdEvOTjdHI4slfgppCVa2HuKHV47HfTPrRFlYw3/s1600/D5-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
   </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xUA9YXoPkrLKFIkTrPHZDCCcaU3nQHHALOxAVvhvy35I3lnzIUg6pTN7VnZQWV2dUzjJx3bOec9KAL0vNFkVaUpIOfdxZWSZbE5tCruPzUlcPkwv9Gr6zM-gYkJ6CaG6BAQV6oWT8cfD/s1600/Laptop1b-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOr_6bLtCZIPEnF3sXFJaLcuEhOh_7-RrTfbB13bLBr5tJYkRBowMOUiaLpiKWytYNPaomdEP8vyGxxdzFJqR4O8T2rWnwpqiS75uEN-u1YWY1G9Rou-QghTzBGPYavc_twzH5YQCjsUI/s1600/Laptop1c-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
<div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdvRUVUHuGQObfTx-RL_t4A-7izjvaKJqRgua4A1kz850DB9uOxr_pArEYMqLjgobj80lUYe3iDdd5LDaMPBRJHb-qGbscWXmcpp4d29zOxRIhiDlk5hzAx0RknWmm_vA-x9zf-Bbr0sp/s1600/Laptop1a-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
   </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bffrNVroliCS-1D3tYK5wi_0xppbPD97boeiDz49U6D7eAq7zFQhhsYZnlKlijKeXPiPegaksXbatyrkaXVPN4NmHZOAF-VMPc14E0X9jK25_hRI36c4KxJoGA1Oskomd2hZCp94jYb8/s1600/Laptop1d-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioxGvKWFMVhArhhD-fRTARAw_G6yStNEIJFxnXI9JWYXzoNu_8bAePDtAqrv_S-KVoQem6M7BRsqeU9ZjpsdclMuTQ1UHfOCKTlRwz2npxMsMNUmMpO9NcVhnmusicbf6mVItW3vT9Xt_/s1600/Laptop2c-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
   </div>
 </div>
</div>

<div style="background-color:#0b415b;" id="contact-image">
<div class="row"></div>
  <div align="center">??</div>
<div id="other" class="container-fluid bg-5 no-padding ">
  <h2 class="text-center">
<font face="agency fb"size="6" color="#990099">
we are creative</font><br/><small>Get start your next awesome project</small></h2>
<font face="arial"size="6" color="#eee">
<div align="center">
<div class="wrapper">
     <div class="counter col_fourth">
      <i class="fa fa-cutlery"style="font-size:28px;color:#D580FE"></i> 
      <h2 class="timer count-title count-number" data-to="15500" data-speed="20000"></h2>
      <h3 class="count-text "> <span style="color:#F00;">The price of food </p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-glass"style="font-size:28px;color:#FEBFEF"></i> 
      <h2 class="timer count-title count-number" data-to="1500" data-speed="20000"></h2>
      <h3 class="count-text "> <span style="color:#F00;">The price of drinks</p>
    </div>

    <div class="counter col_fourth">
      <i class="fa fa-coffee"style="font-size:28px;color:#D580FE"></i> 
      <h2 class="timer count-title count-number" data-to="2500" data-speed="20000"></h2>
      <h3 class="count-text "> <span style="color:#F00;">The Price of coffee</p>
    </div>

      <div class="counter col_fourth end">
      <i class="fa fa-sort-amount-desc"style="font-size:28px;color:#FEBFEF"></i> 
      <h2 class="timer count-title count-number" data-to="19500" data-speed="20000"></h2>
      <h3 class="count-text "> <span style="color:#F00;">Total price amount</p>
    </div>
</div> </font>
  </div>
     </div>
          </div>
             </div>    
        </div>
                   </div>
                     </div> 
<!--   Menu 2 -->
<div style="background-color: rgba(157, 0, 255, 0.3);" id="contact-image">
<div class="container">
 <div class="main">
     <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zK9eVCELSbexWCj-TzAx83cPdQKJrAaWOVBjkIDHs1s_0gQ8wJYrFzOywQXcDgvKAg2H5WZueMYdw87YtVSEN0x_VEXS_1hhGAEXlCdEvOTjdHI4slfgppCVa2HuKHV47HfTPrRFlYw3/s1600/D5-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
   </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xUA9YXoPkrLKFIkTrPHZDCCcaU3nQHHALOxAVvhvy35I3lnzIUg6pTN7VnZQWV2dUzjJx3bOec9KAL0vNFkVaUpIOfdxZWSZbE5tCruPzUlcPkwv9Gr6zM-gYkJ6CaG6BAQV6oWT8cfD/s1600/Laptop1b-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOr_6bLtCZIPEnF3sXFJaLcuEhOh_7-RrTfbB13bLBr5tJYkRBowMOUiaLpiKWytYNPaomdEP8vyGxxdzFJqR4O8T2rWnwpqiS75uEN-u1YWY1G9Rou-QghTzBGPYavc_twzH5YQCjsUI/s1600/Laptop1c-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
<div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdvRUVUHuGQObfTx-RL_t4A-7izjvaKJqRgua4A1kz850DB9uOxr_pArEYMqLjgobj80lUYe3iDdd5LDaMPBRJHb-qGbscWXmcpp4d29zOxRIhiDlk5hzAx0RknWmm_vA-x9zf-Bbr0sp/s1600/Laptop1a-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
   </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bffrNVroliCS-1D3tYK5wi_0xppbPD97boeiDz49U6D7eAq7zFQhhsYZnlKlijKeXPiPegaksXbatyrkaXVPN4NmHZOAF-VMPc14E0X9jK25_hRI36c4KxJoGA1Oskomd2hZCp94jYb8/s1600/Laptop1d-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
  <div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioxGvKWFMVhArhhD-fRTARAw_G6yStNEIJFxnXI9JWYXzoNu_8bAePDtAqrv_S-KVoQem6M7BRsqeU9ZjpsdclMuTQ1UHfOCKTlRwz2npxMsMNUmMpO9NcVhnmusicbf6mVItW3vT9Xt_/s1600/Laptop2c-M2010.jpg" />
    <div class="overlay">
    </div>
   <a class="more" href="http://Link Judul"title="Mari Belajar">More reading</a>
  </div>
   </div>
 </div>
</div>
 
<!--   begin about -->
<section id="about" class="success text-center">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2><font face="agency fb"size="8" color="#eee">Thank-you note</h2>
         <hr style="height:1px">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-2">
      <p>From all sources that provide products <br>
All we consider to be supporters <br>
to help with lessons How to design a good weblogs <br> and correct,  
by reaching the code provided by the weblogs service providers  
in the form of a script that consists of CSS HTML.  
Our gratitude for the support of all sources.<br>
By. M2010 Cibeber Cimahi Beginners create blogs <br></p>
    </div>
    <div class="col-md-4">
<p><span style="color:#a4daf4;">Terimakasih Sudah Mendownload <br>File yang saya bagikan <br>
untuk belajar mendesain weblogs<br> Jika terjadi kesalahan mohon bantuannya <br>untuk memberikan masukan baik saran maupun kritik<br>
 melalui alamat email : <a href="http://sule-tema.blogspot.co.id/2017/07/hubungi-saya.html"target="_blank" title=" myscript2010s@gmail.com"><span style="color:#ff0;font-size:11pt"> M-2010 </a> hingga dapat mengkoreksi <br>
dan membangun blog yang bermanfaat. Ide kreatif @ 2017  </a></p>
 </font>
  </p>
   </font>
    </div>

    <div class="clearfix"></div>
    <div class="soc">
    <div class="col-md-3 col-sm-3 col-xs-2">
      <a rel="nofollow" rel="noreferrer"href="https://github.com/Myscript2010/Editing-Script-2010-2016" target="_blank" class="btn btn-lg btn-success btn-responsive"title="M2010">
        <i class="fa fa-github"style="font-size:14px;color:#444408">&nbsp; GITHUB</i> 
      </a>
    </div>

    <div class="col-md-3 col-sm-3 col-xs-2">
      <a rel="nofollow" rel="noreferrer"href="https://greensock.com/forums/"target="_blank" class="btn btn-lg btn-primary btn-responsive"title="M2010">
        <i class="fa fa-comments-o"style="font-size:14px;color:#e4e51c">&nbsp; FORUMS</i> 
      </a>
    </div>

    <div class="col-md-3 col-sm-3 col-xs-2">
      <a rel="nofollow" rel="noreferrer"href="https://en.gravatar.com/site/login"target="_blank" class="btn btn-lg btn-primary btn-responsive" title="M2010">
        <i class="fa fa-wordpress"style="font-size:14px;color:#e4e51c">&nbsp; GRAVATAR</i> 
      </a>
    </div>

    <div class="col-md-3 col-sm-3 col-xs-2">
      <a rel="nofollow" rel="noreferrer"href="https://codepen.io/Myscript2010" target="_blank" class="btn btn-lg btn-success btn-responsive"title="M2010">
        <i class="fa fa-codepen"style="font-size:14px;color:#444408">&nbsp; CODEPEN</i> 
      </a>
    </div>
  </div>
  </div>
  </div>
</section>
<!--   footer -->
<div style="background-color: rgba(157, 0, 255, 0.3);" id="contact-image">
 <section id="solution">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-12">
        <div class="sectionTitle">
          <p>Let's study</p>
          <p style="color:darkgreen; font-size:30px;">Tutorials <br>From several sources<br></h2>
         <!--Text footer 1-->
        </div>
      </div>
      <div class="col-md-8 col-sm-12">
        <div class="row">
          <div class="col-sm-6">
            <div class="footerBox3">
              <div class="footer"><i class="fa fa-check-square-o"></i></div>
              <h5>Bootstrap Getting</h5>
              <p>An overview of Bootstrap,<br> how to download & use, templates</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="footerBox3">
              <div class="footer"><i class="fa fa-check-square-o"></i></div>
               <h5>Wrap Bootstrap </h5>
              <p>is a marketplace for premium <br>Bootstrap themes and templates</p>
            </div>
          </div>      
         <!--Text footer 2-->
        </div>
      </div>
      <div class="col-md-8 col-sm-12">
        <div class="row">
          <div class="col-sm-6">
            <div class="footerBox3">
              <div class="footer"><i class="fa fa-check-square-o"></i></div>
              <h5>W3school </h5>
              <p>W3.CSS A modern CSS framework<br> for faster and better responsive web </p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="footerBox3">
              <div class="footer"><i class="fa fa-check-square-o"></i></div>
               <h5>Crative Ideas </h5>
              <p>Let's learn to design weblogs  <br>By looking at tutors from all sources</p>
            </div>
          </div> 
 <!--Text footer end--> 
</section> 
 
<section id="tabbed_slider">
  <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ul class="footerTabs nav row  aos-init aos-animate">
        <li data-target="#myCarousel" data-slide-to="0" class="col-md-3 active nav1">
          <a rel="nofollow" rel="noreferrer"href="#skills" class="active">
            <i class="fa fa-folder-open" style="font-size:20px;color:blue"></i>
            <h6>Source Blog tutorial</h6>
            <p>W3school HTML 5<br> Bootstrap Themes<br> Bootstrap Getting Started</p>
          </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="1" class="col-md-3 nav1">
          <a rel="nofollow" rel="noreferrer"href="#mission" class="">
            <i class="fa fa-external-link" style="font-size:20px;color:blue"></i>
            <h6>W3school</h6>
            <p>The language for building web pages, With HTML you can create your own Web site.<br> </p>
          </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="2" class="col-md-3 nav1">
          <a rel="nofollow" rel="noreferrer"href="#values" class="">
            <i class="fa fa-external-link" style="font-size:20px;color:blue"></i>
            <h6>Bootstrap Getting</h6>
            <p>An overview of Bootstrap,<br>how to download and use, <br> Js Version</p>
          </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="3" class="col-md-3 nav1">
          <a rel="nofollow" rel="noreferrer"href="#about" class="">
            <i class="fa fa-external-link" style="font-size:20px;color:blue"></i>
            <h6>Bootstrap Themes</h6>
            <p>Bootstrap is an HTML5 & CSS3 framework designed <br>to help you</p>
          </a>
        </li>
      </ul>
     </div>
   </div>
</div>
</section>
<!--   SKILL -->
<div style="background-color: #0e5172;" id="contact-image">
<section class="skills scroll" id="skills">
        <div class="container">
            <br><br><br>
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="skills-thumb wow bounceIn"data-wow-duration="1.5s" data-wow-delay="0s">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7rgnqi2ZJz3QaFQsO745Q4NKtRCPvZUXm4zgfObK-8oP1IBS6wSjZiBPv8X_vRjdRKZIBOl5e4c1vcBg0xS1VxlsGRe_tMo_98RjU0VBLC6jOdqYftnkOIiGGycDHcwL_n85nXveWbpJE/s1600/Css-M2010.png" alt="Java Script logo" class="img-responsive img-thumbnail center-block">
                         <br>                       
                    </div>
                 </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="skills-thumb wow bounceIn"data-wow-duration="1.5s" data-wow-delay="0.2s">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlT8ypo1wFiyOXNJKo98mmK5nAhA08iNPRcXRcynYuxvvtixg0wNQGvvZXnj-P2Op82S4QsR213txF8zL1kTlJK1KDsbgesbpSI4CS9J3TyYQxw9M6rfREISA5pyrOfggCq5G73Wa6iGq/s1600/Html-M2010.png" alt="HTML logo" class="img-responsive img-thumbnail center-block">
                        <br>                     
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="skills-thumb wow bounceIn"data-wow-duration="1.5s" data-wow-delay="0.4s">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRYFrq7avFtX9mmxaEVfi8x4iYvd33oVAHX51AORY7qtiyYgyb0I22VYNtZQehz3G3X1cg_8xKBf7zH69hibm3FWPtc4a0boN5-ThhARCVrPFMQzSsz5AHTf6aSZnkjz1qg16NSm5fd24/s1600/jquery-M2010s.png" alt="PHP logo" class="img-responsive img-thumbnail center-block">
                        <br> <br>                    
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="skills-thumb wow bounceIn"data-wow-duration="1.5s" data-wow-delay="0.6s">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwq2bNNfDThjkJjxhNln4ygw-jmKAlzcI6-2drIS-C7CzAcgnnXK7uFEQBHT_Ul3eUlH8UBGlqSnLf_uKZa2GeaKXzbporj0nGxnJbY4L9ASixi98UUgwQrLpuy6VY6NnW8u9-XJRic-n/s1600/jquery.png" alt="Web tools logo" class="img-responsive img-thumbnail center-block">
                        <br>                          
                    </div>
                </div>
            </div>
        </div>
    </section>

<!-- begin footer Social-->
<div style="background-color:#7f7f7f;" id="contact-image">
<div id="contact" class="container animation-element bounce-up">
  <div class="container-fluid">
    <div class="row">
      <!--share 1-->
<footer>
<div class="row">
    <div class="col-md-9 col-xs-12">
      <ul class="list-inline social-lists animate">
        <li>
              <a rel="nofollow" rel="noreferrer"href="https://plus.google.com/u/0/+suleman101254379497511200564"target="_blank"title="Let's Share"> 
             <p>Google +</p>
            <i class="fa fa-google-plus-square" aria-hidden="true"></i>
          </a>
        </li>
        <li>
<a rel="nofollow" rel="noreferrer"href="https://id-id.facebook.com/Myscript2010"target="_blank"title="Let's Share"> 
            <p>Facebook</p>
            <i class="fa fa-facebook-square"aria-hidden="true"></i>
          </a>
        </li>
        <li>
          <a rel="nofollow" rel="noreferrer"href="https://twitter.com/myscript2010s"target="_blank"title="Let's Share"> 
            <p>Twitter</p>
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li>
<a rel="nofollow" rel="noreferrer"href="https://www.instagram.com/myscript2010/"target="_blank"title="Let's Share">
            <p>Instagram</p>
         <i class="fa fa-instagram" aria-hidden="true"></i></i>
          </a>
        </li>
      </ul>
    </div>    
</footer>
 <!--footer Social 2-->
<footer>
 <div class="row">
    <div class="col-md-9 col-xs-12">
      <ul class="list-inline social-lists animate">
        <li>
              <a rel="nofollow" rel="noreferrer"href="http://getbootstrap.com"target="_blank"title="Themes"> 
            <p>Bootstrap</p>
            <i class="fa fa-desktop"style="font-size:20px;color:#d8e499;"></i>
          </a>
        </li>
        <li>
 <a rel="nofollow" rel="noreferrer"href="https://www.bootstrapcdn.com/"target="_blank"title="B-V.3.7 Js"> 
            <p>V-3.3.7 Js</p>
            <i class="fa fa-code"style="font-size:20px;color:#d8e499;"></i>
          </a>
        </li>
        <li>
           <a rel="nofollow" rel="noreferrer"href="https://blog.jquery.com/"title="jQuery V3.1.1 ">
            <p>jQuery </p>
            <i class="fa fa-code"style="font-size:20px;color:#d8e499;"></i>
          </a>
        </li>
        <li>
          <a rel="nofollow" rel="noreferrer"href="https://www.w3schools.com/default.asp"target="_blank"title="Tutorial"> 
             <p>W3school</p>
            <i class="fa fa-external-link"style="font-size:20px;color:#d8e499;"></i>
          </a>
        </li>
      </ul>
    </div><br><br>
    <div class="col-md-3 col-xs-12">
<a rel="nofollow" rel="noreferrer"class="navbar-brand text-right"href="http://Link Judul"target="_blank"title="Mari Belajar">M2010</a>
      <h6 class="text-right"> Copyright 2017 Cibeber Cimahi</h6>
    </div>
  </div>
</footer>
<!-- end footer -->
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

<!-- Js Portfolio -->
<script>
    $(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});  
</script>
<!-- skill.Metrika counter 1--> 
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'>
</script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'>
</script>

<!-- skill.Metrika counter 2--> 
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-83360109-1', 'auto');
  ga('send', 'pageview');
</script>

<!-- skill.Metrika counter 3--> 
<script>
$(function(){
    //WOW plugin init
    new WOW().init();
    //parallax effect for banner
    (function() {
        var posY;
        var image = document.getElementById('parallax');;
        function paralax() {
            posY = window.pageYOffset;
            image.style.top = posY * 0.9 + 'px';
        }
        window.addEventListener('scroll', paralax);
    })();
}); 
</script>

<!-- skill.Metrika counter 4--> 
<script type="text/javascript"> 
(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter39321480 = new Ya.Metrika({ id:39321480, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/39321480" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  
<!--price Animation 2-->
<script type="text/javascript">
 (function ($) {
 $.fn.countTo = function (options) {
  options = options || {};
  
  return $(this).each(function () {
   // set options for current element
   var settings = $.extend({}, $.fn.countTo.defaults, {
    from:            $(this).data('from'),
    to:              $(this).data('to'),
    speed:           $(this).data('speed'),
    refreshInterval: $(this).data('refresh-interval'),
    decimals:        $(this).data('decimals')
   }, options);
   
   // how many times to update the value, and how much to increment the value on each update
   var loops = Math.ceil(settings.speed / settings.refreshInterval),
    increment = (settings.to - settings.from) / loops;   
   // references & variables that will change with each update
   var self = this,
    $self = $(this),
    loopCount = 0,
    value = settings.from,
    data = $self.data('countTo') || {};   
   $self.data('countTo', data);   
   // if an existing interval can be found, clear it first
   if (data.interval) {
    clearInterval(data.interval);
   }
   data.interval = setInterval(updateTimer, settings.refreshInterval);   
   // initialize the element with the starting value
   render(value);   
   function updateTimer() {
    value += increment;
    loopCount++;    
    render(value);    
    if (typeof(settings.onUpdate) == 'function') {
     settings.onUpdate.call(self, value);
    }    
    if (loopCount >= loops) {
     // remove the interval
     $self.removeData('countTo');
     clearInterval(data.interval);
     value = settings.to;
     
     if (typeof(settings.onComplete) == 'function') {
      settings.onComplete.call(self, value);
     }
    }
   }   
   function render(value) {
    var formattedValue = settings.formatter.call(self, value, settings);
    $self.html(formattedValue);
   }
  });
 }; 
 $.fn.countTo.defaults = {
  from: 0,               // the number the element should start at
  to: 0,                 // the number the element should end at
  speed: 10000,           // how long it should take to count between the target numbers
  refreshInterval: 100,  // how often the element should be updated
  decimals: 0,           // the number of decimal places to show
  formatter: formatter,  // handler for formatting the value before rendering
  onUpdate: null,        // callback method for every time the element is updated
  onComplete: null       // callback method for when the element finishes updating
 };
 
 function formatter(value, settings) {
  return value.toFixed(settings.decimals);
 }
}(jQuery));
jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
 formatter: function (value, options) {
   return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
 }
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
 var $this = $(this);
 options = $.extend({}, options || {}, $this.data('countToOptions') || {});
 $this.countTo(options);
  }
});
</script>
</body>
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Personal Portfolio

Memasang kode Portfolio Page
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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/meyer-reset/2.0/reset.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<text Graduate>
<link href='https://fonts.googleapis.com/css?family=Graduate|Cabin' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/db9e397ee1.js"></script>
<style class="M2010-styles">
body {
  font-size:100%;
}
h1 {
  font-family:graduate;
}
p {
  font-family:cabin;
}
/*Navigation*/
.nav a{
 color:#fff;
 text-shadow: 3px 3px 6px #222;
}
.navbar{
 background-color:#868;
 border-radius: 0;
 margin-bottom: 0;
 box-shadow: 0px 3px 3px 0px #6a660b;
}
.navbar-brand{
 line-height: 15px;
 padding: 12px;
 color: #fff;
 font-weight: 600;
 text-shadow: 1px 1px 5px #444;
 transition: all 0.3s;
}
.nav>li{
 display: inline-block;
}
.nav>li>a:focus, .nav>li>a:hover, nav li.active a{
  background-color: #dad;
  color: #fff;
}
.navbar {
  background-color: #F3E9E0;
  border: none;
}

.navbar-default .navbar-nav>li>a {
    color: #e2c044;
    font-size: 1.25em;
    font-family: graduate;
}
.title {
  padding-top: 25px;
  padding-bottom: 25px;
}
.top {
  padding-top: 100px;
  background-color: #393E41;
  min-height: 500px;
  color: #e2c044;
  text-align: center; 
  padding-bottom: 100px;
  font-family:graduate;
}
.top H1 {
  font-size: 7em;
}
.aboutme {
  background-color: #e2c044;
  min-height: 350px;
  color: #393e41;
  text-align: center;
}
.aboutme p {
  font-size: 1.75em;
}
.portfolio {
  background-color: #fffcf9;
  text-align: center;
  color: #393e41;
  padding-bottom: 50px;
  margin-right:0;
  margin-left:0;
}
.thumbimg {
  max-height: 180px;
}
.thumbnail {
  text-align: center;
  border: none;
  padding-top:2.5em;
  background-color: #fffcf9;
  color: #393e41;
  border: 2px solid #e2c044;
}
.caption p {
  font-size: 1.5em;
  font-family: cabin;
}
.caption h3 {
  font-family: graduate;
  font-size:2em;
}
.contact {
  background-color: #407899;
  padding-bottom: 100px;
  color: #FFFCF9;
  text-align: center;
} 
 /* COOL NAME EFFECT */
a:hover,a:focus{text-decoration:none;}
.svg-wrapper {
  position: relative;
  top: 35%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 320px;
  max-height:60px;
  cursor:default;
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 10px;
  fill: transparent;  
  stroke: #FF5733;  
  border-bottom: 5px solid yellow;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: vivaldi;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
  text-align:center;
}
.text2 {
  font-family: agency fb;
  font-size: 30px;
  line-height: 32px;
  letter-spacing:2px;
  color: #dad;
  top: -48px;
  position: relative;
  text-align:center;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
} 
.carousel-control.left
{
background: none;
}
.carousel-control.right
{
background: none;
}
.carousel-control
{
position: absolute;
top: 45%;
bottom: 0;
left: 0;
width: 15%;
font-size: auto;
color: #fff;
text-align: center;
opacity: 1;
text-shadow: none;
}
.carousel-control:hover
{
color: #000;
}
.carousel-indicators
{
bottom: -50px;
}
.carousel-indicators li
{
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000\9;
background-color: rgba(0,0,0,0);
border: 1px solid #16a085;
border-radius: 50%;
}
.carousel-indicators .active
{
width: 12px;
height: 12px;
margin: 0;
background-color: #16a085;
}
.carousel-caption
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.4);
}
footer {
   background-color: #F3E9E0;
height:40px;
widt:100%;
}
footer p {
   margin: 0;
   padding: 10px;
   text-align: center;
   color: #993A33;
   font-style: italic;
}
 </style>
<nav class="navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header pull-left">
<a rel="nofollow" rel="noreferrer"class="navbar-brand text-center scroll-top"href="https://Link Judul"title="Get Code"> M2010 <br> <small> a Developer</small></a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav navbar-right pull-right">
<li><a rel="nofollow" rel="noreferrer"href="https://Link Download"title="Get Code">
<i class="fa fa-download fa-2x"></i></a></li>
      
<li><a rel="nofollow" rel="noreferrer"href="mailto:myscript2010s@gmail.com"target="_blank"title="Let's Share">
<i class="fa fa-envelope fa-2x"></i></a></li>

<li><a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/don-williams-i-would-like-to-see-you.html"target="_blank"title="My Music"> 
<i class="fa fa-music fa-1x"></i></a></li>

<li><a class="navbar-brand" href="http://sule-tema.blogspot.co.id/2017/06/ada-apa-dengan-web.html"target="_blank"title="Behind the future">
<i class="fa fa-user-md fa-1x"></i></a></li>

<li><a class="navbar-brand" href="http://sule-hiburan.blogspot.co.id/2017/04/connie-cover.html"target="_blank"title="Music Cover"> 
<i class="fa fa-headphones fa-1x"></i></a></li>
       </ul>
     </div>
   </div>
 </nav> 
<div align="center">     
        <h1>THIS IS A PORTFOLIO</h1>
        <h3>Website design knowledge sharing for everyone</h3>
      </div>
    </div>    
 <!-- Start portfolio Section  -->
    <a class="anchor" id="portfolio-link"></a>
    <div id="portfolio" class="container-fluid">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h1></h1>          
          <div class="container">
            <div class="row">
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i> 
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdvRUVUHuGQObfTx-RL_t4A-7izjvaKJqRgua4A1kz850DB9uOxr_pArEYMqLjgobj80lUYe3iDdd5LDaMPBRJHb-qGbscWXmcpp4d29zOxRIhiDlk5hzAx0RknWmm_vA-x9zf-Bbr0sp/s1600/Laptop1a-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xUA9YXoPkrLKFIkTrPHZDCCcaU3nQHHALOxAVvhvy35I3lnzIUg6pTN7VnZQWV2dUzjJx3bOec9KAL0vNFkVaUpIOfdxZWSZbE5tCruPzUlcPkwv9Gr6zM-gYkJ6CaG6BAQV6oWT8cfD/s1600/Laptop1b-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOr_6bLtCZIPEnF3sXFJaLcuEhOh_7-RrTfbB13bLBr5tJYkRBowMOUiaLpiKWytYNPaomdEP8vyGxxdzFJqR4O8T2rWnwpqiS75uEN-u1YWY1G9Rou-QghTzBGPYavc_twzH5YQCjsUI/s1600/Laptop1c-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>           
            <!-- Menu 2  -->
<div class="row">
 <div class="container">
            <div class="row">
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bffrNVroliCS-1D3tYK5wi_0xppbPD97boeiDz49U6D7eAq7zFQhhsYZnlKlijKeXPiPegaksXbatyrkaXVPN4NmHZOAF-VMPc14E0X9jK25_hRI36c4KxJoGA1Oskomd2hZCp94jYb8/s1600/Laptop1d-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc3ulTd98M2DoPJNHRFo_ZWMI-2k00VGe-YOG6fIbj3gNyrHR1T8cT4c7EWgKdkgP70KPbO1DrMdEZtmWdshuI8Vv6XXp0vBL4QPiRjDAT5s62t9PavUWXnJdSfNjmQ3u2v9ZAKFpA36K/s1600/Laptop1e-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaftVFtt5QgJ-1T4iOY-ZHdr-0X7vl3d1Hzn2ssF23FpQsuMNWtXmdILsgToGHjV2eGiPmRFDdv-clixX6XGHtasl-fs3xmkFUtP82eecnCcxgd3IKi5RzperYyDKtBaWyyB_qm3Abu9QN/s1600/Laptop1f-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
            <div class="row">
               </div>
<!-- myCarouse  -->
<div class="container">
    <!-- Indicators -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides --><br>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh6jzij8On6tQA18Zd-ah8r6vfS0djTQ4OW-7XUNzg9aTRaOqB1krv2cAXeyn0UBYCYXckfiun9coQWyqnpEQASf04SZ3i9Tf2h2s5c9HfshO9HecyawzdAc5-nHaTYEfHq1058Zlz_xVM/s1600/D1-M2010.jpg" alt="Chania">
                <div class="carousel-caption">
                    <h3>SEO </h3>
                    <p>seo search engine optimization </p>
                </div>
            </div>
            <div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMFVZZigWe-HeIgCBaUkULNYp6vjWVH7hwidtsv8Fy2fktoqOMYekaWYYNyb9H7ak_Yv1AGY_dS0KO59x99OGiJwaBKSAN0qcQQ-O5YUVkNlICkUAueiItGT4QZ3sAB2NsikgIU8s2ErZ7/s1600/D3-M2010s.jpg" alt="M2010">
                <div class="carousel-caption">
                    <h3>SEO</h3>
                    <p>Seo Get Started</p>
                </div>
            </div>
            <div class="item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5dYQVdgXK9NBqjB9NdHohZc4Di0aanN_ulZGIgFz-dFZEhPwBK8Yh-xHRKosQhBb9zMo2XorxgSb5IgbjWdrkLPp-pnSYc0RwJ3ZkSxPGndH7uyNL_qElVS9ocCTlGnGd9whFUC2rNTG/s1600/D5-M2010.png" alt="M2010">
                <div class="carousel-caption">
                    <h3>SEO </h3>
                    <p>Seo Social Media</p>
                </div>
            </div>
        </div> 
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="fa fa-angle-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="fa fa-angle-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
    </div>
<!-- Menu 3  -->
<div class="row">
 <div class="container">
            <div class="row">
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCguq4uJ43adv_uPNKQFDcZoC2NyC1xzwSiJgfSbgHvu6fA0DStSKXfrT7Jf92wyHLOEbqU3Lqis4-TgVwxcv_b71Ej4mavc2apUO_F8xNJLe2VJe_CeW6BvsJ71Q9iytmgrJL0BWUwfep/s1600/Laptop2a-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqIqqmJYNZHxEZ5zKhaWF-_wDsiy_987IR4lJJ6a8KLZzV_snfH10CYfaec6jUaM9zrlKf2hR1qoVmoN8IK_YG50PzyejNzWoJvJNfwSKQ-CCYq938VbhLX7jq31duuGmt_POKqgwiyT8U/s1600/Laptop2b-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="thumbnail">
                  <a href="#" target="_blank">
                    <div class="thumbnail-hover text-center">
                      <i class="fa fa-eye fa-3x"></i>
                    </div>
                    <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgioxGvKWFMVhArhhD-fRTARAw_G6yStNEIJFxnXI9JWYXzoNu_8bAePDtAqrv_S-KVoQem6M7BRsqeU9ZjpsdclMuTQ1UHfOCKTlRwz2npxMsMNUmMpO9NcVhnmusicbf6mVItW3vT9Xt_/s1600/Laptop2c-M2010.jpg">
                  </a>
                  <div class="caption">
                    <h3>Your Content</h3>
                    <p>Teks anda disini Teks anda disini Teks anda disini</p>
                  </div>
                </div>
              </div>
            <div class="row">
               </div>
<!-- Map Google --> 
   <div class="wrapper clearfix">
 <div class="container">
<div class="section-mask">
 </div>   
    <div class="contact-head-wrapper">
      <div class="text-center img-sec">
         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.9632376809222!2d107.51730141509522!3d-6.895000795017736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68e5044118a5e1%3A0x644036447f9cf5a4!2sJl.+Raya+Cibeber%2C+Cibeber%2C+Cimahi+Sel.%2C+Kota+Cimahi%2C+Jawa+Barat+40531%2C+Indonesia!5e0!3m2!1sen!2sus!4v1500997183140" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
 </div>
     </div>
         </div>
<!-- Footer  -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Services Section -->
    <section id="services">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                   <h1 class="title">Source tutorial</h3>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4">                                           
                <i class="fa fa-external-link"style="font-size:35px;color:#808"></i>
                    </span>
                <h4 class="service-heading">
                <input type="checkbox" name="vehicle" value="Car" checked="checked">&nbsp; W3school</h4>
                    <h5>W3.CSS A modern CSS framework<br> for faster and better responsive web sites</p>
                </div>

                <div class="col-md-4">                                               
                    <i class="fa fa-external-link"style="font-size:35px;color:#808"></i>
                    </span>
             <h4 class="service-heading">
            <input type="checkbox" name="vehicle" value="Car" checked="checked">&nbsp;  Bootstrap</h4>
                    <h5> is a marketplace for premium <br> Bootstrap themes and templates</p>
                </div>

               <div class="col-md-4">                                               
                    <i class="fa fa-chain"style="font-size:35px;color:#808"></i>
                    </span>
             <h4 class="service-heading">
            <input type="checkbox" name="vehicle" value="Car" checked="checked">&nbsp; Crative Idea</h4>
                    <h5>Let's learn to design weblogs <br> By looking at tutors from all sources</p>
                </div>
                </div>
            </div>
        </div>
    </section>
<!-- Footer end -->
<div class="row portfolio" id="port">
      <div> 
        <h1 class="title">Start from scratch with source</h1>
      </div>
      <div class="row">
        <div class="col-sm-4 col-md-2 col-md-offset-1">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYWz26oLXQnzdUrdnw_MXQ_pjl_BSrghXF9wiGImlFNtXSN0u6rsKbJnE1FMpqzwUGDYJMwIIXb6xI3MERPSqiM4rWb8sffZSNJlYpew8rM1N83YH4Z6R7tkU4MQw2lCsWCw-q9wL5BDJ4/s1600/W3school-M2010.png" alt="Screenshot of Tribute Page" class="thumbimg">
            <div class="caption">
              <h3>W3SCHOOL</h3>
              <p>Tutorials : CSS HTML Javascript Reference <br> The sizes attribute specifies<br>
 the sizes of icons for visual media.</p>
<a href="https://www.w3schools.com/default.asp" class="btn btn-success" role="button"target="_blank"title="W3school">Click to View</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-md-2">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh76kmsuCU_g69HAZ3-v3fbpjo4MSldNdDnPG1YfL7KS8j1SWPReJ-9gGYJuQjGqeDeP328NVUGdlnhsgkKjPu4k8lGNCSXfG-sfKQt-w3H7bA6Bpy4hnvg-GAgE9bidTWleTZy2ykdV6UC/s1600/Bootstrap-M2010.png" alt="Image of Speech Bubble" class="thumbimg">
            <div class="caption">
              <h3>Bootstrap</h3>
              <p>The Bootstrap Blog
News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Jobs. </p>
              <p><a href="http://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/" class="btn btn-success" role="button"target="_blank"title="Bootstrap">Click to View</a></p>
            </div>
          </div>
        </div>
         <div class="col-sm-4 col-md-2">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBQH6rihu7jg86cwPgBeeJm0dy-p2huEHzvUZMxAjYMo0Y7DflCOt3bSY_eikeApWA3tYL2oxVvCVgYEwXwgdRpbwIXM66bB_cWQWGZDOn0oPX9OSg1OPZeK_I78ZuxQJ5m8MHEgJIVS8/s1600/W3C.png" alt="Image of Speech Bubble" class="thumbimg">
            <div class="caption">
              <h3>W3C Validator</h3>
<p>This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. Validate by URI
Validate a document online: </p>
<a href="https://validator.w3.org/" class="btn btn-success" role="button"target="_blank"title="W3C">Click to View</a></p>
            </div>
          </div>
        </div>
         <div class="col-sm-4 col-md-2">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq_1ql6tD5WstSGySYKL0kQ2PMBUgtYxn-7rgd1VQuBteJqRRkzexHe6GYDW2tOAAEv7fIzV_YoJvoJ-vbheZqQSsgJ5TYnQUWGD-gXl5-n5rrBmzYb74UG8uJfzRnrAQrBlkuN0voVTnj/s1600/Wrapbootstrap-M2010.png" alt="Image of Speech Bubble" class="thumbimg">
            <div class="caption">
              <h3>Bootstrap</h3>
              <p>Bootstrap is an HTML & CSS framework designed to help you kickstart the development of webapps and sites. Wrap Bootstrap rock-solid foundation.</p>
<a href="https://wrapbootstrap.com/" class="btn btn-success" role="button"target="_blank"title="WrapBootstrap">Click to View</a></p>
            </div>
          </div>
        </div>
         
        <div class="col-sm-4 col-md-2">
          <div class="thumbnail">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0MokFxWZoxDYVHqeRuGbP__Yff8V1srGVUgAWYEQXq4BUvR-UP_DUIGuCksTeSJpzJjJwGehbcLuAkR6K4D9k0LbRq2Cs5pP30_TkuEhMdmS-UQEdKVDH3Wef-TBNS14QmBSEqccGfD9e/s1600/M2010-M2010.png" alt="Screenshot of Tribute Page" class="thumbimg">
            <div class="caption">
              <h3>M2010</h3>
              <p>A person who is learning how to develop the web properly and correctly<br>Through Tutorials From several sources</p>
<a href="http://Link Judul" class="btn btn-success" role="button"target="_blank"title="Myscript2010">Click to View</a></p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>   
     <footer>
   <h5><br>Copyright 2017 Cibeber Cimahi</p>
</footer>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'>
</script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'>
</script>
<script>
var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});
</script>
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Portfolio Page

Memasang kode Box Menu
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 templateyang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
body {
background-color: #7f7f7f;  
}
.menu-table {
    max-width: 368px;
    margin: 0 auto;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    border-radius: 5px;
}
 .menu-table:hover {
      box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.1);
}
.menu-table:hover>.panel-footer-landing {
    box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-body-landing {
    background: #b2b2b2;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-heading-landing-box {
    background: #7f7f7f !important;
    color: #333 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.controle-header {
    background: #5CB85C !important;
    border: solid 2px #000 !important; 
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-footer {
    background: #dad !important;
    border: solid 2px #000 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-footer>.btn {
    border: solid 1px #7f7f7f !important;
    -webkit-transition:  all .3s ease;
}
.btn-price:hover {
    background-color: rgba(123, 105, 179, 0.4);
    color: #000 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.controle-header>.panel-title-landing {
    color: #808 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-body-landing>.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    color: #808 !important;
    -webkit-transition:  all .3s ease;
}
.panel-heading-landing {
    background: #f7f7f7 !important; 
    padding: 20px !important; 
    border-top-left-radius: 5px !important;  
    border-top-right-radius: 5px !important; 
    border: solid 2px #f00 !important; 
    border-bottom: none !important;
}
.panel-heading-landing-box {
    background: #5CB85C !important; 
    color: #eee !important; 
    font-size: 16px !important; 
    padding: 3px !important; 
    border: solid 2px #323232 !important; 
    border-top: none !important;
}
.panel-title-landing {
    color: #000 !important;
    font-size: 25px;
    font-weight: bold;
}
.panel-body-landing {
    border: solid 2px #f00 !important; 
    border-top: none !important; 
    border-bottom: none !important;
}
.panel-footer-landing {
    border: solid 2px #000 !important; 
    border-bottom-left-radius: 5px !important; 
    border-bottom-right-radius: 5px !important; 
    border-top: none !important;
}
    </style>
<div class="container">
        <div class="row text-center">
            <div class="col-md-12">                
            </div>
            <div class="col-md-12" style="margin-top: 120px;">
                <div class="menu-table"> 
<div class="controle-panel-heading panel-heading panel-heading-landing-box">
   <div class="controle-header panel-heading panel-heading-landing">
                    <div class="panel panel-primary">
                       <div class="panel-heading">
                        <div class="controle-header panel-heading panel-heading-landing">
                            <h1 class="panel-title panel-title-landing">
                               Parallax
                            </h1>
                        </div>
                        <div class="controle-panel-heading panel-heading panel-heading-landing-box">
                           Parallax appearance Scrolling
                        </div>
                        <div class="panel-body panel-body-landing">
                            <table class="table">
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Picture slide</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Mp4 Video</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Animated Gif</td>
                                </tr>
                            </table>
                        </div>
                        <div class="panel-footer panel-footer-landing">
                            <a href="#" class="btn btn-price btn-success btn-lg">CLICK TO VIEW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height()); 
          window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</body>
</html>
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
* If you want to directly copy and paste you canDownload  Box Menu