diff --git a/Manjila/Project 1/ales-krivec-107499.jpg b/Manjila/Project 1/ales-krivec-107499.jpg
new file mode 100644
index 0000000..c6243eb
Binary files /dev/null and b/Manjila/Project 1/ales-krivec-107499.jpg differ
diff --git a/Manjila/Project 1/css/main.css b/Manjila/Project 1/css/main.css
index 5acbf04..74c3734 100644
--- a/Manjila/Project 1/css/main.css	
+++ b/Manjila/Project 1/css/main.css	
@@ -1,6 +1,9 @@
 /***** BASE STYLES *****/
+*{
+    box-sizing: border-box;
+}
 body{
-	 font-family: 'Lora', serif;  
+	 font-family: 'Raleway', serif;  
 }
 
 
@@ -19,7 +22,6 @@ body{
 .half-width{
 	width: 50%;
 	float: left;
-    /*display: flex;*/
     flex-wrap: wrap;
 }
 
@@ -51,16 +53,6 @@ body{
     height: auto;
 }
 
-/*header h1 { 
-    padding: 50px 0;
-    font-family: 'Lora', serif;
-    font-size: 30px;
-    color: #55552b;
-    flex-wrap: wrap;
-}*/
-
-
-
 header .full-width {
 align-items: right;
 text-align: center;
@@ -70,12 +62,6 @@ width: 100%;
 .fixed-background{
    
 }
-/*button{
-    border-radius: 5px;
-    width: 20%;
-    padding: 10px;
-    color: white;
-}*/
 
 i{
     color: white;
@@ -85,6 +71,7 @@ header h2 {
 color: white;
 font-size: 72px;
 line-height: 80px;
+font-family: 'Kaushan Script', cursive;
 }
 
 header h2 span {
@@ -200,7 +187,7 @@ a:hover{
     width: 80%;
 }
 
-#contact h2, #email-header, #socialmedia-header, #contact ul {
+#contact h2, #email-header, #socialmedia-header{
     padding-left: 115px;
 }
 
@@ -212,6 +199,7 @@ a:hover{
 #contact h2 {
     font-family: 'Lora', serif;
     font-size: 36px;
+    padding-bottom: 15px;
 }
 
 #email-header{
@@ -233,6 +221,10 @@ a:hover{
     font-size: 28px;
 }
 
+footer ul{
+    text-align: center;
+}
+
 i{
     padding: 20px;
 }
@@ -259,11 +251,14 @@ i:hover{
 #contact ul img {
     padding-right: 48px;
 }
+
 .half-width a{
     display: flex;
     flex-wrap: wrap;
 }
 
+/***** INSPIRATION *****/
+
 .inspo{
     text-align: center;
     color: #828282;
@@ -303,25 +298,113 @@ i:hover{
     line-height: 40px;
 }
 
-footer ul{
-    text-align: center;
+/***** MODAL *****/
+
+button{
+    margin-left: 43%;
+    margin-right: 40%;
+    margin-bottom: 2%;
+    border-radius: 5px;
+    padding: 5px 50px 5px 50px;
+    text-transform: uppercase;
+    background-color: white;
+    font-family: 'Lora', serif;
+    color: #828282;
+
+}
+
+input{
+    display: block;
+    width: 50%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid grey;
+}
+
+textarea{
+    width: 50%;
+    height: 200px;
+    color: #828282;
+    border: 1px solid grey;
+    margin-top: 8px;
 }
 
-footer ul li{
-    padding: 0 50px 0 50px;
+.modal {
+ /* padding: 20px;*/
+  background-color: rgba(0, 0, 0, .3);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
+.mailus{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.modal-content {
+  /*padding: 20px 10px;*/
+  color: #828282;
+  background-color: white;
+  width: 60%;
+  text-align: center;
+}
+
+.modal-content i{
+    color: #969691;
+}
+.modal-content button{
+    margin-left: 40%;
+    margin-top: 4%;
+    border: 1px solid grey;
+}
+
+.modal-open {
+    overflow: hidden;
+}
+.close p{
+    display: flex;
+    justify-content: flex-end;
+}
+#X{
+    text-align: right;
+    padding: 20px;
+    font-weight: bold;
+}
+.half-width button{
+    margin-left: 20%;
+    margin-top: 3%;
+}
+
+/*.gallery{
+    display: flex;
+    justify-content: space-around;
+
+}
+.col-1-3{
+    width: 20%;
+
+}
+.col-1-3 img{
+    width: 100%;
+    display: block;
+}
+*/
+
 @media screen and (max-width: 1170px) {
-    /*h1{
-        font-size:16px;
-    }*/
     header h2{
         font-size: 45px;
         padding: 10px;
     }
 
-    }
-    @media screen and (max-width: 950px) {
+}
+@media screen and (max-width: 950px) {
        
     #contact-img{
         display:block;
@@ -337,3 +420,7 @@ footer ul li{
         margin-top: 10px;
     }
 }
+
+@media screen and (max-width: 660px) {
+
+    }
diff --git a/Manjila/Project 1/img/ales-krivec-107499.jpg b/Manjila/Project 1/img/ales-krivec-107499.jpg
index c6243eb..a6259ae 100644
Binary files a/Manjila/Project 1/img/ales-krivec-107499.jpg and b/Manjila/Project 1/img/ales-krivec-107499.jpg differ
diff --git a/Manjila/Project 1/index.html b/Manjila/Project 1/index.html
index ad663ab..7aa5bab 100644
--- a/Manjila/Project 1/index.html	
+++ b/Manjila/Project 1/index.html	
@@ -8,6 +8,7 @@
       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
       <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
       <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Raleway" rel="stylesheet">
       <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png">
       <link rel="apple-touch-icon" sizes="60x60" href="img/apple-icon-60x60.png">
       <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png">
@@ -28,7 +29,7 @@
     </head>
     
     <body>
-    <nav class="menu">
+      <nav class="menu">
         <ul>
          <li><a href="#about">About</a></li>
          <li><a href="inspiration.html">Inspiration</a></li>
@@ -49,20 +50,20 @@ <h2>Manjila Nakarmi</h2>
        <div class="full-width">
         <h2>A little bit about me.</h2>
         <div class="half-width">
-          <p>I am originally from Kathmandu, Nepal but now I have resided in Berkeley, CA. I recently graduated from San Francisco State University with Bachelors Degree and my major is International Business. I also practice Front-end Web Development and plan to master my skill as I work.</p>
+          <p>I am a resident from Berkeley, CA. I recently graduated from San Francisco State University with Bachelors Degree and my major is International Business. I also practice Front-end Web Development and plan to master my skill as I work.</p>
         </div>
         <div class="half-width">
           <p>After I coded my first website, I was hooked towards front-end web development and the versatility it provided me towards work.I am interested to not only work but hone my skill furthermore through practice. I plan on taking on more projects to garner my feeling of accomplishment.</p>
         </div>
       </div>
     </section>
-
+    
     <section id="work">
      <div class="full-width">
       <div class="third-width">
        <i class="fa fa-html5 fa-5x" aria-hidden="true"></i>
        <h3>Hand-Coded HTML</h3>
-       <p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
+       <p>Writing clean, well-formatted, semantic HTML5 is my specialty so as to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
      </div>
      <div class="third-width">
        <i class="fa fa-css3 fa-5x" aria-hidden="true"></i>
@@ -72,10 +73,9 @@ <h3>Well-Organized CSS</h3>
      <div class="third-width">
        <i class="fa fa-pencil fa-5x" aria-hidden="true"></i>
        <h3>Designs into Code</h3>
-       <p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
+       <p>You can trust me to take a designer's PSD and wireframes and quickly & accurately convert it into webpages that are pixel-perfect match.</p>
      </div>
-
-        </div>
+   </div>
  </section>
 </main>
 
@@ -88,18 +88,36 @@ <h3>Designs into Code</h3>
    <h2>Like what you see?</h2>
    <h3 id="email-header">Let's meet for a cup of coffee.</h3>
    <!-- <a href="mailto:manjila@manjilanakarmi.com"><img id="envelope" src="img/icon-envelope.png" alt="Envelope Icon"/>manjila [@] manjilanakarmi.com</a> -->
-   <h3 id="socialmedia-header">Find me on the interwebs</h3>
-   <ul>
-     <li><a href="https://www.facebook.com/DestinationManjilaHeart"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a></li>
-     <li><a href="https://www.instagram.com/prettyandclumsy/"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></li>
-     <li><a href="https://www.linkedin.com/in/manjilanakarmi/"><i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i></a></li>
-     <li><a href="https://github.com/Manjilan"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></li>
-     <li><a href="mailto:manjila@manjilanakarmi.com"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
-   </ul>
- </div>
+   <button id="showModal">Contact Me</button>
+   <div class="modal">
+    <div class="modal-content">
+      <p id="X" class="close">X</p>
+    <!-- <h3>Contact Form</h3>  
+    <p>Please enter your information below and I will get back to you!</p>
+    <form class="mailus">
+      <input type="text" name="name" placeholder="Full Name">
+      <input type="email" name="email" placeholder="Email Address">
+      <textarea>Message</textarea>
+    </form> -->
+    <div class="typeform-widget" data-url="https://manjilanakarmi.typeform.com/to/jh4MSf" style="width: 100%; height: 450px;" > </div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;" > <!-- powered by <a href="https://www.typeform.com/examples/forms/contact-form-template/?utm_campaign=jh4MSf&amp;utm_source=typeform.com-10452063-Basic&amp;utm_medium=typeform&amp;utm_content=typeform-embedded-contactform&amp;utm_term=EN" style="color: #999" target="_blank">Typeform</a> --> </div>
+    <!-- <button class="close">Close</button> -->
+  </div>
 </div>
+<h3 id="socialmedia-header">Find me on the interwebs</h3>
+<ul>
+ <li><a href="https://www.facebook.com/DestinationManjilaHeart"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a></li>
+ <li><a href="https://www.instagram.com/prettyandclumsy/"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></li>
+ <li><a href="https://www.linkedin.com/in/manjilanakarmi/"><i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i></a></li>
+ <li><a href="https://github.com/Manjilan"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></li>
+ <li><a href="mailto:manjila@manjilanakarmi.com"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
+</ul>
+</div>
+</div>
+
+
+
 </footer>
 <script src="js/jquery-3.2.1.min.js"></script> <!-- jQuery -->
-  <script src="js/main.js"></script> <!-- main.js -->
+<script src="js/main.js"></script> <!-- main.js -->
 </body>
 </html>
diff --git a/Manjila/Project 1/inspiration.html b/Manjila/Project 1/inspiration.html
index 000d2a2..25734af 100644
--- a/Manjila/Project 1/inspiration.html	
+++ b/Manjila/Project 1/inspiration.html	
@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
   <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
   <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Raleway" rel="stylesheet">
   <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="60x60" href="img/apple-icon-60x60.png">
   <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png">
@@ -30,49 +31,85 @@
 <body>
   <nav class="menu">
     <ul>
-     <li><a href="index.html">Website</a></li>
+     <li><a href="index.html">Home</a></li>
+     <li><a href="index.html#about">About</a></li>
      <li><a href="inspiration.html">Inspiration</a></li>
+     <li><a href="index.html#work">Work</a></li>
+     <li><a href="#contactme">Contact</a></li>
 
    </ul>
  </nav>
- <div>
-   <header class="fixed-background">
-    <div class="full-width">
-      <h2>Manjila Nakarmi</h2>
-      <!-- <button>Change Background</button> -->
-      <i class="fa fa-toggle-on fa-3x" aria-hidden="true"></i>
-    </div>
-  </header>
+ <header class="fixed-background">
+      <div class="full-width">
+        <h2>Manjila Nakarmi</h2>
+        <!-- <button>Change Background</button> -->
+        <i class="fa fa-toggle-on fa-3x" aria-hidden="true"></i>
+      </div>
+    </header>
   <main>
+    <div class="full-width">
     <div class="inspo">
-    <h3>Instagram Feed</h3>
-    <p>Understanding a person better with their experiences works the best. Here are some pictures from my instagram post to get you the understanding of the type of person I am!</p>
-    <!-- LightWidget WIDGET --><script src="http://lightwidget.com/widgets/lightwidget.js"></script><iframe src="http://lightwidget.com/widgets/ef61dc008c6b5594992260c0edbecb44.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 70%; border: 0; overflow: hidden;"></iframe>
+      <h3>Instagram Feed</h3>
+      <p>Understanding a person better with their experiences works the best. Here are some pictures from my instagram post to get you the understanding of the type of person I am!</p>
+      <!-- LightWidget WIDGET --><script src="http://lightwidget.com/widgets/lightwidget.js"></script><iframe src="http://lightwidget.com/widgets/ef61dc008c6b5594992260c0edbecb44.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 70%; border: 0; overflow: hidden;"></iframe>
+    </div>
   </div>
-  <div class="full-width">
-    <div id="space">
-      <h3>My Inspirations</h3>
-      <p>My inspirations come from travelling and discovering the wonders of nature. The birth of human life from the nature in itself is a miracle and to take inspiration for things in life from nature should bring beauty into one's projects.</p>
+    <!-- <h3>Experiences</h3>
+    <div class="gallery full-width">
+      
+      <div class="col-1-3">
+        <img class="galleryimg" src="https://scontent-dft4-3.xx.fbcdn.net/v/t31.0-8/19055896_10155411345567436_2050221404009209466_o.jpg?oh=ea63cf04503aaec08f8a70a264c95a62&oe=5A4D48FE" alt="Gambian's Park">
+      </div>
+      <div class="col-1-3">
+        <img class="galleryimg" src="https://scontent-dft4-3.xx.fbcdn.net/v/t31.0-8/19055896_10155411345567436_2050221404009209466_o.jpg?oh=ea63cf04503aaec08f8a70a264c95a62&oe=5A4D48FE" alt="Gambian's Park">
+      </div>
+      <div class="col-1-3">
+        <img class="galleryimg" src="https://scontent-dft4-3.xx.fbcdn.net/v/t31.0-8/19055896_10155411345567436_2050221404009209466_o.jpg?oh=ea63cf04503aaec08f8a70a264c95a62&oe=5A4D48FE" alt="Gambian's Park">
+      </div>
     </div>
+    <div class="modal">
+      <img src="" alt="">
+    </div> -->
+    <div class="full-width">
+      <div id="space">
+        <h3>My Inspirations</h3>
+        <p>My inspirations come from travelling and discovering the wonders of nature. The birth of human life from the nature in itself is a miracle and to take inspiration for things in life from nature should bring beauty into one's projects.</p>
+      </div>
 
-  </div>
+    </div>
 
 
   </main>
   
- </div>
- <footer>
+</div>
+<footer id="contactme">
   <ul>
-     <li><a href="https://www.facebook.com/DestinationManjilaHeart"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
-     <li><a href="https://www.instagram.com/prettyandclumsy/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
-     <li><a href="https://www.linkedin.com/in/manjilanakarmi/"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
-     <li><a href="https://github.com/Manjilan"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
-     <li><a href="mailto:manjila@manjilanakarmi.com"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a></li>
-   </ul>
-
- </footer>
+   <li><a href="https://www.facebook.com/DestinationManjilaHeart"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
+   <li><a href="https://www.instagram.com/prettyandclumsy/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
+   <li><a href="https://www.linkedin.com/in/manjilanakarmi/"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
+   <li><a href="https://github.com/Manjilan"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
+   <li><a href="mailto:manjila@manjilanakarmi.com"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a></li>
+ </ul>
+</footer>
+<aside>
+ <button id="showModal">Contact Me</button>
+ <div class="modal">
+  <div class="modal-content">
+    <p id="X" class="close">X</p>
+    <!-- <h3>Contact Form</h3>  
+    <p>Please enter your information below and I will get back to you!</p>
+    <form class="mailus">
+      <input type="text" name="name" placeholder="Full Name">
+      <input type="email" name="email" placeholder="Email Address">
+      <textarea>Message</textarea>
+    </form> -->
+    <div class="typeform-widget" data-url="https://manjilanakarmi.typeform.com/to/jh4MSf" style="width: 100%; height: 450px;" > </div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;" > <!-- powered by <a href="https://www.typeform.com/examples/forms/contact-form-template/?utm_campaign=jh4MSf&amp;utm_source=typeform.com-10452063-Basic&amp;utm_medium=typeform&amp;utm_content=typeform-embedded-contactform&amp;utm_term=EN" style="color: #999" target="_blank">Typeform</a> --> </div>
+    <!-- <button class="close">Close</button> -->
+  </div>
+</div>
+</aside>
 
- <script src="js/jquery-3.2.1.min.js"></script> <!-- jQuery -->
- <script src="js/main.js"></script> <!-- main.js -->
+<script src="js/jquery-3.2.1.min.js"></script> <!-- jQuery -->
+<script src="js/main.js"></script> <!-- main.js -->
 </body>
 </html>
\ No newline at end of file
diff --git a/Manjila/Project 1/js/main.js b/Manjila/Project 1/js/main.js
index 4456081..3b063de 100644
--- a/Manjila/Project 1/js/main.js	
+++ b/Manjila/Project 1/js/main.js	
@@ -1,11 +1,26 @@
 $('.fa-toggle-on').on('click', function(){
- 
- 	$(".fixed-background i").addClass("fa-flip-horizontal");
- 	$("header").removeClass("fixed-background");
- 	$("header").addClass("change");
+ $(".fixed-background i").toggleClass("fa-flip-horizontal");
+ $("header").toggleClass("change");
 });
-$('.fa-flip-horizontal').on('click', function(){
-	$('.fixed-background i').removeClass('fa-flip-horizontal');
-	$("header").removeClass("change");
- 	$("header").addClass("fixed-background");
-});
\ No newline at end of file
+
+$('#showModal').on('click', function(){
+	$('.modal').css('display', 'flex').hide().fadeIn();
+	$("body").addClass("modal-open");
+});
+
+$('.close').on('click', function(){
+	$('.modal').fadeOut();
+	$("body").removeClass("modal-open");
+});
+// $('.modal').on('click', function(){
+// 	$(this).fadeOut();
+// 	$("body").removeClass("modal-open");
+
+// });
+// $('.galleryimg').on('click', function(){
+// 	$('.modal').css('display', 'flex').hide().fadeIn();
+// 	var imgmod = $(this).attr('src');
+// 	$('.modal img').attr('src', imgmod);
+// });
+
+