Team:INSA-Lyon/css home

From 2014.igem.org

(Difference between revisions)
 
(56 intermediate revisions not shown)
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 {
html, body {
padding:0;
padding:0;
-
margin-top: -10px;
+
background-position: center top;
-
}
+
background-repeat: no-repeat;
-
 
+
background-attachment:fixed;
-
body {
+
background-image: url('https://static.igem.org/mediawiki/2014/c/ca/Insa_fond0.jpg');
-
width: 100%;
+
-webkit-background-size: cover; /* pour Chrome et Safari */
 +
-moz-background-size: cover; /* pour Firefox */
 +
-background-size: cover; /* pour Opera */
 +
background-size: cover;
}
}
-
p {
+
h2{
-
font-family: "LatoReg", sans-serif;
+
margin-top: 50px;
}
}
-
h2 {
 
-
font-family: "LatoReg", sans-serif;
 
-
color: #fff;
 
-
font-size: 6em;
 
-
bottom-bottom: -10px;
 
-
font-weight: normal;
 
-
line-height: 20px;
 
-
}
 
-
h4 {
+
/* ACCUEIL */
-
font-family: "LatoLig", sans-serif;
+
#igem{
-
color: #fff;
+
margin-top: 25px;
-
font-size: 3em;
+
margin-right: 30px;
-
bottom-bottom: -10px;
+
text-align: right;
-
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 {
+
#accueil {
-
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%;
width: 100%;
-
padding: 0;
+
margin: auto;
-
position: absolute;
+
-
top: 0;
+
-
bottom: 0;
+
-
left: 0;
+
-
right: 0;
+
-
}
+
-
 
+
-
.menuulli{
+
-
margin: 0;
+
-
display: block;
+
-
height: 18%;
+
-
position: relative;
+
text-align: center;
text-align: center;
-
width: 100%;
 
}
}
-
.menuullia {
+
#accueil li {
-
    display: block;
+
margin-top: 100px;
-
    text-align: center;
+
-
    position: absolute;
+
-
    top: 0;
+
-
    bottom: 0;
+
-
    left: 0;
+
-
    right: 0;
+
}
}
-
.menuullia span {
+
#icones {
-
    -webkit-transform: rotateZ(-90deg);
+
margin-top: 100px;
-
    -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 */
+
.icon {
-
.ssmenu {
+
display: inline;
-
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 {
+
.icon a {  
-
background:#FFF;
+
    display: inline-block;
-
     width:130px;
+
     width:150px;
-
     height:115px;
+
     height:125px;
-
     text-align:center;
+
     text-align: center; 
 +
    background:#FFF;
     border-radius:50%;
     border-radius:50%;
-
     margin: auto;
+
    padding-top: 25px; 
-
     padding-top: 15px;
+
     margin: 0 20px;
 +
     color: #285459;
 +
    line-height: 22px;
     overflow: hidden;
     overflow: hidden;
-
    line-height: 20px;
 
-
    margin-bottom: 20px;
 
     -moz-transition: all 0.3s ease-out;   
     -moz-transition: all 0.3s ease-out;   
     -webkit-transition: all 0.3s ease-out;   
     -webkit-transition: all 0.3s ease-out;   
     transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
-
}
+
}
-
.hu-icon {color: #285459;}
+
-
.hu-icon li:hover {   
+
.icon a:hover, 
 +
.icon a:focus {   
     box-shadow: 0 0 65px #285459;
     box-shadow: 0 0 65px #285459;
     -moz-box-shadow: 0 0 65px #285459;
     -moz-box-shadow: 0 0 65px #285459;
     -webkit-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;}
+
/*--------------------- CSS DU FOOTER ---------------------------------------------*/
-
.menuulli:nth-child(odd) { background:#46adb2; }
 
-
.menuulli:first-child {
 
-
height:6% !important;
 
-
}
 
-
.menuulli:hover .ssmenu {display:block !important;}
 
-
 
+
#footer
-
/*FOOTER*/
+
{
-
 
+
padding-top: 15px;
-
#footer{
+
background-color: #285459;
-
margin-top: 100px;
+
margin-top: 250px;
-
width: 100%;
+
margin-bottom: -50px;
-
background-color: #285459;
+
height: 200px;
-
bottom: 0;
+
}
}
Line 187: Line 85:
overflow:hidden;
overflow:hidden;
}
}
 +
 +
#footer a:visited {
 +
color:#ffffff;
 +
}
 +
 +
#footer a {
 +
color:#ffffff;
 +
}
 +
#contact{
#contact{
-
float:left;
 
display: inline-block;
display: inline-block;
background-color: #285459;
background-color: #285459;
padding-left: 30px;
padding-left: 30px;
margin-left: 50px;
margin-left: 50px;
-
width: 45%;
 
}
}
-
#address1{
+
#footer1{
-
float: left;
+
float: left;
 +
width: 250px;
 +
margin-right: 50px;
 +
display: inline-block;
}
}
-
 
+
#footer2{
-
#address2{
+
float: left;
-
float: left;
+
width: 250px;
-
margin-left: 30px;
+
}
}
-
#sponsors{
+
#footer3{
-
width: 45%;
+
width: 250px;
-
display: inline-block;
+
margin-left: 50px;
-
background-color: #285459;
+
display: inline-block;
-
padding-left: 30px;
+
}
}
 +
#copyright {
#copyright {
-
text-align: center;
+
font-size: 0.8em !important;
-
font-size: 0.8em;
+
background-color: #285459;
background-color: #285459;
-
padding-bottom: 6px;
+
padding-bottom: 2px;
-
padding-top: 6px;
+
padding-top: 16px;
}
}
Line 224: Line 130:
float: right;
float: right;
margin-right: 10px;
margin-right: 10px;
-
margin-top: 20px;
+
        margin-left: -70px;
}
}
-
 
+
#twitter {
-
html, body {
+
        float: right;
-
margin:0;
+
        margin-right: 50px;
-
padding:0;
+
        margin-left: -60px;
-
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 */
+
-
#igem{
+
-
text-align: right;
+
-
margin: 20px;
+
-
}
+
-
 
+
-
#igem img{
+
-
margin: 10px;
+
-
}
+
-
 
+
-
#accueil {
+
-
width: 100%;
+
-
margin: auto;
+
-
text-align: center;
+
-
}
+
-
 
+
-
#accueil li {
+
-
margin-top: 100px;
+
-
}
+
-
 
+
-
#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;
+
}
}

Latest revision as of 01:45, 18 October 2014

html, body { padding:0; background-position: center top; background-repeat: no-repeat; background-attachment:fixed; background-image: url('https://static.igem.org/mediawiki/2014/c/ca/Insa_fond0.jpg'); -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -background-size: cover; /* pour Opera */ background-size: cover; }

h2{ margin-top: 50px; }


/* ACCUEIL */

  1. igem{

margin-top: 25px; margin-right: 30px; text-align: right; }


  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;

}

/*--------------------- CSS DU FOOTER ---------------------------------------------*/


  1. footer

{ padding-top: 15px; background-color: #285459; margin-top: 250px; margin-bottom: -50px; height: 200px; }

  1. footer p{

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

  1. footer a:visited {

color:#ffffff; }

  1. footer a {

color:#ffffff; }


  1. contact{

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

  1. footer1{

float: left; width: 250px; margin-right: 50px; display: inline-block; }

  1. footer2{

float: left; width: 250px; }

  1. footer3{

width: 250px; margin-left: 50px; display: inline-block; }


  1. copyright {

font-size: 0.8em !important; background-color: #285459; padding-bottom: 2px; padding-top: 16px; }

  1. fb {

float: right; margin-right: 10px; 

       margin-left: -70px;

}

  1. twitter { 
       float: right;
       margin-right: 50px;
       margin-left: -60px;

}

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