diff --git a/contact.js b/contact.js
new file mode 100644
index 0000000..249e459
--- /dev/null
+++ b/contact.js
@@ -0,0 +1,23 @@
+
+const modalControls = (() => {
+    //function to open modal
+const openModal = () => {
+    modal.classList.remove('hide-modal');
+};
+//function to close modal
+const closeModal = () => {
+    modal.classList.add('hide-modal');
+    email.value = '';
+    name.value = '';
+    message.value = '';
+    };
+    
+//grab elements and asssign functions on action trigger
+const openModalBtn = document.querySelector('.contact-modal-open-btn').addEventListener('click', openModal);
+    const closeModalBtn = document.querySelector('#close-btn');
+    closeModalBtn.addEventListener('click', closeModal);
+    const modal = document.querySelector('#modal-with-form'); 
+    const name = document.querySelector('#name'); 
+    const email = document.querySelector('#email'); 
+    const message = document.querySelector('#message'); 
+})();
\ No newline at end of file
diff --git a/css/cv.css b/css/cv.css
new file mode 100644
index 0000000..2620049
--- /dev/null
+++ b/css/cv.css
@@ -0,0 +1,264 @@
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
+img[ src="https://res.cloudinary.com/techietee/image/upload/v1566563013/IMG_20190703_001242_849_ecvqyb.jpg"] {
+  border: 1px solid #000;
+  border-radius: 5px;
+}
+.all {
+  margin: 3%;
+  padding: 10px;
+  font-style: san-sarrif;
+}
+
+#contact {
+  background-image: url(./undraw_contact_us_15o2.png);
+  background-color: rgba(29, 28, 29, 0.986);
+  background-blend-mode: overlay;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: white;
+  margin-bottom: 0px;
+}
+
+#contact h1 {
+  font-size: 4em;
+  font-weight: 100;
+  line-height: 1em;
+  margin-bottom: 10px;
+}
+
+#contact ul {
+  margin-top: 10px;
+  font-size: 30px;
+}
+
+#contact div a {
+  text-decoration: none;
+  color: rgb(231, 222, 222);
+  transition: font-size 0.3s linear;
+  padding-left: 10px;
+}
+
+#contact div a:hover {
+  color: rgb(165, 105, 105);
+  font-size: 22px;
+  transition: font-size 0.3s linear;
+}
+
+#contact ul div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+  #contact div a {
+    text-decoration: none;
+    color: rgb(231, 222, 222);
+    transition: font-size 0.3s linear;
+    padding-left: 10px;
+  }
+
+  #contact div a:hover {
+    color: rgb(165, 105, 105);
+    transition: font-size 0.3s linear;
+  }
+}
+
+@media (min-width: 576px) {
+  #welcome .name-plate {
+    width: 70%;
+    height: 50%;
+    text-align: start;
+    margin-top: 244px;
+    padding-left: 20px;
+  }
+
+  .name-plate h1 {
+    font-size: 5.3em;
+    font-weight: 200;
+    line-height: 1em;
+    padding: -5px;
+  }
+}
+
+.contact-modal {
+  height: 100vh;
+  width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 30px;
+  color: #777;
+  background: rgb(80, 94, 97);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.3s linear;
+  position: fixed;
+  top: 0;
+}
+.hide-modal {
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  cursor: none;
+  transition: opacity 0.3s linear;
+}
+
+.container {
+  max-width: 350px;
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+#contact-form input[type="text"],
+#contact-form input[type="email"],
+#contact-form input[type="tel"],
+#contact-form textarea,
+#contact-submit {
+  font: 400 12px/16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+#contact-form {
+  background: #f9f9f9;
+  padding: 25px;
+  margin: 50px 0;
+  position: relative;
+}
+
+#contact-form h3 {
+  color: #f96;
+  display: block;
+  font-size: 30px;
+  font-weight: 400;
+}
+
+#contact-form h4 {
+  margin: 5px 0 15px;
+  display: block;
+  font-size: 13px;
+}
+
+fieldset {
+  border: medium none !important;
+  margin: 0 0 10px;
+  min-width: 100%;
+  padding: 0;
+  width: 100%;
+  position: relative;
+}
+
+#contact-form input[type="text"],
+#contact-form input[type="email"],
+#contact-form input[type="tel"],
+#contact-form input[type="url"],
+#contact-form textarea {
+  width: 100%;
+  border: 1px solid #ccc;
+  background: #fff;
+  margin: 0 0 5px;
+  padding: 10px;
+}
+
+#contact-form textarea {
+  height: 100px;
+  max-width: 100%;
+  resize: none;
+}
+
+#contact-submit {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  background: #0cf;
+  color: #fff;
+  margin: 0 0 5px;
+  padding: 10px;
+  font-size: 15px;
+}
+
+#contact-submit:hover {
+  background: #09c;
+  -webkit-transition: background 0.3s ease-in-out;
+  -moz-transition: background 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
+}
+
+#contact-submit:active {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+#contact-form input:focus,
+#contact-form textarea:focus {
+  outline: 0;
+  border: 1px solid #999;
+}
+::-webkit-input-placeholder {
+  color: #888;
+}
+:-moz-placeholder {
+  color: #888;
+}
+::-moz-placeholder {
+  color: #888;
+}
+:-ms-input-placeholder {
+  color: #888;
+}
+
+#contact-form input[type="text"],
+#contact-form input[type="email"],
+#contact-form input[type="tel"] {
+  padding-top: 20px;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  background: none;
+}
+
+#close-btn {
+  position: absolute;
+  top: 0px;
+  right: 10px;
+  font-size: 26px;
+  color: red;
+  padding: 5px;
+  font-weight: 600;
+  transition: font-size 0.2s linear;
+  cursor: pointer;
+  user-select: none;
+}
+#close-btn:hover {
+  transition: font-size 0.2s linear;
+  font-size: 29px;
+}
+#close-btn:active {
+  color: green;
+}
+
+.contact-modal-open-btn {
+  position: fixed;
+  border-radius:5px 5px 5px 5px;
+  bottom: 0;
+  right: 5px;
+  padding: 10px;
+  margin-bottom: 15px;
+  background: #bb1c11;
+  font-size: 12px;
+  cursor: pointer;
+  color: #fffffffb;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.24), -1px -1px 5px rgba(0, 0, 0, 0.24);
+}
+.contact-modal-open-btn:hover {
+  background: rgb(68, 20, 20);
+}
diff --git a/firstname.html b/firstname.html
index 82fcfb2..5ce78a7 100644
--- a/firstname.html
+++ b/firstname.html
@@ -5,8 +5,10 @@
     <title>
       techietee's task
     </title>
+    <link rel="stylesheet" href="css/cv.css">
   </head>
   <body>
+    <div class="all">
     <center><h1>BELLO, FATIMA MODUPE</h1></center>
     <hr />
     <center>Mobile: <a href="09031703106">09031703106</a></center>
@@ -15,6 +17,7 @@
     </center>
     <br>
     <img src="https://res.cloudinary.com/techietee/image/upload/v1566563013/IMG_20190703_001242_849_ecvqyb.jpg" height="50%" width="50%" alt="">
+   
     <div>
       <h4>CAREER OBJECTIVE</h4>
       <hr />
@@ -119,6 +122,46 @@ <h4>REFEREE</h4>
       way, Kaduna Nigeria.<br/>
       <b> Phone: </b>  <a href="08031191231"> 08031191231</a> <b> Email: </b> 
       <a href="emmydiks@gmail.com ">emmydiks@gmail.com </a><p />
-     
+    </div>
+    <div class="contact-modal-open-btn" style="float: right; margin-right:10%">
+      <h2>Contact me</h2>
+  </div>
+  
+
+      <div id="modal-with-form" class="contact-modal hide-modal">
+        <div class="container">  
+                <form id="contact-form">
+                  <h3>Wanna reach me?.</h3>
+                  <h4>Fill this form and get reply with in 24 hours!</h4>
+                  <span id="close-btn">&times;</span>
+
+                  <fieldset>
+                    <input type="text" id="title" required autofocus placeholder="Message Title">
+                    
+                  </fieldset>
+
+                  
+                  <fieldset>
+                    <input type="text" id="name" required minlength="4" placeholder="Your Name">
+                    
+                  </fieldset>
+                  <fieldset>
+                    <input type="email" id="email" required placeholder="Your Email Here...">
+                    
+                  </fieldset>
+                  
+                 
+                  <fieldset>
+                    <textarea id="message" minlength="20" required placeholder="Type your message here..."></textarea>
+                  </fieldset>
+                  <fieldset>
+                    <button name="submit" id="contact-submit"  onclick="alert('Thank you for contacting me! The pleasure is mine.')"><a href="firstname.html" style="text-decoration: none;">
+                      Submit</button>
+                  </fieldset>
+                </form>
+              </div>
+            </div>
+
+        <script src="contact.js"></script>
   </body>
 </html>