updates

jrs06005 · Mar 29, 2016 · 0f7ce80 · 0f7ce80
1 parent c82161b
commit 0f7ce80
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/css/main.css b/css/main.css
@@ -3,26 +3,46 @@
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
 
+.buttoncontainer {
+  height: 100%;
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: row;
+  -webkit-flex-direction: row;
+  -webkit-align-content: stretch;
+  align-content: stretch;
+}
 
-.fillthevoid {
-  height: 200px;
-  width: 100%;
+.thebutton {
+  background-color: red;
+  -webkit-flex: 1;
+  flex: 1;
+  position: relative;
   font-family: Lato;
   font-weight: 800;
   font-size: 30px;
   color: white;
   background-color: red;
   border:none;
+  text-transform:uppercase;
 }
 
 .voidfilled {
+  -webkit-flex: 1;
+  flex: 1;
+  position: relative;
   background: linear-gradient(270deg, #674500, #ffecc7);
   background-size: 400% 400%;
   -webkit-animation: BrownTown 5s ease infinite;
   -moz-animation: BrownTown 5s ease infinite;
   animation: BrownTown 5s ease infinite;
-  height: 200px;
+  height: 100%;
   width: 100%;
   color: white;
 }
@@ -61,4 +81,4 @@
   100% {
     background-position: 0% 50%
   }
-}
+}
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title></title>
+        <title>Button</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="apple-touch-icon" href="apple-touch-icon.png">
@@ -27,7 +27,9 @@
         <!--[if lt IE 8]>
             <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>-->
 
-    <button class="fillthevoid" data-text-swap="DON'T PUT ME IN A BOX" data-text-original="PUT ME IN A BOX">PUT ME IN A BOX</button>
+    <div class="buttoncontainer">
+  <button class="thebutton" data-text-swap="DON'T PUT ME IN A BOX" data-text-original="PUT ME IN A BOX">PUT ME IN A BOX</button>
+</div>
 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

diff --git a/js/main.js b/js/main.js
@@ -1,12 +1,12 @@
 $(document).ready(function() {
-  $(".fillthevoid").click(function() {
+  $(".thebutton").click(function() {
     $(this).toggleClass("voidfilled");
   });
 });
 
-$(".fillthevoid").on("click", function() {
+$(".thebutton").on("click", function() {
   var el = $(this);
   el.text() == el.data("text-swap") ?
     el.text(el.data("text-original")) :
     el.text(el.data("text-swap"));
-});
+});