Team:INSA-Lyon/css home

From 2014.igem.org

(Difference between revisions)
(Created page with "html, body { margin:0; padding:0; background-position: center top; background-repeat: no-repeat; background-attachment:fixed; background-image: url('img/background/fond2.jp...")
Line 1: Line 1:
 +
@font-face {
 +
font-family: "Roboto";
 +
    src: url('http://potopov.fr/igem/font/RobotoCondensed-Regular.ttf');
 +
}
 +
@font-face {
 +
font-family: "LatoReg";
 +
    src: url('http://potopov.fr/igem/font/Lato-Reg.ttf');
 +
}
 +
@font-face {
 +
font-family: "LatoLig";
 +
    src: url('http://potopov.fr/igem/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 */
 +
#menu {
 +
    position: fixed;
 +
    width: 50px;
 +
    top: 0;
 +
    left: 0;
 +
    bottom: 0;
 +
    right: 0;
 +
    background: #248588;
 +
}
 +
 +
#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*/
 +
 +
#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;
 +
}
 +
 +
html, body {
html, body {
margin:0;
margin:0;
Line 5: Line 234:
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment:fixed;
background-attachment:fixed;
-
background-image: url('img/background/fond2.jpg');
+
background-image: url('http://potopov.fr/igem/img/background/fond2.jpg');
-webkit-background-size: cover; /* pour Chrome et Safari */
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-moz-background-size: cover; /* pour Firefox */
-background-size: cover; /* pour Opera */
-background-size: cover; /* pour Opera */
-
background-size: cover; /* version standardisée */
+
background-size: cover;
}
}
Line 46: Line 275:
     text-align: center;   
     text-align: center;   
     background:#FFF;
     background:#FFF;
-
border-radius:50%;
+
    border-radius:50%;
     padding-top: 25px;   
     padding-top: 25px;   
     margin: 0 20px;   
     margin: 0 20px;   

Revision as of 11:03, 28 September 2014

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

   src: url('http://potopov.fr/igem/font/RobotoCondensed-Regular.ttf');

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

   src: url('http://potopov.fr/igem/font/Lato-Reg.ttf');

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

   src: url('http://potopov.fr/igem/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; }


html, body { margin:0; padding:0; background-position: center top; background-repeat: no-repeat; background-attachment:fixed; background-image: url('http://potopov.fr/igem/img/background/fond2.jpg'); -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -background-size: cover; /* pour Opera */ background-size: cover; }

/* ACCUEIL */

  1. igem{

text-align: right; margin: 20px; }

  1. igem img{

margin: 10px; }

  1. accueil {

width: 100%; margin: auto; text-align: center; }

  1. accueil li {

margin-top: 100px; }

  1. icones {

margin-top: 100px; }

.icon { display: inline; }

.icon a { 

   display: inline-block;  
   width:150px;
   height:125px;
   text-align: center;  
   background:#FFF;
   border-radius:50%;
   padding-top: 25px;  
   margin: 0 20px;  
   color: #285459;
   line-height: 22px;
   overflow: hidden;
   -moz-transition: all 0.3s ease-out;  
   -webkit-transition: all 0.3s ease-out;  
   transition: all 0.3s ease-out;

}

.icon a:hover, .icon a:focus { 

   box-shadow: 0 0 65px #285459;
   -moz-box-shadow: 0 0 65px #285459;
   -webkit-box-shadow: 0 0 65px #285459;

}

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