From 2d950c3fa3b8107f941a80f88127ab45e371d128 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 6 Dec 2018 19:39:29 +0100
Subject: homepage css

---
 site/public/index.html | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

(limited to 'site/public/index.html')

diff --git a/site/public/index.html b/site/public/index.html
index 3ce22936..51006b59 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -26,22 +26,31 @@
   </header>
   <div class="content">
     
-  <section><p>MegaPixels is an art project that explores the dark side of face recognition training data and the future of computer vision</p>
-<p>Made by Adam Harvey in partnership with Mozilla.<br>
-Read more [about MegaPixels]</p>
-<p>[Explore Datasets]  [Explore Algorithms]</p>
-<h2>Facial Recognition Datasets</h2>
+  <div class='hero'>
+    <div id="face_container">
+      <div class='currentFace'></div>
+    </div>
+    <div class='intro'>
+      <div class='headline'>
+        MegaPixels is an art project that explores the dark side of face recognition and the future of computer vision.
+      </div>
+
+      <div class='buttons'>
+        <a href="/datasets/"><button class='important'>Explore Datasets</button></a><a href="/analyze/"><button class='normal'>Analyze Your Face</button></a>
+      </div>
+
+      <div class='under'>
+        Made by Adam Harvey in partnership with Mozilla.<br/>
+        <a href='/about/'>Read more about MegaPixels</a>
+      </div>
+    </div>
+  </div>
+
+  <section><h2>Facial Recognition Datasets</h2>
 <p>Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <h3>Summary</h3>
-<ul>
-<li>275 datsets found</li>
-<li>Created between the years 1993-2018</li>
-<li>Smallest dataset: 20 images</li>
-<li>Largest dataset: 10,000,000 images</li>
-<li>Highest resolution faces: 450x500 (Unconstrained College Students)</li>
-<li>Lowest resolution faces: 16x20 pixels (QMUL SurvFace)</li>
-</ul>
-</section>
+</section><section><div class='meta'><div><div class='gray'>Found</div><div>275 datasets</div></div><div><div class='gray'>Created between</div><div>1993-2018</div></div><div><div class='gray'>Smallest dataset</div><div>20 images</div></div><div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div></div></section><section><div class='meta'><div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div><div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div></div></section><section></section>
+
 
   </div>
   <footer>
@@ -59,5 +68,10 @@ Read more [about MegaPixels]</p>
     </div>
   </footer>
 </body>
+
+<script src="/assets/js/vendor/three.min.js"></script>
+<script src="/assets/js/vendor/three.meshline.js"></script>
+<script src="/assets/js/app/face.js"></script>
+
 <script src="/assets/js/app/site.js"></script>
 </html>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2