Updated homepage.

Author: stas

Diff for: assets/images/screens/account.png

@@ -14,7 +14,7 @@ body {
   background-size: 100%;
 }
 
-img:first-child {
+#logo img {
   margin-top: 3%;
   padding-left: 40px;
 }
@@ -47,3 +47,37 @@ img:first-child {
     margin-left: 0;
   }
 }
+
+#screens img {
+  width: 100px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+/* Lightbox */
+ /* Credits: http://www.studiomoh.com/fun/csslightbox/ */
+.lb {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.lb:target {
+  display: block;
+}
+
+/** IE doesn't support :target, so we use CSS expressions **/
+.lb {
+  display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');
+}
+
+.lb img {
+  border-radius: 3px;
+}

Diff for: assets/images/screens/assignment.png

@@ -5,24 +5,75 @@ layout: default
 
 {::options parse_block_html="true" /}
 
+<div id="logo">
 ![Courseware](/assets/images/courseware.png)
+</div>
 
 <div id="about">
 
 ## The Courseware Project
 
 ### Open Source Learning Management System.
 
-Some of the features include:
+Check the screens below for features.
+
+<div id="screens">
+[![Home Dashboard](/assets/images/screens/home-dashboard.png)](#home-dashboard)
+[![Classroom Start](/assets/images/screens/classroom-start.png)](#classroom-start)
+[![Classroom Settings](/assets/images/screens/classroom-settings.png)](#classroom-settings)
+[![Users Management](/assets/images/screens/users-management.png)](#users-management)
+[![Dashboard](/assets/images/screens/dashboard.png)](#dashboard)
+[![Syllabus](/assets/images/screens/syllabus.png)](#syllabus)
+[![Lecture](/assets/images/screens/lecture.png)](#lecture)
+[![Assignment](/assets/images/screens/assignment.png)](#assignment)
+[![Files](/assets/images/screens/files.png)](#files)
+[![Quiz Preview](/assets/images/screens/quiz-preview.png)](#quiz-preview)
+[![Response](/assets/images/screens/response.png)](#response)
+[![Gradebook](/assets/images/screens/gradebook.png)](#gradebook)
+[![Profile](/assets/images/screens/profile.png)](#profile)
+[![Account](/assets/images/screens/account.png)](#account)
+[![Notifications](/assets/images/screens/notifications.png)](#notifications)
+[![Invitations](/assets/images/screens/invitations.png)](#invitations)
+[![Stats](/assets/images/screens/stats.png)](#stats)
+[![Feedback](/assets/images/screens/feedback.png)](#feedback)
+</div>
 
- * Syllabus
- * Lectures
- * Assignments
- * Responses
- * Gradebook
- * File Management
- * Activity Feed
- * Collaboration
+<div id="account" class="lb">[![Account](/assets/images/screens/account.png)](#)
+</div>
+<div id="assignment" class="lb">[![Assignment](/assets/images/screens/assignment.png)](#)
+</div>
+<div id="classroom-settings" class="lb">[![Classroom Settings](/assets/images/screens/classroom-settings.png)](#)
+</div>
+<div id="classroom-start" class="lb">[![Classroom Start](/assets/images/screens/classroom-start.png)](#)
+</div>
+<div id="dashboard" class="lb">[![Dashboard](/assets/images/screens/dashboard.png)](#)
+</div>
+<div id="feedback" class="lb">[![Feedback](/assets/images/screens/feedback.png)](#)
+</div>
+<div id="files" class="lb">[![Files](/assets/images/screens/files.png)](#)
+</div>
+<div id="gradebook" class="lb">[![Gradebook](/assets/images/screens/gradebook.png)](#)
+</div>
+<div id="home-dashboard" class="lb">[![Home Dashboard](/assets/images/screens/home-dashboard.png)](#)
+</div>
+<div id="invitations" class="lb">[![Invitations](/assets/images/screens/invitations.png)](#)
+</div>
+<div id="lecture" class="lb">[![Lecture](/assets/images/screens/lecture.png)](#)
+</div>
+<div id="notifications" class="lb">[![Notifications](/assets/images/screens/notifications.png)](#)
+</div>
+<div id="profile" class="lb">[![Profile](/assets/images/screens/profile.png)](#)
+</div>
+<div id="quiz-preview" class="lb">[![Quiz Preview](/assets/images/screens/quiz-preview.png)](#)
+</div>
+<div id="response" class="lb">[![Response](/assets/images/screens/response.png)](#)
+</div>
+<div id="stats" class="lb">[![Stats](/assets/images/screens/stats.png)](#)
+</div>
+<div id="syllabus" class="lb">[![Syllabus](/assets/images/screens/syllabus.png)](#)
+</div>
+<div id="users-management" class="lb">[![Users Management](/assets/images/screens/users-management.png)](#)
+</div>
 
 Fork us on [github/courseware](https://github.com/Courseware).