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 template, yang tersedia pada sumber berikut ini : Blank Template edit background warna sesuai keinginan dan 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 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
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"> 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"> 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"> 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"> 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>
* If you want to directly copy and paste you canDownload Personal Portfolio