Finished first version of site and added modal js

MarcusVirg · Jun 9, 2018 · 8b22020 · 8b22020
1 parent 6044f53
commit 8b22020
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/css/main.css b/css/main.css
@@ -45,6 +45,10 @@ html, body {
   z-index: 10;
 }
 
+.subtitle {
+  margin-top: 10px !important;
+}
+
 .section {
   text-align: center;
 }
@@ -61,4 +65,8 @@ h2 {
 
 .button.is-info {
   background-color: #0ca7d3;
+}
+
+.card-footer-item a {
+  color: #0ca7d3;
 }
diff --git a/index.html b/index.html
@@ -11,14 +11,13 @@
   <link rel="stylesheet" href="./css/main.css">
   <!-- Javascript -->
   <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
-  <script src="./js/main.js"></script>
 </head>
 <body>
   <div id="container"></div>
   <div class="wrapper">
     <h1 class="title">Marcus Virginia</h1>
     <h2>I love to develop, create, and learn using the power of web</h2>
-    <a href="#" target="_blank" class="button is-info is-rounded is-large is-link">
+    <a id="btn-blog" class="button is-info is-rounded is-large is-link">
       <span class="icon is-small">
         <i class="fas fa-bold"></i>
       </span>
@@ -30,7 +29,7 @@ <h2>I love to develop, create, and learn using the power of web</h2>
       </span>
       <span>Resume</span>
     </a>
-    <a href="#" target="_blank" class="button is-info is-rounded is-large is-link">
+    <a href="https://resume.marcusv.me/projects/" target="_blank" class="button is-info is-rounded is-large is-link">
       <span class="icon is-small">
         <i class="fas fa-code"></i>
       </span>
@@ -64,19 +63,20 @@ <h2>I love to develop, create, and learn using the power of web</h2>
           <footer class="card-footer">
             <p class="card-footer-item">
               <span>
-                View my <a href="https://twitter.com/MarcusVirg">Twitter</a>
+                View my <a href="https://twitter.com/MarcusVirg" target="_blank">Twitter</a>
               </span>
             </p>
             <p class="card-footer-item">
               <span>
-                View my <a href="https://www.instagram.com/marcusv345/">Instagram</a>
+                View my <a href="https://www.instagram.com/marcusv345/" target="_blank">Instagram</a>
               </span>
             </p>
           </footer>
         </div>
     </div>
-    <button class="modal-close is-large" aria-label="close"></button>
+    <button id="btn-close" class="modal-close is-large" aria-label="close"></button>
   </div>
+  <script src="./js/main.js"></script>
   <script src="./js/sketch.js"></script>
   <script>
   // ----------------------------------------

diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,17 @@
+var modal = document.getElementById("btn-modal")
+var blogBtn = document.getElementById("btn-blog")
+var modalCloseBtn = document.getElementById("btn-close")
+blogBtn.addEventListener("click", openModal);
+modalCloseBtn.addEventListener("click", closeModal)
+
+console.log(modal)
+console.log(blogBtn)
+
+function openModal() {
+  modal.classList.add("is-active")
+  console.log(modal)
+}
+
+function closeModal() {
+  modal.classList.remove("is-active")
+}