Advertisement
Guest User

Untitled

a guest
Apr 10th, 2018
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.75 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <!-- Required meta tags -->
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8.  
  9.   <!-- Bootstrap CSS -->
  10.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  11.  
  12. <style type="text/css">
  13.   /* navbar */
  14. .navbar-default {
  15.     background-color: #F8F8F8;
  16.     border-color: #E7E7E7;
  17. }
  18.  
  19. .navbar {
  20.     background-color: #F8F8F8;
  21.     border-color: #E7E7E7;
  22. }
  23.  
  24. </style>
  25.  
  26.  
  27.   <title>Hello, world!</title>
  28. </head>
  29. <body>
  30.  
  31.    <!-- Navigation -->
  32.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  33.       <div class="container" >
  34.         <a class="navbar-brand js-scroll-trigger" href="#page-top" >Start Bootstrap</a>
  35.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  36.           <span class="navbar-toggler-icon"></span>
  37.         </button>
  38.         <div class="collapse navbar-collapse" id="navbarResponsive">
  39.           <ul class="navbar-nav ml-auto">
  40.             <li class="nav-item">
  41.               <a class="nav-link js-scroll-trigger" href="#about">About</a>
  42.             </li>
  43.             <li class="nav-item">
  44.               <a class="nav-link js-scroll-trigger" href="#services">Services</a>
  45.             </li>
  46.             <li class="nav-item">
  47.               <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
  48.             </li>
  49.           </ul>
  50.         </div>
  51.       </div>
  52.     </nav>
  53.  
  54.   <div class="jumbotron jumbotron-fluid bg-info text-white text-center" style="background: #aaa">
  55.     <div class="container">
  56.       <h1 class="display-1">Welcome to the Dojo</h1>
  57.       <p class="lead">A guiding light for the less enlightened...</p>
  58.     </div>
  59.   </div>
  60.  
  61.   <div class="container text-muted">
  62.  
  63.  
  64.     <!-- cards -->
  65.     <div class="row">
  66.       <div class="col-md-6 col-lg-3">
  67.         <div class="card">
  68.           <img src="img/node.png" class="card-img-top img-fluid" />
  69.           <div class="card-body text-center">
  70.             <h3 class="card-title">Node.js Training</h3>
  71.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  72.             <a href="#" class="btn btn-primary">Go somewhere</a>
  73.           </div>
  74.         </div>
  75.       </div>
  76.  
  77.       <div class="col-md-6 col-lg-3">
  78.         <div class="card">
  79.           <img src="img/react.png" class="card-img-top img-fluid" />
  80.           <div class="card-body text-center">
  81.             <h3 class="card-title">Node.js Training</h3>
  82.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  83.             <a href="#" class="btn btn-primary">Go somewhere</a>
  84.           </div>
  85.         </div>
  86.       </div>
  87.  
  88.       <div class="col-md-6 col-lg-3">
  89.         <div class="card">
  90.           <img src="img/mongo.png" class="card-img-top img-fluid" />
  91.           <div class="card-body text-center">
  92.             <h3 class="card-title">Node.js Training</h3>
  93.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  94.             <a href="#" class="btn btn-primary">Go somewhere</a>
  95.           </div>
  96.         </div>
  97.       </div>
  98.  
  99.       <div class="col-md-6 col-lg-3">
  100.         <div class="card">
  101.           <img src="img/webpack.png" class="card-img-top img-fluid" />
  102.           <div class="card-body text-center">
  103.             <h3 class="card-title">Node.js Training</h3>
  104.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  105.             <a href="#" class="btn btn-primary">Go somewhere</a>
  106.           </div>
  107.         </div>
  108.       </div>
  109.     </div>
  110.  
  111.     <h2 class="display-4 text-center py-5 my-4">Meet the speakers</h2>
  112.  
  113.     <nav class="nav justify-content-center nav-pills flex-column flex-md-row">
  114.       <a class="nav-link active" href="#ninja" data-toggle="tab">The Net Ninja</a>
  115.       <a class="nav-link" href="#wizard" data-toggle="tab">The Web Wizard</a>
  116.       <a class="nav-link" href="#captain" data-toggle="tab">Captain Code</a>
  117.       <a class="nav-link" href="#avenger" data-toggle="tab">Angular Avenger</a>
  118.     </nav>
  119.  
  120.     <div class="tab-content py-5">
  121.       <div class="tab-pane active" id="ninja">
  122.         <h3>The Net Ninja</h3>
  123.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  124.       </div>
  125.  
  126.       <div class="tab-pane" id="wizard">
  127.         <h3>The Web Wizard</h3>
  128.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  129.       </div>
  130.  
  131.     <div class="tab-pane" id="captain">
  132.         <h3>Captain Code</h3>
  133.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  134.       </div>
  135.  
  136.     <div class="tab-pane" id="avenger">
  137.         <h3>Angular Avenger</h3>
  138.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  139.       </div>
  140.     </div>
  141.     </div>
  142.  
  143.    
  144.  
  145.   </div>
  146.  
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.   <!-- Optional JavaScript -->
  154.   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  155.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  156.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  157.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  158. </body>
  159. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement