DevLyon · fpellet · May 16, 2013 · May 2, 2013 · May 2, 2013 · May 2, 2013
diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/main.css b/css/main.css
@@ -27,14 +27,16 @@ article {

 #members ul {
    list-style: none;
+	margin: 0;
+	padding: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
 }

 #members li {
    width: 600px;
    float: left;
-    height: 500px;
+    height: 450px;
    text-align: center;
 }

@@ -52,46 +54,120 @@ article {
    margin-top: 5px;
 }

-.hopwork span {
-    display: inline-block;
-    background-image: url("../img/hopwork.jpg");
-    width: 30px;
-    height: 28px;
-    font-size: 0;
+.clear {
+    clear: both;
 }

-.github span {
-    display: inline-block;
-    background-image: url("../img/github.png");
-    width: 30px;
-    height: 30px;
-    font-size: 0;
+#home {
+    background-image: url("../img/lyon_background.jpg");
+    background-repeat: no-repeat;
+    height: 600px;
+    padding: 0;
 }

-.twitter span {
-    display: inline-block;
-    background-image: url("../img/twitter.png");
-    width: 30px;
-    height: 30px;
-    font-size: 0;
+#home h1 {
+    background-color: #FFF;
+    text-align: center;
+    display: table-cell;
+	vertical-align: middle;
+	font-size: 0;
 }

-.viadeo span {
-    display: inline-block;
-    background-image: url("../img/viadeo.png");
-    width: 30px;
-    height: 30px;
-    font-size: 0;
+#home > div > div {
+    height: 600px;
+    text-align: center;
+    display: table-row;
+    padding-left: 100px;
+}
+
+#home > div {
+    margin-left: 550px;
+    padding-left: 185px;
+}
+
+#home .separator {
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(90%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* IE10+ */
+	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,1) 100%); /* W3C */
+
+	height: 600px;
+	width: 150px;
+	display: block;
+	float: left;
+}
+
+#navbar {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    margin:0;
+}
+
+body {
+    padding: 0;
+}
+
+@media(max-width:1100px) {
+    #home > div {
+        float: right;
+        margin-left: 0;
+    }
+}
+
+@media(max-width:900px) {	
+	#home img {
+		background-color: rgba(255, 255, 255, 0.7);
+		border-radius: 50px;
+		padding: 20px;
+	}
+
+	#home h1 {
+		background: none;
+		margin-top: 0;
+	}
+
+	#home > div {
+		background: none;
+		margin-left: 0;
+		padding-left: 0;
+		display: table;
+		width: 100%;
+	}
+
+	#home .separator {
+		display: none;
+	}
 }

-.linkedin span {
+@media(max-width:480px) {
+    #members li {
+        width: auto;
+        display:block;
+		height: auto;
+    }
+}
+
+.lt-ie9 #navbar
+{
+    display: none;
+}
+
+.sprite { 
+	background: url('../img/linkicos.png') no-repeat top left;  
    display: inline-block;
-    background-image: url("../img/linkedin.png");
-    width: 30px;
-    height: 30px;
    font-size: 0;
-}
+} 
+.sprite.github { background-position: 0px 0px; width: 30px; height: 30px;  } 
+.sprite.hopwork { background-position: -40px 0px; width: 30px; height: 28px;  } 
+.sprite.linkedin { background-position: -80px 0px; width: 30px; height: 30px;  } 
+.sprite.twitter { background-position: -120px 0px; width: 30px; height: 30px;  } 
+.sprite.viadeo { background-position: -160px 0px; width: 30px; height: 30px;  } 
+
+

-.clear {
-    clear: both;
-}
diff --git a/img/linkicos.png b/img/linkicos.png
diff --git a/img/logoDevLyon.svg b/img/logoDevLyon.svg
diff --git a/img/lyon_background.jpg b/img/lyon_background.jpg
diff --git a/img/transition.png b/img/transition.png