Difference between revisions of "Team:UChile Biotec/css"

Line 3: Line 3:
 
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 
<script>
 
<script>
−
 
−
 
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
Line 46: Line 44:
  
  
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
   
+
 
</script>
 
</script>
 +
  
 
<style>
 
<style>
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 60: Line 61:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
body {background-color:#F5F4D8; }
+
body {background-color:white; }
 
#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; }
  
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
  
−
 
−
/**************************************************************************************************************************************************************************************************/   
 
 
      
 
      
−
/********************************* Navigation bar  *********************************/
+
/********************************* Navigation bar  *********************************/
 +
 
  #nav{
 
  #nav{
 
     border:1px solid #ccc;
 
     border:1px solid #ccc;
Line 83: Line 83:
 
     background-attachment: scroll;
 
     background-attachment: scroll;
 
     background-position: center top;  
 
     background-position: center top;  
−
     height:220px;
+
     height:350px;
 +
    z-index: 9998;
 
  }
 
  }
 
      
 
      
Line 89: Line 90:
 
     position:relative;
 
     position:relative;
 
     display:inline;
 
     display:inline;
 +
    z-index: 9999;
 
  }
 
  }
 
      
 
      
Line 100: Line 102:
 
     text-align: center;
 
     text-align: center;
 
     text-decoration: none;
 
     text-decoration: none;
 +
    z-index: 9999;
 
  }
 
  }
 
      
 
      
Line 108: Line 111:
 
     padding:0;
 
     padding:0;
 
     text-align:center;
 
     text-align:center;
 +
    z-index: 9999;
 
  }
 
  }
 
      
 
      
Line 113: Line 117:
 
     display:block;
 
     display:block;
 
     text-align:center;
 
     text-align:center;
 +
    z-index: 9999;
 
  }
 
  }
 
      
 
      
Line 158: Line 163:
 
     background:#ddd;
 
     background:#ddd;
 
  }
 
  }
 +
 +
/**************************************************************************************************************************************************************************************************/
 +
/* MOBILE MENU */
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
/*this wraps the whole of the menu*/
 +
.igem_2018_team_menu {
 +
font-family: Quicksand;
 +
display:none;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:5%;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
z-index: 9999;
 +
}
 +
 +
 +
.igem_2018_team_menu.displaying_menu{
 +
display:none;
 +
}
 +
 +
.igem_2018_team_menu  a {
 +
color: #cc6666;
 +
}
 +
 +
.igem_2018_team_menu img {
 +
width:100%;
 +
}
 +
 +
 +
.igem_2018_team_menu .menu_item {
 +
background-color: #7695A5;
 +
clear: both;
 +
color: white;
 +
cursor: pointer;
 +
float: center;
 +
font-size: 100%;
 +
text-align:left;
 +
font-weight: bold;
 +
padding: 15px 0px 15px 5%;
 +
  width: 100%;
 +
}
 +
 +
.igem_2018_team_menu .menu_item.direct_link {
 +
color: white;
 +
padding-left: 15%;
 +
}
 +
.igem_2018_team_menu .menu_item:hover {
 +
background-color: #996666;
 +
}
 +
 +
 +
.igem_2018_team_menu .menu_item .submenu_control_icon {
 +
color: white;
 +
float: left;
 +
width: 10%;
 +
padding-right: 0%;
 +
text-align:center;
 +
}
 +
 +
/* submenu icon "+"  "-"*/
 +
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
 +
content: "+";
 +
}
 +
 +
/* submenu icon "+"  "-"*/
 +
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
 +
content: "-";
 +
}
 +
 +
/*submenu wrapper*/
 +
.igem_2018_team_menu .submenu{
 +
padding: 0 0 0 5%;
 +
background-color: #cccccc;
 +
clear:both;
 +
display:none;
 +
float: left; 
 +
width:100%;
 +
z-index: 9999;
 +
}
 +
 +
/*styling for a submenu item*/
 +
.igem_2018_team_menu .submenu .submenu_item {
 +
border-bottom: 1px solid #c4baba;
 +
  color: white;
 +
  height: 30px;
 +
  float: left;
 +
  font-size: 100%;
 +
font-weight: bold;
 +
  padding: 12px 0px 0px 10%;
 +
  width: 100%;
 +
text-align:left;
 +
}
 +
 +
.igem_2018_team_menu .submenu .submenu_item:hover {
 +
background-color: #996666;
 +
}
 +
 +
 +
.igem_2018_team_menu .submenu .submenu_item.current_page,
 +
.igem_2018_team_menu .menu_item.current_page,
 +
.igem_2018_team_menu .menu_item.direct_link.current_page {
 +
background-color:#7acbd8;
 +
}
 +
 +
 +
/*mobile menu bar styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
 +
.igem_2018_team_mobile_bar {
 +
background-image: url('https://static.igem.org/mediawiki/2018/4/42/T--UChile_Biotec--barramobile.png');
 +
background-repeat: no-repeat;
 +
background-size: 100%;
 +
background-attachment: scroll;
 +
background-position: center top; 
 +
border:1px solid #ccc;
 +
border-style:hidden;
 +
cursor:pointer;
 +
display:none;
 +
float:left;
 +
margin-bottom: 0%;
 +
padding: 5% 0;
 +
position:fixed;
 +
width:100%;
 +
height:10%;
 +
z-index: 9999;
 +
}
 +
 +
.igem_logo_mobile img {
 +
width:70px;
 +
}
 +
 +
.igem_logo_mobile {
 +
float:left;
 +
padding-left: 5%;
 +
width: 30%;
 +
}
 +
 +
.igem_menu_control_mobile img {
 +
width:25px;
 +
}
 +
 +
.igem_menu_control_mobile {
 +
float:right;
 +
padding-right:5%;
 +
padding-top:15%;
 +
text-align:right;
 +
width: 30%;
 +
}
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 173: Line 334:
 
.igem_2018_team_content .igem_2018_team_column_wrapper {
 
.igem_2018_team_content .igem_2018_team_column_wrapper {
 
margin:auto;
 
margin:auto;
−
max-width: 1400px;
+
max-width: 1920px;
 
width:100%;
 
width:100%;
 
}
 
}
  
 +
 +
#sp{
 +
    display:none;
 +
    height:120px;
 +
    position:static;
 +
}
 +
 +
#sp ul{
 +
    position:absolute;
 +
    left:-9999px;
 +
    margin:0;
 +
    padding:0;
 +
    text-align:center;
 +
    z-index: -9999;
 +
}
  
 
/********************************* HTML STYLING  *********************************/      
 
/********************************* HTML STYLING  *********************************/      
Line 290: Line 466:
 
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {  
 
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {  
 
float:left;
 
float:left;
−
margin: 1% 2%;
+
margin: 0% 2%;
 
padding: 0px;
 
padding: 0px;
 
}
 
}
Line 314: Line 490:
 
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
 
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
 
margin-bottom: 15px;
 
margin-bottom: 15px;
−
width: 100%;  
+
margin-top: 15px;
 +
width: 100%;
 +
max-width: 100%;
 +
object-fit: contain;  
 
}
 
}
  
Line 396: Line 575:
 
     border: 4px solid #f8b732;
 
     border: 4px solid #f8b732;
 
}
 
}
 +
 +
/*mobile*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
/* 1920px  */
 +
/************************************************/
 +
@media only screen and (max-width: 2500px) {
 +
.igem_2018_team_menu {display:none;}
 +
#nav {height:350px;}
 +
}
 +
 +
 +
/* 1800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1800px) {
 +
.igem_2018_team_menu {display:none;}
 +
#nav {height:220px;}
 +
}
 +
 +
/* 1400px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1400px) {
 +
.igem_2018_team_menu .menu_item { font-size:100%;}
 +
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
 +
.igem_2018_team_menu {display:none;}
 +
}
 +
 +
@media only screen and (max-width: 1101px) {
 +
.igem_2018_team_menu {display:none;}
 +
}
 +
 +
/* 1000px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1100px) {
 +
#nav{display:none;}
 +
.igem_2018_team_menu.displaying_menu{display:block;}
 +
.igem_2018_team_menu {padding: 0 0 0 10%; display:none; margin-top: 0%; min-width:50%; width:50%;}
 +
.igem_2018_team_mobile_bar {display:inline-block;}
 +
#sp{display:inline;}
 +
 +
}
 +
 +
 +
@media only screen and (max-width: 500px) {
 +
.igem_2018_team_menu.displaying_menu{display:block;}
 +
.igem_2018_team_menu {min-width:100%; width:100%; }
 +
#sp{display:inline;}
 +
}
 +
 +
 +
/**************************************************************************************************************************************************************************************************/
 +
 +
  
  
  
−
   
 
 
</style>
 
</style>
−
   
+
 
 
<body>
 
<body>
 
      
 
      
Line 455: Line 686:
 
     <li><a href="https://2018.igem.org/Team:UChile_Biotec/LATAM">LATAM</a></li>
 
     <li><a href="https://2018.igem.org/Team:UChile_Biotec/LATAM">LATAM</a></li>
 
</ul>
 
</ul>
 +
 +
<div class="igem_2018_team_mobile_bar">
 +
 +
<div class="igem_logo_mobile">
 +
</div>
 +
 +
 +
<div class="igem_menu_control_mobile">
 +
</div>
 +
 +
</div>
 +
 +
 +
 +
<div class="igem_2018_team_menu">
 +
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec">
 +
</a>
 +
 +
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec">
 +
<div class="menu_item direct_link">
 +
HOME
 +
</div>
 +
</a>
 +
 +
<!-- Team -->
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
PROJECT
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Project">
 +
<div class="submenu_item">
 +
Our Project
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Problem">
 +
<div class="submenu_item">
 +
The Problem
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Solution">
 +
<div class="submenu_item">
 +
Our Solution
 +
</div>
 +
</a>
 +
</div>
 +
 +
 +
<!-- Project -->
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
LAB
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Lab">
 +
<div class="submenu_item">
 +
Laboratory
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Abstract">
 +
<div class="submenu_item">
 +
Abstract
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Notebook">
 +
<div class="submenu_item">
 +
Notebook
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/InterLab">
 +
<div class="submenu_item">
 +
InterLab
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Contributions">
 +
<div class="submenu_item">
 +
Contributions
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
DEVICE
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Device">
 +
<div class="submenu_item">
 +
Our Device
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Design">
 +
<div class="submenu_item">
 +
The Design
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Product">
 +
<div class="submenu_item">
 +
Final Product
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
<!-- Team -->
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
TEAM
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Team">
 +
<div class="submenu_item">
 +
Team Members
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Us">
 +
<div class="submenu_item">
 +
Us
 +
</div>
 +
</a>
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Sponsors">
 +
<div class="submenu_item">
 +
Sponsors
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
PRACTICES
 +
</div>
 +
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Practices">
 +
<div class="submenu_item">
 +
Human Practices
 +
</div>
 +
</a>
 +
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Education">
 +
<div class="submenu_item">
 +
Education & Engagement
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Fieldwork">
 +
<div class="submenu_item">
 +
Fieldwork
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Meetings">
 +
<div class="submenu_item">
 +
Meetings
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/Relationships">
 +
<div class="submenu_item">
 +
Relationships
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
<a href="https://2018.igem.org/Team:UChile_Biotec/LATAM">
 +
<div class="menu_item direct_link">
 +
LATAM
 +
</div>
 +
</a>
 +
 +
 +
 +
</div>
 +
  
 
</body>
 
</body>
  
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<!--- Content of the page  --->
+
<!--- THIS IS WHERE THE HTML BEGINS --->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 +
<head>
 +
 +
<!-- This tells the browser that your page is responsive -->
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
</head>
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Content of the page  --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 
<div class="igem_2018_team_content">
 
<div class="igem_2018_team_content">
 
<div class="igem_2018_team_column_wrapper">
 
<div class="igem_2018_team_column_wrapper">
 
<br>
 
<br>
 +
<ul id="sp">
 +
<br></br>
 +
<br></br>
 +
<br></br>
 +
</ul>

Revision as of 06:58, 12 October 2018

HOME
PROJECT
Our Project
The Problem
Our Solution
LAB
Laboratory
Abstract
Notebook
InterLab
Contributions
DEVICE
Our Device
The Design
Final Product
TEAM
Team Members
Us
Sponsors
PRACTICES
Human Practices
Education & Engagement
Fieldwork
Meetings
Relationships
LATAM