Team:INSA-Lyon

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
@font-face {
+
<!DOCTYPE html>
-
font-family: "Roboto";
+
<html lang="fr">
-
    src: url('font/RobotoCondensed-Regular.ttf');
+
<head>
-
}
+
<meta charset="utf-8">
-
@font-face {
+
<title>Curly'on - IGEM 2014 INSA-LYON</title>
-
font-family: "LatoReg";
+
-
    src: url('font/Lato-Reg.ttf');
+
-
}
+
-
@font-face {
+
-
font-family: "LatoLig";
+
-
    src: url('font/Lato-Lig.ttf');
+
-
}
+
-
html, body {
+
<link rel="stylesheet" href="accueil.css" />
-
padding:0;
+
<link rel="stylesheet" href="style.css" />
-
margin-top: -10px;
+
-
}
+
<!-- Auteur-->
 +
<meta name="author" content="potopov.fr" />
 +
<!-- Description de la page -->
 +
<meta name="description" content="" />
 +
<!-- Mots-clés de la page -->
 +
<meta name="keywords" content="" />
 +
</head>
-
body {
+
<body>
-
width: 100%;
+
-
}
+
-
p {
+
<!-- ICI LE CODE DU MENU VERTICAL DE GAUCHE -->
-
font-family: "LatoReg", sans-serif;
+
<div id="menu">
-
}
+
<ul id="menuul">
 +
<li class="menuulli">
 +
<a class="menuullia" href="index.html" id="link-home">
 +
<img src="img/picto/home.png" alt="home"/>
 +
</a>
 +
</li>
 +
<li class="menuulli">
 +
<a class="menuullia" href="project.html" id="link-project">
 +
<span>PROJECT</span>
 +
</a>
 +
<ul class="ssmenu" id="project">
 +
<a class="hu-icon" href="project.html" ><li class="iconmenu"><img src="img/picto/proj.png" alt="Picto project" /><br/>PROJECT</li></a>
 +
<a class="hi-icon" href="results.html"><li>RESULTS</li></a>
 +
<a class="hi-icon" href="biobricks.html"><li>BIOBRFICKS</li></a>
 +
<a class="hi-icon" href="device.html"><li>DEVICE</li></a>
 +
<a class="hi-icon" href="achievements.html"><li>ACHIEVEMENTS</li></a>
 +
<a class="hi-icon" href="future.html"><li>FUTURE WORK</li></a>
 +
</ul>
 +
</li>
 +
<li class="menuulli">
 +
<a class="menuullia" href="wetlab.html" id="link-wetlab">
 +
<span>WETLAB</span>
 +
</a>
 +
<ul class="ssmenu" id="wetlab">
 +
<a href="wetlab.html" class="hu-icon"><li class="iconmenu"><img src="img/picto/wet.png" alt="Picto Wetlab" /><br/>WETLAB</li></a>
 +
<a class="hi-icon" href="notebook.html"><li>NOTEBOOK</li></a>
 +
<a class="hi-icon" href="protocols.html"><li>PROTOCOLS</li></a>
 +
<a class="hi-icon" href="safety.html"><li>SAFETY FORM</li></a>
 +
<a class="hi-icon" href="bibliography.html"><li>BIBLIOGRAPHY</li></a>
 +
</ul>
 +
</li>
-
h2 {
+
<li class="menuulli">
-
font-family: "LatoReg", sans-serif;
+
<a class="menuullia" href="modeling.html" id="link-modeling">
-
color: #fff;
+
<span>MODELING</span>
-
font-size: 6em;
+
</a>
-
bottom-bottom: -10px;
+
<ul class="ssmenu" id="modeling">
-
font-weight: normal;
+
<a href="modeling.html" class="hu-icon"><li class="iconmenu"><img src="img/picto/mod.png" alt="Picto modeling" /><br/>MODELING</li></a>
-
line-height: 20px;
+
<a class="hi-icon" href="whatis.html"><li>WHAT IS MODELING ?</li></a>
-
}
+
<a class="hi-icon" href="molecular.html"><li>MOLECULAR MODELISATION</li></a>
 +
<a class="hi-icon" href="formation.html"><li>CURLI FORMATION</li></a>
 +
<a class="hi-icon" href="chelation.html"><li>NI CHELATION</li></a>
 +
</ul>
 +
</li>
-
h4 {
+
<li class="menuulli">
-
font-family: "LatoLig", sans-serif;
+
<a class="menuullia" href="human.html" id="link-human">
-
color: #fff;
+
<span>&nbsp;&nbsp;HUMAN PRACTICE</span>
-
font-size: 3em;
+
</a>
-
bottom-bottom: -10px;
+
<ul class="ssmenu" id="human">
-
font-weight: normal;
+
<a href="human.html" class="hu-icon"><li class="iconmenu"><img src="img/picto/hum.png" alt="Picto Human practice" /><br/>HUMAN<br/>PRACTICE</li></a>
-
line-height: 20px;
+
<a class="hi-icon" href="interest.html"><li>INTEREST OF THIS PROJECT</li></a>
-
}
+
<a class="hi-icon" href="perception.html"><li>PERCEPTION OF THE BIOLOGY</li></a>
 +
<a class="hi-icon" href="newsletter.html"><li>NEWSLETTER</li></a>
 +
</ul>
 +
</li>
 +
<li class="menuulli">
 +
<a class="menuullia" href="team.html" id="link-team">
 +
<span>TEAM</span>
 +
</a>
 +
<ul class="ssmenu" id="team">
 +
<a href="team.html" class="hu-icon"><li class="iconmenu"><img src="img/picto/team.png" alt="Picto team" /><br/>TEAM</li></a>
 +
<a class="hi-icon" href="insa.html"><li>INSA</li></a>
 +
<a class="hi-icon" href="sponsors.html"><li>SPONSORS</li></a>
 +
<a class="hi-icon" href="collaborations.html"><li>COLLABORATIONS</li></a>
 +
<a class="hi-icon" href="havefun.html"><li>HAVE FUN WITH IGEM</li></a>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
-
h3 {
+
<!-- FIN DU MENU -->
-
font-family: "Roboto", sans-serif;
+
-
color: #fff;
+
-
font-size: 1.3em;
+
-
text-align: center;
+
-
font-weight: normal;
+
-
}
+
-
ul {
 
-
list-style-type: none;
 
-
}
 
-
a {
+
<!-- PAGE D'ACCUEIL -->
-
text-decoration: none;
+
<div id="accueil">
-
font-family: "Roboto", sans-serif;
+
<div id="igem">
-
color: #fff;
+
<img src="img/menu/insa.png" alt="INSA" /><img src="img/menu/igem.png" alt="IGEM" />
-
}
+
</div>
 +
<h2>CURLY'ON</h2>
 +
<img src="img/traits.png" alt="Décoration liée au titre" />
 +
<div id="icones">
 +
<ul>
 +
<li class="icon"><a href="project.html" class="hu-icon"><img src="img/picto/proj.png" alt="Picto project" /><br/>PROJECT</a></li>
 +
<li class="icon"><a href="wetlab.html" class="hu-icon"><img src="img/picto/wet.png" alt="Picto Wetlab" /><br/>WETLAB</a></li>
 +
<li class="icon"><a href="modeling.html" class="hu-icon"><img src="img/picto/mod.png" alt="Picto modeling" /><br/>MODELING</a></li>
 +
<li class="icon"><a href="human.html" class="hu-icon"><img src="img/picto/hum.png" alt="Picto Human practice" /><br/>HUMAN<br/>PRACTICE</a></li>
 +
<li class="icon"><a href="team.html" class="hu-icon"><img src="img/picto/team.png" alt="Picto team" /><br/>TEAM</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<!-- FIN DE LA PAGE D'ACCEUIL -->
-
/* MENU */
+
<!-- FOOTER -->
-
#menu {
+
<div id="footer">
-
    position: fixed;
+
<a href="https://www.facebook.com/insaadnconceptclub"><img id="fb" src="img/fb.png" alt="Notre page Facebook" /></a>
-
    width: 50px;
+
<div id="contact">
-
    top: 0;
+
<h3>CONTACT US</h3>
-
    left: 0;
+
<div id="address1">
-
    bottom: 0;
+
<p>IGEM Insa - Institut Nationale des Sciences Appliquées<br/>
-
    right: 0;
+
25 rue de la Doua<br/>
-
    background: #248588;
+
69000 - LYON<p>
-
}
+
</div>
 +
<div id="address2">
 +
<p>Mail : igem@gmail.com<br/>
 +
Téléphone : 09.05.65.98.47<p>
 +
</div>
 +
</div>
 +
<div id="sponsors">
 +
<h3>OUR SPONSORS</h3>
 +
<img src="img/biomereux.png" alt="Biomérieux" />
 +
</div>
-
#menuul{
+
<div id="copyright">
-
text-align: center;
+
<p>Copyright (c) 2014 - igem.org - Alice Blot (potopov.fr) - All rights reserved</p>
-
padding-bottom: 10px;
+
</div>
-
margin: 0;
+
</div>
-
width: 100%;
+
-
padding: 0;
+
-
position: absolute;
+
-
top: 0;
+
-
bottom: 0;
+
-
left: 0;
+
-
right: 0;
+
-
}
+
-
.menuulli{
+
<!-- FIN DU FOOTER -->
-
margin: 0;
+
-
display: block;
+
</body>
-
height: 18%;
+
</html>
-
position: relative;
+
-
text-align: center;
+
-
width: 100%;
+
-
}
+
-
 
+
-
.menuullia {
+
-
    display: block;
+
-
    text-align: center;
+
-
    position: absolute;
+
-
    top: 0;
+
-
    bottom: 0;
+
-
    left: 0;
+
-
    right: 0;
+
-
}
+
-
 
+
-
.menuullia span {
+
-
    -webkit-transform: rotateZ(-90deg);
+
-
    -moz-transform: rotateZ(-90deg);
+
-
    -o-transform: rotateZ(-90deg);
+
-
    transform: rotateZ(-90deg);
+
-
    display: block;
+
-
    top: 50%;
+
-
    position: absolute;
+
-
    margin-top: -8px;
+
-
    width: 50px;
+
-
    color: #FFFFFF;
+
-
}
+
-
 
+
-
/* Sous menu */
+
-
.ssmenu {
+
-
width: 250px;
+
-
height: 350px;
+
-
top: 0;
+
-
text-align: center;
+
-
background-color: #248588;
+
-
line-height: 32px;
+
-
padding-top: 50px;
+
-
padding-left: 0;
+
-
display: none;
+
-
position: absolute;
+
-
left: 50px;
+
-
position: fixed;
+
-
height: 100%;
+
-
}
+
-
 
+
-
.iconmenu {
+
-
background:#FFF;
+
-
    width:130px;
+
-
    height:115px;
+
-
    text-align:center;
+
-
    border-radius:50%;
+
-
    margin: auto;
+
-
    padding-top: 15px;
+
-
    overflow: hidden;
+
-
    line-height: 20px;
+
-
    margin-bottom: 20px;
+
-
    -moz-transition: all 0.3s ease-out; 
+
-
    -webkit-transition: all 0.3s ease-out; 
+
-
    transition: all 0.3s ease-out;
+
-
}
+
-
.hu-icon {color: #285459;}
+
-
 
+
-
.hu-icon li:hover { 
+
-
    box-shadow: 0 0 65px #285459;
+
-
    -moz-box-shadow: 0 0 65px #285459;
+
-
    -webkit-box-shadow: 0 0 65px #285459; 
+
-
} 
+
-
 
+
-
.hi-icon li:hover {
+
-
background-color: #285459;
+
-
}
+
-
 
+
-
.ssmenu:nth-child(odd) {background-color: #285459;}
+
-
 
+
-
.menuulli:nth-child(odd) { background:#46adb2; }
+
-
.menuulli:first-child {
+
-
height:6% !important;
+
-
}
+
-
.menuulli:hover .ssmenu {display:block !important;}
+
-
 
+
-
 
+
-
/*FOOTER*/
+
-
 
+
-
#footer{
+
-
margin-top: 100px;
+
-
width: 100%;
+
-
background-color: #285459;
+
-
bottom: 0;
+
-
}
+
-
 
+
-
#footer p{
+
-
color:#fff;
+
-
font-family: "Roboto", sans-serif;
+
-
font-size: 0.9em;
+
-
overflow:hidden;
+
-
}
+
-
 
+
-
#contact{
+
-
float:left;
+
-
display: inline-block;
+
-
background-color: #285459;
+
-
padding-left: 30px;
+
-
margin-left: 50px;
+
-
width: 45%;
+
-
}
+
-
 
+
-
#address1{
+
-
float: left;
+
-
}
+
-
 
+
-
#address2{
+
-
float: left;
+
-
margin-left: 30px;
+
-
}
+
-
 
+
-
#sponsors{
+
-
width: 45%;
+
-
display: inline-block;
+
-
background-color: #285459;
+
-
padding-left: 30px;
+
-
}
+
-
 
+
-
#copyright {
+
-
text-align: center;
+
-
font-size: 0.8em;
+
-
background-color: #285459;
+
-
padding-bottom: 6px;
+
-
padding-top: 6px;
+
-
}
+
-
 
+
-
#fb {
+
-
float: right;
+
-
margin-right: 10px;
+
-
margin-top: 20px;
+
-
}
+

Revision as of 10:38, 28 September 2014

<!DOCTYPE html> Curly'on - IGEM 2014 INSA-LYON

Retrieved from "http://2014.igem.org/Team:INSA-Lyon"