API tools faq
paste
Advertisement
Guest User

Bootstrap

a guest
Apr 25th, 2017
187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Real Madrid Official Teams</title>
  6.  <link rel="shortcut icon" href="logo.png"/>
  7.     <!--Botstrap-->
  8.         <!-- Latest compiled and minified CSS -->
  9.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  10.  
  11.         <!-- Optional theme -->
  12.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  13.  
  14.         <!-- Latest compiled and minified JavaScript -->
  15.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  16.         <link rel="stylesheet" href="carousel.js" rel="stylesheet">
  17.         <link rel="stylesheet" href="css/bootstrapValidator.css"/>
  18.         <script src="js/jquery-1.12.0.min.js"></script>
  19.         <script src="js/bootstrap.min.js"></script>
  20.         <script type="text/javascript" src="js/bootstrapValidator.js"></script>
  21.         <script>
  22.         $(document).ready(function(){
  23.             $('[data-toggle="popover"]').popover();  
  24.         });
  25.         </script>
  26.         <script>
  27.         $(document).ready(function() {
  28.             $('#contactForm').bootstrapValidator({
  29.                 container: '#messages',
  30.                 feedbackIcons: {
  31.                     valid: 'glyphicon glyphicon-ok',
  32.                     invalid: 'glyphicon glyphicon-remove',
  33.                     validating: 'glyphicon glyphicon-refresh'
  34.                 },
  35.                 fields: {
  36.                     fullName: {
  37.                         validators: {
  38.                             notEmpty: {
  39.                                 message: 'The full name is required and cannot be empty'
  40.                             },
  41.                               stringLength: {
  42.                                 min: 6,
  43.                                 max: 30,
  44.                                 message: 'The username must be more than 6 and less than 30 characters long'
  45.                             },
  46.                    
  47.                     }}
  48.                 }
  49.             });
  50.         });
  51.         </script>
  52.  
  53.         <style>
  54.             #i1{
  55.                 width: 22em;
  56.             }
  57.             #i2{
  58.                 width: 5em;
  59.                 float: left;
  60.             }
  61.             nav{
  62.                 background-color: #00ffff;
  63.                 z-index: 9999;
  64.                 position: fixed;
  65.                 width: 100%;
  66.                 height: 4em;
  67.             }
  68.             .nav{
  69.                 margin-left: 40%;
  70.                 margin-top: 0.5em;
  71.             }
  72.             .container{
  73.                 padding-top: 5em;
  74.             }
  75.             .nah{
  76.                 float: right;
  77.                 margin-top: 0.5em;
  78.                 margin-right: 1em;
  79.             }
  80.            
  81.             .lah{
  82.                 z-index: 99999999;
  83.                 position: absolute;
  84.                 margin:15em 20em 20em 25em;
  85.                 text-align: center;
  86.                 color: white
  87.                 }
  88. .container {
  89.     background: #509;
  90.     width:100%;
  91. }
  92. .container:before,
  93. .container:after,
  94. .row:before,
  95. .row:after {
  96.     content:"";
  97.     display:table;
  98. }
  99. .container:after,
  100. .row:after {
  101.     clear:both;
  102. }
  103. .row {
  104.     clear: both;
  105.     margin: 10px 0 10px 0;
  106. }
  107. .col3 {
  108.     width: 300px;
  109.     float: right;
  110. }
  111. .col9 {
  112.     width: 820px;
  113.     float:left;
  114. }
  115. .col3, .col9 {
  116.     background: #fff;
  117.     height: 30px;
  118.     line-height: 30px;
  119.     margin: 0 10px 0 10px;
  120.     padding: 0;
  121.     text-align: center;
  122.     font-family: Broadway;
  123. }
  124.         </style>
  125. </head>
  126. <body>
  127.  
  128.     <nav>
  129.     <!-- Badges -->
  130.         <ul class="nav nav-pills" role="tablist">
  131.           <li role="presentation"><a href="bootstrap.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home | </a></li>
  132.           <li role="presentation"><a href="#tengah">History | </a></li>
  133.           <li role="presentation"><a href="#bawah">Line up</a></li>
  134.         </ul>
  135.     </nav>
  136.     <div class="container">
  137.             <div class="row">
  138.                 <div class="col9">Real Madrid</div>
  139.                 <div class="col3">Club Football</div>
  140.                
  141.             </div>
  142.  
  143.     <hr>
  144. <div class="kan">
  145.  
  146. <!-- Carousel -->
  147.     <div id="carousel-example-generic" class="carousel slide kan" data-ride="carousel">
  148.       <!-- Indicators -->
  149.       <ol class="carousel-indicators">
  150.         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  151.         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  152.         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  153.       </ol>
  154.  
  155.       <!-- Wrapper for slides -->
  156.       <div class="carousel-inner" role="listbox">
  157.         <div class="item active">
  158.           <img src="1.jpg" alt="gambar1">
  159.           <div class="carousel-caption">
  160.           <!-- Accordion -->
  161.             <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  162.               Look at Our Team
  163.             </a>
  164.           </div>
  165.         </div>
  166.         <div class="item">
  167.           <img src="2.jpg" alt="gambar2">
  168.           <div class="carousel-caption">
  169.             <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  170.               Look at Our Team
  171.             </a>
  172.           </div>
  173.         </div>
  174.          <div class="item">
  175.           <img src="3.jpg" alt="gambar3">
  176.           <div class="carousel-caption">
  177.           <!-- Accordion -->
  178.             <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  179.               Look at Our Team
  180.             </a>
  181.           </div>
  182.         </div>
  183.       </div>
  184.  
  185.       <!-- Controls -->
  186.       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  187.      
  188.         <span class="icon-prev"></span>
  189.       </a>
  190.       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  191.        
  192.         <span class="icon-next"></span>
  193.       </a>
  194.       </div>
  195. </div>  
  196.  
  197.   <br><br>
  198.  
  199.     <div class="container collapse" id="collapseExample">
  200.     <div id="tengah">
  201.  
  202.  
  203.     <!-- GRID (layout 2 kolom) -->
  204.         <div class="row" id="row">
  205.           <div class="col-md-8">
  206.          
  207.             <!-- RESPONSIVE -->
  208.              <h2>Try Responsive</h2>
  209.               <img src="me.jpg" alt="..." class="visible-xs-block" id="i1"><br> <!-- Hidden Browser -->
  210.               <img src="cr.jpg" alt="..." class="hidden-xs" id="i1">  <!-- Hidden Smartphone -->
  211.           </div>
  212.           <div class="col-md-4 ">
  213.           <!-- IMAGE CIRCLE -->
  214.           <img src="logo.png" alt="..." class="img-circle" id="i2">
  215.           <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
  216. Arena/Stadium: Santiago Bernabéu Stadium
  217. Manager: Zinedine Zidane
  218. Location: Madrid, Spain
  219. Customer service: +34 902 32 18 09
  220. Leagues: La Liga, UEFA Champions League, Copa del Rey
  221. Nicknames: Los Vikingos (The Vikings), Madrid Football Club, Los Blancos (The Whites), Los Merengues (The Meringues)</pre>
  222.         </div>
  223. <div>Try Popover</div><br>
  224.    <div class="button">
  225.     <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Hiii!!.">
  226.     Say hai
  227.     </button>
  228.     <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Hiii, nice to meet you.">
  229.     Respon it
  230.     </button>
  231.    </div>
  232.     <hr>
  233.  
  234.        
  235.         </div>
  236.         <br><br><br><br><br>
  237.         <div id="bawah">
  238.         <!-- PANEL -->
  239.         <div class="panel panel-info">
  240.           <!-- Default panel contents -->
  241.           <div class="panel-heading">Real Madrid Teams 2017 line up</div>
  242.           <ul class="list-group">
  243.             <li class="list-group-item">Keylor Navas</li>
  244.             <li class="list-group-item">Dani Carvajal</li>
  245.             <li class="list-group-item">Sergio Ramos</li>
  246.             <li class="list-group-item">Raphael Varaner</li>
  247.             <li class="list-group-item">Marcelo</li>
  248.             <li class="list-group-item">Luca Modric</li>
  249.             <li class="list-group-item">toni Kroos</li>
  250.             <li class="list-group-item">Casemairo</li>
  251.             <li class="list-group-item">Cristiano Ronaldo</li>
  252.             <li class="list-group-item">Gareth Bale</li>
  253.             <li class="list-group-item">Karim Benzema</li>
  254.             <li class="list-group-item"></li>
  255.           </ul>
  256.         </div>
  257.         </div>
  258. </div>
  259. <form id="contactForm" method="post" class="form-horizontal">
  260.                 <div class="form-group">
  261.                 <!-- FORM -->
  262.                     <label class="col-md-3 control-label">Suggestion?</label>
  263.                         <input type="text" class="form-control" name="fullName" placeholder="Suggestion" />
  264.  
  265.                     </div>
  266.                 </div>
  267.              
  268.             </form>
  269.  
  270.             <footer><marquee><h1>  Copyright &copy; <strong>RealMadrid C.f</strong></h1></marquee></footer>
  271. </body>
  272. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!