WIP Add button Enroll

Author: emcoding

app/assets/stylesheets/home.scss

@@ -96,12 +96,12 @@ hr.separator-line {
   display: flex;
   flex-direction: column;
   // box shadow
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-}
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
 
-.card:hover {
-  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  &:hover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  }
 }
 
 // CARD content
@@ -138,7 +138,28 @@ ul {
 }
 
 .accented {
-  //color: $DJSacqua;
   color: $DJSsunshine;
-  //font-weight: bold;
 }
+
+  $w: 33vw;
+  $h: 8vh;
+
+.btn-enroll {
+  width: $w;
+  height: $h;
+  background-color: $DJSsunshine;
+  border-radius: .5*$h;
+  //display:inline-block;
+  cursor: pointer;
+  color: whitesmoke;
+  font-size: 1.5em;
+  text-decoration: none;
+
+  &:hover {
+    //  do something
+  }
+}
+
+
+
+

app/views/pages/home.html.erb

@@ -113,6 +113,9 @@
 </section>
 
 <section class="text-container">
+  <div class="intro">
+    <%=button_tag "Enroll", class: 'btn-enroll' %>
+  </div>
   <div class="intro">
     Plain ('vanilla') JavaScript goes a long way in adding interactivy and a nice, dynamic user interface in Rails apps.
     As a Rails developer, you don't need to be a JavaScript ninja to achieve some nice JavaScript sprinkles in your Rails views.