diff --git a/README.md b/README.md
deleted file mode 100644
index 44c7b919..00000000
--- a/README.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Make a multi-page responsive website using CSS Grid
-
-Choose one of the designs below, and re-create the design to perfection, using CSS Grid, and media queries to make the site fully responsive.
-## Requirements
-
-1) Create a mobile-first, responsive website
-2) Use CSS Grid and flexbox for layouts and alignment
-3) Save fonts and colours in CSS variables
-
-## Style guide
-
-Here are 3 designs to choose from, along with suggested fonts and colours to use for your chosen projects:
-
-### **DESIGN 1: Prickles & Co**
-**An e-commerce site selling plants**
-
-![Prickles & Co homepage](./designs/Cactus%20shop.png)
-
-Live demo here: https://www.wix.com/website-template/view/html/1995
-### Fonts
-**Headings:** Fjalla One - Regular 400  
-https://fonts.google.com/specimen/Fjalla+One  
-**Subheadings:** Outfit - Extra-light 200  
-https://fonts.google.com/specimen/Outfit  
-**Body:** Outfit - Extra-light 200  
-https://fonts.google.com/specimen/Outfit  
-
-### Colors
-Red Brown: #A05941  
-Green Black: #133032  
-Light Grey: #EDEDEE  
-White: #FFF  
-Transparent White: rgba(0,0,0,0.75)
-
-=====================================
-
-### **DESIGN 2: Resume**
-**A website to showcase skills and projects**
-
-![Business resume homepage](./designs/Business%20portfolio.png)
-
-Live demo here: https://www.wix.com/website-template/view/html/2622  
-
-### Fonts
-**Headings:** Poppins - Semi-bold 600  
-https://fonts.google.com/specimen/Poppins  
-**Body:** Quicksand - Light 300  
-https://fonts.google.com/specimen/Quicksand  
-
-### Colors
-Dark beige: #E6DACD  
-Light beige: #F4ECE6  
-Royal blue: #0150FD  
-Black: #000  
-White: #FFF  
-
-=====================================
-
-### **DESIGN 3: Juice Bar**
-**An e-commerce site for fruit juices**
-
-![Juice Bar homepage](./designs/Juice%20bar.png)
-
-Live demo here: https://www.wix.com/website-template/view/html/2962  
-### Fonts
-**Headings and subheadings:** Questrial - Regular 400  
-https://fonts.google.com/specimen/Questrial  
-**Buttons:** Raleway - Regular 400  
-https://fonts.google.com/specimen/Raleway  
-**Body:** Roboto - Light 300  
-https://fonts.google.com/specimen/Roboto  
-
-### Colors
-Black: #000  
-White: #FFF  
-Lylac: #f5e8ff  
-Light Green: #E6FAC0  
-Medium Green: #5E7D1F  
-Dark Green: #394B2A  
-
-=====================================
-
-## **Crediting**
-
-Very important: please credit the designer in your footer with the sentence 
-"This website design was created by Wix.com, and is used here for strictly educational purposes."
-
diff --git a/aboutme.css b/aboutme.css
new file mode 100644
index 00000000..07a25fe6
--- /dev/null
+++ b/aboutme.css
@@ -0,0 +1,1069 @@
+.desktopContainer {
+    display: none;
+  }
+  
+  /* humberger menu style is created by https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0 */
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  body {
+    background-color: white;
+    color: #fff;
+  
+    font-family: "Poppins", sans-serif;
+    font-family: "Quicksand", sans-serif;
+    padding: 0;
+    margin: 0;
+  }
+  hr {
+    width: 25%;
+    height: 3px;
+    background-color: blue;
+    margin-top: 30px;
+    border-width: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+  li {
+    list-style: none;
+    color: black;
+  }
+  
+  .menuItem {
+    display: block;
+    margin: 2rem 4rem;
+    font-size: 1.8rem;
+    color: black;
+    text-decoration: none;
+  }
+  
+  .menuItem:hover {
+    text-decoration: underline;
+  }
+  
+  .hamburger {
+    position: fixed;
+    z-index: 100;
+    top: 1rem;
+    right: 20px;
+    padding: 4px;
+    /* border: black solid 1px; */
+    background: white;
+    cursor: pointer;
+    border: none;
+  }
+  
+  .closeIcon {
+    display: none;
+  
+    margin: -4px;
+  }
+  
+  .menu {
+    position: fixed;
+    transform: translateY(-100%);
+    transition: transform 0.2s;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    background: #e6dacd;
+    color: black;
+    list-style: none;
+    padding-top: 4rem;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .showMenu {
+    transform: translateY(0);
+  }
+  
+  .maya-span {
+    font-family: "Times New Roman", Times, serif;
+    color: black;
+    font-size: 16px;
+    margin-bottom: 2px;
+  }
+  .project-span {
+    display: flex;
+    margin-bottom: 20px;
+    color: black;
+    font-size: 8px;
+  }
+  .forward-slash {
+    display: none;
+  }
+  .blue-box {
+    color: blue;
+    background-color: blue;
+    margin-right: 10px;
+    margin-top: 18px;
+    height: 16px;
+    width: 15px;
+    align-items: center;
+  }
+  
+  /* humbergur menu end */
+  /* header */
+  .header {
+    font-family: "Poppins", sans-serif;
+    font-family: "Quicksand", sans-serif;
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    overflow: hidden;
+  
+    top: 0;
+    left: 0;
+    width: 100%;
+  
+    /* box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); */
+    z-index: 10;
+  }
+  .header-title {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    margin-left: 20px;
+    margin-top: 20px;
+  }
+  .forward-slash {
+    display: none;
+  }
+  .blue-box {
+    color: blue;
+    background-color: blue;
+    margin-right: 10px;
+    margin-top: -23px;
+    height: 16px;
+    width: 15px;
+    align-items: center;
+  }
+  
+  .maya-span {
+    font-family: "Times New Roman", Times, serif;
+    color: black;
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+  .project-span {
+    display: flex;
+    margin-bottom: 20px;
+    color: black;
+    font-size: 10px;
+  }
+  
+  /* header end */
+  /* section */
+  .inner-content {
+    background-color: #e6dacd;
+    height: 100%;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    margin-top: 350px;
+    margin-left: 2rem;
+  
+    font-size: smaller;
+  }
+  .inner-content-body {
+    margin-left: 2rem;
+    margin-top: 360px;
+    padding-bottom: 30px;
+    padding-top: -20px;
+  }
+  .inner-content-body h1 {
+    color: black;
+    margin-top: 20px;
+    font-family: "Times New Roman", Times, serif;
+    font-size: 100px;
+    font-style: normal;
+    font-weight: bold;
+  }
+  .inner-content-body h2 {
+    color: black;
+    padding-top: 0%;
+  
+    margin-top: 0px;
+  }
+  .inner-content-body p {
+    color: black;
+  
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
+  .button {
+    margin-left: 20px;
+    margin-top: 4rem;
+  }
+  
+  .button-left {
+    border: none;
+    background-color: blue;
+    color: white;
+    border-radius: 20px;
+    padding: 8px 30px 8px 30px;
+    margin-right: 3px;
+    font-weight: bold;
+  }
+  
+  .button-right {
+    border: 1px solid black;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 8px 20px 8px 20px;
+  
+    font-weight: bold;
+  }
+  
+  .outer-content {
+    height: 630px;
+    background-color: #f4ece6;
+  
+    margin-left: 3rem;
+    margin-right: 1rem;
+  
+    margin-top: -1180px;
+  }
+  .outer-content-body {
+    background-color: #f4ece6;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 2rem;
+  
+    align-items: center;
+    color: black;
+  }
+  .outer-content-body img {
+    height: 170px;
+    width: 170px;
+    border-radius: 50%;
+    align-items: center;
+    margin-top: 50px;
+  }
+  .outer-content-body h1 {
+    margin-top: 3rem;
+    font-family: "Times New Roman", Times, serif;
+  }
+  .social-media {
+    display: relative;
+  }
+  
+  .social-media-icons {
+    display: relative;
+    justify-content: space-around;
+    background-color: #fff;
+    margin-top: 125px;
+    padding: 20px 100px 20px 100px;
+    width: 100%;
+  }
+  
+  /* section end */
+  /* footer */
+  .footer {
+    padding-top: 450px;
+    padding-bottom: 60px;
+    margin-bottom: 80px;
+  }
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 4rem;
+    margin-right: 2rem;
+    position: absolute;
+    margin-bottom: 10px;
+    margin-top: 110px;
+    width: 82%;
+  }
+  footer div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .left-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    margin-top: 20px;
+    padding-bottom: 0px;
+  }
+  
+  .right-footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: left;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+    margin-left: -160px;
+  }
+  .right-footer-three {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 0px;
+    align-items: left;
+    color: black;
+    margin-left: 10rem;
+  }
+  
+  .right-footer-two {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: left;
+    color: black;
+    margin-left: 3rem;
+    padding-bottom: 0px;
+  }
+  
+  .right-footer-one {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: left;
+    color: black;
+    margin-left: 10rem;
+    margin-top: 20px;
+    padding-bottom: 0px;
+  }
+  
+  .left-footer-span {
+    color: black;
+  }
+  .fa {
+    padding-left: 0px;
+  }
+  .fa-facebook {
+    color: black;
+  }
+  .fa-twitter {
+    color: black;
+    margin-left: 10px;
+  }
+  
+  .fa-linkedin {
+    color: black;
+  
+    margin-left: 10px;
+  }
+  
+  .fa-instagram {
+    color: black;
+    margin-left: 1px;
+  
+    margin-left: 10px;
+  }
+  .right-footer-span-three-top {
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .right-footer-span-two-top {
+    font-weight: bold;
+    margin-bottom: 10p;
+  }
+  .right-footer-span-one-top {
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .footer-social-media-icons {
+    width: 20px;
+  }
+  .left-footer a {
+    text-decoration: underline;
+  }
+  
+  /* footer end */
+  
+  /* media query */
+  @media only screen and (min-width: 540px){
+    .desktopContainer {
+      display: block;
+      overflow-x: hidden;
+    }
+    .mobileContainer {
+      display: none;
+    }
+    body {
+      background-color: white;
+      color: #fff;
+  
+      font-family: "Poppins", sans-serif;
+      font-family: "Quicksand", sans-serif;
+      padding: 0;
+      margin: 0;
+    }
+  
+    hr {
+      width: 15%;
+      height: 3px;
+      background-color: blue;
+      border-width: 0;
+    }
+  
+    a {
+      text-decoration: none;
+    }
+    li {
+      list-style: none;
+      color: black;
+    }
+    /* header */
+    .maya-span1 {
+      color: black;
+      font-size: 15px;
+      font-family: "Times New Roman", Times, serif;
+    }
+    .project-span1 {
+      color: black;
+      font-size: 10px;
+    }
+    .about-span1 {
+      color: blue;
+    }
+  
+    .header1 {
+      font-family: "Poppins", sans-serif;
+      font-family: "Quicksand", sans-serif;
+      background-color: white;
+      display: flex;
+      justify-content: space-between;
+      position: fixed;
+      overflow: hidden;
+  
+      top: 0;
+      left: 0;
+      width: 90%;
+  
+      /* box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); */
+      z-index: 10;
+    }
+  
+    .header-title1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 0rem;
+      margin-top: 1.7rem;
+      
+    }
+    .header-navbar1 {
+      margin-right: 0px;
+      margin-top: 2rem;
+    }
+    .blue-box1 {
+      color: blue;
+      background-color: blue;
+      margin-right: 10px;
+      margin-left: 10px;
+      height: 15.5px;
+      width: 15px;
+      align-items: center;
+    }
+    .header1 div {
+      display: flex;
+      margin-left: 0px;
+    }
+    .header1 div ul {
+      display: flex;
+      margin-right: 1rem;
+      font-size: 10px;
+    }
+    .header1 div ul li {
+      color: pink;
+      margin-left: 0.5rem;
+    }
+    .header1 div ul li a {
+      color: black;
+    }
+  
+    /* header end */
+    /* content */
+  
+    .inner-content1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 50px;
+      background-color: white;
+      width: 100%;
+      
+    }
+  
+    .inner-content-left1 {
+      background-color: #e6dacd;
+      width: 60%;
+      height: 800px;
+      margin-top: 2rem;
+      padding-top: 150px;
+      padding-bottom: 100px;
+    }
+  
+    .inner-content-right1 {
+      background-color: #fff;
+      width: 40%;
+      height: 400px;
+      padding-top: 150px;
+      padding-bottom: 300px;
+    }
+    .outer-content1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+  
+      margin-bottom: 50px;
+      background-color: white;
+      width: 100%;
+      height: 500px;
+      font-size: 10px;
+      margin-left: 97px;
+      margin-top: -650px;
+    }
+    .outer-content-left1 {
+      background-color: #f4ece6;
+      width: 50%;
+      height: 500px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: black;
+    }
+    .outer-content-left1 img {
+      height: 170px;
+      width: 170px;
+      border-radius: 50%;
+      align-items: center;
+      margin-top: 50px;
+    }
+    .outer-content-left1 h1 {
+      margin-top: 40px;
+    }
+    .outer-content-right1 {
+      background-color: #fff;
+      width: 70%;
+      height: 500px;
+    }
+    .outer-content-right1 h1 {
+      color: black;
+      margin-top: 30px;
+      margin-bottom: 70px;
+      margin-left: 20px;
+      font-size: 70px;
+      font-style: normal;
+      font-weight: bolder;
+      font-family: "Times New Roman", Times, serif;
+    }
+    .outer-content-right1 h2 {
+      color: black;
+      padding-top: 0%;
+      margin-left: 20px;
+      margin-top: -70px;
+      font-size: larger;
+    }
+    .outer-content-right1 p {
+      color: black;
+      margin-left: 5px;
+      margin-top: 50px;
+      font-size: 9px;
+    }
+    .button1 {
+      margin-left: 10px;
+      margin-top: 30px;
+    }
+  
+    .button-left1 {
+      border: none;
+      background-color: blue;
+      color: white;
+      border-radius: 20px;
+      padding: 4px 15px 4px 15px;
+      margin-right: -2px;
+      font-weight: bold;
+    }
+  
+    .button-right1 {
+      border: 1px solid black;
+      background-color: #fff;
+      border-radius: 20px;
+      padding: 4px 10px 4px 10px;
+      margin-left: 5px;
+      font-weight: bold;
+    }
+  
+    .social-media-icons1 {
+      background-color: #fff;
+      margin-top: 80px;
+      padding: 20px 40px 20px 40px;
+      width: 100%;
+      align-items: center;
+      align-content: center;
+      text-align: center;
+    }
+    .project-manag-span1 {
+      margin-top: 20px;
+    }
+  
+    /* content end */
+    /* footer */
+    .footer1 {
+      padding-top: 10px;
+      padding-bottom: 20px;
+      padding-bottom: 50px;
+      margin-bottom: 80px;
+    }
+    footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      
+      padding-bottom: 40px;
+      position: absolute;
+      padding-top: 30px;
+    }
+    footer div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 0px;
+    }
+    .left-footer1 {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+       margin-top: 20px;
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+  
+    .right-footer1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: left;
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+      margin-top: 20px;
+    }
+    .right-footer-three1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 0px;
+      align-items: center;
+      color: black;
+      margin-left: 0rem;
+    }
+  
+    .right-footer-two1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 2rem;
+      padding-bottom: 0px;
+    }
+  
+    .right-footer-one1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 2rem;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+  
+    .left-footer-span1 {
+      color: black;
+    }
+    .fa {
+      padding-left: 20px;
+    }
+    .fa-facebook {
+      color: black;
+    }
+    .fa-twitter {
+      color: black;
+    }
+  
+    .fa-linkdin {
+      color: black;
+    }
+  
+    .fa-instagram {
+      color: black;
+      margin-left: 1px;
+    }
+    .right-footer-span-three-top1 {
+      font-weight: bold;
+    }
+    .right-footer-span-two-top1 {
+      font-weight: bold;
+    }
+    .right-footer-span-one-top1 {
+      font-weight: bold;
+    }
+    .left-footer1 a {
+      text-decoration: underline;
+    }
+  
+  
+  
+  }
+  @media only screen and (min-width: 900px) {
+    /* Add your CSS here */
+    .desktopContainer {
+      display: block;
+      overflow-x: hidden;
+    }
+    .mobileContainer {
+      display: none;
+    }
+  
+    body {
+      background-color: white;
+      color: #fff;
+  
+      font-family: "Poppins", sans-serif;
+      font-family: "Quicksand", sans-serif;
+      padding: 0;
+      margin: 0;
+    }
+  
+    hr {
+      width: 15%;
+      height: 3px;
+      background-color: blue;
+      border-width: 0;
+    }
+  
+    a {
+      text-decoration: none;
+    }
+    li {
+      list-style: none;
+      color: black;
+    }
+    /* header */
+    .maya-span1 {
+      color: black;
+      font-size: 15px;
+      font-family: "Times New Roman", Times, serif;
+    }
+    .project-span1 {
+      color: black;
+      font-size: 10px;
+    }
+    .about-span1 {
+      color: blue;
+    }
+  
+    .header1 {
+      font-family: "Poppins", sans-serif;
+      font-family: "Quicksand", sans-serif;
+      background-color: white;
+      display: flex;
+      justify-content: space-between;
+      position: fixed;
+      overflow: hidden;
+  
+      top: 0;
+      left: 0;
+      width: 90%;
+  
+      /* box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); */
+      z-index: 10;
+    }
+  
+    .header-title1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 2rem;
+      margin-top: 2rem;
+    }
+    .header-navbar1 {
+      margin-right: 0px;
+      margin-top: 2rem;
+    }
+    .blue-box1 {
+      color: blue;
+      background-color: blue;
+      margin-right: 10px;
+      margin-left: 10px;
+      height: 15.5px;
+      width: 15px;
+      align-items: center;
+    }
+    .header1 div {
+      display: flex;
+      margin-left: 1rem;
+    }
+    .header1 div ul {
+      display: flex;
+      margin-right: 1rem;
+    }
+    .header1 div ul li {
+      color: pink;
+      margin-left: 1rem;
+    }
+    .header1 div ul li a {
+      color: black;
+    }
+  
+    /* header end */
+    /* content */
+  
+    .inner-content1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 50px;
+      background-color: white;
+      width: 100%;
+      
+    }
+  
+    .inner-content-left1 {
+      background-color: #e6dacd;
+      width: 50.4%;
+      height: 800px;
+      margin-top: 2rem;
+      padding-top: 150px;
+      padding-bottom: 100px;
+    }
+  
+    .inner-content-right1 {
+      background-color: #fff;
+      width: 60%;
+      height: 400px;
+      padding-top: 150px;
+      padding-bottom: 300px;
+    }
+    .outer-content1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+  
+      margin-bottom: 50px;
+      background-color: white;
+      width: 100%;
+      height: 500px;
+  
+      margin-left: 200px;
+      margin-top: -650px;
+    }
+    .outer-content-left1 {
+      background-color: #f4ece6;
+      width: 30%;
+      height: 500px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: black;
+    }
+    .outer-content-left1 img {
+      height: 170px;
+      width: 170px;
+      border-radius: 50%;
+      align-items: center;
+      margin-top: 50px;
+    }
+    .outer-content-left1 h1 {
+      margin-top: 40px;
+    }
+    .outer-content-right1 {
+      background-color: #fff;
+      width: 70%;
+      height: 500px;
+    }
+    .outer-content-right1 h1 {
+      color: black;
+      margin-top: 30px;
+      margin-bottom: 70px;
+      margin-left: 20px;
+      font-size: 100px;
+      font-style: normal;
+      font-weight: bolder;
+      font-family: "Times New Roman", Times, serif;
+    }
+    .outer-content-right1 h2 {
+      color: black;
+      padding-top: 0%;
+      margin-left: 20px;
+      margin-top: -70px;
+    }
+    .outer-content-right1 p {
+      color: black;
+      margin-left: 20px;
+      margin-top: 50px;
+    }
+    .button1 {
+      margin-left: 20px;
+      margin-top: 30px;
+    }
+  
+    .button-left1 {
+      border: none;
+      background-color: blue;
+      color: white;
+      border-radius: 20px;
+      padding: 8px 30px 8px 30px;
+      margin-right: 3px;
+      font-weight: bold;
+    }
+  
+    .button-right1 {
+      border: 1px solid black;
+      background-color: #fff;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-left: 10px;
+      font-weight: bold;
+    }
+  
+    .social-media-icons1 {
+      background-color: #fff;
+      margin-top: 80px;
+      padding: 20px 50px 20px 50px;
+      width: 100%;
+      align-items: center;
+      align-content: center;
+      text-align: center;
+    }
+    .project-manag-span1 {
+      margin-top: 20px;
+    }
+  
+    /* content end */
+    /* footer */
+    .footer1 {
+      padding-top: 10px;
+      padding-bottom: 20px;
+      padding-bottom: 50px;
+      margin-bottom: 80px;
+    }
+    footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-left: 3rem;
+      margin-right: 3rem;
+      padding-bottom: 40px;
+      position: absolute;
+      padding-top: 30px;
+    }
+    footer div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 0px;
+    }
+    .left-footer1 {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+  
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+  
+    .right-footer1 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: left;
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+    .right-footer-three1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 0px;
+      align-items: center;
+      color: black;
+      margin-left: 0rem;
+    }
+  
+    .right-footer-two1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 4rem;
+      padding-bottom: 0px;
+    }
+  
+    .right-footer-one1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 4rem;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+  
+    .left-footer-span1 {
+      color: black;
+    }
+    .fa {
+      padding-left: 20px;
+    }
+    .fa-facebook {
+      color: black;
+    }
+    .fa-twitter {
+      color: black;
+    }
+  
+    .fa-linkdin {
+      color: black;
+    }
+  
+    .fa-instagram {
+      color: black;
+      margin-left: 1px;
+    }
+    .right-footer-span-three-top1 {
+      font-weight: bold;
+    }
+    .right-footer-span-two-top1 {
+      font-weight: bold;
+    }
+    .right-footer-span-one-top1 {
+      font-weight: bold;
+    }
+    .left-footer1 a {
+      text-decoration: underline;
+    }
+  
+    /* footer end */
+  }
+  /* media query end */
+  
\ No newline at end of file
diff --git a/aboutme.html b/aboutme.html
new file mode 100644
index 00000000..f523f66f
--- /dev/null
+++ b/aboutme.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <!-- poppin font header -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    <!-- poppin font header end -->
+<!-- poppin font body -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="/aboutme.css">
+  </head>
+  <body>
+    <div class="bigContainer">
+      <div class="mobileContainer">
+        <header class="header">
+          <a href="/aboutme.html">
+            <div class="header-title">
+                <p class="blue-box"></p>
+                <p>
+                  <strong class="maya-span">Melese portifolio </strong>
+                  <span class="project-span"
+                    ><span class="forward-slash">/</span> WEB DEVELOPER</span
+                  >
+                </p>
+              </div>
+          </a>
+          <ul class="menu">
+            <li><a class="menuItem" href="/aboutme.html">ABOUT ME</a></li>
+            <li><a class="menuItem" href="/resume.html">RESUME</a></li>
+            <li><a class="menuItem" href="/project.html">PROJECTS</a></li>
+            <li><a class="menuItem" href="/contact.html">CONTACT</a></li>
+          </ul>
+          <!-- This hamburger menu created by https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0 -->
+          <button class="hamburger">
+            <!-- material icons https://material.io/resources/icons/ -->
+            <i class="menuIcon material-icons">menu</i>
+            <i class="closeIcon material-icons" style="display: none">close</i>
+          </button>
+        </header>
+        <!-- section -->
+        <section class="inner-content">
+            <div class="inner-content-body">
+                <h1>Hello</h1>
+                 <h2>Here's who am I & what I can do</h2>
+                <p>I'm a paragraph. Click here to add your own text<br>
+                  and edit me. It's easy. Just "Edit Text" or <br>
+               double click me to add your own content and <br>
+               make changes to the font.<br><br>
+               I'am a great place for you to tell a story and let<br>your users know a little more about you.</p>
+    
+    </div></section>
+    <section>
+        <div class="outer-content">
+            <div class="outer-content-body">
+                
+                    <img src="designs/avater-img.jpg">
+                    <h1>Melese<br>portifolio</h1>
+                    <hr>
+                    <div class="button">
+                        <a href="/resume.html"><button class="button-left">RESUME</button></a>
+                       <a href="/project.html"><button class="button-right">PROJECTS</button></a>
+                    </div>
+                    
+                   
+               
+              
+        </div>
+        
+            <div class="social-media">
+                <div class="social-media-icons">
+                    <a href="#" class="fa fa-facebook"></a>
+                    <a href="#" class="fa fa-twitter"></a>
+                    <a href="#" class="fa fa-linkedin"></a>
+                    <a href="#" class="fa fa-instagram"></a>
+                 </div>
+            
+            
+        
+        
+    </section>
+    
+                <!--section end  -->
+                <!-- footer -->
+                <div class="footer">
+                    <footer>
+                        <div class="right-footer">
+                            <div class="right-footer-flex">
+                                <div class="right-footer-three">         
+                                    <span class="right-footer-span-three-top">Call</span>
+                                    <span class="right-footer-span-three-bottom">123-456-7890</span>
+                                </div>
+                                <div class="right-footer-two">
+                                    <span class="right-footer-span-two-top">Write</span>
+                                    <span class="right-footer-span-two-bottom"><a href="#">@info.mysite.com</a></span>
+                                </div>
+                                
+                            </div>
+                            <div class="right-footer-one">
+                                <span class="right-footer-span-one-top">Follow</span>
+                                <div class="footer-social-media-icons">
+                                    <a href="#" class="fa fa-facebook"></a>
+                                    <a href="#" class="fa fa-twitter"></a>
+                                    <a href="#" class="fa fa-linkedin"></a>
+                                    <a href="#" class="fa fa-instagram"></a>
+            
+            
+            
+                                </div>
+                            </div>
+                            
+                        </div>
+                        <div class="left-footer">
+                            <span class="left-footer-span">@2035 By Melese portifolio.</span>
+                            <span class="left-footer-span"> Powered and secured by <a href="#">wix</a></span>
+                        </div>
+                       
+                   </footer></div>
+                
+                   <script>
+                    const menu = document.querySelector(".menu");
+                    const menuItems = document.querySelectorAll(".menuItem");
+                    const hamburger= document.querySelector(".hamburger");
+                    const closeIcon= document.querySelector(".closeIcon");
+                    const menuIcon = document.querySelector(".menuIcon");
+                    
+                    function toggleMenu() {
+                      if (menu.classList.contains("showMenu")) {
+                        menu.classList.remove("showMenu");
+                        closeIcon.style.display = "none";
+                        menuIcon.style.display = "block";
+                      } else {
+                        menu.classList.add("showMenu");
+                        closeIcon.style.display = "block";
+                        menuIcon.style.display = "none";
+                      }
+                    }
+                    
+                    hamburger.addEventListener("click", toggleMenu);
+                    
+                    menuItems.forEach( 
+                      function(menuItem) { 
+                        menuItem.addEventListener("click", toggleMenu);
+                      }
+                    )
+                    
+                    
+                    
+                    
+                    </script>
+                         
+                <!-- footer end -->
+        
+    </div>
+          
+     <div class="desktopContainer"> 
+        <nav class="header1">
+            
+             <a href="/aboutme.html">
+                <div class="header-title1">
+                    <p class="blue-box1">.</p>
+                    <p><strong class="maya-span1">MelesePortifolio </strong> <span class="project-span1">/ WEB DEVELOPER</span></p>
+                 </div>
+                 
+             </a>
+            <div class="header-navbar1">
+                 <ul>
+                     <li><a href="/aboutme.html"><span class="about-span1">ABOUT ME</span></a></li>
+                     <li><a href="/resume.html">RESUME</a></li>
+                     <li><a href="/project.html">PROJECTS</a></li>
+                     <li><a href="/contact.html">CONTACT</a></li>
+                 </ul>
+             </div>
+             
+        
+        
+    </nav>
+  
+    <section class="inner-content1">
+    
+        <div class="inner-content-left1">.</div>
+        <div class="inner-content-right1">.</div>
+    
+   </section>
+   
+   <section class="outer-content1">
+    
+    <div class="outer-content-left1">
+        <img src="designs/avater-img.jpg">
+        <h1>Melese<br>portifolio</h1>
+        <hr>
+        <span class="project-manag-span1">WEB DEVELOPER</span>
+        <div class="social-media-icons1">
+            <a href="#" class="fa fa-facebook"></a>
+            <a href="#" class="fa fa-twitter"></a>
+            <a href="#" class="fa fa-linkedin"></a>
+            <a href="#" class="fa fa-instagram"></a>
+
+
+        </div>
+    </div>
+    <div class="outer-content-right1">
+                                 <h1>Hello</h1>
+                                  <h2>Here's who am I & what I can do</h2>
+                                 <div class="button1">
+                                     <a href="/resume.html"><button class="button-left1">RESUME</button></a>
+                                    <a href="/project.html"> <button class="button-right1">PROJECTS</button></a>
+                                 </div>
+                                 <p>I'm a paragraph. Click here to add your own text<br>
+                                   and edit me. It's easy. Just "Edit Text" or <br>
+                                double click me to add your own content and <br>
+                                make changes to the font.<br><br>
+                                I'am a great place for you to tell a story and let<br>your users know a little more about you.</p>
+
+    </div>
+
+</section>
+
+  <div class="footer1">
+    <footer>
+        <div class="left-footer1">
+            <span class="left-footer-span1">@2035 By Melese portifolio.</span>
+            <span class="left-footer-span1"> Powered and secured by <a href="#">Melese</a></span>
+        </div>
+        <div class="right-footer1">
+            <div class="right-footer-three1">         
+                <span class="right-footer-span-three-top1">Call</span>
+                <span class="right-footer-span-three-bottom1">123-456-7890</span>
+            </div>
+            <div class="right-footer-two1">
+                <span class="right-footer-span-two-top1">Write</span>
+                <span class="right-footer-span-two-bottom1"><a href="#">@info.mysite.com</a></span>
+            </div>
+            <div class="right-footer-one1">
+                <span class="right-footer-span-one-top1">Follow</span>
+                <div class="footer-social-media-icons1">
+                    <a href="#" class="fa fa-facebook"></a>
+                    <a href="#" class="fa fa-twitter"></a>
+                    <a href="#" class="fa fa-linkedin"></a>
+                    <a href="#" class="fa fa-instagram"></a>
+
+
+
+                </div>
+            </div>
+            
+        </div>
+   </footer>
+
+  </div>
+
+     </div>
+        
+        
+        <!-- desktopContent -->
+        <!-- Please leave this in to credit the creators of this design -->
+        
+       </div>      
+        
+      
+    
+  </body>
+</html>
diff --git a/coffee.jpg b/coffee.jpg
new file mode 100644
index 00000000..3e8fca0c
Binary files /dev/null and b/coffee.jpg differ
diff --git a/contact.css b/contact.css
new file mode 100644
index 00000000..43042b97
--- /dev/null
+++ b/contact.css
@@ -0,0 +1,970 @@
+.desktopContainer {
+    display: none;
+  }
+  
+  body {
+    margin: 0;
+    padding: 0;
+    color: white;
+    background-color: #e6dacd;
+  
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: black;
+    position: fixed;
+    border-bottom: 2px solid whitesmoke;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    z-index: 100;
+  }
+  .belowHeadercolumn {
+    display: flex;
+    flex-direction: column;
+    margin-left: -50px;
+    margin-right: -75px;
+    margin-top: 150px;
+    margin-bottom: 10px;
+    padding: 1px;
+    color: black;
+    font-weight: bold;
+  }
+  .nameform {
+    display: flex;
+    justify-content: space-between;
+    margin-left:0px; 
+    margin-right: 50px;
+    
+    
+  }
+  .formName {
+    padding-bottom: 100px;
+    
+  }
+  .formNameinner {
+    margin-right: 0px;
+    margin-left: 0px;
+  }
+  #contact{
+    width: 100%;
+  }
+  input{
+      background-color: #cbf97d;
+      border: 1px solid#8ebb41;
+     
+  }
+  textarea{
+      background-color: #cbf97d;
+      border: 1px solid#8ebb41;
+  
+  }
+  .belowHeader2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 230px;
+    margin-right: 230px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  
+  /* .belowHeadercolumn {
+    display: flex;
+    flex-direction: column;
+    margin-top: 100px;
+    padding: 50px;
+    color: black;
+    font-weight: bold;
+  }
+   */
+  .portifolioLogo {
+    display: flex;
+    flex-direction: row;
+  
+    margin-left: -50px;
+  }
+  .portifolioList li {
+    margin: 2px;
+    padding: 3px;
+  }
+  .btnDownload {
+    padding: 10px;
+  
+    margin: 15px;
+    border: none;
+    border-radius: 3px;
+    background-color: blue;
+    color: white;
+  }
+  .belowHeader {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 25px;
+    padding-top: 0px;
+    margin-left: 115px;
+    margin-right: 115px;
+  }
+  .belowHeader2 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 25px;
+    padding-top: 20px;
+    padding-bottom: 25px;
+    margin-left: 115px;
+    margin-right: 115px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+  .belowHeader3 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 115px;
+    margin-right: 115px;
+  
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  
+  .belowHeaderInner {
+    display: flex;
+  
+    justify-content: space-around;
+    border: 1px solid red;
+    margin: 5px;
+    padding: 5px;
+  }
+  .portifolioLogo {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+  }
+  .portifolioList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-decoration: none;
+  }
+  nav ul {
+    list-style: none;
+  }
+  nav li {
+    display: inline-block;
+    margin-right: 20px;
+    padding-right: 30px;
+  }
+  nav a {
+    text-decoration: none;
+    font-weight: bold;
+    color: white;
+    font-size: 32px;
+  }
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-gap: 4rem;
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+    margin-bottom: 6rem;
+  }
+  
+  .project-image {
+    height: calc(100%-6.8rem);
+    width: 100%;
+    object-fit: cover;
+    background-color: gray;
+  }
+  .project-title {
+    font-size: 2rem;
+    padding: 2rem 0.5rem;
+    background-color: gray;
+  }
+  .projects-section {
+    text-align: center;
+    padding: 10rem 2rem;
+    background: var(--main-blue);
+  }
+  
+  .projects-section-header {
+    max-width: 640px;
+    margin: 0 auto 6rem auto;
+    border-bottom: 0.2rem solid var(--main-white);
+  }
+  
+  .footer {
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    z-index: 100;
+    border-top: 2px solid whitesmoke;
+    margin-bottom: 0px;
+    padding-top: 40px;
+    padding-bottom: 60px;
+    background-color: black;
+    align-items: center;
+  }
+  footer div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+  .left-footer1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+  
+  .right-footer1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+  .right-footer-three1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 0px;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+    margin-bottom: 30px;
+  }
+  
+  .right-footer-two1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+  
+  .right-footer-one1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: black;
+    margin-left: 4rem;
+    margin-bottom: 30px;
+    padding-bottom: 0px;
+  }
+  
+  .left-footer-span1 {
+    color: white;
+    padding-left: 30px;
+  }
+  .fa {
+    padding-left: 20px;
+  }
+  .fa-facebook {
+    color: white;
+  }
+  .fa-twitter {
+    color: white;
+  }
+  
+  .fa-linkdin {
+    color: white;
+  }
+  
+  .fa-instagram {
+    color: white;
+    margin-left: 1px;
+  }
+  .footer-social-media-icons1 {
+    padding-right: 50px;
+  }
+  .right-footer-span-three-top1 {
+    font-weight: bold;
+  }
+  .right-footer-span-two-top1 {
+    font-weight: bold;
+  }
+  .right-footer-span-one-top1 {
+    font-weight: bold;
+  }
+  .left-footer1 a {
+    text-decoration: underline;
+  }
+  
+  @media only screen and (min-width: 613px) {
+    .desktopContainer {
+      display: block;
+      overflow-x: hidden;
+    }
+    .mobileContainer {
+      display: none;
+    }
+  
+    body {
+      margin: 0;
+      padding: 0;
+      color: white;
+      background-color: #e6dacd;
+  
+      display: flex;
+      flex-direction: column;
+    }
+    .nameform {
+        display: flex;
+        justify-content: space-around;
+        margin-left: -40px; 
+        margin-right: -40px;
+      }
+      .formName {
+        padding-bottom: 100px;
+      }
+      .formNameinner {
+        margin-right: 5px;
+        margin-left: 1px;
+      }
+      input{
+          background-color: #cbf97d;
+          border: 1px solid#8ebb41;
+      
+      }
+      textarea{
+          background-color: #cbf97d;
+          border: 1px solid#8ebb41;
+      
+      }
+      .belowHeader2 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        font-weight: bold;
+        color: black;
+        margin-top: 50px;
+        padding-top: 40px;
+        padding-bottom: 50px;
+        margin-left: 230px;
+        margin-right: 230px;
+        background-color: white;
+        border: none;
+        border-radius: 5px;
+        padding-left: 50px;
+        padding-right: 50px;
+      }
+      
+      /* .belowHeadercolumn {
+        display: flex;
+        flex-direction: column;
+        margin-top: 100px;
+        padding: 50px;
+        color: black;
+        font-weight: bold;
+      }
+       */
+      
+    .header2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      background-color: black;
+      position: fixed;
+      border-bottom: 2px solid whitesmoke;
+      width: 100%;
+      top: 0;
+      left: 0;
+      padding: 20px;
+      z-index: 100;
+    }
+    .portifolioList2 li a {
+      margin: 2px;
+      padding: 3px;
+      font-size: 16px;
+    }
+    .portifolioLogo2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      font-size: 16px;
+      margin-left: -30px;
+    }
+    .portifolioList2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      text-decoration: none;
+      font-size: 20px;
+    }
+  
+    .belowHeadercolumn2 {
+      display: flex;
+      flex-direction: column;
+      margin-top: 120px;
+      margin-left: -23px;
+      padding: 0px;
+      color: black;
+      font-weight: bold;
+    }
+    .btnDownload2 {
+      padding: 10px;
+      margin: 30px;
+      border: none;
+      border-radius: 3px;
+      background-color: blue;
+      color: white;
+    }
+    .belowHeader2 {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 0px;
+      margin-left: 120px;
+      margin-right: 120px;
+    }
+    .belowHeader22 {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 120px;
+      margin-right: 120px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+    .belowHeader32 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 120px;
+      margin-right: 120px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+  
+    .belowHeaderInner2 {
+      display: flex;
+  
+      justify-content: space-around;
+      border: 1px solid red;
+      margin: 5px;
+      padding: 5px;
+    }
+    .portifolioList2 li {
+      margin: 2px;
+      padding: 3px;
+    }
+  
+    nav ul {
+      list-style: none;
+    }
+    nav li {
+      display: inline-block;
+      margin-right: 20px;
+      padding-right: 30px;
+    }
+    nav a {
+      text-decoration: none;
+      font-weight: bold;
+      color: white;
+      font-size: 32px;
+    }
+    .projects-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      grid-gap: 4rem;
+      width: 100%;
+      max-width: 1280px;
+      margin: 0 auto;
+      margin-bottom: 6rem;
+    }
+  
+    .project-image {
+      height: calc(100%-6.8rem);
+      width: 100%;
+      object-fit: cover;
+      background-color: gray;
+    }
+    .project-title {
+      font-size: 2rem;
+      padding: 2rem 0.5rem;
+      background-color: gray;
+    }
+    .projects-section {
+      text-align: center;
+      padding: 10rem 2rem;
+      background: var(--main-blue);
+    }
+  
+    .projects-section-header {
+      max-width: 640px;
+      margin: 0 auto 6rem auto;
+      border-bottom: 0.2rem solid var(--main-white);
+    }
+  
+    .footer2 {
+      width: 100%;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      z-index: 100;
+      border-top: 2px solid whitesmoke;
+      margin-bottom: 0px;
+      padding-top: 40px;
+      padding-bottom: 60px;
+      background-color: black;
+      align-items: center;
+    }
+    footer div {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 30px;
+    }
+    .left-footer12 {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  
+      padding-bottom: 0px;
+      margin-bottom: 30px;
+    }
+  
+    .right-footer12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 0px;
+      margin-bottom: 30px;
+    }
+    .right-footer-three12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 0px;
+      align-items: center;
+      color: white;
+      margin-left: 0rem;
+      margin-bottom: 30px;
+    }
+  
+    .right-footer-two12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: white;
+      margin-left: 0rem;
+      padding-bottom: 0px;
+      margin-bottom: 30px;
+    }
+  
+    .right-footer-one12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 4rem;
+      margin-bottom: 30px;
+      padding-bottom: 0px;
+    }
+  
+    .left-footer-span12 {
+      color: white;
+      padding-left: 30px;
+    }
+    .fa {
+      padding-left: 20px;
+    }
+    .fa-facebook {
+      color: white;
+    }
+    .fa-twitter {
+      color: white;
+    }
+  
+    .fa-linkdin {
+      color: white;
+    }
+  
+    .fa-instagram {
+      color: white;
+      margin-left: 1px;
+    }
+    .footer-social-media-icons12 {
+      padding-right: 50px;
+    }
+    .right-footer-span-three-top12 {
+      font-weight: bold;
+    }
+    .right-footer-span-two-top12 {
+      font-weight: bold;
+    }
+    .right-footer-span-one-top12 {
+      font-weight: bold;
+    }
+    .left-footer12 a {
+      text-decoration: underline;
+    }
+  }
+  @media only screen and (min-width: 900px) {
+    .desktopContainer {
+      display: block;
+      overflow-x: hidden;
+    }
+    .mobileContainer {
+      display: none;
+    }
+  
+    body {
+      margin: 0;
+      padding: 0;
+      color: white;
+      background-color: #e6dacd;
+  
+      display: flex;
+      flex-direction: column;
+    }
+    .header2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      background-color: black;
+      position: fixed;
+      border-bottom: 2px solid whitesmoke;
+      width: 100%;
+      top: 0;
+      left: 0;
+      padding: 20px;
+      z-index: 100;
+    }
+    .nameform {
+      display: flex;
+      justify-content: space-around;
+      margin-left: -90px; 
+      margin-right: -80px;
+    }
+    .formName {
+      padding-bottom: 100px;
+    }
+    .formNameinner {
+      margin-right: 5px;
+      margin-left: 1px;
+    }
+    input{
+        background-color: #cbf97d;
+        border: 1px solid#8ebb41;
+    
+    }
+    textarea{
+        background-color: #cbf97d;
+        border: 1px solid#8ebb41;
+    
+    }
+  
+    .portifolioLogo2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      font-size: 20px;
+    }
+    .portifolioList2 li a {
+      font-size: 30px;
+      margin: 2px;
+      padding: 3px;
+    }
+    .portifolioList2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      text-decoration: none;
+      font-size: 30px;
+    }
+  
+    .belowHeadercolumn2 {
+      display: flex;
+      flex-direction: column;
+      margin-top: 100px;
+      padding: 50px;
+      color: black;
+      font-weight: bold;
+    }
+    .btnDownload2 {
+      padding: 10px;
+      margin: 30px;
+      border: none;
+      border-radius: 3px;
+      background-color: blue;
+      color: white;
+    }
+    .belowHeader2 {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 0px;
+      margin-left: 230px;
+      margin-right: 230px;
+    }
+    .belowHeader22 {
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 230px;
+      margin-right: 230px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+    .belowHeader32 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 230px;
+      margin-right: 230px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+  
+    .belowHeaderInner2 {
+      display: flex;
+  
+      justify-content: space-around;
+      border: 1px solid red;
+      margin: 5px;
+      padding: 5px;
+    }
+    .portifolioList2 li {
+      margin: 2px;
+      padding: 3px;
+    }
+  
+    nav ul {
+      list-style: none;
+    }
+    nav li {
+      display: inline-block;
+      margin-right: 20px;
+      padding-right: 30px;
+    }
+    nav a {
+      text-decoration: none;
+      font-weight: bold;
+      color: white;
+      font-size: 32px;
+    }
+    .projects-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      grid-gap: 4rem;
+      width: 100%;
+      max-width: 1280px;
+      margin: 0 auto;
+      margin-bottom: 6rem;
+    }
+  
+    .project-image {
+      height: calc(100%-6.8rem);
+      width: 100%;
+      object-fit: cover;
+      background-color: gray;
+    }
+    .project-title {
+      font-size: 2rem;
+      padding: 2rem 0.5rem;
+      background-color: gray;
+    }
+    .projects-section {
+      text-align: center;
+      padding: 10rem 2rem;
+      background: var(--main-blue);
+    }
+  
+    .projects-section-header {
+      max-width: 640px;
+      margin: 0 auto 6rem auto;
+      border-bottom: 0.2rem solid var(--main-white);
+    }
+  
+    .footer2 {
+      width: 100%;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      z-index: 100;
+      border-top: 2px solid whitesmoke;
+      margin-bottom: 0px;
+      padding-top: 40px;
+      padding-bottom: 60px;
+      background-color: black;
+    }
+    footer div {
+      display: flex;
+  
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 0px;
+    }
+    .left-footer12 {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+  
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+  
+    .right-footer12 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: left;
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+    .right-footer-three12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 0px;
+      align-items: center;
+      color: white;
+      margin-left: 0rem;
+    }
+  
+    .right-footer-two12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: white;
+      margin-left: 4rem;
+      padding-bottom: 0px;
+    }
+  
+    .right-footer-one12 {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: black;
+      margin-left: 4rem;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+  
+    .left-footer-span12 {
+      color: white;
+      padding-left: 30px;
+    }
+    .fa {
+      padding-left: 20px;
+    }
+    .fa-facebook {
+      color: white;
+    }
+    .fa-twitter {
+      color: white;
+    }
+  
+    .fa-linkdin {
+      color: white;
+    }
+  
+    .fa-instagram {
+      color: white;
+      margin-left: 1px;
+    }
+    .footer-social-media-icons12 {
+      padding-right: 50px;
+    }
+    .right-footer-span-three-top12 {
+      font-weight: bold;
+    }
+    .right-footer-span-two-top12 {
+      font-weight: bold;
+    }
+    .right-footer-span-one-top12 {
+      font-weight: bold;
+    }
+    .left-footer12 a {
+      text-decoration: underline;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/contact.html b/contact.html
new file mode 100644
index 00000000..7fc6e963
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,233 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="contact.css" />
+    <script src="script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <!-- poppin font header -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    
+    <!-- fa -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="bigContainer">
+        <div class="mobileContainer"><div class="header">
+            <a style="text-decoration: none;"href="/aboutme.html"><div class="portifolioLogo">
+                  <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+                  <script type="application/processing">
+                    size(65, 80);
+                      smooth();
+                      strokeWeight(2);
+                      background(0, 0, 0);
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,30,i+10,20,i+20,30,i+10,40);}
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,50,i+10,40,i+20,50,i+10,60);
+                        }
+                        
+                      fill(0);
+                  </script>
+                  <canvas></canvas>
+                  <h3>Melese portifolio</h3>
+                </div></a>
+                  <nav>
+                    <ul class="portifolioList">
+                      <li><a style="font-size:15px;padding-right: 2px;;" href="/aboutme.html">About</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/resume.html">Resume</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/project.html">Projects</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/contact.html">Contact</a></li>
+                  </nav>
+        </div>
+        
+        <div class="belowHeadercolumn">
+        
+            <div class="belowHeader2">
+               <div style="text-align: center;"><h1>Contact me!</h1></div>
+               <div>
+                   <form>
+                    <div class="formName">
+                       <div class="nameform">
+                           <div>
+                               <label>First Name<span style="color:red">*</span></label><br><br>
+                               <input>
+   
+                           </div>
+                           <div>
+                               <label>Last Name<span style="color:red">*</span></label><br><br>
+                               <input>
+                           </div>
+                       </div><br>
+                       <div class="formNameinner">
+                           <label>Email<span style="color:red">*</span></label><br><br>
+                       <input style="width:100%;"><br><br>
+                       <label>Subject</label><br><br>
+                       <input style="width:100%;"><br><br>
+                       <label style="width:100%;" >Message</label><br><br>
+                       <textarea name="message" id="contact" cols="56.5" rows="5"></textarea><br><br>
+                       <input type="submit"value="SEND" style="background-color: blue; font-weight:bold;color:white;border: none;padding: 10px; border-radius: 5px;"><br>
+   
+                       </div>
+                   </div>
+   
+   
+                  </form>
+              </div>
+               
+           
+               
+           </div></div>
+            
+          
+        <div class="footer">
+             <div class="left-footer1">
+                <span class="left-footer-span1">@2023 By Melese Berehannu.</span>
+                <span class="left-footer-span1"> Powered by <a href="#">MelesePortifolio</a></span>
+            </div>
+            <div class="right-footer1">
+                    <div class="right-footer-three1">         
+                        <span class="right-footer-span-three-top1">Call</span>
+                        <span class="right-footer-span-three-bottom1">07478363014</span>
+                    </div>
+                <div class="right-footer-two1">
+                    <span class="right-footer-span-two-top1">Write</span>
+                    <span class="right-footer-span-two-bottom1"><a href="#">@info.mysite.com</a></span>
+                </div>
+                <div class="right-footer-one1">
+                    <span class="right-footer-span-one-top1">Follow</span>
+                    <div class="footer-social-media-icons1">
+                        <a href="#" class="fa fa-facebook"></a>
+                        <a href="#" class="fa fa-twitter"></a>
+                        <a href="#" class="fa fa-linkedin"></a>
+                        <a href="#" class="fa fa-instagram"></a>
+            
+            
+            
+                    </div>
+                </div>
+          
+      </div>
+    
+
+    </div>
+
+</div>
+        <div class="desktopContainer"> 
+            <div class="header2">
+                <a style="text-decoration: none;"href="/aboutme.html"> <div class="portifolioLogo2">
+              <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+              
+              <script type="application/processing">
+                size(65, 80);
+                  smooth();
+                  strokeWeight(2);
+                  background(0, 0, 0);
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,30,i+10,20,i+20,30,i+10,40);}
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,50,i+10,40,i+20,50,i+10,60);
+                    }
+                    
+                  fill(0);
+              </script>
+              <canvas></canvas>
+              <h1>Melese portifolio</h1>
+            </div></a>
+              <nav>
+                <ul class="portifolioList2">
+                  <li><a href="/aboutme.html">About</a></li>
+                  <li><a href="/resume.html">Resume</a></li>
+                  <li><a href="/project.html">Projects</a></li>
+                  <li><a href="/contact.html">Contact</a></li>
+              </nav>
+    </div>
+    
+    <div class="belowHeadercolumn">
+        
+        <div class="belowHeader2">
+           <div style="text-align: center;"><h1>Contact me!</h1></div>
+           <div>
+               <form>
+                <div class="formName">
+                   <div class="nameform">
+                       <div>
+                           <label>First Name<span style="color:red">*</span></label><br><br>
+                           <input>
+
+                       </div>
+                       <div>
+                           <label>Last Name<span style="color:red">*</span></label><br><br>
+                           <input>
+                       </div>
+                   </div><br>
+                   <div class="formNameinner">
+                       <label>Email<span style="color:red">*</span></label><br><br>
+                   <input style="width:100%;"><br><br>
+                   <label>Subject</label><br><br>
+                   <input style="width:100%;"><br><br>
+                   <label style="width:100%;" >Message</label><br><br>
+                   <textarea name="message" id="contact" cols="56.5" rows="5"></textarea><br><br>
+                   <input type="submit"value="SEND" style="background-color: blue; font-weight:bold;color:white;border: none;padding: 10px; border-radius: 5px;"><br>
+
+                   </div>
+               </div>
+
+
+              </form>
+          </div>
+           
+       
+           
+       </div></div>
+        
+         <div class="footer2">
+         <div class="left-footer12">
+            <span class="left-footer-span12">@2023 By Melese Berehannu.</span>
+            <span class="left-footer-span12"> Powered by <a href="#">MelesePortifolio</a></span>
+        </div>
+        <div class="right-footer12">
+                <div class="right-footer-three12">         
+                    <span class="right-footer-span-three-top12">Call</span>
+                    <span class="right-footer-span-three-bottom12">07478363014</span>
+                </div>
+            <div class="right-footer-two12">
+                <span class="right-footer-span-two-top12">Write</span>
+                <span class="right-footer-span-two-bottom12"><a href="#">@info.mysite.com</a></span>
+            </div>
+            <div class="right-footer-one12">
+                <span class="right-footer-span-one-top12">Follow</span>
+                <div class="footer-social-media-icons12">
+                    <a href="#" class="fa fa-facebook"></a>
+                    <a href="#" class="fa fa-twitter"></a>
+                    <a href="#" class="fa fa-linkedin"></a>
+                    <a href="#" class="fa fa-instagram"></a>
+        
+        
+        
+                </div>
+            </div>
+      
+  </div></div>
+</div>
+    </div>
+       </body>
+</html>
+
+
+
+
+
+
diff --git a/css/main.css b/css/main.css
deleted file mode 100644
index aa561706..00000000
--- a/css/main.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* Add your CSS here */
-
-/* Dont' forget to link this file to your HTML in the <head> */
diff --git a/designs/Business portfolio.png b/designs/Business portfolio.png
deleted file mode 100644
index c26278ae..00000000
Binary files a/designs/Business portfolio.png and /dev/null differ
diff --git a/designs/Cactus shop.png b/designs/Cactus shop.png
deleted file mode 100644
index c543d741..00000000
Binary files a/designs/Cactus shop.png and /dev/null differ
diff --git a/designs/Juice bar.png b/designs/Juice bar.png
deleted file mode 100644
index 53869d3d..00000000
Binary files a/designs/Juice bar.png and /dev/null differ
diff --git a/index.html b/index.html
deleted file mode 100644
index cd704c69..00000000
--- a/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <!-- Add a link to your custom CSS here -->
-
-    <title>Responsive grid project</title>
-</head>
-
-<body>
-
-    <!-- Add your markup here -->
-
-
-    <!-- Please leave this in to credit the creators of this design -->
-    <p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/project.css b/project.css
new file mode 100644
index 00000000..098d10aa
--- /dev/null
+++ b/project.css
@@ -0,0 +1,839 @@
+.desktopContainer {
+  display: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: white;
+  background-color: #e6dacd;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: black;
+  position: fixed;
+  border-bottom: 2px solid whitesmoke;
+  width: 100%;
+  top: 0;
+  left: 0;
+  padding: 20px;
+  z-index: 100;
+}
+.belowHeadercolumn {
+  display: flex;
+  flex-direction: column;
+  margin-left: -50px;
+  margin-top: 150px;
+  padding: 25px;
+  color: black;
+  font-weight: bold;
+}
+.portifolioLogo {
+  display: flex;
+  flex-direction: row;
+
+  margin-left: -50px;
+}
+.portifolioList li {
+  margin: 2px;
+  padding: 3px;
+}
+.btnDownload {
+  padding: 10px;
+
+  margin: 15px;
+  border: none;
+  border-radius: 3px;
+  background-color: blue;
+  color: white;
+}
+.belowHeader {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 25px;
+  padding-top: 0px;
+  margin-left: 115px;
+  margin-right: 115px;
+}
+.belowHeader2 {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 25px;
+  padding-top: 20px;
+  padding-bottom: 25px;
+  margin-left: 115px;
+  margin-right: 115px;
+  background-color: white;
+  border: none;
+  border-radius: 5px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+.belowHeader3 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 50px;
+  padding-top: 40px;
+  padding-bottom: 50px;
+  margin-left: 115px;
+  margin-right: 115px;
+
+  background-color: white;
+  border: none;
+  border-radius: 5px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.belowHeaderInner {
+  display: flex;
+
+  justify-content: space-around;
+  border: 1px solid red;
+  margin: 5px;
+  padding: 5px;
+}
+.portifolioLogo {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+}
+.portifolioList {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-decoration: none;
+}
+nav ul {
+  list-style: none;
+}
+nav li {
+  display: inline-block;
+  margin-right: 20px;
+  padding-right: 30px;
+}
+nav a {
+  text-decoration: none;
+  font-weight: bold;
+  color: white;
+  font-size: 32px;
+}
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 4rem;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  margin-bottom: 6rem;
+}
+
+.project-image {
+  height: calc(100%-6.8rem);
+  width: 100%;
+  object-fit: cover;
+  background-color: gray;
+}
+.project-title {
+  font-size: 2rem;
+  padding: 2rem 0.5rem;
+  background-color: gray;
+}
+.projects-section {
+  text-align: center;
+  padding: 10rem 2rem;
+  background: var(--main-blue);
+}
+
+.projects-section-header {
+  max-width: 640px;
+  margin: 0 auto 6rem auto;
+  border-bottom: 0.2rem solid var(--main-white);
+  color: black;
+}
+
+.footer {
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 100;
+  border-top: 2px solid whitesmoke;
+  margin-bottom: 0px;
+  padding-top: 40px;
+  padding-bottom: 60px;
+  background-color: black;
+  align-items: center;
+}
+footer div {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 30px;
+}
+.left-footer1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+
+.right-footer1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+.right-footer-three1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 0px;
+  align-items: center;
+  color: white;
+  margin-left: 0rem;
+  margin-bottom: 30px;
+}
+
+.right-footer-two1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  margin-left: 0rem;
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+
+.right-footer-one1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  color: black;
+  margin-left: 4rem;
+  margin-bottom: 30px;
+  padding-bottom: 0px;
+}
+
+.left-footer-span1 {
+  color: white;
+  padding-left: 30px;
+}
+.fa {
+  padding-left: 20px;
+}
+.fa-facebook {
+  color: white;
+}
+.fa-twitter {
+  color: white;
+}
+
+.fa-linkdin {
+  color: white;
+}
+
+.fa-instagram {
+  color: white;
+  margin-left: 1px;
+}
+.footer-social-media-icons1 {
+  padding-right: 50px;
+}
+.right-footer-span-three-top1 {
+  font-weight: bold;
+}
+.right-footer-span-two-top1 {
+  font-weight: bold;
+}
+.right-footer-span-one-top1 {
+  font-weight: bold;
+}
+.left-footer1 a {
+  text-decoration: underline;
+}
+
+@media only screen and (min-width: 613px) {
+  .desktopContainer {
+    display: block;
+    overflow-x: hidden;
+  }
+  .mobileContainer {
+    display: none;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    color: white;
+    background-color: #e6dacd;
+
+    display: flex;
+    flex-direction: column;
+  }
+  .header2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: black;
+    position: fixed;
+    border-bottom: 2px solid whitesmoke;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    z-index: 100;
+  }
+  .portifolioList2 li a {
+    margin: 2px;
+    padding: 3px;
+    font-size: 16px;
+  }
+  .portifolioLogo2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    font-size: 16px;
+    margin-left: -30px;
+  }
+  .portifolioList2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-decoration: none;
+    font-size: 20px;
+  }
+
+  .belowHeadercolumn2 {
+    display: flex;
+    flex-direction: column;
+    margin-top: 120px;
+    margin-left: -23px;
+    padding: 0px;
+    color: black;
+    font-weight: bold;
+  }
+  .btnDownload2 {
+    padding: 10px;
+    margin: 30px;
+    border: none;
+    border-radius: 3px;
+    background-color: blue;
+    color: white;
+  }
+  .belowHeader2 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 0px;
+    margin-left: 120px;
+    margin-right: 120px;
+  }
+  .belowHeader22 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 120px;
+    margin-right: 120px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  .belowHeader32 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 120px;
+    margin-right: 120px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .belowHeaderInner2 {
+    display: flex;
+
+    justify-content: space-around;
+    border: 1px solid red;
+    margin: 5px;
+    padding: 5px;
+  }
+  .portifolioList2 li {
+    margin: 2px;
+    padding: 3px;
+  }
+
+  nav ul {
+    list-style: none;
+  }
+  nav li {
+    display: inline-block;
+    margin-right: 20px;
+    padding-right: 30px;
+  }
+  nav a {
+    text-decoration: none;
+    font-weight: bold;
+    color: white;
+    font-size: 32px;
+  }
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-gap: 4rem;
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+    margin-bottom: 6rem;
+  }
+
+  .project-image {
+    height: calc(100%-6.8rem);
+    width: 100%;
+    object-fit: cover;
+    background-color: gray;
+  }
+  .project-title {
+    font-size: 2rem;
+    padding: 2rem 0.5rem;
+    background-color: gray;
+  }
+  .projects-section {
+    text-align: center;
+    padding: 10rem 2rem;
+    background: var(--main-blue);
+  }
+
+  .projects-section-header {
+    max-width: 640px;
+    margin: 0 auto 6rem auto;
+    border-bottom: 0.2rem solid var(--main-white);
+    color:black
+  }
+
+  .footer2 {
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    z-index: 100;
+    border-top: 2px solid whitesmoke;
+    margin-bottom: 0px;
+    padding-top: 40px;
+    padding-bottom: 60px;
+    background-color: black;
+    align-items: center;
+  }
+  footer div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+  .left-footer12 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+
+  .right-footer12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+  .right-footer-three12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 0px;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+    margin-bottom: 30px;
+  }
+
+  .right-footer-two12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+    padding-bottom: 0px;
+    margin-bottom: 30px;
+  }
+
+  .right-footer-one12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: black;
+    margin-left: 4rem;
+    margin-bottom: 30px;
+    padding-bottom: 0px;
+  }
+
+  .left-footer-span12 {
+    color: white;
+    padding-left: 30px;
+  }
+  .fa {
+    padding-left: 20px;
+  }
+  .fa-facebook {
+    color: white;
+  }
+  .fa-twitter {
+    color: white;
+  }
+
+  .fa-linkdin {
+    color: white;
+  }
+
+  .fa-instagram {
+    color: white;
+    margin-left: 1px;
+  }
+  .footer-social-media-icons12 {
+    padding-right: 50px;
+  }
+  .right-footer-span-three-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-two-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-one-top12 {
+    font-weight: bold;
+  }
+  .left-footer12 a {
+    text-decoration: underline;
+  }
+}
+@media only screen and (min-width: 900px) {
+  .desktopContainer {
+    display: block;
+    overflow-x: hidden;
+  }
+  .mobileContainer {
+    display: none;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    color: white;
+    background-color: #e6dacd;
+
+    display: flex;
+    flex-direction: column;
+  }
+  .header2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: black;
+    position: fixed;
+    border-bottom: 2px solid whitesmoke;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    z-index: 100;
+  }
+  .portifolioLogo2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    font-size: 20px;
+  }
+  .portifolioList2 li a {
+    font-size: 30px;
+    margin: 2px;
+    padding: 3px;
+  }
+  .portifolioList2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-decoration: none;
+    font-size: 30px;
+  }
+
+  .belowHeadercolumn2 {
+    display: flex;
+    flex-direction: column;
+    margin-top: 100px;
+    padding: 50px;
+    color: black;
+    font-weight: bold;
+  }
+  .btnDownload2 {
+    padding: 10px;
+    margin: 30px;
+    border: none;
+    border-radius: 3px;
+    background-color: blue;
+    color: white;
+  }
+  .belowHeader2 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 0px;
+    margin-left: 230px;
+    margin-right: 230px;
+  }
+  .belowHeader22 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 230px;
+    margin-right: 230px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  .belowHeader32 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 230px;
+    margin-right: 230px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .belowHeaderInner2 {
+    display: flex;
+
+    justify-content: space-around;
+    border: 1px solid red;
+    margin: 5px;
+    padding: 5px;
+  }
+  .portifolioList2 li {
+    margin: 2px;
+    padding: 3px;
+  }
+
+  nav ul {
+    list-style: none;
+  }
+  nav li {
+    display: inline-block;
+    margin-right: 20px;
+    padding-right: 30px;
+  }
+  nav a {
+    text-decoration: none;
+    font-weight: bold;
+    color: white;
+    font-size: 32px;
+  }
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-gap: 4rem;
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+    margin-bottom: 6rem;
+  }
+
+  .project-image {
+    height: calc(100%-6.8rem);
+    width: 100%;
+    object-fit: cover;
+    background-color: gray;
+  }
+  .project-title {
+    font-size: 2rem;
+    padding: 2rem 0.5rem;
+    background-color: gray;
+  }
+  .projects-section {
+    text-align: center;
+    padding: 10rem 2rem;
+    background: var(--main-blue);
+  }
+
+  .projects-section-header {
+    max-width: 640px;
+    margin: 0 auto 6rem auto;
+    border-bottom: 0.2rem solid var(--main-white);
+    color:black;
+  }
+
+  .footer2 {
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 100;
+    border-top: 2px solid whitesmoke;
+    margin-bottom: 0px;
+    padding-top: 40px;
+    padding-bottom: 60px;
+    background-color: black;
+  }
+  footer div {
+    display: flex;
+
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 0px;
+  }
+  .left-footer12 {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+
+  .right-footer12 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: left;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+  .right-footer-three12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 0px;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+  }
+
+  .right-footer-two12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-left: 4rem;
+    padding-bottom: 0px;
+  }
+
+  .right-footer-one12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: black;
+    margin-left: 4rem;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+
+  .left-footer-span12 {
+    color: white;
+    padding-left: 30px;
+  }
+  .fa {
+    padding-left: 20px;
+  }
+  .fa-facebook {
+    color: white;
+  }
+  .fa-twitter {
+    color: white;
+  }
+
+  .fa-linkdin {
+    color: white;
+  }
+
+  .fa-instagram {
+    color: white;
+    margin-left: 1px;
+  }
+  .footer-social-media-icons12 {
+    padding-right: 50px;
+  }
+  .right-footer-span-three-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-two-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-one-top12 {
+    font-weight: bold;
+  }
+  .left-footer12 a {
+    text-decoration: underline;
+  }
+}
+
diff --git a/project.html b/project.html
new file mode 100644
index 00000000..7e99cb0b
--- /dev/null
+++ b/project.html
@@ -0,0 +1,199 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="project.css" />
+    <script src="script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <!-- poppin font header -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    
+    <!-- fa -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="bigContainer">
+        <div class="mobileContainer"><div class="header">
+            <a style="text-decoration: none;"href="/aboutme.html"><div class="portifolioLogo">
+                  <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+                  <script type="application/processing">
+                    size(65, 80);
+                      smooth();
+                      strokeWeight(2);
+                      background(0, 0, 0);
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,30,i+10,20,i+20,30,i+10,40);}
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,50,i+10,40,i+20,50,i+10,60);
+                        }
+                        
+                      fill(0);
+                  </script>
+                  <canvas></canvas>
+                  <h3>Melese portifolio</h3>
+                </div></a>
+                  <nav>
+                    <ul class="portifolioList">
+                      <li><a style="font-size:15px;padding-right: 2px;;" href="/aboutme.html">About</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/resume.html">Resume</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/project.html">Projects</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/contact.html">Contact</a></li>
+                  </nav>
+        </div>
+        
+        <section id="projects" class="projects-section">
+            <h1 class="projects-section-header">These are some of my projects</h1>
+            <div class="projects-grid">
+            <a>
+              <img class="project-image"src="/coffee.jpg">
+              <p class="project-title"> coffee</p>
+            </a>
+            <a>
+              <img class="project-image"src="/coffee.jpg">
+              <p class="project-title"> coffee</p>
+            </a>
+            <a>
+              <img class="project-image"src="/coffee.jpg">
+              <p class="project-title"> coffee</p>
+            </a>
+            <a>
+              <img class="project-image"src="/coffee.jpg">
+              <p class="project-title"> coffee</p>
+            </a>
+          </div>
+        </section>
+          
+        <div class="footer">
+             <div class="left-footer1">
+                <span class="left-footer-span1">@2023 By Melese Berehannu.</span>
+                <span class="left-footer-span1"> Powered by <a href="#">MelesePortifolio</a></span>
+            </div>
+            <div class="right-footer1">
+                    <div class="right-footer-three1">         
+                        <span class="right-footer-span-three-top1">Call</span>
+                        <span class="right-footer-span-three-bottom1">07478363014</span>
+                    </div>
+                <div class="right-footer-two1">
+                    <span class="right-footer-span-two-top1">Write</span>
+                    <span class="right-footer-span-two-bottom1"><a href="#">@info.mysite.com</a></span>
+                </div>
+                <div class="right-footer-one1">
+                    <span class="right-footer-span-one-top1">Follow</span>
+                    <div class="footer-social-media-icons1">
+                        <a href="#" class="fa fa-facebook"></a>
+                        <a href="#" class="fa fa-twitter"></a>
+                        <a href="#" class="fa fa-linkedin"></a>
+                        <a href="#" class="fa fa-instagram"></a>
+            
+            
+            
+                    </div>
+                </div>
+          
+      </div>
+    
+
+    </div>
+
+</div>
+        <div class="desktopContainer"> 
+            <div class="header2">
+                <a style="text-decoration: none;"href="/aboutme.html"> <div class="portifolioLogo2">
+              <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+              
+              <script type="application/processing">
+                size(65, 80);
+                  smooth();
+                  strokeWeight(2);
+                  background(0, 0, 0);
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,30,i+10,20,i+20,30,i+10,40);}
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,50,i+10,40,i+20,50,i+10,60);
+                    }
+                    
+                  fill(0);
+              </script>
+              <canvas></canvas>
+              <h1>Melese portifolio</h1>
+            </div></a>
+              <nav>
+                <ul class="portifolioList2">
+                  <li><a href="/aboutme.html">About</a></li>
+                  <li><a href="/resume.html">Resume</a></li>
+                  <li><a href="/project.html">Projects</a></li>
+                  <li><a href="/contact.html">Contact</a></li>
+              </nav>
+    </div>
+    
+    <section id="projects" class="projects-section">
+        <h1 class="projects-section-header">These are some of my projects</h1>
+        <div class="projects-grid">
+        <a>
+          <img class="project-image"src="/coffee.jpg">
+          <p class="project-title"> coffee</p>
+        </a>
+        <a>
+          <img class="project-image"src="/coffee.jpg">
+          <p class="project-title"> coffee</p>
+        </a>
+        <a>
+          <img class="project-image"src="/coffee.jpg">
+          <p class="project-title"> coffee</p>
+        </a>
+        <a>
+          <img class="project-image"src="/coffee.jpg">
+          <p class="project-title"> coffee</p>
+        </a>
+      </div>
+    </section>
+          <div class="footer2">
+         <div class="left-footer12">
+            <span class="left-footer-span12">@2023 By Melese Berehannu.</span>
+            <span class="left-footer-span12"> Powered by <a href="#">MelesePortifolio</a></span>
+        </div>
+        <div class="right-footer12">
+                <div class="right-footer-three12">         
+                    <span class="right-footer-span-three-top12">Call</span>
+                    <span class="right-footer-span-three-bottom12">07478363014</span>
+                </div>
+            <div class="right-footer-two12">
+                <span class="right-footer-span-two-top12">Write</span>
+                <span class="right-footer-span-two-bottom12"><a href="#">@info.mysite.com</a></span>
+            </div>
+            <div class="right-footer-one12">
+                <span class="right-footer-span-one-top12">Follow</span>
+                <div class="footer-social-media-icons12">
+                    <a href="#" class="fa fa-facebook"></a>
+                    <a href="#" class="fa fa-twitter"></a>
+                    <a href="#" class="fa fa-linkedin"></a>
+                    <a href="#" class="fa fa-instagram"></a>
+        
+        
+        
+                </div>
+            </div>
+      
+  </div></div>
+</div>
+    </div>
+       </body>
+</html>
+
+
+
+
+
+
diff --git a/resume.css b/resume.css
new file mode 100644
index 00000000..14134064
--- /dev/null
+++ b/resume.css
@@ -0,0 +1,744 @@
+.desktopContainer {
+    display: none;
+  }
+  
+ body { 
+  margin: 0;
+  padding: 0;
+  color: white;
+  background-color:#e6dacd;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: black;
+  position: fixed;
+  border-bottom: 2px solid whitesmoke;
+  width: 100%;
+  top: 0;
+  left: 0;
+  padding: 20px;
+  z-index: 100;
+}
+.belowHeadercolumn {
+  display: flex;
+  flex-direction: column;
+  margin-left: -50px;
+  margin-top: 150px;
+  padding: 25px;
+  color: black;
+  font-weight: bold;
+}
+.portifolioLogo{
+    display: flex;
+    flex-direction: row;
+
+    margin-left: -50px;
+    
+}
+.portifolioList li{
+    margin: 2px;
+    padding: 3px;
+}
+.btnDownload {
+  padding: 10px;
+
+  margin: 15px;
+  border: none;
+  border-radius: 3px;
+  background-color: blue;
+  color: white;
+}
+.belowHeader {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 25px;
+  padding-top: 0px;
+  margin-left: 115px;
+  margin-right: 115px;
+}
+.belowHeader2 {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 25px;
+  padding-top: 20px;
+  padding-bottom: 25px;
+  margin-left: 115px;
+  margin-right: 115px;
+  background-color: white;
+  border: none;
+  border-radius: 5px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+.belowHeader3 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-weight: bold;
+  color: black;
+  margin-top: 50px;
+  padding-top: 40px;
+  padding-bottom: 50px;
+  margin-left: 115px;
+  margin-right: 115px;
+
+   
+   
+  background-color: white;
+  border: none;
+  border-radius: 5px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.belowHeaderInner {
+  display: flex;
+
+  justify-content: space-around;
+  border: 1px solid red;
+  margin: 5px;
+  padding: 5px;
+}
+.portifolioLogo {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+}
+.portifolioList {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-decoration: none;
+}
+nav ul {
+  list-style: none;
+}
+nav li {
+  display: inline-block;
+  margin-right: 20px;
+  padding-right: 30px;
+}
+nav a {
+  text-decoration: none;
+  font-weight: bold;
+  color: white;
+  font-size: 32px;
+}
+.footer {
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 100;
+  border-top: 2px solid whitesmoke;
+  margin-bottom: 0px;
+  padding-top: 40px;
+  padding-bottom: 60px;
+  background-color: black;
+  align-items: center;
+}
+footer div {
+  display: flex;
+align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 30px;
+}
+.left-footer1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+
+.right-footer1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+.right-footer-three1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 0px;
+  align-items: center;
+  color: white;
+  margin-left: 0rem;
+  margin-bottom: 30px;
+}
+
+.right-footer-two1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  margin-left: 0rem;
+  padding-bottom: 0px;
+  margin-bottom: 30px;
+}
+
+.right-footer-one1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  color: black;
+  margin-left: 4rem;
+  margin-bottom: 30px;
+  padding-bottom: 0px;
+}
+
+.left-footer-span1 {
+  color: white;
+  padding-left: 30px;
+}
+.fa {
+  padding-left: 20px;
+}
+.fa-facebook {
+  color: white;
+}
+.fa-twitter {
+  color: white;
+}
+
+.fa-linkdin {
+  color: white;
+}
+
+.fa-instagram {
+  color: white;
+  margin-left: 1px;
+}
+.footer-social-media-icons1 {
+  padding-right: 50px;
+}
+.right-footer-span-three-top1 {
+  font-weight: bold;
+}
+.right-footer-span-two-top1 {
+  font-weight: bold;
+}
+.right-footer-span-one-top1 {
+  font-weight: bold;
+}
+.left-footer1 a {
+  text-decoration: underline;
+}
+ 
+@media only screen and (min-width: 613px) {
+    .desktopContainer {
+        display: block;
+        overflow-x: hidden;
+      }
+      .mobileContainer {
+        display: none;
+      }
+    
+  body {
+      margin: 0;
+      padding: 0;
+      color: white;
+      background-color:#e6dacd;
+    
+      display: flex;
+      flex-direction: column;
+    }
+    .header2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      background-color: black;
+      position: fixed;
+      border-bottom: 2px solid whitesmoke;
+      width: 100%;
+      top: 0;
+      left: 0;
+      padding: 20px;
+      z-index: 100;
+    }
+    .portifolioList2 li a{
+        margin: 2px;
+        padding: 3px;
+        font-size: 16px;
+    }
+    .portifolioLogo2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      font-size: 16px;
+      margin-left: -30px;
+    }
+    .portifolioList2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      text-decoration: none;
+      font-size: 20px;
+    }
+    
+    .belowHeadercolumn2{
+      display: flex;
+      flex-direction: column;
+      margin-top: 120px;
+      margin-left: -23px;
+      padding: 0px;
+      color: black;
+      font-weight: bold;
+    }
+    .btnDownload2{
+      padding: 10px;
+      margin: 30px;
+      border: none;
+      border-radius: 3px;
+      background-color: blue;
+      color:white;
+    }
+     .belowHeader2 {
+      display: flex;
+      justify-content: space-between;
+    font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 0px;
+      margin-left: 120px;
+      margin-right: 120px;
+    }
+    .belowHeader22{
+      display: flex;
+      justify-content: space-between;
+    font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 120px;
+      margin-right: 120px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+    .belowHeader32{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    font-weight: bold;
+      color: black;
+      margin-top: 50px;
+      padding-top: 40px;
+      padding-bottom: 50px;
+      margin-left: 120px;
+      margin-right: 120px;
+      background-color: white;
+      border: none;
+      border-radius: 5px;
+      padding-left: 50px;
+      padding-right: 50px;
+    }
+    
+    .belowHeaderInner2{
+      display: flex;
+      
+      justify-content: space-around;
+      border:1px solid red;
+      margin: 5px;
+      padding: 5px;
+    }
+    .portifolioList2 li{
+      margin: 2px;
+      padding: 3px;
+  }
+  
+    nav ul{
+      list-style: none;
+    }
+    nav li{
+      display:inline-block;
+      margin-right: 20px;
+      padding-right: 30px;
+    }
+    nav a {
+      text-decoration: none;
+      font-weight: bold;
+      color: white;
+      font-size: 32px;
+    }
+    .footer2 {
+        width: 100%;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        z-index: 100;
+        border-top: 2px solid whitesmoke;
+        margin-bottom: 0px;
+        padding-top: 40px;
+        padding-bottom: 60px;
+        background-color: black;
+        align-items: center;
+      }
+      footer div {
+        display: flex;
+      align-items: center;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-bottom: 30px;
+      }
+      .left-footer12 {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      
+        padding-bottom: 0px;
+        margin-bottom: 30px;
+      }
+      
+      .right-footer12 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 0px;
+        margin-bottom: 30px;
+      }
+      .right-footer-three12 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-bottom: 0px;
+        align-items: center;
+        color: white;
+        margin-left: 0rem;
+        margin-bottom: 30px;
+      }
+      
+      .right-footer-two12 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        color: white;
+        margin-left: 0rem;
+        padding-bottom: 0px;
+        margin-bottom: 30px;
+      }
+      
+      .right-footer-one12 {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        color: black;
+        margin-left: 4rem;
+        margin-bottom: 30px;
+        padding-bottom: 0px;
+      }
+      
+      .left-footer-span12 {
+        color: white;
+        padding-left: 30px;
+      }
+      .fa {
+        padding-left: 20px;
+      }
+      .fa-facebook {
+        color: white;
+      }
+      .fa-twitter {
+        color: white;
+      }
+      
+      .fa-linkdin {
+        color: white;
+      }
+      
+      .fa-instagram {
+        color: white;
+        margin-left: 1px;
+      }
+      .footer-social-media-icons12 {
+        padding-right: 50px;
+      }
+      .right-footer-span-three-top12 {
+        font-weight: bold;
+      }
+      .right-footer-span-two-top12 {
+        font-weight: bold;
+      }
+      .right-footer-span-one-top12 {
+        font-weight: bold;
+      }
+      .left-footer12 a {
+        text-decoration: underline;
+      }
+      
+}
+@media only screen and (min-width: 900px) {
+    .desktopContainer {
+      display: block;
+      overflow-x: hidden;
+    }
+    .mobileContainer {
+      display: none;
+    }
+  
+body {
+    margin: 0;
+    padding: 0;
+    color: white;
+    background-color:#e6dacd;
+  
+    display: flex;
+    flex-direction: column;
+  }
+  .header2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: black;
+    position: fixed;
+    border-bottom: 2px solid whitesmoke;
+    width: 100%;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    z-index: 100;
+  }
+  .portifolioLogo2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    font-size: 20px;
+  }
+  .portifolioList2 li a{
+    font-size: 30px;
+    margin: 2px;
+        padding: 3px;
+
+  }
+  .portifolioList2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-decoration: none;
+    font-size: 30px;
+  }
+
+  
+  .belowHeadercolumn2{
+    display: flex;
+    flex-direction: column;
+    margin-top: 100px;
+    padding: 50px;
+    color: black;
+    font-weight: bold;
+  }
+  .btnDownload2{
+    padding: 10px;
+    margin: 30px;
+    border: none;
+    border-radius: 3px;
+    background-color: blue;
+    color:white;
+  }
+   .belowHeader2 {
+    display: flex;
+    justify-content: space-between;
+  font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 0px;
+    margin-left: 230px;
+    margin-right: 230px;
+  }
+  .belowHeader22{
+    display: flex;
+    justify-content: space-between;
+  font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 230px;
+    margin-right: 230px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  .belowHeader32{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  font-weight: bold;
+    color: black;
+    margin-top: 50px;
+    padding-top: 40px;
+    padding-bottom: 50px;
+    margin-left: 230px;
+    margin-right: 230px;
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+  
+  .belowHeaderInner2{
+    display: flex;
+    
+    justify-content: space-around;
+    border:1px solid red;
+    margin: 5px;
+    padding: 5px;
+  }
+  .portifolioList2 li{
+    margin: 2px;
+    padding: 3px;
+}
+
+  nav ul{
+    list-style: none;
+  }
+  nav li{
+    display:inline-block;
+    margin-right: 20px;
+    padding-right: 30px;
+  }
+  nav a {
+    text-decoration: none;
+    font-weight: bold;
+    color: white;
+    font-size: 32px;
+  }
+  .footer2{
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 100;
+    border-top: 2px solid whitesmoke;
+    margin-bottom: 0px;
+    padding-top: 40px;
+    padding-bottom: 60px;
+    background-color: black;
+    
+  }
+  footer div {
+    display: flex;
+    
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 0px;
+  }
+  .left-footer12 {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+  
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+  
+  .right-footer12 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: left;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+  .right-footer-three12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 0px;
+    align-items: center;
+    color: white;
+    margin-left: 0rem;
+  }
+  
+  .right-footer-two12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-left: 4rem;
+    padding-bottom: 0px;
+  }
+  
+  .right-footer-one12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color: black;
+    margin-left: 4rem;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+  
+  .left-footer-span12 {
+    color: white;
+    padding-left: 30px;
+  }
+  .fa {
+    padding-left: 20px;
+  }
+  .fa-facebook {
+    color: white;
+  }
+  .fa-twitter {
+    color: white;
+  }
+  
+  .fa-linkdin {
+    color: white;
+  }
+  
+  .fa-instagram {
+    color: white;
+    margin-left: 1px;
+  }
+  .footer-social-media-icons12{
+    padding-right: 50px;
+  }
+  .right-footer-span-three-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-two-top12 {
+    font-weight: bold;
+  }
+  .right-footer-span-one-top12 {
+    font-weight: bold;
+  }
+  .left-footer12 a {
+    text-decoration: underline;
+  }
+  
+}
\ No newline at end of file
diff --git a/resume.html b/resume.html
new file mode 100644
index 00000000..1e1602a6
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="resume.css" />
+    <script src="script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <!-- poppin font header -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    
+    <!-- fa -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="bigContainer">
+        <div class="mobileContainer"><div class="header">
+            <a style="text-decoration: none;"href="/aboutme.html"><div class="portifolioLogo">
+                  <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+                  <script type="application/processing">
+                    size(65, 80);
+                      smooth();
+                      strokeWeight(2);
+                      background(0, 0, 0);
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,30,i+10,20,i+20,30,i+10,40);}
+                      for(int i = 10; i<40; i+=20){
+                        quad( i,50,i+10,40,i+20,50,i+10,60);
+                        }
+                        
+                      fill(0);
+                  </script>
+                  <canvas></canvas>
+                  <h3>Melese portifolio</h3>
+                </div></a>
+                  <nav>
+                    <ul class="portifolioList">
+                      <li><a style="font-size:15px;padding-right: 2px;;" href="/aboutme.html">About</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/resume.html">Resume</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/project.html">Projects</a></li>
+                      <li><a style="font-size:15px;padding-right: 2px;" href="/contact.html">Contact</a></li>
+                  </nav>
+        </div>
+        
+        <div class="belowHeadercolumn">
+            <div style="text-align:center"><h2>Resume</h2></div>
+             <div class="belowHeader">
+                <div><h2>Experience</h2></div>
+             <div><a href="https://docs.google.com/document/d/1_ppHTN_YvHELpegInw9WssGZIoIxsgd4SGFP5FANHko/edit?usp=sharing"><button class="btnDownload">DOWNLOAD CV</button></div></a>
+             </div>
+    
+             <div class="belowHeader2">
+                
+                    <div><h3 style="color:blue">01/02/2023 - Present</h3><span>Production Operative </span><br><br> <span>Albert Bartlett </span><br><br><span>Airdrie, Scotland</span>  
+                    </div>
+                    <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Working in high care food processing <pre></pre>environment and building packed process food<pre></pre> on a pallet and 
+                        ensuring ready for shipment.
+                    </cite></div>
+                
+            </div>
+             
+             <div class="belowHeader2"><div><h3 style="color:blue">07/2022 – 20/11/2022</h3><span>Production Operative </span><br><br> <span>United wholesale </span><br><br><span>Glasgow, Scotland</span>  
+             </div>
+             <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Monitored stock from the system and<pre></pre> let the manager know the sold-out items<pre></pre> and labelling the shelves that are sold<pre></pre> and checking items in stock to be shelved <pre></pre>for customers and doing other general <pre></pre>warehouse jobs. In addition, writing <pre></pre>weekly reports about the sold-out<pre></pre> items and notify the manager for orders.
+                  
+    
+             </cite></div>
+    </div>
+             <div class="belowHeader2"><div><h3 style="color:blue">11/2020 – 04/2022
+    </h3><span>Security officer</span> </span><br><br> <span>Amberstone Security</span><br><br><span>Glasgow, Scotland</span>  
+             </div>
+             <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Monitored CCTV cameras, and fire <pre></pre>and alarm systems.<pre></pre>
+                Reported security incidents and medical <pre></pre>emergencies to law enforcements.<pre></pre>
+                Maintained safety by quickly responding <pre></pre>to alarms and investigating disturbances.<pre></pre>
+                Reported daily activity,incidents,safety<pre></pre> repairs, theft, damages <pre></pre>and presence of unauthorised persons.<pre></pre>
+                Patrolled the premises and detect signs <pre></pre> of intrusion and secure doors and gates.<pre></pre>
+                
+             </cite></div>
+             </div>
+             <div class="belowHeader2"><div><h3 style="color:blue"> 05/2019 – 03/2020
+            </h3><span>Fulfilment associate</span> </span><br><br> <span>Amazon</span><br><br><span>Dunfermline, Scotland</span>  
+                     </div>
+                     <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Stayed in the line with safety, <pre></pre>quality and production standards by<pre></pre> following company guidelines and wearing PPE.<pre></pre>
+                        Independently completed picking, <pre></pre>packing and dispatching of customer order.<pre></pre>
+                        Stayed updated the latest warehouse<pre></pre> procedures and regulations by attending <pre></pre>regular training
+                        Quality assessed products <pre></pre>before packing and sealing, ensuring <pre></pre>products were damage-free before<pre></pre> dispatching 
+                        Understand warehouse<pre></pre> product placement, enabling <pre></pre>efficient picking and packing services.<pre></pre>
+                        Identified and removed damaged products,<pre></pre> quickly replacing items with the quality stock<pre></pre> to minimizing customer delays.
+                        <pre></pre>Picked orders to meet productivity targets.
+                        
+                     </cite></div>
+                     </div>
+                     
+                
+             <div class="belowHeader"><h1>Education</h1></div>
+             <div class="belowHeader2"> <div><h3 style="color:blue">2016</h3><span>Foundation Degree in computing </span><br><br> <span>Northumbria University</span><br><br><span>Newcastle, England</span>  
+             </div>
+             <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Course work[In Area of technology]<pre></pre>Computer programming<pre></pre>Information Technology<pre></pre>Information Management
+             </cite></div>
+    </div>
+             <div class="belowHeader2"> <div><h3 style="color:blue">2008</h3><span>Bachleor In Chemistry</span><br><br> <span>Ambo University</span><br><br><span>Ambo, Ethiopia</span>  
+             </div>
+             <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Course work[In Area of technology]<pre></pre>Computer programming<pre></pre>Information Technology<pre></pre>Information Management
+             </cite></div></div>
+             <div class="belowHeader">
+                <h1>Languages</h1></div>
+             <div class="belowHeader3"><h3>Amharic:First language </h3><h3>English : 72%</h3></div>
+          </div>
+        <div class="footer">
+             <div class="left-footer1">
+                <span class="left-footer-span1">@2023 By Melese Berehannu.</span>
+                <span class="left-footer-span1"> Powered by <a href="#">MelesePortifolio</a></span>
+            </div>
+            <div class="right-footer1">
+                    <div class="right-footer-three1">         
+                        <span class="right-footer-span-three-top1">Call</span>
+                        <span class="right-footer-span-three-bottom1">07478363014</span>
+                    </div>
+                <div class="right-footer-two1">
+                    <span class="right-footer-span-two-top1">Write</span>
+                    <span class="right-footer-span-two-bottom1"><a href="#">@info.mysite.com</a></span>
+                </div>
+                <div class="right-footer-one1">
+                    <span class="right-footer-span-one-top1">Follow</span>
+                    <div class="footer-social-media-icons1">
+                        <a href="#" class="fa fa-facebook"></a>
+                        <a href="#" class="fa fa-twitter"></a>
+                        <a href="#" class="fa fa-linkedin"></a>
+                        <a href="#" class="fa fa-instagram"></a>
+            
+            
+            
+                    </div>
+                </div>
+          
+      </div>
+    
+
+    </div>
+
+</div>
+        <div class="desktopContainer"> 
+            <div class="header2">
+                <a style="text-decoration: none;"href="/aboutme.html"> <div class="portifolioLogo2">
+              <!-- <img id="images" src="home/mele/Downloads/sandbox.html" alt="portifolio logo" /> -->
+              
+              <script type="application/processing">
+                size(65, 80);
+                  smooth();
+                  strokeWeight(2);
+                  background(0, 0, 0);
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,30,i+10,20,i+20,30,i+10,40);}
+                  for(int i = 10; i<40; i+=20){
+                    quad( i,50,i+10,40,i+20,50,i+10,60);
+                    }
+                    
+                  fill(0);
+              </script>
+              <canvas></canvas>
+              <h1>Melese portifolio</h1>
+            </div></a>
+              <nav>
+                <ul class="portifolioList2">
+                  <li><a href="/aboutme.html">About</a></li>
+                  <li><a href="/resume.html">Resume</a></li>
+                  <li><a href="/project.html">Projects</a></li>
+                  <li><a href="/contact.html">Contact</a></li>
+              </nav>
+    </div>
+    
+    <div class="belowHeadercolumn2">
+        <div style="text-align:center"><h1>Resume</h1></div>
+         <div class="belowHeader2">
+            <div><h1>Experience</h1></div>
+         <div><button class="btnDownload2">DOWNLOAD CV</button></div>
+         </div>
+
+         <div class="belowHeader22">
+            
+                <div><h3 style="color:blue">01/02/2023 - Present</h3><span>Production Operative </span><br><br> <span>Albert Bartlett </span><br><br><span>Airdrie, Scotland</span>  
+                </div>
+                <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Working in high care food processing <pre></pre>environment and building packed process food<pre></pre> on a pallet and 
+                    ensuring ready for shipment.
+                </cite></div>
+            
+        </div>
+         
+         <div class="belowHeader22"><div><h3 style="color:blue">07/2022 – 20/11/2022</h3><span>Production Operative </span><br><br> <span>United wholesale </span><br><br><span>Glasgow, Scotland</span>  
+         </div>
+         <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Monitored stock from the system and<pre></pre> let the manager know the sold-out items<pre></pre> and labelling the shelves that are sold<pre></pre> and checking items in stock to be shelved <pre></pre>for customers and doing other general <pre></pre>warehouse jobs. In addition, writing <pre></pre>weekly reports about the sold-out<pre></pre> items and notify the manager for orders.
+              
+
+         </cite></div>
+</div>
+         <div class="belowHeader22"><div><h3 style="color:blue">11/2020 – 04/2022
+</h3><span>Security officer</span> </span><br><br> <span>Amberstone Security</span><br><br><span>Glasgow, Scotland</span>  
+         </div>
+         <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Monitored CCTV cameras, and fire <pre></pre>and alarm systems.<pre></pre>
+            Reported security incidents and medical <pre></pre>emergencies to law enforcements.<pre></pre>
+            Maintained safety by quickly responding <pre></pre>to alarms and investigating disturbances.<pre></pre>
+            Reported daily activity,incidents,safety<pre></pre> repairs, theft, damages <pre></pre>and presence of unauthorised persons.<pre></pre>
+            Patrolled the premises and detect signs <pre></pre> of intrusion and secure doors and gates.<pre></pre>
+            
+         </cite></div>
+         </div>
+         <div class="belowHeader22"><div><h3 style="color:blue"> 05/2019 – 03/2020
+        </h3><span>Fulfilment associate</span> </span><br><br> <span>Amazon</span><br><br><span>Dunfermline, Scotland</span>  
+                 </div>
+                 <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Stayed in the line with safety, <pre></pre>quality and production standards by<pre></pre> following company guidelines and wearing PPE.<pre></pre>
+                    Independently completed picking, <pre></pre>packing and dispatching of customer order.<pre></pre>
+                    Stayed updated the latest warehouse<pre></pre> procedures and regulations by attending <pre></pre>regular training
+                    Quality assessed products <pre></pre>before packing and sealing, ensuring <pre></pre>products were damage-free before<pre></pre> dispatching 
+                    Understand warehouse<pre></pre> product placement, enabling <pre></pre>efficient picking and packing services.<pre></pre>
+                    Identified and removed damaged products,<pre></pre> quickly replacing items with the quality stock<pre></pre> to minimizing customer delays.
+                    <pre></pre>Picked orders to meet productivity targets.
+                    
+                 </cite></div>
+                 </div>
+                 
+            
+         <div class="belowHeader2"><h1>Education</h1></div>
+         <div class="belowHeader22"> <div><h3 style="color:blue">2016</h3><span>Foundation Degree in computing </span><br><br> <span>Northumbria University</span><br><br><span>Newcastle, England</span>  
+         </div>
+         <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Course work[In Area of technology]<pre></pre>Computer programming<pre></pre>Information Technology<pre></pre>Information Management
+         </cite></div>
+</div>
+         <div class="belowHeader22"> <div><h3 style="color:blue">2008</h3><span>Bachleor In Chemistry</span><br><br> <span>Ambo University</span><br><br><span>Ambo, Ethiopia</span>  
+         </div>
+         <div style="text-align: right;padding-top: 30px;"><cite style="text-align: right;">Course work[In Area of technology]<pre></pre>Computer programming<pre></pre>Information Technology<pre></pre>Information Management
+         </cite></div></div>
+         <div class="belowHeader2"><h1>Languages</h1></div>
+         <div class="belowHeader32"><h2>Amharic:First language </h2><h1>English : 72%</h1></div>
+      </div>
+    <div class="footer2">
+         <div class="left-footer12">
+            <span class="left-footer-span12">@2023 By Melese Berehannu.</span>
+            <span class="left-footer-span12"> Powered by <a href="#">MelesePortifolio</a></span>
+        </div>
+        <div class="right-footer12">
+                <div class="right-footer-three12">         
+                    <span class="right-footer-span-three-top12">Call</span>
+                    <span class="right-footer-span-three-bottom12">07478363014</span>
+                </div>
+            <div class="right-footer-two12">
+                <span class="right-footer-span-two-top12">Write</span>
+                <span class="right-footer-span-two-bottom12"><a href="#">@info.mysite.com</a></span>
+            </div>
+            <div class="right-footer-one12">
+                <span class="right-footer-span-one-top12">Follow</span>
+                <div class="footer-social-media-icons12">
+                    <a href="#" class="fa fa-facebook"></a>
+                    <a href="#" class="fa fa-twitter"></a>
+                    <a href="#" class="fa fa-linkedin"></a>
+                    <a href="#" class="fa fa-instagram"></a>
+        
+        
+        
+                </div>
+            </div>
+      
+  </div></div>
+</div>
+    </div>
+       </body>
+</html>