Difference between revisions of "Template:Lambert GA"

 
(6 intermediate revisions by 2 users not shown)
Line 100: Line 100:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px; background-color: #7A7A79;}
−
body {background-color:white; }
+
body {background-color:#7A7A79; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
 
Line 158: Line 158:
 
float:left;
 
float:left;
 
}
 
}
 +
     
 +
/* Dropdown Button */
 +
.dropbtn {
 +
  margin: auto;
 +
  position: left; 
 +
  height: 100%;
 +
  width: 100%;
 +
  color: #D49AE6;
 +
  padding: 14px;
 +
  font-size: 20px;
 +
  text-align: left;
 +
  border: none;
 +
  cursor: pointer;
 +
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
 +
}
  
 +
 +
/* The container <div> - needed to position the dropdown content */
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    opacity: 0.0;
 +
    position: absolute;
 +
    background-color: #CFB9F7;
 +
    min-width: 200px;
 +
    text-align: left;
 +
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
 +
    transition: opacity 0.5s ease-in-out;
 +
}
 +
 +
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color:  white;
 +
    opacity: 0.0;
 +
    padding: 0px 10px;
 +
    font-size: 20px;
 +
    text-decoration: none;
 +
    display: block;
 +
    transition: opacity 0.5s ease-in-out;
 +
}
 +
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #F48FB1;
 +
color: #4A555C;}
 +
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
    opacity: 1.0;
 +
}
 +
 +
.dropdown:hover .dropdown-content a {
 +
  opacity: 1.0;
 +
}
 +
 +
/* Change the background color of the dropdown button when the dropdown content is shown*/
 +
.dropbtn:hover {
 +
    background-color: #F48FB1;
 +
    color:  #4A555C;
 +
}
 
.menu_button.direct_to_page {  
 
.menu_button.direct_to_page {  
 
padding-left: 36px;
 
padding-left: 36px;
Line 273: Line 338:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 +
#content {
 +
font-family: 'Roboto', sans-serif;
 +
color: white;
 +
}
 
 
 
</style>
 
</style>
Line 280: Line 349:
  
 
<head>  
 
<head>  
−
 
+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
  
 
</head>
 
</head>
−
 
−
 
−
 
−
<div class="igem_2017_menu_wrapper" >
 
−
 
−
 
−
 
−
<a href="https://2017.igem.org/Team:Lambert_GA">
 
−
<img src="http://placehold.it/350x150">
 
−
</a>
 
−
 
−
 
−
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
−
<div class="menu_button" id="display_menu_control">
 
−
MENU 
 
−
</div>
 

Latest revision as of 13:50, 5 October 2017