Difference between revisions of "Team:ASIJ Tokyo/CSS"

 
(69 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<style>
 
<style>
  
.navbar {
+
#content {
padding-top: 50px;
+
    background: none;
overflow: hidden;
+
    border: none;
    background-color: #333;
+
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
+
}
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
#HQ page {
position: fixed;
+
    display: hidden;
    width:100%;
+
}
}
+
.logo_2018 {
 
+
    margin-top: 0px;
    .navbar a {
+
    width: 0;
float: left;
+
     float: left;
    font-size: 16px;
+
    visibility: hidden;
    color: white;
+
}
    text-align: left;
+
#content H1 {
    padding: 0px;
+
    visibility: hidden;
    text-decoration: none;
+
}
}
+
 
+
    .dropdown {
+
        float: left;
+
        overflow: hidden;
+
    }
+
 
+
    .dropdown .dropbtn {
+
        font-size: 16px;   
+
        border: none;
+
        outline: none;
+
        color: white;
+
        padding: 10px 50px;
+
        background-color: inherit;
+
        font-family: inherit;
+
        margin: 0;
+
    }
+
 
+
    .navbar a:hover, .dropdown:hover .dropbtn {
+
        background-color: red;
+
    }
+
 
+
    .dropdown-content {
+
        display: none;
+
        position: fixed;
+
        background-color: #f9f9f9;
+
        min-width: 130px;
+
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
        z-index: 1;
+
      
+
    }
+
 
+
    .dropdown-content a {
+
        float: none;
+
        color: black;
+
        padding: 12px 16px;
+
        text-decoration: none;
+
        display: block;
+
        text-align: left;
+
    }
+
 
+
    .dropdown-content a:hover {
+
        background-color: #ddd;
+
    }
+
 
+
    .dropdown:hover .dropdown-content {
+
        display: block;
+
    }
+
 
+
 
</style>
 
</style>
<body>
 
 
    <div class="navbar">
 
  <a href="#home">Home</a>
 
  <a href="#news">News</a>
 
  <div class="dropdown">
 
    <button class="dropbtn">Dropdown
 
      <i class="fa fa-caret-down"></i>
 
    </button>
 
    <div class="dropdown-content">
 
      <a href="#">Link 1</a>
 
      <a href="#">Link 2</a>
 
      <a href="#">Link 3</a>
 
    </div>
 
  </div>
 
</div>
 
 
    <div class="container topBotomBordersOut">
 
      <a href="#">HOME</a>
 
      <a href="https://2018.igem.org/Team:ASIJ_Tokyo/Team">TEAM</a>
 
      <a href="#">PROJECT</a>
 
      <a href="https://2018.igem.org/Team:ASIJ_Tokyo/Parts">PARTS</a>
 
      <a href="https://2018.igem.org/Team:ASIJ_Tokyo/Engagement">HUMAN PRACTICES</a>
 
      <a href="https://2018.igem.org/Team:ASIJ_Tokyo/Safety">SAFETY</a>
 
    </div>
 
 
<div id="footer-box">
 
    <div id="footer">
 
        <img src="https://static.igem.org/mediawiki/2018/9/9f/T--ASIJ_Tokyo--logo.png" width="150px"> </img>
 
    </div>
 
</div>
 
</body>
 
 
</html>
 
</html>

Latest revision as of 05:28, 13 October 2018