Advertisement
Hipnotyzer

Responsive html site using bootstrap 3

Aug 22nd, 2014
246
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.28 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--My contact us button not working even my social media drop-down navigation not working-->
  4.     <head lang='en'>
  5.         <title></title>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport" content="width=divice-width ,initial-scale=1">
  8.         <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  9.         <link rel="stylesheet" type="text/css" href="main.css">
  10.     </head>
  11.     <body>
  12.         <div class="navbar navbar-inverse navbar-static-top">
  13.             <div class="container">
  14.                 <a href="#" class="navbar-brand">Tech info</a>
  15.                 <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
  16.                     <span class="icon-bar"></span>
  17.                     <span class="icon-bar"></span>
  18.                     <span class="icon-bar"></span>
  19.                 </button>
  20.                 <div class="collapse navbar-collapse navHeaderCollapse">
  21.                     <ul class="nav navbar-nav navbar-right">
  22.                         <li class="active"><a href="#">Home</a></li>
  23.                         <li><a href="#">Blog</a></li>
  24.                         <li class="dropdown">
  25.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media<b class="caret"></b></a>
  26.                             <ul class="dropdown-menu">
  27.                                 <li><a href="#">Twitter</a></li>
  28.                                 <li><a href="#">Facebook</a></li>
  29.                                 <li><a href="#">Google plus</a></li>
  30.                             </ul>
  31.                         </li>
  32.                         <li><a href="#">About</a></li>
  33.                         <li><a href="#Contact" data-toggle="modal">Contact Us</a></li>
  34.                    
  35.                     </ul>
  36.                 </div>
  37.             </div>
  38.         </div>
  39.            
  40.            
  41.            
  42.             <div class="container">
  43.                 <div class="jumbotron">
  44.                     <center><h1>Hello World !</h1>
  45.                     <p>The Liber Eliensis ("Book of Ely") is a 12th-century English chronicle and history, written in Latin. Composed in three books, it was written at Ely Abbey on the island of Ely in the fenlands of eastern Cambridgeshire. </p>
  46.                     <a class="btn btn-default">Watch Now !</a>
  47.                     <a class="btn btn-info">Tweet it</a>
  48.                     </center>
  49.                 </div>
  50.            
  51.             </div>
  52.            
  53.             <div class="container">
  54.                 <div class="row">
  55.                     <div class="col-md-3">
  56.                         <h3><a href="#">Wikipedia</h3></a>
  57.                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  58.                         <a class="btn btn-success">Read more</a>
  59.                     </div>
  60.                    
  61.                    
  62.                     <div class="col-md-3">
  63.                         <h3><a href="#">Wikipedia</h3></a>
  64.                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  65.                         <a class="btn btn-success">Read more</a>
  66.                     </div>
  67.                    
  68.                    
  69.                     <div class="col-md-3">
  70.                         <h3><a href="#">Wikipedia</h3></a>
  71.                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  72.                         <a class="btn btn-success">Read more</a>
  73.                     </div>
  74.                    
  75.                    
  76.                     <div class="col-md-3">
  77.                         <h3><a href="#">Wikipedia</h3></a>
  78.                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  79.                         <a class="btn btn-success">Read more</a>
  80.                     </div><br/>
  81.                 </div>
  82.             </div>
  83.            
  84.            
  85.            
  86.             <div class="navbar navbar-default navbar-static-bottom">
  87.                 <div class="container">
  88.                     <p class="navbar-text pull-left">Site build by mask &copy</p>
  89.                     <a class="navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a>
  90.                 </div>
  91.             </div>
  92.            
  93.            
  94.             <div class="modal fade">
  95.                 <div class="modal-dialog">
  96.                     <div class="modal-content">
  97.                         <div class="modal-header">
  98.                             <p>Contact Tech info</p>
  99.                         </div>
  100.                         <div class="modal-body">
  101.                             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  102.                         </div>
  103.                         <div class="modal-footer">
  104.                             <a class="btn btn-default" data-dismiss="modal">close</a>
  105.                             <a class="btn btn-primary" data-dismiss="modal">close</a>
  106.                            
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.            
  112.            
  113.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  114.         <script src="js/bootstrap.js"></script>
  115.     </body>
  116.  
  117. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement