Style buttons.

lautr3k · Apr 7, 2019 · cbbfe84e6064e1b560124c1eb7ef3b18928635c9 · cbbfe84
1 parent d5642d0
commit cbbfe84e6064e1b560124c1eb7ef3b18928635c9
Unified Split

Showing with 46 additions and 11 deletions.

+18 −6 css/m3rlin.css

+24 −3 index.html

+4 −2 js/m3rlin.js
diff --git a/css/m3rlin.css b/css/m3rlin.css
@@ -1,3 +1,9 @@
+.centerer {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 #hide {
   /* opacity: 0.3; */
   display: none;
@@ -54,23 +60,29 @@ m34 {
 .modal-footer {
   /* display: flex; */
 }
-#m3rlin-continue {
+#m3rlin-continue,
+#quick {
   background: rgb(171, 250, 171);
   transition: 0.3s;
 }
-.m3rlin-btn:hover,
-#m3rlin-continue:hover {
+.m3rlin-btn:hover {
   background: #696969;
   color: white;
   border: 5px solid orange;
 }
+#m3rlin-continue:hover,
+#quick:hover {
+  background: #696969;
+
+  color: rgb(171, 250, 171);
+}
 
 #quick-confirm {
   /* display: flex; */
   display: none;
 }
 .m3rlin-quickstart-btns {
-  display: none;
-  align-content: space-between;
-  justify-content: center;
+  /* display: none; */
+  /* align-content: space-between;
+  justify-content: center; */
 }
diff --git a/index.html b/index.html
@@ -696,6 +696,27 @@ <h4>
         </div>
             <div class="m3rlin-options">
 
+
+                    <div id="greeter">
+                            <div class="col">
+                                <div class="row">
+                                    <h2 class="centered">
+                                      Welcome to M3rlin Prototype
+                                    </h2>
+                                </div>
+                                <div class="row">
+                                    <h4 class="padded centered">
+Select one of the options below
+                                    </h4>
+                                    <h4 class="centered">
+                               Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
+                                    </h4>
+
+                                  </div>
+                              </div>
+                        </div>
+
+
                     <div id="quick-confirm">
                         <div class="col">
                             <div class="row">
@@ -714,18 +735,18 @@ <h4 class="centered">
 
                               </div>
                           </div>
-                        </div>
+                    </div>
 
             </div>
             <div class="modal-footer">
 
                     <div class="row">
-                            <div class="m3rlin-main-menu-btns">
+                            <div class=" centerer m3rlin-main-menu-btns">
                                     <button class="m3rlin-btn" id="quick">Quick Start</button>
                                     <button class="m3rlin-btn" id="settings">Settings</button>
                                     <button class="m3rlin-btn">About</button>
                                 </div>
-                            <div class="m3rlin-quickstart-btns">
+                            <div class="centerer m3rlin-quickstart-btns">
                                 <button class="m3rlin-btn" id="m3rlin-back">Back</button>
                                 <button class="m3rlin-btn" id="m3rlin-continue">Continue</button>
                                 <button class="m3rlin-btn">Help</button>

diff --git a/js/m3rlin.js b/js/m3rlin.js
@@ -4,7 +4,7 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
-
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
     // $('#hide').css({ display: 'block' });
@@ -17,12 +17,14 @@ $(document).ready(function() {
     $('.m3rlin-main-menu-btns').css({ display: 'none' });
     $('.m3rlin-quickstart-btns').fadeIn('slow');
     $('.modal-footer').fadeIn('slow');
+    $('#greeter').css({ display: 'none' });
   });
 
   $('#m3rlin-back').click(function() {
     $('#quick-confirm').css({ display: 'none' });
-    $('.m3rlin-quickstart-btns').css({ display: 'none' });
 
+    $('#greeter').fadeIn('slow');
+    $('.m3rlin-quickstart-btns').css({ display: 'none' });
     $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });