Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Untitled"
Bootstrap 4.1.1 Snippet by
FANKY
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
84
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" href="img/ayang.jpg"> <meta name="description" content="welcome to my website:)"> <meta property="og:image" content="img/ayang.jpg" > <title>Moch Yayan Juan Alvredo XD.</title> <link rel="icon" href="img/ayang.jpeg"> <link href='https://use.fontawesome.com/releases/v5.11.2/css/all.css' rel='stylesheet'> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-blue fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="img/trans.png" alt="icon logo" width="40" height="40" /> </a> <button id="change" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <div id="navbar-hamburger"> <i class="fas fa-align-center"></i> </div> <div id="navbar-close" class="d-none"> <i class="fas fa-times"></i> </div> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li><hr class="dropdown-divider"></li> <li class="nav-item"> <a class="nav-link" href="index.html">dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">tentang saya</a> </li> <li class="nav-item"> <a class="nav-link" href="#skill">kemampuan</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Buy Script Hacking <span> </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="https://licensi.yayanxd.my.id">Script Facebook</a></li> </ul> </li> </ul> </div> </div> </nav> <section id="home"> <div class="welcome text-center"> <h4>Selamat datang</h4> <h6>Ini adalah halaman utama website saya</h6> </div> <div class="text-center"> <a id="play" href="#" class="btn bg-orange btn-sm bx-s text-white"><i class="far fa-play-circle text-dark"></i> play music</a> <a id="pause" href="#" class="btn bg-orange btn-sm bx-s text-white"><i class="far fa-pause-circle text-dark"></i> pause music</a> </div> </section> <section> <div class="container mt-4"> <div class="row justify-content-center dikt"> <div class="col-90 col-md-6 ps" id="about"> <div class="card bx"> <div class="card-header"> <h5 class="card-title text-uppercase">tentang saya</h5> </div> <div class="card-body border-0"> <div class="text-center"> <img class="avat" src="img/ayang.jpeg" alt="Ayang:3" /> <h6 class="fnt-m">Moch Yayan Juan Alvredo XD.</h6> <h6 class="kecil">saya seorang <span id="who"></span></h6> </div> <div class="mt-4 mb-4 text-center"> <i>Haters Make Me Famous</i> </div> </div> <div class="text-center justify-content-center mb-4"> <a href="https://www.facebook.com/KM39453" target="_blank" class="bt btn btn-primary btn-sm"><i class="fab fa-facebook-f"></i></a> <a href="https://www.instagram.com/yayanxd_" target="_blank" class="bt btn btn-danger btn-sm"><i class="fab fa-instagram"></i></a> <a href="https://wa.me/6285603036683" target="_blank" class="bt btn btn-success btn-sm"><i class="fab fa-whatsapp"></i></a> <a href="https://github.com/Yayan-XD" target="_blank" class="bt btn btn-dark btn-sm"><i class="fab fa-github"></i></a> </div> </div> </div> <div class="col-90 col-md-6 ps" id="skill"> <div class="card bx"> <div class="card-header"> <h5 class="card-title text-uppercase">skill kemampuan saya</h5> </div> <div class="card-body text-uppercase"> <div class="pd"> <b class="bh">html</b> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">55%</div> </div> </div> <div class="pd"> <b class="bh">javascript</b> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div> </div> <div class="pd"> <b class="bh">php</b> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> </div> <div class="pd"> <b class="bh">css</b> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> </div> <div class="pd"> <b class="bh">python</b> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 98%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">98%</div> </div> </div> </div> </div> </div> </div> </div> </section> <audio id="audio" controls hidden> <source src="lagu/floor.mp3" type="audio/mpeg"> </audio> <footer class="mt-4 text-center text-white"> copyright © <script>document.write(new Date().getFullYear());</script> - developed by YayanXD </footer> <button id="click" onclick="scrollUp()"><i class="fas fa-arrow-up"></i></button> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/typed.min.js"></script> <script src="js/scroll.js"></script> <script type="text/javascript" charset="utf-8"> var typed3 = new Typed('#who', { strings: ['developer', 'gamers', 'designer', 'anime lovers', "programmer"], typeSpeed: 60, backSpeed: 70, smartBackspace: true, loop: true }); var pla = document.getElementById("play"); var paus = document.getElementById("pause"); var audio = document.getElementById("audio"); pla.addEventListener("click", function (){ audio.play(); }); paus.addEventListener("click", function (){ audio.pause(); }); </script> <script> $(function() { $('#change').click(function() { $('#navbar-hamburger').toggleClass('d-none'); $('#navbar-close').toggleClass('d-none'); }); }); </script> </body> </html>
Related:
See More
Free Template
Black Dashboard React
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76