From 648c529f1836aa029325bded0011f64417ad4368 Mon Sep 17 00:00:00 2001
From: Your Name <jenathkanagesan@gmail.com>
Date: Thu, 19 Apr 2018 17:33:37 +0100
Subject: [PATCH] style

---
 public/css/style.css | 35 ++++++++++++++++++++++++++++++-----
 src/views/home.hbs   | 13 ++++++-------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index a392128..4796199 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -12,6 +12,12 @@ body {
 main {
 }
 
+.header{
+  color: white;
+  text-align: center;
+  font-size: 2rem;
+}
+
 .nav__container {
   position: fixed;
 display: block;
@@ -37,20 +43,39 @@ width: 100%;
 }
 .section__banner {
   height: 100vh;
-  background: url('../images/background.jpg');
+  background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../images/background.jpg') ;
   background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .section__coins {
   height: 60%;
   width: 60%;
-  margin: 15% auto;
+  margin: auto;
 }
 .coins__list {
-  background-color: white;
+  /* background-color: white; */
   margin: 0 auto;
+  display: grid;
+  height: 35vh;
+  grid-template-columns: repeat(5, 1fr);
+  grid-row-gap: 5vh;
+  text-align: center;
 }
 .coin__list--item {
 }
+
+.coin__list--item img {
+  min-height: 100%;
+  min-width: auto;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+
+.coin__list--item img:hover {
+  transform: rotateY( 360deg );
+}
 .coin__logo {
 }
 
@@ -84,11 +109,11 @@ margin: auto;
 }
 
 .coin-article__body {
-  
+
 }
 
 .coin-article__body div{
-  border: black solid 1px; 
+  border: black solid 1px;
   padding: 10px;
 }
 
diff --git a/src/views/home.hbs b/src/views/home.hbs
index ac6892e..1b49449 100644
--- a/src/views/home.hbs
+++ b/src/views/home.hbs
@@ -1,23 +1,22 @@
 <section class="section__banner">
 
-  <h1>The future is FACoin!!</h1>
-  <h3>And the future looks rich</h3>
+  <h1 class="header">Choose a coin to find more info:</h1>
+
 <div class="section__coins">
-  <ul class="coins__list">
+  <div class="coins__list">
 
     {{#each allCoins}}
 
-    <li class="coin__list--item">
+    <div class="coin__list--item">
       <a href="/{{this.symbol}}">
         {{!-- <div class="coin__logo" style="background-image: url(/images/coins/{{ this.symbol }}.svg)"></div> --}}
         <img src="/images/coins/{{ this.symbol }}.svg"/>
-        <span>{{ this.symbol }}</span>
       </a>
-    </li>
+    </div>
 
 
     {{/each}}
 
-  </ul>
+  </div>
 </div>
 </section>