DevLyon · fpellet · May 1, 2013 · May 1, 2013
diff --git a/css/main.css b/css/main.css
@@ -32,22 +32,66 @@ article {
 }

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

 #members li > * {
    display: block;
 }

 #members li > *:first-child {
-    float: left;
    margin: 5px;
 }

 #members li > .name {
    font-size: 16px;
    font-weight: bold;
    margin-top: 5px;
+}
+
+.hopwork span {
+    display: inline-block;
+    background-image: url("../img/hopwork.jpg");
+    width: 30px;
+    height: 28px;
+    font-size: 0;
+}
+
+.github span {
+    display: inline-block;
+    background-image: url("../img/github.png");
+    width: 30px;
+    height: 30px;
+    font-size: 0;
+}
+
+.twitter span {
+    display: inline-block;
+    background-image: url("../img/twitter.png");
+    width: 30px;
+    height: 30px;
+    font-size: 0;
+}
+
+.viadeo span {
+    display: inline-block;
+    background-image: url("../img/viadeo.png");
+    width: 30px;
+    height: 30px;
+    font-size: 0;
+}
+
+.linkedin span {
+    display: inline-block;
+    background-image: url("../img/linkedin.png");
+    width: 30px;
+    height: 30px;
+    font-size: 0;
+}
+
+.clear {
+    clear: both;
 }
diff --git a/img/alfred.jpg b/img/alfred.jpg
diff --git a/img/alfred_almendra.jpg b/img/alfred_almendra.jpg
diff --git a/img/emi.JPG b/img/emi.JPG
diff --git a/img/emilien_pecoul.jpg b/img/emilien_pecoul.jpg
diff --git a/img/florent.png b/img/florent.png
diff --git a/img/florent_pellet.jpg b/img/florent_pellet.jpg
diff --git a/img/github.png b/img/github.png
diff --git a/img/hugo.jpg b/img/hugo.jpg
diff --git a/img/hugo_lassiege.jpg b/img/hugo_lassiege.jpg
diff --git a/img/linkedin.png b/img/linkedin.png
diff --git a/img/pascal.png b/img/pascal.png
diff --git a/img/pascal_craponne.jpg b/img/pascal_craponne.jpg
diff --git a/img/viadeo.png b/img/viadeo.png
diff --git a/index.html b/index.html
@@ -40,44 +40,64 @@ <h3>Une vision où la qualité du logiciel est mise en avant, où les informatic
        <h2>Les membres</h2>
        <ul>
            <li>
-                <img alt="Alfred Almendra" src="img/alfred.jpg" />
-                <span class="name">Alfred Almendra</span>
-                <a href="https://twitter.com/AlfredAlmendra">@AlfredAlmendra</a>
-                <a href="http://www.hopwork.com/profile/510d5eb2d393273e34aeff18">Hopwork</a>
-                <a href="https://github.com/alfredalmendra">GitHub</a>
+                <div><img alt="Alfred Almendra" src="img/alfred_almendra.jpg" /></div>
+                <div class="name">Alfred Almendra</div>
+                <div>
+                    <a class="twitter" href="https://twitter.com/AlfredAlmendra"><span>@AlfredAlmendra</span></a>
+                    <a class="github" href="ttps://github.com/alfredalmendra"><span>GitHub</span></a>
+                    <a class="linkedin" href="http://fr.linkedin.com/in/alfredalmendra/fr"><span>Linkedin</span></a>
+                    <a class="viadeo" href="http://fr.viadeo.com/fr/profile/alfred.almendra"><span>Viadeo</span></a>
+                </div>
            </li>
            <li>
-                <img alt="Emilien Pecoul" src="img/emi.jpg" />
-                <span class="name">Emilien Pecoul</span>
-                <a href="https://twitter.com/Ouarzy">@Ouarzy</a>
-                <a href="http://www.hopwork.com/profile/515fcaa5ed85b7b6c19b6627#">Hopwork</a>
-                <a href="https://github.com/Ouarzy">GitHub</a>
-                <a href="http://ouarzy.blog4ever.com/">Blog</a>
-                <span>epecoul'at'gmail.com</span>
+                <div><img alt="Emilien Pecoul" src="img/emilien_pecoul.jpg" /></div>
+                <div class="name">Emilien Pecoul</div>
+                <div>
+                    <a class="twitter" href="https://twitter.com/Ouarzy"><span>@Ouarzy</span></a>
+                    <a class="hopwork" href="http://www.hopwork.com/profile/515fcaa5ed85b7b6c19b6627#"><span>Hopwork</span></a>
+                    <a class="github" href="https://github.com/Ouarzy"><span>GitHub</span></a>
+                    <a class="linkedin" href="http://fr.linkedin.com/pub/emilien-pecoul/53/91/6a0"><span>Linkedin</span></a>
+                    <a class="viadeo" href="http://fr.viadeo.com/fr/profile/emilien.pecoul"><span>Viadeo</span></a>
+                </div>
+                <div><a href="http://ouarzy.blog4ever.com/">ouarzy.blog4ever.com</a></div>
+                <div><span>epecoul'at'gmail.com</span></div>
            </li>
            <li>
-                <img alt="Florent Pellet" src="img/florent.png" />
-                <span class="name">Florent Pellet</span>
-                <a href="https://twitter.com/florentpellet">@florentpellet</a>
-                <a href="http://www.hopwork.com/profile/510d5eb2d393273e34aeff18">Hopwork</a>
-                <a href="https://github.com/fpellet">GitHub</a>
-                <a href="http://www.wittycoding.com/">Blog</a>
+                <div><img alt="Florent Pellet" src="img/florent_pellet.jpg" /></div>
+                <div class="name">Florent Pellet</div>
+                <div>
+                    <a class="twitter" href="https://twitter.com/florentpellet"><span>@florentpellet</span></a>
+                    <a class="hopwork" href="http://www.hopwork.com/profile/510d5eb2d393273e34aeff18#"><span>Hopwork</span></a>
+                    <a class="github" href="https://github.com/fpellet"><span>GitHub</span></a>
+                    <a class="linkedin" href="http://fr.linkedin.com/in/florentpellet"><span>Linkedin</span></a>
+                    <a class="viadeo" href="http://fr.viadeo.com/fr/profile/florent.pellet"><span>Viadeo</span></a>
+                </div>
+                <a href="http://www.florentpellet.fr/">www.florentpellet.fr</a>
+                <a href="http://www.wittycoding.com/">www.wittycoding.com</a>
            </li>
            <li>
-                <img alt="Hugo Lassiège" src="img/hugo.jpg" />
-                <span class="name">Hugo Lassiège</span>
-                <a href="https://twitter.com/hugolassiege">@hugolassiege</a>
-                <a href="http://www.hopwork.com/profile/506987a2e4b07933abd78d4b">Hopwork</a>
-                <a href="https://github.com/hlassiege">GitHub</a>
-                <a href="http://hakanai.free.fr/">Blog</a>
+                <div><img alt="Hugo Lassiège" src="img/hugo_lassiege.jpg" /></div>
+                <div class="name">Hugo Lassiège</div>
+                <div>
+                    <a class="twitter" href="https://twitter.com/hugolassiege"><span>@hugolassiege</span></a>
+                    <a class="hopwork" href="http://www.hopwork.com/profile/506987a2e4b07933abd78d4b"><span>Hopwork</span></a>
+                    <a class="github" href="https://github.com/hlassiege"><span>GitHub</span></a>
+                    <a class="linkedin" href="http://fr.linkedin.com/in/hugolassiege"><span>Linkedin</span></a>
+                </div>
+                <div><a href="http://hakanai.free.fr/">hakanai.free.fr</a></div>
            </li>
            <li>
-                <img alt="Pascal Craponne" src="img/pascal.png" />
-                <span class="name">Pascal Craponne</span>
-                <a href="https://twitter.com/picrap">@picrap</a>
-                <a href="https://github.com/picrap">GitHub</a>
+                <div><img alt="Pascal Craponne" src="img/pascal_craponne.jpg" /></div>
+                <div class="name">Pascal Craponne</div>
+                <div>
+                    <a class="twitter" href="https://twitter.com/picrap"><span>@picrap</span></a>
+                    <a class="github" href="https://github.com/picrap"><span>GitHub</span></a>
+                    <a class="linkedin" href="http://fr.linkedin.com/in/pascalcraponne"><span>Linkedin</span></a>
+                    <a class="viadeo" href="http://fr.viadeo.com/fr/profile/pascal.craponne"><span>Viadeo</span></a>
+                </div>
            </li>
        </ul>
+        <div class="clear"></div>
    </article>
    <article id="contact">
        <h2>Nous contacter</h2>