Team:IIT Madras/Templates/modern

From 2013.igem.org

(Difference between revisions)
Line 31: Line 31:
     </style>
     </style>
 +
<div class="container">
 +
      <div class="header">
 +
        <ul class="nav nav-pills pull-right">
 +
          <li class="active"><a href="#">Home</a></li>
 +
          <li><a href="#">About</a></li>
 +
          <li><a href="#">Contact</a></li>
 +
        </ul>
 +
        <h3 class="text-muted">Project name</h3>
 +
      </div>
-
<div class="navbar navbar-default navbar-fixed-top">
+
      <div class="jumbotron">
-
      <div class="container">
+
        <h1>Jumbotron heading</h1>
-
         <div class="navbar-header">
+
         <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
        <p><a class="btn btn-lg btn-success" href="#">Sign up today</a></p>
-
            <span class="icon-bar"></span>
+
      </div>
-
            <span class="icon-bar"></span>
+
 
-
            <span class="icon-bar"></span>
+
      <div class="row marketing">
-
           </button>
+
        <div class="col-lg-6">
-
           <a class="navbar-brand" href="#">Project name</a>
+
          <h4>Subheading</h4>
 +
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 +
 
 +
          <h4>Subheading</h4>
 +
           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
 +
 
 +
           <h4>Subheading</h4>
 +
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 +
        </div>
 +
 
 +
        <div class="col-lg-6">
 +
          <h4>Subheading</h4>
 +
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 +
 
 +
          <h4>Subheading</h4>
 +
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
 +
 
 +
          <h4>Subheading</h4>
 +
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
         </div>
         </div>
-
        <div class="navbar-collapse collapse">
 
-
          <ul class="nav navbar-nav">
 
-
            <li class="active"><a href="#">Home</a></li>
 
-
            <li><a href="#about">About</a></li>
 
-
            <li><a href="#contact">Contact</a></li>
 
-
            <li class="dropdown">
 
-
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 
-
              <ul class="dropdown-menu">
 
-
                <li><a href="#">Action</a></li>
 
-
                <li><a href="#">Another action</a></li>
 
-
                <li><a href="#">Something else here</a></li>
 
-
                <li class="divider"></li>
 
-
                <li class="dropdown-header">Nav header</li>
 
-
                <li><a href="#">Separated link</a></li>
 
-
                <li><a href="#">One more separated link</a></li>
 
-
              </ul>
 
-
            </li>
 
-
          </ul>
 
-
          <ul class="nav navbar-nav navbar-right">
 
-
            <li><a href="../navbar/">Default</a></li>
 
-
            <li><a href="../navbar-static-top/">Static top</a></li>
 
-
            <li class="active"><a href="./">Fixed top</a></li>
 
-
          </ul>
 
-
        </div><!--/.nav-collapse -->
 
       </div>
       </div>
 +
 +
      <div class="footer">
 +
        <p>© Company 2013</p>
 +
      </div>
 +
     </div>
     </div>
</html>
</html>

Revision as of 17:01, 20 September 2013

Project name

Jumbotron heading

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Sign up today

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

Subheading

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Subheading

Maecenas sed diam eget risus varius blandit sit amet non magna.

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

Subheading

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Subheading

Maecenas sed diam eget risus varius blandit sit amet non magna.