v0.8 Done

sdslabs · Aug 16, 2014 · 41ab2a5 · 41ab2a5
1 parent 7989003
commit 41ab2a5
Show file tree

Hide file tree

Showing 17 changed files with 498 additions and 23 deletions.
diff --git a/css/fonts.scss b/css/fonts.scss
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.scss b/css/styles.scss
@@ -1,16 +1,47 @@
 @import 'normalize';
 @import 'colors';
+@import 'fonts';
+
+@mixin bg-spl($url){
+  background: url($url) no-repeat fixed 5% 150px #2c3e50;
+  background-size: 50%;
+  color: white;
+  position: relative;
+}
+
+@mixin clearfix(){
+  &:after {
+      content: ".";
+      display: block;
+      height: 0;
+      clear: both;
+      visibility: hidden;
+  }
+}
 
 html {
   height: 100%;
 }
 
 body {
   min-height: 100%;
+  font-family: AvenirNext;
 }
 
 section {
-  height: 100%;
+  min-height: 100%;
+  @include clearfix();
+}
+
+.clear-height {
+  min-height: initial;
+}
+
+.clear {
+  clear: both;
+}
+
+.top-s {
 }
 
 .left-s {
@@ -37,14 +68,145 @@ section {
   float: right;
 }
 
+.bg-spl {
+  position: relative;
+  height: 100%;
+
+  .info {
+    margin-left: 60%;
+    padding: 12% 50px 0px 0px;
+    font-size: 1.1em;
+
+    a {
+      color: $blue-1;
+      text-decoration: none;
+
+      &:hover {
+        color: $blue-2;
+      }
+    }
+  }
+}
+
 #intro {
-  .left-s {
-    background: $blue-1;
+  .top-s {
+    background: $grey-1;
+    text-align: center;
+    padding: 10px 0px;
+
+    .logo {
+      height: 200px;
+    }
+
+    h1, h3 {
+      font-weight: normal;
+    }
   }
+
+  .bottom-b {
+    text-align: center;
+
+    .groups {
+      width: 80%;
+      margin: auto;
+
+      .set {
+        width: 33%;
+        float: left;
+        font-size: 1.1em;
+        padding: 100px 0;
+
+        h2 {
+          font-weight: normal;
+          margin: 0;
+        }
+
+        img {
+          height: 100px;
+        }
+      }
+    }
+  }
+}
+
+#muzi {
+  @include bg-spl('../img/apps/muzi.png');
+}
+
+#sp {
+  @include bg-spl('../img/apps/sp.png');
+}
+
+#omegle {
+  @include bg-spl('../img/apps/omegle.png');
+}
+
+#cv {
+  @include bg-spl('../img/apps/cv.png');
+}
+
+#fp {
+  @include bg-spl('../img/apps/fp.png');
+}
+
+#echo {
+  @include bg-spl('../img/apps/echo.png');
 }
 
-#second {
-  .right-s {
-    background: $green-1;
+#erdos {
+  @include bg-spl('../img/apps/erdos.png');
+}
+
+#sdslabs {
+  background: #2c3e50;
+  color: white;
+
+  .content {
+    padding: 50px 100px 50px 50px;
+
+    p {
+      font-size: 1.4em;
+    }
+  }
+
+  .lab {
+    width: 100%;
+    height: 500px;
+    background-image: url('../img/sdslabs.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    box-shadow: inset 0 0 40px rgba(0,0,0,.9);
+  }
+}
+
+#stats {
+  background: #c0392b;
+  color: white;
+
+  h1 {
+    font-weight: normal;
+    text-align: center;
+    padding: 30px 0;
+    margin: 0;
+  }
+
+  .data {
+    width: 700px;
+    margin: auto;
+    font-size: 1.3em;
+
+    .entry:nth-child(odd){
+      border-right: 3px solid white;
+      width: 45%;
+      text-align: right;
+      padding: 0 5% 0 0;
+    }
+    .entry:nth-child(even){
+      border-left: 3px solid white;
+      width: 50%;
+      padding: 0 0 0 5%;
+      margin-left: 50%;
+    }
   }
 }
diff --git a/img/apps/cv.png b/img/apps/cv.png
diff --git a/img/apps/echo.png b/img/apps/echo.png
diff --git a/img/apps/erdos.png b/img/apps/erdos.png
diff --git a/img/apps/fp.png b/img/apps/fp.png
diff --git a/img/apps/muzi.png b/img/apps/muzi.png
diff --git a/img/apps/omegle.png b/img/apps/omegle.png
diff --git a/img/apps/sp.png b/img/apps/sp.png
diff --git a/img/cv.png b/img/cv.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/omegle.png b/img/omegle.png
diff --git a/img/sds1.jpg b/img/sds1.jpg
diff --git a/img/sdslabs.jpg b/img/sdslabs.jpg
diff --git a/index.html b/index.html
@@ -8,23 +8,180 @@
   <link rel="stylesheet" href="css/styles.css">
   <script src="js/jquery.min.js" charset="utf-8"></script>
   <script src="js/d3.v3.min.js" charset="utf-8"></script>
+  <script src="js/script.js" charset="utf-8"></script>
 </head>
 
 <body>
-  <section id='intro'>
-    <div class="left-s">
-      hello
+  <section id="intro">
+    <div class="top-s">
+      <img class='logo' src="img/logo.png" alt="">
+      <h1>Software Development Section</h1>
+      <h3>IIT Roorkee, India</h3>
     </div>
-    <div class="right-b">
-      world
+    <div class="bottom-b">
+      <div class="groups">
+        <div class="set">
+          <img src="img/logo.png" alt="">
+          <h2>Programming &amp; Algorithm Group</h2>
+        </div>
+        <div class="set">
+          <img src="img/logo.png" alt="">
+          <h2>SDSLabs</h2>
+        </div>
+        <div class="set">
+          <img src="img/logo.png" alt="">
+          <h2>Mobile Development Group</h2>
+        </div>
+      </div>
     </div>
   </section>
-  <section id='second'>
-    <div class="left-b">
-      hello
+
+  <section id="sdslabs" class="clear-height">
+    <div class="content">
+      <h1>SDSLabs</h1>
+      <p>
+      SDSLabs is a student group that constantly tries to innovate and foster technical activities in campus. Our members work in PHP, Ruby, Node.js, Python, sometimes even delving into socket level programming.
+      </p>
+      <p>
+        We conduct lectures and workshops on all these topics and also conduct monthly competitions on our various self developed applications.
+      </p>
+      <p>
+        We are highly indebted to Redmine (project managment system), Gitolite (local git managament), Slack (team chat), Dropbox and Google Groups for our functioning.
+      </p>
+    </div>
+    <div class="lab">
     </div>
-    <div class="right-s">
-      world
+    <div class="clear"></div>
+  </section>
+
+  <section id='muzi' class='bg-spl'>
+    <div class="info">
+      <h3>Muzi</h3>
+      <p>
+        With over 130,000 tracks by 11,000 artists and updating daily, Muzi is the one stop online music player for the IIT Roorkee intranet.
+      </p>
+      <p>
+        Muzi is a one page JS app with the backend written in PHP. Applications like <a href="https://github.com/sdslabs/nano">Nano</a> have been developed over this backend also.
+      </p>
+    </div>
+  </section>
+
+  <section id='sp' class='bg-spl'>
+    <div class="info">
+      <h3>Study Portal</h3>
+      <p>
+        Study Portal is the knowledge hub of IIT Roorkee. Through Study Portal, anyone can share open courseware files, videos, presentations etc. Currently over 4,000 files have been shared across 500 courses and total downloads has crossed 80,000.
+      </p>
+      <p>
+        The tech stack includes <a href="https://github.com/anandkunal/ToroPHP">Toro microframework</a> and <a href="http://handlebarsjs.com">Handlebars.js</a> for templating.
+      </p>
+      <p>
+        For more details, check out the <a href="http://blog.sdslabs.co/2013/10/studyportal-echo-2013/">blog post</a> on Study Portal.
+      </p>
+    </div>
+  </section>
+
+  <section id='erdos' class='bg-spl'>
+    <div class="info">
+      <h3>Erdos</h3>
+      <p>
+        Erdős is an application for Math Geeks to try out new mathematical problems and keep track of who solves what. Named after one of the most prolific mathematician of all times, Paul Erdős, it is a portal for users to test their mettle on various mathematical problems, some of which may require users to write code.
+      </p>
+    </div>
+  </section>
+
+  <section id='cv' class='bg-spl'>
+    <div class="info">
+      <h3>Code Village</h3>
+      <p>
+        Codevillage is an online judge with a core philosophy of
+        improving the programming skills of the IITR junta.
+        Several problems related to algorithms and programming
+        are available here that anyone can try their hands on.
+        Whether you are a young padawan or a jedi master, you’ll
+        - find problems here suitable for your skills.
+      </p>
+    </div>
+  </section>
+
+  <section id='echo' class='bg-spl'>
+    <div class="info">
+      <h3>Echo</h3>
+      <p>
+        Echo provides you the book you need, whether you are on a leisure drive or under
+        the crunch of an oncoming examination. This interactive
+        search app lets you download the book you need from the
+        millions in the collection using its lightning fast search
+        relying on a massive collection of indexed books. Echo
+        also allows you to view the book right in the browser and
+        has category search, ratings etc. in its pack of goodies.
+      </p>
+    </div>
+  </section>
+
+  <section id='omegle' class='bg-spl'>
+    <div class="info">
+      <h3>Omegle</h3>
+      <p>
+        All work and no play makes Jack a dull boy. Omegle is an intranet application that comes alive around 2am when the campus internet begins. Omegle allows people to chat anonymously.
+        </p>
+        <p>
+          Omegle has been built in Node.js and employs <a href="http://socket.io">socket.io</a> for real time communication
+        </p>
+    </div>
+  </section>
+
+  <section id='fp' class='bg-spl'>
+    <div class="info">
+      <h3>File Panda</h3>
+      <p>
+        File Panda is the intranet repository of free and open source applications. It is a self updating application which ensure that it always has the latest version of each software.
+      </p>
+      <p>
+        File Panda has been developed in PHP and uses the Limonade microframework.
+      </p>
+    </div>
+  </section>
+
+  <section id="stats">
+    <h1>Stats</h1>
+    <div class="data">
+      <div class="entry">
+        6 Sennheisers
+      </div>
+      <div class="entry">
+        6 Nexus 7
+      </div>
+      <div class="entry">
+        2 iPads
+      </div>
+      <div class="entry">
+        0 MacBook *
+      </div>
+      <div class="entry">
+        2 Wacom Graphic Tablets
+      </div>
+      <div class="entry">
+        2 Dell PowerEdge Servers
+      </div>
+      <div class="entry">
+        10 External Monitor
+      </div>
+      <div class="entry">
+        1 42' LCD TV
+      </div>
+      <div class="entry">
+        2 Dribbble Accounts
+      </div>
+      <div class="entry">
+        28 Public Repositories on GitHub
+      </div>
+      <div class="entry">
+        30% Non Vegetarians
+      </div>
+      <div class="entry">
+        70% Teetotallers
+      </div>
     </div>
   </section>
 </body>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,2 @@
+$(document).ready(function(){
+});