Difference between revisions of "Template:TecCEM/Menu"

 
(105 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<!doctype html>
 
 
<head>
 
<head>
 
<meta charset="utf-8">
 
<meta charset="utf-8">
Line 6: Line 5:
 
</head>
 
</head>
  
<body>
+
<body>i
 
<div class="menu-close">
 
<div class="menu-close">
 
     <div class="menu-close__burger"></div>
 
     <div class="menu-close__burger"></div>
Line 16: Line 15:
 
<div class="menu_icon">
 
<div class="menu_icon">
 
<a href="https://2021.igem.org/Team:TecCEM">
 
<a href="https://2021.igem.org/Team:TecCEM">
<img src="https://drive.google.com/uc?export=download&id=14SwINy5VJlJKdAo1jbp-7nKI5-k7nmTf" alt="">
+
<img src="https://static.igem.org/mediawiki/2021/0/04/T--TecCEM--main.svg" alt="">
 
</a>
 
</a>
<p>Inicio</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Home</p>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
Line 25: Line 24:
 
</a>
 
</a>
 
 
<p>Team</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Team</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Team" style="color: white">Members</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Collaborations" style="color: white">Collaborations</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Attributions" style="color: white">Attributions</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Contribution" style="color: white">Contribution</a></li>
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
Line 31: Line 36:
 
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg" alt="">
 
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg" alt="">
 
</a>
 
</a>
<p>Project</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Project</p>
 
<ul class = "menu_item">
 
<ul class = "menu_item">
<li>Description</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Description" style="color: white">Description</a></li>
<li>Design</li>
+
 
<li>Experiments</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Notebook" style="color: white">Notebook</a></li>
<li>Notebook</li>
+
 
<li>Contribution</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Implementation" style="color: white">Implementation</a></li>
<li>Results</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results" style="color: white">Results</a></li>
<li>Demonstrate</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Zetasizer" style="color: white">Particle detection</a></li>
<li>Improve</li>
+
 
<li>Model</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Engineering" style="color: white">Engineering success</a></li>
 +
 +
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 47: Line 54:
 
 
 
<a href="https://2021.igem.org/Team:TecCEM/Safety">
 
<a href="https://2021.igem.org/Team:TecCEM/Safety">
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<img src="https://static.igem.org/mediawiki/2021/b/ba/T--TecCEM--TecCEMpremiosicono.svg" alt="">
 
</a>
 
</a>
<p>Safety</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold; color: white;">Awards</p>
 +
<ul class = "menu_item">
 +
                                                <li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Awards" style="color: white">Awards</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Model" style="color: white">Model</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Hardware" style="color: white">Hardware</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Software" style="color: white">Software</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Sustainable" style="color: white">Sustainable Development Goals</a></li>
 +
 
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Safety" style="color: white">Safety</a></li>
 +
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
Line 55: Line 73:
 
<img src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg" alt="">
 
<img src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg" alt="">
 
</a>
 
</a>
<p>Human Practices</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Human Practices</p>
 
<ul class = "menu_item">
 
<ul class = "menu_item">
<li>Human practices</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Human_Practices" style="color: white">Human Practices</a></li>
<li>Education and Engagement</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Communication" style="color: white">Education and Engagement</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Survey" style="color: white">Survey Results</a></li>
 
</ul>
 
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
 
<a href="https://2021.igem.org/Team:TecCEM/Parts">
 
<a href="https://2021.igem.org/Team:TecCEM/Parts">
<img src="https://static.igem.org/mediawiki/2021/c/ce/T--TecCEM--Biobrick_Icono_Texem.svg" alt="">
+
<img src="https://static.igem.org/mediawiki/2021/archive/c/ce/20211005011830%21T--TecCEM--Biobrick_Icono_Texem.svg" alt="">
 
</a>
 
</a>
<p>Parts</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Parts</p>
 
<ul class = "menu_item">
 
<ul class = "menu_item">
<li>Overview</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Parts" style="color: white">Overview</a></li>
<li>Basic parts</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Biosensorparts" style="color: white">Biosensor Parts</a></li>
<li>Composite</li>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/SelectionMarkerParts" style="color: white">Selection Marker Parts</a></li>
<li>Part Collection</li>
+
 
</ul>
 
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
<a href="https://2021.igem.org/Team:TecCEM/Entrepreneurship">
+
<a href="https://igem.org/2021_Judging_Form?team=TecCEM">
<img src = "https://static.igem.org/mediawiki/2021/7/7d/T--TecCEM--Emprendimiento_Icono_Texem.svg" alt="">
+
</a>
+
<p>Entrepreneurship</p>
+
</div>
+
<div class="menu_icon">
+
<a href="https://2021.igem.org/Team:TecCEM/Team">
+
 
<img src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg" alt="">
 
<img src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg" alt="">
 
</a>
 
</a>
<p>Judging form</p>
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Judging form</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="menu_teccem">
 
<div class="menu_teccem">
<p>Tec CEM 2021</p>
+
 
</div>
 
</div>
 
</div>
 
</div>
Line 93: Line 105:
 
</body>
 
</body>
 
<style>
 
<style>
 +
 +
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
 +
 
     #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
 
     #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
 
     #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 
     #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
     body, html {background-color:white; width: 100%; height: 100%;}
+
     body, html {background-color:white; width: 100%vw; height: 100%;}
 
     #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; }
 
     #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 
     #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 +
 +
 
*{
 
*{
 
margin: 0;
 
margin: 0;
Line 114: Line 132:
 
top: 30px;
 
top: 30px;
 
height: 90%;
 
height: 90%;
width: 10%;
+
width: 10%;
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
align-items: center;
 
 
justify-content: center;
 
justify-content: center;
margin: 1rem;
+
align-items: center;
 +
 +
 
}
 
}
 
.menu_icon img{
 
.menu_icon img{
 
width: 70%;
 
width: 70%;
 +
display: block;
 +
margin: 0;
 +
margin-left: auto;
 +
  margin-right: auto;
 
}
 
}
 +
/*=============== SubMenus ==========*/
 
.menu_icon:hover .menu_item{
 
.menu_icon:hover .menu_item{
visibility: visible;
+
display: block;
 +
visibility:visible;
 
}
 
}
 +
 
.menu_item{
 
.menu_item{
background: white;
+
margin-left: 0%;
padding: .5rem;
+
margin-top: 92%;
margin-left: 13%;
+
display:none;
margin-top: 10%;
+
padding-top: 50%;
position: absolute;
+
top:115px;
list-style-type: none;
+
position:absolute;
visibility: hidden;
+
list-style:none;
width: 6%;
+
transition: transform 0.6s ease-out;
 +
visibility:hidden;
 +
margin-left: auto;
 +
margin-right: auto;
 +
 +
 
}
 
}
 +
.menu_item > li {
 +
float:left;
 +
position:relative;
 +
display: inline-block;
 +
padding: 0px;
 +
margin-bottom: 5px;
 +
padding:10px 12px;
 +
padding-top:50px;
 +
}
 +
 
.menu_item > li:hover{
 
.menu_item > li:hover{
 
text-decoration: underline;
 
text-decoration: underline;
background: red;
+
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
 +
 +
/*======================================*/
 
 
 
.menu_hidden{
 
.menu_hidden{
transform: translateX(-0%) translateY(-73%);
+
transform: translateX(-0%) translateY(-70%);
 
/*100% - .menu.height + .menu_teccem.heigh
 
/*100% - .menu.height + .menu_teccem.heigh
 
100 - 35 + 25 = 90
 
100 - 35 + 25 = 90
Line 151: Line 194:
 
}
 
}
 
.menu_iconos{
 
.menu_iconos{
width: 100%;
+
width: 100vw;
 
height: 100%;
 
height: 100%;
background: green;
+
/*background: green;  - jose's edit*/
padding-left: 2.5rem;
+
                        background-color: rgb(0,0,0, 0.8);
 +
padding-left: 5rem;
 +
padding-right: 1.5rem;
 
overflow: hidden;
 
overflow: hidden;
 
display: flex;
 
display: flex;
Line 160: Line 205:
 
justify-content: space-around;
 
justify-content: space-around;
 
align-content: center;
 
align-content: center;
align-items: center;
 
 
 
}
 
}
 
.menu_teccem > p{
 
.menu_teccem > p{
Line 167: Line 210:
 
}
 
}
 
.menu_teccem{
 
.menu_teccem{
height: 40%;
+
height: 50%;
 
padding: 0;
 
padding: 0;
 
display: flex;
 
display: flex;
Line 182: Line 225:
 
width: 100vw;
 
width: 100vw;
 
margin-top: 0;
 
margin-top: 0;
background: red;
+
/*background: red;  -jose's edit*/
 +
                        background-color: rgb(0, 20, 137, 0.8);
 
height: 30%;
 
height: 30%;
 +
 
z-index: 9999;
 
z-index: 9999;
 
}
 
}
Line 190: Line 235:
 
.menu-close {
 
.menu-close {
 
  position: fixed;
 
  position: fixed;
top:7;
+
top:10;
 
z-index: 99999;
 
z-index: 99999;
 
  display: flex;
 
  display: flex;
Line 206: Line 251:
 
  background: #fff;
 
  background: #fff;
 
  border-radius: 5px;
 
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
+
  box-shadow: 0 2px 5px rgba(205, 236, 169 ,0.2);
 
  transition: all .5s ease-in-out;
 
  transition: all .5s ease-in-out;
 
}
 
}

Latest revision as of 02:58, 18 December 2021

Untitled Document i