Difference between revisions of "Team:Imperial College/Templates/NavBar"

Line 1: Line 1:
 +
 
<html>
 
<html>
 
<head>
 
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"  
 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"  
 
     integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
     integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
−
  <link href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.3.0/balloon.css" rel="stylesheet">
 
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
  
 
<script>
 
<script>
Line 24: Line 23:
 
         });
 
         });
 
     }
 
     }
 +
=
 
    
 
    
  
Line 56: Line 56:
 
     color:#24305E;
 
     color:#24305E;
 
}
 
}
−
 
 
.clr{
 
.clr{
 
     clear:both;
 
     clear:both;
Line 64: Line 63:
 
     text-align: center;
 
     text-align: center;
 
}
 
}
−
 
 
.marginbottom{
 
.marginbottom{
 
     margin-bottom:5% !important;
 
     margin-bottom:5% !important;
Line 156: Line 154:
  
 
/********************************* NAVBAR  ********************************/
 
/********************************* NAVBAR  ********************************/
 +
 +
.nav{
 +
 +
width:100%;
 +
      height:auto;
 +
background:white;
 +
margin-bottom: 2%;
 +
        position:fixed;
 +
        z-index: 40;
 +
}
  
 
.logo{
 
.logo{
Line 179: Line 187:
 
}
 
}
  
 +
.dropdown {
 +
    float: right;
 +
    width: 80%;
 +
    text-align: center;
 +
    background-color:none;
 +
}
  
−
.navigation {
+
.dropdown ul {
−
  height: $nav-height;
+
    margin:0;
−
  background: $nav-background;
+
    padding-top:45px;
 +
list-style: none;
 +
    background-color:none;
 +
   
 +
}
 +
.dropdown ul li {
 +
    float: left;
 +
    cursor:pointer;
 +
    color:white;
 +
    font-size: 14px;
 +
    background-color:none;
 +
    padding-right:8px;
 +
    width:150px;
 +
    height:30px;
 +
    position: relative;
 +
    margin-top:5px;
 
}
 
}
  
−
.navigation {
+
.dropdown ul li a{
−
  height: 70px;
+
    padding:0;
−
  background: white;
+
    color: #24305E ;
 +
    background-color: none;
 +
    text-decoration: none;
 +
    position: relative;
 +
    display: block;
 +
    text-shadow: 1px 1px lightgrey;
 +
    transition:0.65s;
 
}
 
}
  
 +
.dropdown ul ul li a{
 +
    padding:0;
 +
    background-color: none;
 +
}
  
−
.nav-container {
+
.dropdown ul ul{
−
  max-width: 1000px $content-width;
+
    margin:0;
−
  margin: 0 auto;
+
    padding:0;
 +
    top:30px;
 +
list-style: none;
 +
    background-color:white;
 +
    box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 +
    position: absolute;
 +
    display: none;
 
}
 
}
  
  
−
nav {
+
 
−
  float: right;
+
.dropdown ul ul a{
 +
    background-color:none;
 +
    width:100%;
 +
    text-align: left;
 +
    margin:0;
 +
    padding-left:2px;
 +
    box-sizing: border-box;
 
}
 
}
−
  ul {
+
ul.sub1 li {
−
     list-style: none;
+
     background-color:none;
−
     margin: 0;
+
     margin-left: 25%;
−
     padding: 0;
+
     width:110px;
 
}
 
}
−
    li {
+
ul.sub2 li {
−
      float: left;
+
    background-color: none;
−
      position: relative;
+
    margin-left: 5%;
 +
    padding:0;
 +
    width: 180px;
 
}
 
}
−
      a, a:visited {
+
 
−
        display: block;
+
ul.sub3 li {
−
        padding: 0 20px;
+
    background-color:none;
−
        line-height: $nav-height;
+
    margin-left: 25%;
−
        background: $nav-background;
+
    width:80px;
−
        color: $nav-font-color;
+
}
−
        text-shadow: 1px 1px lightgrey;
+
 
−
        transition:0.65s;
+
.dropdown ul li a:hover{
−
        text-decoration: none;
+
    color: #7EF397;
−
        &:hover {
+
    text-shadow: 1px 1px #D0FADE;
−
          text-shadow: $link-hover-shadow;
+
}
−
          color: $link-hover-color;
+
 
−
        }
+
.dropdown ul li ul li a:hover{
−
        &:not(:only-child):after {
+
    color: rgb(248, 59, 122);
−
          padding-left: 4px;
+
    text-shadow: lightpink;
−
          content: ' ▾';
+
}
−
        }
+
 
−
      }
+
.dropdown ul li:hover > ul {
 +
    display:block;
 +
}
 +
 
 +
 
 +
/********************************* CONTENT OF THE PAGE ********************************/
 +
#HQ_page
 +
h1{
 +
    margin: auto;
 +
    padding: 20px;
 +
    margin-top: 12%;
 +
    font-size: 85px;
 +
    background-color:none;
 +
    text-align: center;
 +
    font-family: 'Varela Round', sans-serif !important;
 +
  color:#24305E;
 +
    overflow: visible;
 +
}
 +
 
 +
h2{
 +
  font-size: 22px;
 +
  background:none;
 +
  width:90%;
 +
  margin: auto;
 +
  margin-bottom:2%;
 +
  display: list-item;                                                     
 +
  list-style-type: disc;     
 +
  list-style-position: inside;
 +
    overflow: visible;
 +
 
 +
}
 +
h3{
 +
    text-align: center;
 +
    font-size: 42px;
 +
    margin:3% 2% 2% 2%;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
    overflow: visible
 +
}
 +
 
 +
h4{
 +
    font-size: 30px;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
    overflow: visible;
 +
 
 +
}
 +
h5{
 +
    text-align: left;
 +
    font-size: 35px;
 +
    margin:0;
 +
    margin-top: 5%;
 +
    margin-bottom: 8%;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
    overflow: visible;
 +
 
 +
}
 +
h6{
 +
    text-align: center;
 +
    font-size: 35px;
 +
    margin: 0; 
 +
    font-family: 'Varela Round', sans-serif !important;
 +
    color:#24305E;
 +
    overflow: visible;
 +
}
 +
 
 +
p{
 +
    font-size: 18px !important;
 +
    font-family: 'Varela Round', sans-serif !important;
 +
    color:#24305E;
 +
 
 +
}
 +
p1{
 +
    width:30%;
 +
    text-align: center !important;
 +
    margin: 3px;
 +
    font-size:20px !important;
 +
    line-height: 2em;
 +
}
 +
p2{
 +
    width:30%;
 +
    font-size: 25px;
 +
    line-height: 40px;
 +
    text-align: center;
 +
    background: none;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
}
 +
 
 +
p3{
 +
    width: 10%;
 +
    margin-top: 3%;
 +
    font-size:20px;
 +
    font-family: 'Varela Round', sans-serif;
 +
    color:#24305E;
 +
}
 +
 
 +
 
 
</style>
 
</style>
 +
 
</head>
 
</head>
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Line 240: Line 392:
  
 
<body>
 
<body>
−
<section class="navigation">
+
<div class="nav">
−
  <div class="nav-container">
+
                <div class="logo">
−
    <div class="logo">
+
                    <a href="#"> <img class="pixcell" src= "https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png" ></a>
−
      <a href="#"> <img class="pixcell" src="https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png"></a>
+
                    <a href="#"> <img class="iclogo "src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png" ></a>
−
      <a href="#"> <img class="iclogo " src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png"></a>
+
                </div>
−
  </div>
+
           
−
    <nav>
+
                <div class="dropdown">
−
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
+
                    <ul>
−
      <ul class="nav-list">
+
                        <li><a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
        <li>
+
                        <ul class= "sub1">
−
          <a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Project"">DESCRIPTION</a>
−
          <ul class="nav-dropdown">
+
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Mechanisms">MECHANISMS</a>
−
            <li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Applications">APPLICATIONS</a>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Project" "="">DESCRIPTION</a>
+
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a>
−
            </li>
+
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a>
−
            <li>
+
                            <li><a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Mechanisms">DESIGN</a>
+
                        </ul>
−
            </li>
+
                      </li>
−
            <li>
+
 
−
              <a href="https://2018.igem.org/Team:Imperial_College/Applications">APPLICATIONS</a>
+
                      <li><a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
            </li>
+
                        <ul class= "sub1">
−
            <li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Modelling">MODELLING</a>
−
            </li>
+
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a>
−
            <li>
+
                          </ul>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a>
+
                      </li>
−
          </li>
+
                        <li><a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
          <li>
+
                            <ul class= "sub1">
−
              <a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a>
+
                                    <li><a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a>
−
            </li>
+
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Results">RESULTS</a></li>
−
          </ul>
+
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Experiments">EXPERIMENTS</a></li>
−
        </li>
+
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Protocols">PROTOCOLS</a></li>
−
        <li>
+
                                <li><a href="Parts">PARTS</a></li>
−
          <a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
                               
−
          <ul class="nav-dropdown">
+
                            </ul>
−
            <li>
+
                            </li>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a>
+
                   
−
            </li>
+
                        <li><a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
            <li>
+
                            <ul class= "sub2">
−
              <a href="https://2018.igem.org/Team:Imperial_College/Modelling">MODELLING</a>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/HP">OVERVIEW</a></li>
−
            </li>
+
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a></li>
−
            <li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a></li>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Outreach">OUTREACH</a></li>
−
            </li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a></li>
−
          </ul>
+
                                </ul>
−
        <li>
+
                              </li>
−
          <a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
                       
−
          <ul class="nav-dropdown">
+
                        <li><a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
            <li>
+
                          <ul class= "sub3">
−
              <a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a></li>
−
            </li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li>
−
            <li>
+
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a></li>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Results">RESULTS</a></li>
+
                              </ul>
−
            <li>
+
                            </li>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Experiments">EXPERIMENTS</a></li>
+
                        <li><a href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a></li>
−
            <li>
+
                        <li><a href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a></li>
−
              <a href="https://2018.igem.org/Team:Imperial_College/Protocols">PROTOCOLS</a></li>
+
                    </ul>
−
            <li>
+
                </div>
−
              <a href="Parts">PARTS</a>
+
              </div>
−
            </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li>
+
−
          <a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
−
          <ul class="nav-dropdown">
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/HP">OVERVIEW</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Outreach">OUTREACH</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a>
+
−
            </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li>
+
−
          <a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
−
          <ul class="nav-dropdown">
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li>
+
−
            <li>
+
−
              <a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a>
+
−
            </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li>
+
−
          <a href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a>
+
−
        </li>
+
−
        <li>
+
−
          <a href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a>
+
−
        </li>
+
−
      </ul>
+
−
    </nav>
+
−
  </div>
+
−
</section>
+
 
    
 
    
 
</body>
 
</body>

Revision as of 12:55, 13 October 2018