added the description on homepage and did some frontend improvements.

scanapp/static/css/home.css

@@ -34,8 +34,16 @@ h1.projects-title {
     max-width: 6.6667em;
 }
 
+p.tagline {
+    text-align: center;
+    font-size: 2.25em;
+    line-height: 1.333;
+    margin: 0 1.667em 2.5em 1.667em;
+    color: #9E9E9E;
+}
+
 section.projects {
-    padding: 5.625em 0;
+    padding: 1.5em 0 5.625em;
     background: #F5F5F1;
 }
 
@@ -45,12 +53,9 @@ div.wrapper {
     max-width: 1280px;
 }
 
-p.tagline {
-    text-align: center;
-    font-size: 2.25em;
-    line-height: 1.333;
-    margin: 0 1.667em 2.5em 1.667em;
-    color: #9E9E9E;
+p.description{
+    text-align:center;
+    font-size:1.3em;
 }
 
 div.col-3:after {
@@ -77,7 +82,7 @@ div.col-2:after {
 
 span.category-note {
     display: block;
-    color: #CECBB6;
+    color: black;
     padding: 0 0 0.714em 0;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -106,7 +111,7 @@ p.date-note {
     line-height: 1.857;
 }
 
-div.col-3-project-element-3 {
+div.col-3-project-element-1 {
     background: #fff;
     text-decoration: none;
     border-bottom: 2px solid #DDDBCC;
@@ -116,10 +121,11 @@ div.col-3-project-element-3 {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+    margin-right: 3.125%;
     float: left;
 }
 
-div.col-3-project-element-1 {
+div.col-3-project-element-2 {
     background: #fff;
     text-decoration: none;
     border-bottom: 2px solid #DDDBCC;
@@ -133,7 +139,7 @@ div.col-3-project-element-1 {
     float: left;
 }
 
-div.col-3-project-element-2 {
+div.col-3-project-element-3 {
     background: #fff;
     text-decoration: none;
     border-bottom: 2px solid #DDDBCC;
@@ -143,10 +149,14 @@ div.col-3-project-element-2 {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin-right: 3.125%;
     float: left;
 }
 
+div.col-3-project-element-1:hover,div.col-3-project-element-2:hover,div.col-3-project-element-3:hover{
+    border-bottom: 2px solid gray;
+}
+
+
 div.col-3-project-element-5 {
     background: #fff;
     text-decoration: none;
@@ -193,4 +203,14 @@ a.about-link {
     line-height: 1.857;
     margin: 0;
     color: #9E9E9E;
+    -webkit-transition: background-color 200ms linear;
+    -moz-transition: background-color 200ms linear;
+    -o-transition: background-color 200ms linear;
+    -ms-transition: background-color 200ms linear;
+    transition: background-color 200ms linear;
+}
+
+a.about-link:hover{
+    background-color:grey;
+    color:white;
 }

scanapp/templates/scanapp/home.html

@@ -11,12 +11,15 @@
 
 <header class="projects">
     <h1 class="projects-title">Scancode</h1>
+    <h2 class="tagline">The best tool to scan codes.</h2>
 
 </header>
 <section class="projects">
     <div class="wrapper">
-        <p class="tagline">The best tool to scan codes.</p>
-
+        <p class="description">
+            ScanCode is a tool to scan code and detect licenses, copyrights and more.</br></br>
+            Choose one of the methods below to get started.
+        </p>
         <div class="col-3">
             <div>
                 <br/>
@@ -49,7 +52,7 @@ <h3 class="project-heading-large">Write Code</h3>
 
 </section>
 <div class="about">
-    <a href="#" class="about-link">About scancode</a>
+    <a href="https://github.com/nexB/scancode-toolkit/wiki" class="about-link">About scancode</a>
 </div>
 
 {% endblock %}