Work on styling and layout some more

content/stylesheets/main.css

@@ -1,5 +1,5 @@
 :root {
-    --white: #ffffff;
+    --white: hsl(0, 0%, 98%);
     --darkblue: #013e7a;
     --lightblue: #1a77d3;
     --cyan: #aaeeff;
@@ -7,21 +7,46 @@
 }
 
 html, body {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    background: var(--white);
     height: 100%;
 }
 
 body {
-    margin: 0 auto;
+    height: 100%;
-    padding: 0 1em;
-    max-width: 1280px;
     font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
 }
 
+.align {
+    margin: 0 auto;
+    max-width: 1280px;
+    padding: 0 1em;
+}
+
 .beforeTheFold, main {
     position: relative;
     min-height: 100%;
 }
 
+button, input {
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+    background-color: var(--white);
+}
+button {
+    border: 0.15em solid var(--darkblue);
+}
+input {
+    border: none;
+    border-bottom: 0.15em solid var(--darkblue);
+    padding: 0.1em 0.3em;
+}
+
 nav a {
     text-decoration: none;
     font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
@@ -52,20 +77,8 @@ h2 {
 }
 
 .studentZijn {
-    padding: 4rem 0 2rem 3rem;
+    margin: 4rem 0 2rem 3rem;
-}
+    margin: 11vh 0 2rem 3rem;
-
-.scroll {
-    display: block;
-    position: absolute;
-    bottom: 2rem;
-    left: 0;
-    right: 0;
-    margin: auto;
-    text-align: center;
-    font-size: 1.4rem;
-    text-decoration: underline;
-    color: var(--darkblue);
 }
 
 .hidden {
@@ -73,7 +86,10 @@ h2 {
 }
 
 .quote {
+    margin-top: 3rem;
     display: flex;
+    position: relative;
+    z-index: 2;
 }
 .quote img {
     width: 103px;
@@ -91,45 +107,91 @@ h2 {
 }
 
 .quizSpotlight {
-    text-align: right;
+    margin-top: 2rem;
-    font-size: 3rem;
+    font-size: 2rem;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    color: var(--lightblue);
-}
-
-@media (min-width: 1000px) and (max-width: 1000px) {
-   .quizSpotlight {
-       position: absolute;
-       bottom: 5rem;
-       right: 0;
-   }
 }
 
 .quizSpotlight a {
+    position: relative;
     text-decoration: none;
-   color: var(--white);
+    background: var(--white);
+    color: var(--darkblue);
+    border: 0.4rem solid var(--darkblue);
+    padding: 1rem 2rem;
+    margin-right: 3rem;
+}
+.quizSpotlight a:hover {
     background-color: var(--lightblue);
-   padding: 1rem;
+    border: 0.4rem solid var(--lightblue);
+    color: var(--white);
 }
 
-.aside_blueSquare {
+.scroll {
-    right: 3rem;
+    display: block;
-    height: 100%;
+    position: absolute;
-    width: 20%;
+    bottom: 0.5rem;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 1;
+}
+.scroll a {
+    display: inline-block;
+    color: var(--darkblue);
+    font-size: 1.1rem;
+    text-decoration: none;
+    padding: 0.7rem 1.1rem;
+    font-weight: 500;
+    text-shadow:
+        0 0 1em hsla(0, 0%, 100%, 1),
+        0 0 1em hsla(0, 0%, 100%, 1),
+        0 0 0.1em hsla(0, 0%, 100%, 1);
+}
+
+.shade {
+    z-index: -1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 7rem;
+    background: linear-gradient(
+        hsla(0, 0%, 100%, 0),
+        hsla(0, 0%, 100%, 0.6)
+    );
 }
 
 .backgroundSquare {
-    z-index: -1;
+    z-index: -2;
     position: absolute;
     background-color: var(--cyan);
 }
 
+.intro {
+    position: relative;
+}
+
 .header_blueSquare {
-    left: -15rem;
+    right: 20%;
-    height: 45%;
+    left: -1000px;
-    width: 80%;
+    left: -100vw;
-    opacity: 0.2;
+    top: -1000px;
+    top: -100vw;
+    bottom: -1rem;
+
+    opacity: 0.3;
+    z-index: -3;
+}
+
+.header_photo {
+    background: url(/assets/placeholder.jpg) center center;
+    background-size: cover;
+    right: 0;
+    left: 50%;
+    bottom: 0;
+    top: 20%;
 }
 
 

layouts/homepage.erb

@@ -1,49 +1,46 @@
-<div class="header_blueSquare backgroundSquare"></div>
-
 <div class="beforeTheFold">
-  <header>
+  <header class="align">
     <%= render '/partials/navbar.*' %>
   </header>
 
-  <article class="intro">
+  <div class="header_photo backgroundSquare"></div>
+
+  <article class="align">
     <h1 class="hidden">Durf Doen</h1>
+    <div class="intro">
+      <div class="header_blueSquare backgroundSquare"></div>
       <h2 class="studentZijn">
         <span class="underline">Student</span> zijn is
         <span class="underline">meer</span> dan studeren
       </h2>
+    </div>
     <div class="quote">
       <div>
         <img src="/assets/durfdoenlogo.png" alt="">
       </div>
       <div>
         <p>Durf Doen wil jou de vereniging laten kennen die je op het lijf geschreven is.</p>
-        <p>Btw Facebook is onethisch. Geef ze geen geld.</p>
+        <p>Btw geef Facebook geen geld pls :(</p>
-      </div>
-    </div>
-  </article>
-
         <div class="quizSpotlight">
           <a href="test">Doe de test</a>
         </div>
-
-  <div>
-    <a href="#main" class="scroll">Scroll naar beneden</a>
       </div>
+    </div>
+  </article>
+
+  <div class="scroll">
+    <a href="#main">Scroll naar beneden</a>
+  </div>
+
+  <div class="shade"></div>
 </div>
 
-<main id="main">
+<main id="main" class="align">
   <article>
-    <%= yield %>
+    <h2><span class="underline">Uitgelichte</span> vereniging</h2>
-  </article>
-  <article>
-    <h2>Doe hier <span class="underline">de test</span></h2>
-    <p>Wil je weten welke studentenclub, werkgroep of kring het beste bij jou past? Ontdek het</p>
-  </article>
-  <article>
-    <h2><span class="underline">Random</span> Verenigingen</h2>
 
     <section class="randomVerenigingen">
-      <% for vereniging in verenigingen_random(6) %>
+      <% for vereniging in verenigingen_random(1) %>
       <p><%= vereniging["naam"] %></p>
       <% end %>
     </section>

layouts/partials/navbar.erb

@@ -15,8 +15,6 @@
 
   </ul>
   <div>
-    <input type="text" placeholder="Zeus WPI">
+    <input type="search" placeholder="Zoek vereniging, convent …">
-    <button>search</button>
-    <button>NL</button>
   </div>
 </nav>