Add files via upload

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) {
+
+    }

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:[email protected]"><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:[email protected]"><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:[email protected]"><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>