Enhanced masterbuilders & Fixes #12, #13

masterbuilders/assets/css/builders.css

@@ -46,3 +46,32 @@ button:hover, button:focus {
    font-family: 'Baloo Tamma', cursive;
    margin-top: 5px;
 }
+.header {
+   padding: 100px;
+   background: rgba(200,200,200,0.2);
+   text-align: center;
+}
+hr {
+   border: 2px solid rgba(230,230,230,0.1);
+}
+.modal {
+   color: #ccc;
+   background: rgba(20,20,20,0.8);
+   text-align: center;
+}
+.modal li {
+   margin-bottom: 5px;
+}
+.modal > .modal-footer {
+   background: rgba(40,40,40,0.8);
+}
+.modal > .modal-footer a {
+   color: #ccc;
+}
+.custom-btn {
+   background: rgba(0,0,0,0.6);
+   text-align: center;
+}
+.custom-btn:hover, .custom-btn:focus {
+   background: rgba(50,50,50,0.6);
+}

masterbuilders/assets/js/builders.js

@@ -0,0 +1,4 @@
+  $(document).ready(function(){
+    $('.modal-trigger').leanModal();
+  });
+          

masterbuilders/index.html

@@ -11,6 +11,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
     <script src="https://use.fontawesome.com/cb2592f0cc.js"></script>
+    <script src="assets/js/builders.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/builders.css">
@@ -23,11 +24,11 @@
             <a href="#header" class="brand-logo">TotalFreedom <span class="hide-on-med-and-down">Master Builders</span></small></a>
             <a href="#" data-activates="mobile" class="button-collapse"><i class="fa fa-bars"></i></a>
             <ul class="right hide-on-med-and-down cl-effect-14" id="cl-effect-14">
-                <li><a href="index.html">Back to Home</a>
+                <li><a href="../index.html">Back to Home</a>
                 </li>
             </ul>
             <ul class="side-nav" id="mobile">
-                <li><a href="index.html">Back to Home</a>
+                <li><a href="../index.html">Back to Home</a>
                 </li>
             </ul>
         </div>
@@ -35,6 +36,29 @@
     <br>
     <h2 class="page-title hide-on-large-only">Master Builders</h2>
     <div class="container">
+        <div class="header">
+            <p id="note">These images may, or may not, have been built on Total Freedom but are made by/with at least one masterbuilder from Total Freedom.</p>
+             <a class="modal-trigger waves-effect btn custom-btn" href="#masterbuilders">Current Master builders</a>
+  <div id="masterbuilders" class="modal modal-fixed-footer">
+    <div class="modal-content">
+      <h4>Current Master Builders</h4>
+      <ul class="masterbuilders-list">
+          <li>DarkLynx108</li>
+          <li>miwojedk</li>
+          <li>UYScutix</li>
+          <li>xfilez</li>
+          <li>adamvandyck</li>
+          <li>Fluffasaurus_Rex</li>
+          <li>AcetoneAlligator</li>
+          </ul>
+    </div>
+    <div class="modal-footer">
+      <a href="#!" class="modal-action modal-close waves-effect btn-flat ">Close</a>
+    </div>
+  </div>
+          
+            </div>
+            <br/><hr/><br/>
         <div class="row">
             <div class="col s6">
                 <div class="card">
@@ -148,7 +172,7 @@
 
         </div>
         
-<p id="note">These images may, or may not, have been built on Total Freedom but are made by/with at least one masterbuilder from Total Freedom.</p>
+
 </body>
 
 </html>