Team:TAS Taipei/Templates/navigation
From 2014hs.igem.org
(Difference between revisions)
Xiaoyangkao2 (Talk | contribs) (Created page with " <div class="row"> <div class="col-lg-12 full"> <header style='height:95px;margin-top:20px;'> <div class="row"> <div class="col-lg-3" style="text-align: right;"> ...") |
Xiaoyangkao2 (Talk | contribs) |
||
Line 1: | Line 1: | ||
<div class="row"> | <div class="row"> | ||
<div class="col-lg-12 full"> | <div class="col-lg-12 full"> | ||
- | + | <header style='height:95px;margin-top:20px;'> | |
<div class="row"> | <div class="row"> | ||
<div class="col-lg-3" style="text-align: right;"> | <div class="col-lg-3" style="text-align: right;"> | ||
Line 7: | Line 7: | ||
</div> | </div> | ||
<div class="col-lg-6" style='text-align:center;'> | <div class="col-lg-6" style='text-align:center;'> | ||
- | <h2 style="font-family:Railway;letter-spacing:10px;color: white; font-size: 65px; margin-top: 0; margin-bottom: 0;">E-MORTALITY</h2> | + | <a href="/" style='text-decoration: none'><h2 style="font-family:Railway;letter-spacing:10px;color: white; font-size: 65px; margin-top: 0; margin-bottom: 0;">E-MORTALITY</h2></a> |
</div> | </div> | ||
<div class="col-lg-3"></div> | <div class="col-lg-3"></div> | ||
- | <img src="static/igem_logo.png" alt="" style="width: 100px;"> | + | <a href="httphttps://igem.org/HS"><img src="static/igem_logo.png" alt="" style="width: 100px;"></a> |
</div> | </div> | ||
</header> | </header> | ||
- | <nav> | + | |
- | + | ||
- | + | </div> | |
- | + | </div> | |
- | + | ||
- | + | <div class="row"> | |
- | + | <nav style='-webkit-transform: translateZ(0);z-index: 100;position: relative;'> | |
- | + | <ul> | |
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">HUMAN PRACTICE</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
+ | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsam a tenetur reiciendis numquam recusandae?</h4> | ||
+ | </div> | ||
+ | <div class='subcategories_container'> | ||
+ | <div><h5><a href="research.html">Research</a></h5></div> | ||
+ | <div><h5>Application</h5></div> | ||
+ | <div><h5>Outreach</h5></div> | ||
</div> | </div> | ||
- | </li> | + | </div> |
+ | </li> | ||
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">MODELING</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
- | + | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsam a tenetur reiciendis numquam recusandae?</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </li> | + | <div class='subcategories_container'> |
+ | <div><h5>Telomere Extension</h5></div> | ||
+ | <div><h5>Circuit Regulation</h5></div> | ||
+ | <div><h5>Safety Switch</h5></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">EXPERIMENTS</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
- | + | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsam a tenetur reiciendis numquam recusandae?</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </li> | + | <div class='subcategories_container'> |
+ | <div><h5>Telomere Extension</h5></div> | ||
+ | <div><h5>Circuit Regulation</h5></div> | ||
+ | <div><h5>Safety Switch</h5></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">SAFETY</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
- | + | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsam a tenetur reiciendis numquam recusandae?</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </li> | + | <div class='subcategories_container'> |
+ | <div><h5>Safety</h5></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">TEAM</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
- | + | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </li> | + | <div class='subcategories_container'> |
+ | <div><h5>About</h5></div> | ||
+ | <div><h5>Members</h5></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li class="dropdown"> | |
- | + | <a class="dropdown-toggle" data-toggle="dropdown">NOTEBOOK</a> | |
- | + | <div class="dropdown-menu"> | |
- | + | <div style='height:100px;'> | |
- | + | <img src="static/human_practice_icon.png"> | |
- | + | <h4>Short description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | </li> | + | <div class='subcategories_container'> |
+ | <div><h5>Experiments</h5></div> | ||
+ | <div><h5>Meetings</h5></div> | ||
+ | <div><h5>Calendar</h5></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
- | + | </nav> | |
- | |||
- | |||
</div> | </div> |
Latest revision as of 19:12, 17 June 2014
<header style='height:95px;margin-top:20px;'>
<img src="static/tas_igemlogo.png" alt="" style="width: 100px;">
<a href="/" style='text-decoration: none'>
E-MORTALITY
</a><a href="httphttps://igem.org/HS"><img src="static/igem_logo.png" alt="" style="width: 100px;"></a>
</header>
<nav style='-webkit-transform: translateZ(0);z-index: 100;position: relative;'>
- <a class="dropdown-toggle" data-toggle="dropdown">HUMAN PRACTICE</a>
- <a class="dropdown-toggle" data-toggle="dropdown">MODELING</a>
- <a class="dropdown-toggle" data-toggle="dropdown">EXPERIMENTS</a>
- <a class="dropdown-toggle" data-toggle="dropdown">SAFETY</a>
- <a class="dropdown-toggle" data-toggle="dropdown">TEAM</a>
- <a class="dropdown-toggle" data-toggle="dropdown">NOTEBOOK</a>
</nav>