Team:INSA-Lyon/css home

From 2014.igem.org

(Difference between revisions)

Revision as of 18:45, 28 September 2014

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 */

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;

}

@@ 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 {
 	margin:0;
@@ Line 275: / Line 46: @@
      text-align: center;
      background:#FFF;
-    border-radius:50%;
+	border-radius:50%;
      padding-top: 25px;
      margin: 0 20px;