modal close

Author: ShMcK

_sass/_modal.scss

@@ -2,16 +2,27 @@
   margin-top: 45px;
 }
 
+#btn-close-modal {
+  padding: 45px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+  align-content: center;
+  flex-align: center;
+}
+
 a.modal-link:before {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
-  background-size: 100%;
-  background: url('../css/images/play.svg') center no-repeat;
-  opacity: .50;
+  background-size: 75px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url('../css/images/play.svg');
+  opacity: .5;
 }
 a.modal-link:hover:before {
-  opacity: .55;
+  opacity: .65;
 }

css/images/close-button.svg

@@ -60,7 +60,7 @@ <h2>Inside Your Code Editor</h2>
 				<a href="https://atom.io">Atom Editor</a>.
 				<br /> With the "atom-coderoad" plugin, code in a real editor environment alongside your other favorite plugins.</p>
 			<ul class="actions">
-				<li><a href="#" class="button special">Atom-CodeRoad</a></li>
+				<li><a href="/atom-coderoad" class="button special">Atom-CodeRoad</a></li>
 			</ul>
 		</div>
 	</section>
@@ -77,7 +77,7 @@ <h2>Inside Your Code Editor</h2>
 			<h2>Create your Own Tutorials</h2>
 			<p>Build tutorials using simple and familiar tools: <a href="http://www.markdowntutorial.com/">Markdown</a> & unit tests. Making tutorials is easy with the new "builder-coderoad" plugin.</p>
 			<ul class="actions">
-				<li><a href="#" class="button special">Builder-CodeRoad</a></li>
+				<li><a href="/builder-coderoad" class="button special">Builder-CodeRoad</a></li>
 			</ul>
 		</div>
 	</section>
@@ -131,22 +131,23 @@ <h2>Become a Contributer</h2>
 
 <!-- Atom-CodeRoad Modal -->
 <div id="atom-coderoad-demo" class="modal">
-    <div  id="btn-close-modal" class="close-atom-coderoad-demo">
-        CLOSE MODAL
-    </div>
-
-    <div class="modal-content">
-      <img alt="Atom-CodeRoad Demo" src="images/atom-coderoad.gif" height="450px"/>
-    </div>
+  <div id="btn-close-modal" class="close-atom-coderoad-demo">
+    <img src="css/images/close.svg" alt="close" height="35px"/>
+  </div>
+  <div class="modal-content">
+    <img alt="Atom-CodeRoad Demo" height="450px"
+			src="images/atom-coderoad.gif" />
+  </div>
 </div>
 
 <!-- Builder-CodeRoad Modal -->
 <div id="builder-coderoad-demo" class="modal">
-    <div  id="btn-close-modal" class="close-builder-coderoad-demo">
-        CLOSE MODAL
-    </div>
+    <div id="btn-close-modal" class="close-builder-coderoad-demo">
+      <img src="css/images/close.svg" alt="close" height="35px"/>
+  </div>
 
     <div class="modal-content">
-      <img alt="Builder-CodeRoad Demo" src="images/builder-demo.gif" height="450px"/>
+      <img alt="Builder-CodeRoad Demo" height="450px"
+				src="images/builder-demo.gif" />
     </div>
 </div>