Team:INSA-Lyon

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html lang="fr">
+
@font-face {
-
<head>
+
font-family: "Roboto";
-
<meta charset="utf-8">
+
    src: url('font/RobotoCondensed-Regular.ttf');
-
<title>Curly'on - IGEM 2014 INSA-LYON</title>
+
}
 +
@font-face {
 +
font-family: "LatoReg";
 +
    src: url('font/Lato-Reg.ttf');
 +
}
 +
@font-face {
 +
font-family: "LatoLig";
 +
    src: url('font/Lato-Lig.ttf');
 +
}
-
<link rel="stylesheet" href="accueil.css" />
+
html, body {
-
<link rel="stylesheet" href="style.css" />
+
padding:0;
-
+
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%;
 +
}
-
<!-- ICI LE CODE DU MENU VERTICAL DE GAUCHE -->
+
p {
-
<div id="menu">
+
font-family: "LatoReg", sans-serif;
-
<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>
+
-
<li class="menuulli">
+
h2 {
-
<a class="menuullia" href="modeling.html" id="link-modeling">
+
font-family: "LatoReg", sans-serif;
-
<span>MODELING</span>
+
color: #fff;
-
</a>
+
font-size: 6em;
-
<ul class="ssmenu" id="modeling">
+
bottom-bottom: -10px;
-
<a href="modeling.html" class="hu-icon"><li class="iconmenu"><img src="img/picto/mod.png" alt="Picto modeling" /><br/>MODELING</li></a>
+
font-weight: normal;
-
<a class="hi-icon" href="whatis.html"><li>WHAT IS MODELING ?</li></a>
+
line-height: 20px;
-
<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>
+
-
<li class="menuulli">
+
h4 {
-
<a class="menuullia" href="human.html" id="link-human">
+
font-family: "LatoLig", sans-serif;
-
<span>&nbsp;&nbsp;HUMAN PRACTICE</span>
+
color: #fff;
-
</a>
+
font-size: 3em;
-
<ul class="ssmenu" id="human">
+
bottom-bottom: -10px;
-
<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>
+
font-weight: normal;
-
<a class="hi-icon" href="interest.html"><li>INTEREST OF THIS PROJECT</li></a>
+
line-height: 20px;
-
<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>
 
-
<!-- FIN DU MENU -->
+
h3 {
 +
font-family: "Roboto", sans-serif;
 +
color: #fff;
 +
font-size: 1.3em;
 +
text-align: center;
 +
font-weight: normal;
 +
}
 +
ul {
 +
list-style-type: none;
 +
}
-
<!-- PAGE D'ACCUEIL -->
+
a {
-
<div id="accueil">
+
text-decoration: none;
-
<div id="igem">
+
font-family: "Roboto", sans-serif;
-
<img src="img/menu/insa.png" alt="INSA" /><img src="img/menu/igem.png" alt="IGEM" />
+
color: #fff;
-
</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 -->
+
-
<!-- FOOTER -->
+
/* MENU */
-
<div id="footer">
+
#menu {
-
<a href="https://www.facebook.com/insaadnconceptclub"><img id="fb" src="img/fb.png" alt="Notre page Facebook" /></a>
+
    position: fixed;
-
<div id="contact">
+
    width: 50px;
-
<h3>CONTACT US</h3>
+
    top: 0;
-
<div id="address1">
+
    left: 0;
-
<p>IGEM Insa - Institut Nationale des Sciences Appliquées<br/>
+
    bottom: 0;
-
25 rue de la Doua<br/>
+
    right: 0;
-
69000 - LYON<p>
+
    background: #248588;
-
</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>
+
-
<div id="copyright">
+
#menuul{
-
<p>Copyright (c) 2014 - igem.org - Alice Blot (potopov.fr) - All rights reserved</p>
+
text-align: center;
-
</div>
+
padding-bottom: 10px;
-
</div>
+
margin: 0;
 +
width: 100%;
 +
padding: 0;
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
}
-
<!-- FIN DU FOOTER -->
+
.menuulli{
-
+
margin: 0;
-
</body>
+
display: block;
-
</html>
+
height: 18%;
 +
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:37, 28 September 2014

@font-face { font-family: "Roboto"; 

   src: url('font/RobotoCondensed-Regular.ttf');

} @font-face { font-family: "LatoReg"; 

   src: url('font/Lato-Reg.ttf');

} @font-face { font-family: "LatoLig"; 

   src: url('font/Lato-Lig.ttf');

}

html, body { padding:0; margin-top: -10px; }

body { width: 100%; }

p { font-family: "LatoReg", sans-serif; }

h2 { font-family: "LatoReg", sans-serif; color: #fff; font-size: 6em; bottom-bottom: -10px; font-weight: normal; line-height: 20px; }

h4 { font-family: "LatoLig", sans-serif; color: #fff; font-size: 3em; bottom-bottom: -10px; font-weight: normal; line-height: 20px; }


h3 { font-family: "Roboto", sans-serif; color: #fff; font-size: 1.3em; text-align: center; font-weight: normal; }

ul { list-style-type: none; }

a { text-decoration: none; font-family: "Roboto", sans-serif; color: #fff; }


/* MENU */

  1. menu { 
   position: fixed;
   width: 50px;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: #248588;

}

  1. menuul{

text-align: center; padding-bottom: 10px; margin: 0; width: 100%; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.menuulli{ margin: 0; display: block; height: 18%; 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*/

  1. footer{

margin-top: 100px; width: 100%; background-color: #285459; bottom: 0; }

  1. footer p{

color:#fff; font-family: "Roboto", sans-serif; font-size: 0.9em; overflow:hidden; }

  1. contact{

float:left; display: inline-block; background-color: #285459; padding-left: 30px; margin-left: 50px; width: 45%; }

  1. address1{

float: left; }

  1. address2{

float: left; margin-left: 30px; }

  1. sponsors{

width: 45%; display: inline-block; background-color: #285459; padding-left: 30px; }

  1. copyright {

text-align: center; font-size: 0.8em; background-color: #285459; padding-bottom: 6px; padding-top: 6px; }

  1. fb {

float: right; margin-right: 10px; margin-top: 20px; }

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