From 2ae81b66240d366be794ee7502230ee45dea16f0 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Fri, 24 Oct 2014 19:19:25 -0700
Subject: [PATCH] Initial work on preview section

---
 sass/_project-sass/_project-Main.scss | 49 +++++++++++++++++++++++++++
 views/index.erb                       | 28 +++++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 2534aae1..bf139578 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -849,6 +849,55 @@ a.tag:hover {
 .section p, .section li {
   font-size: .85em;
 }
+.section.previews {
+  background: #FAF6F1;
+  h3 {
+    line-height: 130%;
+    font-size: 1.6em;
+    margin-top: 0;
+  }
+  h2, h3 {
+    color: #335062;
+  }
+  p {
+    color: #666;
+    line-height: 180%;
+    font-size: .9em;
+  }
+  .row {
+    margin: 5em 10%;
+    padding: 0;
+    &:first-of-type {
+      margin-top: 3.5em;
+    }
+    &:last-of-type {
+      margin-bottom: 2.5em;
+    }
+    .col {
+      padding-left: 0;
+      padding-right: 30px;
+      &.text {
+        padding-top: 2em;
+      }
+    }
+    .screenshot {
+      width: 100%;
+      height: 250px;
+      margin-right: 30px;
+      background: white;
+      border: 6px solid white;
+      @include box-shadow(1px 1px 2px 0px rgba(0, 0, 0, 0.18));
+    }
+    &.right {
+      .col {
+        padding-right: 0;
+        &.text {
+          padding-right: 30px;
+        }
+      }
+    }
+  }
+}
 .section.featured-Websites {
   background: #971D31;
   padding: 30px 0;
diff --git a/views/index.erb b/views/index.erb
index 85219907..4c665e96 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -240,6 +240,34 @@
   <div class="nav next"></div>
 </div>
 
+<div class="section previews">
+  <h2>Forget boring social networks. Let’s make the internet fun again. It’s time to bring back web surfing!</h2>
+  <div class="row content">
+    <div class="col col-50"><div class="screenshot"></div></div>
+    <div class="col col-50 text">
+      <h3>Follow your favorite Neocities sites</h3>
+      <p>Find an neat site in our <a href="/browse">website gallery</a>? You can now keep track of new updates by following Neocities sites. Any changes to the sites will show up in your news feed.</p>
+    </div>
+  </div>
+  
+  <div class="row content right">
+    <div class="col col-50 text">
+      <h3>Leave comments on Neocities site profiles</h3>
+      <p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
+    </div>
+    <div class="col col-50"><div class="screenshot"></div></div>
+  </div>
+
+  <div class="row content">
+    <div class="col col-50"><div class="screenshot"></div></div>
+    <div class="col col-50 text">
+      <h3>Discover new sites related to your interests</h3>
+      <p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
+    </div>
+  </div>
+</div>
+
+
   <section class="section features">
 
     <h2 class="delta">Forget boring social networks. Let’s make the internet fun again. It’s time to bring back web surfing!</h2>