API tools faq
paste
Advertisement
sriyanto

template1

sriyanto
Aug 5th, 2021
204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  10.   <style>
  11.     /* Remove the navbar's default margin-bottom and rounded borders */
  12.     .navbar {
  13.       margin-bottom: 0;
  14.       border-radius: 0;
  15.     }
  16.    
  17.     /* Add a gray background color and some padding to the footer */
  18.     footer {
  19.       background-color: #f2f2f2;
  20.       padding: 25px;
  21.     }
  22.    
  23.   .carousel-inner img {
  24.       width: 100%; /* Set width to 100% */
  25.       margin: auto;
  26.       min-height:200px;
  27.   }
  28.  
  29.   /* Hide the carousel text when the screen is less than 600 pixels wide */
  30.   @media (max-width: 600px) {
  31.     .carousel-caption {
  32.       display: none;
  33.     }
  34.   }
  35.   </style>
  36. </head>
  37. <body>
  38.  
  39. <nav class="navbar navbar-inverse">
  40.   <div class="container-fluid">
  41.     <div class="navbar-header">
  42.       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  43.         <span class="icon-bar"></span>
  44.         <span class="icon-bar"></span>
  45.         <span class="icon-bar"></span>                        
  46.       </button>
  47.       <a class="navbar-brand" href="#">Logo</a>
  48.     </div>
  49.     <div class="collapse navbar-collapse" id="myNavbar">
  50.       <ul class="nav navbar-nav">
  51.         <li class="active"><a href="#">Home</a></li>
  52.         <li><a href="#">About</a></li>
  53.         <li><a href="#">Projects</a></li>
  54.         <li><a href="#">Contact</a></li>
  55.       </ul>
  56.       <ul class="nav navbar-nav navbar-right">
  57.         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  58.       </ul>
  59.     </div>
  60.   </div>
  61. </nav>
  62.  
  63. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  64.     <!-- Indicators -->
  65.     <ol class="carousel-indicators">
  66.       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  67.       <li data-target="#myCarousel" data-slide-to="1"></li>
  68.     </ol>
  69.  
  70.     <!-- Wrapper for slides -->
  71.     <div class="carousel-inner" role="listbox">
  72.       <div class="item active">
  73.         <img src="https://placehold.it/1200x400?text=IMAGE" alt="Image">
  74.         <div class="carousel-caption">
  75.           <h3>Sell $</h3>
  76.           <p>Money Money.</p>
  77.         </div>      
  78.       </div>
  79.  
  80.       <div class="item">
  81.         <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
  82.         <div class="carousel-caption">
  83.           <h3>More Sell $</h3>
  84.           <p>Lorem ipsum...</p>
  85.         </div>      
  86.       </div>
  87.     </div>
  88.  
  89.     <!-- Left and right controls -->
  90.     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  91.       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  92.       <span class="sr-only">Previous</span>
  93.     </a>
  94.     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  95.       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  96.       <span class="sr-only">Next</span>
  97.     </a>
  98. </div>
  99.  
  100. <div class="container text-center">    
  101.   <h3>What We Do</h3><br>
  102.   <div class="row">
  103.     <div class="col-sm-4">
  104.       <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
  105.       <p>Current Project</p>
  106.     </div>
  107.     <div class="col-sm-4">
  108.       <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
  109.       <p>Project 2</p>    
  110.     </div>
  111.     <div class="col-sm-4">
  112.       <div class="well">
  113.        <p>Some text..</p>
  114.       </div>
  115.       <div class="well">
  116.        <p>Some text..</p>
  117.       </div>
  118.     </div>
  119.   </div>
  120. </div><br>
  121.  
  122. <footer class="container-fluid text-center">
  123.   <p>Footer Text</p>
  124. </footer>
  125.  
  126. </body>
  127. </html>
  128.  
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!