Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Real Madrid Official Teams</title>
- <link rel="shortcut icon" href="logo.png"/>
- <!--Botstrap-->
- <!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <!-- Optional theme -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
- <!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- <link rel="stylesheet" href="carousel.js" rel="stylesheet">
- <link rel="stylesheet" href="css/bootstrapValidator.css"/>
- <script src="js/jquery-1.12.0.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- <script type="text/javascript" src="js/bootstrapValidator.js"></script>
- <script>
- $(document).ready(function(){
- $('[data-toggle="popover"]').popover();
- });
- </script>
- <script>
- $(document).ready(function() {
- $('#contactForm').bootstrapValidator({
- container: '#messages',
- feedbackIcons: {
- valid: 'glyphicon glyphicon-ok',
- invalid: 'glyphicon glyphicon-remove',
- validating: 'glyphicon glyphicon-refresh'
- },
- fields: {
- fullName: {
- validators: {
- notEmpty: {
- message: 'The full name is required and cannot be empty'
- },
- stringLength: {
- min: 6,
- max: 30,
- message: 'The username must be more than 6 and less than 30 characters long'
- },
- }}
- }
- });
- });
- </script>
- <style>
- #i1{
- width: 22em;
- }
- #i2{
- width: 5em;
- float: left;
- }
- nav{
- background-color: #00ffff;
- z-index: 9999;
- position: fixed;
- width: 100%;
- height: 4em;
- }
- .nav{
- margin-left: 40%;
- margin-top: 0.5em;
- }
- .container{
- padding-top: 5em;
- }
- .nah{
- float: right;
- margin-top: 0.5em;
- margin-right: 1em;
- }
- .lah{
- z-index: 99999999;
- position: absolute;
- margin:15em 20em 20em 25em;
- text-align: center;
- color: white
- }
- .container {
- background: #509;
- width:100%;
- }
- .container:before,
- .container:after,
- .row:before,
- .row:after {
- content:"";
- display:table;
- }
- .container:after,
- .row:after {
- clear:both;
- }
- .row {
- clear: both;
- margin: 10px 0 10px 0;
- }
- .col3 {
- width: 300px;
- float: right;
- }
- .col9 {
- width: 820px;
- float:left;
- }
- .col3, .col9 {
- background: #fff;
- height: 30px;
- line-height: 30px;
- margin: 0 10px 0 10px;
- padding: 0;
- text-align: center;
- font-family: Broadway;
- }
- </style>
- </head>
- <body>
- <nav>
- <!-- Badges -->
- <ul class="nav nav-pills" role="tablist">
- <li role="presentation"><a href="bootstrap.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home | </a></li>
- <li role="presentation"><a href="#tengah">History | </a></li>
- <li role="presentation"><a href="#bawah">Line up</a></li>
- </ul>
- </nav>
- <div class="container">
- <div class="row">
- <div class="col9">Real Madrid</div>
- <div class="col3">Club Football</div>
- </div>
- <hr>
- <div class="kan">
- <!-- Carousel -->
- <div id="carousel-example-generic" class="carousel slide kan" data-ride="carousel">
- <!-- Indicators -->
- <ol class="carousel-indicators">
- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
- <li data-target="#carousel-example-generic" data-slide-to="2"></li>
- </ol>
- <!-- Wrapper for slides -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="1.jpg" alt="gambar1">
- <div class="carousel-caption">
- <!-- Accordion -->
- <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
- Look at Our Team
- </a>
- </div>
- </div>
- <div class="item">
- <img src="2.jpg" alt="gambar2">
- <div class="carousel-caption">
- <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
- Look at Our Team
- </a>
- </div>
- </div>
- <div class="item">
- <img src="3.jpg" alt="gambar3">
- <div class="carousel-caption">
- <!-- Accordion -->
- <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
- Look at Our Team
- </a>
- </div>
- </div>
- </div>
- <!-- Controls -->
- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
- <span class="icon-prev"></span>
- </a>
- <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
- <span class="icon-next"></span>
- </a>
- </div>
- </div>
- <br><br>
- <div class="container collapse" id="collapseExample">
- <div id="tengah">
- <!-- GRID (layout 2 kolom) -->
- <div class="row" id="row">
- <div class="col-md-8">
- <!-- RESPONSIVE -->
- <h2>Try Responsive</h2>
- <img src="me.jpg" alt="..." class="visible-xs-block" id="i1"><br> <!-- Hidden Browser -->
- <img src="cr.jpg" alt="..." class="hidden-xs" id="i1"> <!-- Hidden Smartphone -->
- </div>
- <div class="col-md-4 ">
- <!-- IMAGE CIRCLE -->
- <img src="logo.png" alt="..." class="img-circle" id="i2">
- <pre>Real Madrid Club de Fútbol, commonly known as Real Madrid, or simply as Real outside Spain frontiers, is a professional football club based in Madrid, Spain. Wikipedia
- Arena/Stadium: Santiago Bernabéu Stadium
- Manager: Zinedine Zidane
- Location: Madrid, Spain
- Customer service: +34 902 32 18 09
- Leagues: La Liga, UEFA Champions League, Copa del Rey
- Nicknames: Los Vikingos (The Vikings), Madrid Football Club, Los Blancos (The Whites), Los Merengues (The Meringues)</pre>
- </div>
- <div>Try Popover</div><br>
- <div class="button">
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Hiii!!.">
- Say hai
- </button>
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Hiii, nice to meet you.">
- Respon it
- </button>
- </div>
- <hr>
- </div>
- <br><br><br><br><br>
- <div id="bawah">
- <!-- PANEL -->
- <div class="panel panel-info">
- <!-- Default panel contents -->
- <div class="panel-heading">Real Madrid Teams 2017 line up</div>
- <ul class="list-group">
- <li class="list-group-item">Keylor Navas</li>
- <li class="list-group-item">Dani Carvajal</li>
- <li class="list-group-item">Sergio Ramos</li>
- <li class="list-group-item">Raphael Varaner</li>
- <li class="list-group-item">Marcelo</li>
- <li class="list-group-item">Luca Modric</li>
- <li class="list-group-item">toni Kroos</li>
- <li class="list-group-item">Casemairo</li>
- <li class="list-group-item">Cristiano Ronaldo</li>
- <li class="list-group-item">Gareth Bale</li>
- <li class="list-group-item">Karim Benzema</li>
- <li class="list-group-item"></li>
- </ul>
- </div>
- </div>
- </div>
- <form id="contactForm" method="post" class="form-horizontal">
- <div class="form-group">
- <!-- FORM -->
- <label class="col-md-3 control-label">Suggestion?</label>
- <input type="text" class="form-control" name="fullName" placeholder="Suggestion" />
- </div>
- </div>
- </form>
- <footer><marquee><h1> Copyright © <strong>RealMadrid C.f</strong></h1></marquee></footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement