"SIMPLE LIGHT JUMBOTRON CAROUSEL WITH BUTTON IN THE MIDDLE"
Bootstrap 3.3.0 Snippet by SyawaluddinAmin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!-- Template by Syawaluddin Amin, S.Kom --> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="data:image/png;base64,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" /> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Syawaluddin Amin, S.Kom</title> </head> <body> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Logo and responsive toggle --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <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="https://harrypotter-images.blogspot.com/" target="_blank"> <img src="http://2.bp.blogspot.com/-ZGIp53ZwC-A/V64Sb3d21iI/AAAAAAAADWE/eYs4Kte43IE-kzYEgVxWie-fCmuFFje3wCK4B/s1600/header.png" width="55%" style="margin-top: -4.5%;"> </a> </div> <!-- Navbar links - Left menu --> <div class="collapse navbar-collapse" id="navbar"> <!-- <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> </ul> --> <!-- Right Menu --> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="https://pangeran-games.blogspot.com/" target="_blank">Home</a> </li> <li> <a href="https://4-mensfashion.blogspot.com/" target="_blank">Layanan</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <div class="jumbotron feature"> <div class="container"> <div id="feature-carousel" class="carousel slide" data-ride="carousel"> <!-- <ol class="carousel-indicators"> <li data-target="#feature-carousel" data-slide-to="0" class="active"></li> <li data-target="#feature-carousel" data-slide-to="1"></li> <li data-target="#feature-carousel" data-slide-to="2"></li> </ol> --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h2>Selamat datang di website ini.</h2> </div> <div class="item"> <h2>Silahkan masuk untuk menikmati layanan.</h2> </div> <div class="item"> <h2>Selamat menikmati hari anda.</h2> </div> </div> <center> <div class="btn-masuk"> <a href="http://pangeran-it.blogspot.com/" class="btn btn-default" target="_blank">MASUK</a> </div> </center> </div> </div> </div> <!-- Content --> <div class="container"> </div> <!-- /.container --> <div class="footer"> <div class="small-print"> <div class="container"> <p><a href="https://futball-pro.blogspot.com/" target="_blank">Syarat & Ketentuan</a> | <a href="https://thefunnymeme.blogspot.com/" target="_blank">Kebijakan Privasi</a> | <a href="https://99animefans.blogspot.co.id/" target="_blank">Hubungi Kami</a></p> <p>Copyright © 2017 - <a href="https://twitter.com/asyaddien" target="_blank">Syawaluddin Amin, S.Kom</a> - Allright Reserved</p> </div> </div> </div> </body> </html>
body { padding-top: 50px; color: #959595; } h1, h2, h3, h4, h5, h6 { color: black; } .feature { background: #FFFFFF; color: black; } #feature-carousel { min-height: 250px; } .article-intro { margin-bottom: 25px; } .footer-blurb { padding: 30px 0; background-color: yellowgreen; color: black; } .footer-blurb-item { padding: 30px; } .small-print { background-color: #fff; } .feature, .page-intro, .article-intro, .footer-blurb, .small-print { text-align: center; } .navbar-inverse { background: #FFFFFF; border-color: #FFFFFF; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { color: #FFFFFF; background: #48569f; } .navbar-inverse .navbar-nav>li>a { color: #48569f; } .navbar-inverse .navbar-nav>li>a:hover { color: #eb9605; } .navbar-inverse .navbar-nav>li>a:focus { color: #eb9605; } .jumbotron { height: 78vh; } .carousel-inner { margin-top: 15%; } .footer { height: 9vh; }

Related: See More

BLK• Design System
Hexa shape button
Simple Vertical timeline
Simple white navbar

Questions / Comments: