diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..f673a71b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index aa561706..db865d6d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,349 @@
-/* Add your CSS here */
+:root {
+    --dark-beige: #E6DACD;
+    --Light-beige: #F4ECE6;
+    --Royal-blue: #0150FD;
+    --Black: #000;
+    --White: #FFF;
+}
+/* font-family: 'Poppins', sans-serif; HEADINGS
+font-family: 'Quicksand', sans-serif; BODY */ 
+
+body {
+    
+    font-family: 'Quicksand', sans-serif; 
+    display: grid; 
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
+    grid-template-areas: 
+    "header"
+    "photo"
+    "footer";
+}
+/* BODY GRID */
+
+.header {
+    background-color: var(White);
+    grid-area: header;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    
+
+}
+main {
+    grid-area: photo;
+}
+.main-container {
+    background-color: var(--dark-beige);
+    /* grid-area: photo; */
+    display: flex;
+    flex-direction: column;
+    align-items:center;
+    padding: 200px 20px 20px 20px;
+    
+}
+.main-photo {
+    background-color: var(--Light-beige);
+    position:absolute;
+    left: 10%;
+    top: 100px;
+    display:flex;
+    flex-direction:column;
+    justify-content:space-around;
+    align-items: center;
+    width: 300px;
+    height: 400px;
+    z-index:1;
+    text-align: center;
+    box-shadow: rgba(0, 0, 0, 0.176) -10px 10px 15px;
+    
+}
+.footer-container {
+    background-color: var(--White);
+    grid-area: footer;
+    z-index:0;
+}
+
+/* HEADER */
+.square {
+    width: 17px;
+    height: 17px;
+    background-color: var(--Royal-blue);
+}
+.name a {
+    text-decoration: none;
+    color: black;
+    font-size: 21px;
+    font-weight: bold;
+    font-family: 'Poppins', sans-serif;
+    padding-left: 7px;
+}
+.nav-button {
+    width: 70px;
+}
+nav {
+    display:none;
+}
+/* PHOTO CONTAINER*/
+
+.photo-maya {
+    width: 130px;
+    border-radius: 50%;
+    margin-top: 30px;
+}
+
+
+.name-under-photo {
+    font-family: 'Poppins', sans-serif;
+    border-bottom: 2px solid var(--Royal-blue);
+    padding-bottom: 10px;
+    padding-top:0;
+    margin-top:0;
+ 
+}
+.name {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 10px;
+}
+.job-title {
+    margin-top:0;
+}
+.main-about .button {
+    display: none;
+}
+.main-photo .button {
+    display: block; 
+}
+.resume-button {
+    margin-right: 15px;
+    background-color: var(--Royal-blue);
+    border:none;
+    padding: 10px 27px;
+    color: white;
+    border-radius: 20px;
+
+}
+
+.projects-button {
+    margin-left: 15px;
+    background-color: transparent;
+    padding: 9px 25px;
+    border-radius: 20px;
+    border: 1px solid black;
+
+}
+
+.social-media {
+    background-color: var(--White);
+    align-self: stretch;
+}
+.social-media-icon-top {
+    width: 20px;
+    padding: 7px;
+}
+
+/* ABOUT */
+
+h1 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 40px;
+    margin-bottom: 0px;
+}
+h3 {
+    font-family: 'Quicksand', sans-serif;
+    padding-bottom: 10px;
+}
+
+/* FOOTER CONTACT */
+.contact {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    padding-top: 8px;
+    margin-right: 15px;
+    font-size: 15px;
+}
+.telephone {
+    display:flex;
+    flex-direction: column;
+}
+.email {
+    display:flex;
+    flex-direction: column;
+}
+
+/* FOOTER SOCIAL MEDIA*/
+.social-media-bottom {
+    display:flex;
+    flex-direction: column;
+    padding-bottom: 8px;
+}
+.social-media-icon-bottom {
+    width: 26px;
+    padding: 4px;
+    margin-bottom: 15px;
+}
+
+/* FOOTER */
+
+.footer {
+    display:flex;
+    flex-direction: column;
+    padding-bottom: 15px; 
+}
+
+/* PARAGRAPH*/
+.paragraph-margin {
+    margin-top:5px;
+    margin-bottom:0px;
+    margin-left: 10px;
+    font-size: 15px;
+}
+
+.title-bold {
+    margin-bottom:0px;
+    margin-left: 10px;
+    font-weight: bolder;
+    font-size: 15px;;
+}
+
+@media screen and (min-width: 900px) {
+     body { 
+    grid-template-columns: repeat(5, 1fr) ;
+    grid-template-rows: 150px 700px 1fr 30px;
+    grid-template-areas:
+        "header header header header header"
+        "photo photo . . ."
+        "footer footer footer footer footer"
+        "add add add add add" ;
+    }  
+        .header {}
+
+        .name-and-title {
+            display:flex;
+            flex-direction: row;  
+        }
+
+        .name {
+            padding-top: 0px;
+        }
+       
+    .job-title {
+        margin: auto;
+        padding-left: 10px;
+        
+    }
+        .main-photo .button {
+            display: none;
+        }
+    
+        .main-about .button {
+            display: block;
+        }
+    
+       
+        .nav-button {
+            display: none;
+        }
+        /* MAIN */
+        main {
+            display: grid;
+
+        }
+        /* PHOTO */
+        .main-photo {
+            width: 400px;
+            height: 500px;
+            justify-content: space-around;
+            margin-top: 130px;
+            left:13%;
+        }
+        .photo-maya {
+            width: 200px;
+        }
+        .social-media {
+            
+            margin-bottom: 0;
+            height: 50px; 
+        }
+        .social-media-icon-top {
+            width: 30px;
+        }
+        .name-under-photo {
+            font-size: 25px;
+           
+        }
+
+        /* MAIN TEXT */
+        .main-about {
+            position: absolute;
+            left: 600px;
+            width: 30%;
+        }
+        .p-first {
+            font-size: 7rem;
+        }
+        .main-container {
+            padding: 0px;
+        }
+
+        /* FOOTER */
+
+        .footer-container {
+            display: flex;
+            gap: 40px;
+            flex-direction: row-reverse;
+         
+        }
+        .footer {
+            align-self:center;
+            margin-right: auto;
+          
+        }
+        .telephone {
+            padding-right: 40px;
+        }
+        nav {
+            display: block;
+            
+        }
+        .navigation__list {
+            display: flex;
+            list-style: none;
+            justify-content: space-evenly;
+        }
+        li a:hover {
+            color: var(--Royal-blue);
+        }
+        .navigation__item {
+            padding: 0.5rem 0;
+        }
+        .navigation__link {
+            color: var(--black);
+            font-weight: 600;
+            text-transform: uppercase;
+            text-decoration: none;
+            padding: 0 1rem;
+        }
+        .add {
+            grid-area: add;
+        }
+                  /* .main-text {
+                      position: absolute;
+                      width: 30%;
+                      left: 550px;
+                      margin-top: 0px;
+                      margin-bottom: 1.5rem;
+                      margin-left: 3rem;
+                      margin-right: 3rem;
+                      display: flex;
+                      flex-direction: column;
+                      gap: 3rem;
+        
+                  } */
+}
+
+    
 
-/* Dont' forget to link this file to your HTML in the <head> */
diff --git a/css/resume.css b/css/resume.css
new file mode 100644
index 00000000..1325bbff
--- /dev/null
+++ b/css/resume.css
@@ -0,0 +1,382 @@
+:root {
+    --dark-beige: #E6DACD;
+    --Light-beige: #F4ECE6;
+    --Royal-blue: #0150FD;
+    --Black: #000;
+    --White: #FFF;
+}
+
+/* font-family: 'Poppins', sans-serif; HEADINGS
+font-family: 'Quicksand', sans-serif; BODY */
+ /* BODY GRID */
+body {
+
+    font-family: 'Quicksand', sans-serif;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 100px 10fr 1fr 100px;
+    grid-template-areas:
+        "header"
+        "photo"
+        "footer"
+        "add";
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* HEADER */
+
+.header {
+    background-color: var(White);
+    grid-area: header;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+}
+
+
+.square {
+    width: 17px;
+    height: 17px;
+    background-color: var(--Royal-blue);
+}
+.square2 {
+    width: 17px;
+    height: 17px;
+    background-color: var(--Royal-blue);
+    margin-bottom:10px;
+    margin-right: 5px;
+}
+
+.name a {
+    text-decoration: none;
+    color: black;
+    font-size: 21px;
+    font-weight: bold;
+    font-family: 'Poppins', sans-serif;
+    padding-left: 7px;
+}
+.resume-title {
+    font-family: 'Poppins', sans-serif;
+    font-size: 30px;
+}
+.resume {
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 40px;
+}
+
+.nav-button {
+    width: 70px;
+}
+
+nav {
+    display: none;
+}
+
+
+
+.name {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 10px;
+}
+
+.job-title {
+    margin-top: 0;
+}
+
+
+.button {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 50px;
+}
+.resume-button {
+    background-color: var(--Royal-blue);
+    border: none;
+    padding: 10px 20px;
+    color: white;
+    border-radius: 20px;
+
+}
+
+
+
+main {
+    background-color: var(--dark-beige);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    grid-area: photo;
+
+}
+
+
+.white-container {
+    margin: 2rem;
+    padding: 1.5rem;
+    background-color: var(--White);
+    width: 300px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px;
+}
+
+.white-container h4 {
+    color: var(--Royal-blue);
+    font-family: 'Poppins', sans-serif;
+}
+
+.white-container p:nth-child(4) {
+    margin-top: -30px;
+}
+
+.edication-title {
+    display: flex;
+    margin: 1rem;
+}
+
+.education-title h2 {
+    font-family: 'Poppins', sans-serif;
+}
+
+.white-container-skills {
+    margin: 2rem;
+    padding: 1.5rem;
+    background-color: var(--White);
+    width: 300px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px;
+}
+
+.white-container-skills h2 {
+    font-family: 'Poppins', sans-serif;
+}
+
+.skills {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.skills-flex {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 2rem;
+}
+
+.social-media {
+    background-color: var(--White);
+    align-self: stretch;
+}
+
+
+/* HEADINGS*/
+
+h1 {
+    font-family: 'Poppins', sans-serif;
+    font-size: 40px;
+    margin-bottom: 0px;
+}
+
+h3 {
+    font-family: 'Quicksand', sans-serif;
+    padding-bottom: 10px;
+}
+
+/* FOOTER CONTACT */
+.contact {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    padding-top: 8px;
+    margin-right: 15px;
+    font-size: 15px;
+}
+
+.telephone {
+    display: flex;
+    flex-direction: column;
+}
+
+.email {
+    display: flex;
+    flex-direction: column;
+}
+
+/* FOOTER SOCIAL MEDIA*/
+.social-media-bottom {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 8px;
+}
+
+.social-media-icon-bottom {
+    width: 26px;
+    padding: 4px;
+    margin-bottom: 15px;
+}
+
+/* FOOTER */
+.footer-container {
+    background-color: var(--White);
+    grid-area: footer;
+    z-index: 0;
+}
+.footer {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 15px;
+}
+
+/* PARAGRAPH*/
+.paragraph-margin {
+    margin-top: 5px;
+    margin-bottom: 0px;
+    margin-left: 10px;
+    font-size: 15px;
+}
+
+.title-bold {
+    margin-bottom: 0px;
+    margin-left: 10px;
+    font-weight: bolder;
+    font-size: 15px;
+    ;
+}
+.add {
+    grid-area: add;
+}
+@media screen and (min-width: 900px) {
+ 
+    .name-and-title {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .name {
+        padding-top: 0px;
+    }
+
+    .job-title {
+        margin: auto;
+        padding-left: 10px;
+
+    }
+
+    .nav-button {
+        display: none;
+    }
+
+    .social-media {
+
+        margin-bottom: 0;
+        height: 50px;
+    }
+
+    /* MAIN  */
+   
+    main {
+        
+        align-items: center;
+    }
+
+    .white-container {
+        margin: 2rem;
+        padding: 1.5rem;
+       
+        width: 700px;
+        height: 400px;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px;
+    }
+
+    .white-container-skills {
+        margin: 2rem;
+        padding: 1.5rem;
+        /* background-color: var(--white); */
+        width: 700px;
+        height: 600px;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        box-shadow: rgba(0, 0, 0, 0.24) -4px 3px 8px;
+    }
+    .experience-title {
+        font-size: 25px;
+    }
+    
+    .education-title {
+        font-size: 25px;
+    
+    }
+
+    /* FOOTER */
+
+    .footer-container {
+        display: flex;
+        gap: 40px;
+        flex-direction: row-reverse;
+
+    }
+
+    .footer {
+        align-self: center;
+        margin-right: auto;
+
+    }
+
+    .telephone {
+        padding-right: 40px;
+    }
+
+    nav {
+        display: block;
+
+    }
+
+    .navigation__list {
+        display: flex;
+        list-style: none;
+        justify-content: space-evenly;
+    }
+
+    li a:hover {
+        color: var(--Royal-blue);
+    }
+
+    .navigation__item {
+        padding: 0.5rem 0;
+    }
+
+    .navigation__link {
+        color: var(--black);
+        font-weight: 600;
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 0 1rem;
+    }
+
+    .add {
+        grid-area: add;
+    }
+
+}
\ No newline at end of file
diff --git a/images/facebook.webp b/images/facebook.webp
new file mode 100644
index 00000000..e719987b
Binary files /dev/null and b/images/facebook.webp differ
diff --git a/images/instagram.webp b/images/instagram.webp
new file mode 100644
index 00000000..e385442c
Binary files /dev/null and b/images/instagram.webp differ
diff --git a/images/linkedin.webp b/images/linkedin.webp
new file mode 100644
index 00000000..400c9a5c
Binary files /dev/null and b/images/linkedin.webp differ
diff --git a/images/maya.webp b/images/maya.webp
new file mode 100644
index 00000000..d2344a5e
Binary files /dev/null and b/images/maya.webp differ
diff --git a/images/nav-button.png b/images/nav-button.png
new file mode 100644
index 00000000..a0f8e6d6
Binary files /dev/null and b/images/nav-button.png differ
diff --git a/images/twitter.webp b/images/twitter.webp
new file mode 100644
index 00000000..968f37ac
Binary files /dev/null and b/images/twitter.webp differ
diff --git a/index.html b/index.html
index cd704c69..a1e29332 100644
--- a/index.html
+++ b/index.html
@@ -4,18 +4,108 @@
     <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 -->
+    <link rel="stylesheet" href="css/main.css">
+    <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;400;500&display=swap" rel="stylesheet">
 
     <title>Responsive grid project</title>
 </head>
 
 <body>
 
-    <!-- Add your markup here -->
-
+    <header class="header" id="header">
+        <div class="name-and-title">
+            <div class="name">
+                <div class="square">
+                </div>
+                <a href="#header">Maya Nelson</a> 
+            </div>
+            <p class="job-title">PROJECT MANAGER</p>
+        </div>
+        <div>
+            
+        <img src=images/nav-button.png  class="nav-button">
+        <nav>
+             <ul class="navigation__list">
+                <li class="navigation__item">
+                    <a class="navigation__link" href="#">ABOUT ME</a>
+                </li>
+                <li class="navigation__item">
+                    <a class="navigation__link" href="#">RESUME</a>
+                </li>
+                <li class="navigation__item">
+                    <a class="navigation__link" href="#">PROJECTS</a>
+                </li>
+                <li class="navigation__item">
+                    <a class="navigation__link" href="#">CONTACT</a>
+                </li>
+                </ul>
+        </nav>
+        </div>
+                    </header>
+            
+        </div>
+    </header>
+    <main>
+        <div class="main-container">
+            <div class="main-photo">
+                <img src="images/maya.webp" alt="maya" class="photo-maya">
+                <h3 class="name-under-photo">Maya <br> Nelson</h3>
+                <div class="button">
+                    <button class="resume-button">RESUME</button>
+                    <button class="projects-button">PROJECTS</button>
+                </div>
+                <div class="social-media">
+                    <img src="images/facebook.webp" alt="facebook icon" class="social-media-icon-top">
+                    <img src="images/twitter.webp" alt="twitter icon" class="social-media-icon-top">
+                    <img src="images/linkedin.webp" alt="lilnkedin icon" class="social-media-icon-top">
+                    <img src="images/instagram.webp" alt="instagram icon" class="social-media-icon-top">
+                </div>
+            </div>
+            <div class="main-about">
+                <h1 class="p-first">Hello</h1>
+                <h3 class="p-second">Here's who I am & what I do</h3>
+                <div class="button">
+                    <button class="resume-button">RESUME</button>
+                    <button class="projects-button">PROJECTS</button>
+                </div>
+                <p class="p-main">I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
+                <p>I’m a great place for you to tell a story and let your users know a little more about you.</p>
+            </div>
+        </div>
+        </main>
+        
+        <footer class="footer-container">
+            <div class="contact">
+                <div class="telephone">
+                    <p class="title-bold">Call</p>
+                    <p class="paragraph-margin">123-456-7890</p>
+                </div>
+                <div class="email">
+                    <p class="title-bold">Write</p>
+                    <p class="paragraph-margin">info@mysite.com</p>
+                </div>
+            </div>
+            <div class="social-media-bottom">
+                <p class="title-bold">Follow</p>
+                <div>
+                    <img src="images/facebook.webp" alt="facebook icon" class="social-media-icon-bottom">
+                    <img src="images/twitter.webp" alt="twitter icon" class="social-media-icon-bottom">
+                    <img src="images/linkedin.webp" alt="lilnkedin icon" class="social-media-icon-bottom">
+                    <img src="images/instagram.webp" alt="instagram icon" class="social-media-icon-bottom">
+                </div>
+            </div>
+            </div>
+            <div class="footer">
+               <p class="paragraph-margin">© 2035 by Maya Nelson.</p>
+               <p class="paragraph-margin">Powered and secured by Wix</p> 
+            </div>
+        </footer>
+    
 
     <!-- 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>
+    <p class="add">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/resume.html b/resume.html
new file mode 100644
index 00000000..c6035d56
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,165 @@
+<!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="css/resume.css">
+    <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;400;500&display=swap"
+        rel="stylesheet">
+
+    <title>Responsive grid project</title>
+</head>
+
+<body>
+
+    <header class="header" id="header">
+        <div class="name-and-title">
+            <div class="name">
+                <div class="square">
+                </div>
+                <a href="#header">Maya Nelson</a>
+            </div>
+            <p class="job-title">PROJECT MANAGER</p>
+        </div>
+        <div>
+
+            <img src=images/nav-button.png class="nav-button">
+            <nav>
+                <ul class="navigation__list">
+                    <li class="navigation__item">
+                        <a class="navigation__link" href="#">ABOUT ME</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a class="navigation__link" href="#">RESUME</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a class="navigation__link" href="#">PROJECTS</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a class="navigation__link" href="#">CONTACT</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    
+    <main>
+        <!-- <div class="main-container"> -->
+            <div class="resume">
+                <div class="square2">
+                </div>
+                <h3 class="resume-title">Resume</h3>
+            </div>
+            <div class="button">
+                <h3 class="experience-title">Experience</h3>
+                <button class="resume-button">DOWNLOAD CV</button>
+            </div>
+          
+            <div class="white-container">
+                <h4>2035 - Present</h4>
+                <p>JOB POSITION</p>
+                <p>Company Name</p>
+                <p>Company Location</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam minus debitis perferendis ipsa atque neque
+                    repudiandae illum assumenda quibusdam voluptates molestias laboriosam fugiat dolor sequi illo, aut veniam
+                    doloribus.</p>
+            </div>
+            
+            <div class="education-title">
+                <h2>Education</h2>
+            </div>
+            
+            <div class="white-container">
+                <h4>2035 - 2035</h4>
+                <p>UNIVERSITY NAME</p>
+                <p>Degree Level</p>
+                <p>University Location</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam minus debitis perferendis ipsa atque neque
+                    repudiandae illum assumenda quibusdam voluptates molestias laboriosam fugiat dolor sequi illo, aut veniam
+                    doloribus.</p>
+            </div>
+            
+            <div class="white-container-skills">
+                <h2>Professional skillset</h2>
+                <div class="skills">
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>Entrepreneurial Mindset</p>
+                    </div>
+            
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>Go-to-Market Planning</p>
+                    </div>
+            
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>Teamwork & Collaboration</p>
+                    </div>
+            
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>Digital Analytics</p>
+                    </div>
+                </div>
+            
+                <h2>Languages</h2>
+                <div class="skills">
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>English (native)</p>
+                    </div>
+            
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>Spanish (proficient)</p>
+                    </div>
+            
+                    <div class="skills-flex">
+                        <div class="square"></div>
+                        <p>French (proficient)</p>
+                    </div>
+                </div>
+            </div>
+       
+    </main>
+
+    <footer class="footer-container">
+        <div class="contact">
+            <div class="telephone">
+                <p class="title-bold">Call</p>
+                <p class="paragraph-margin">123-456-7890</p>
+            </div>
+            <div class="email">
+                <p class="title-bold">Write</p>
+                <p class="paragraph-margin">info@mysite.com</p>
+            </div>
+        </div>
+        <div class="social-media-bottom">
+            <p class="title-bold">Follow</p>
+            <div>
+                <img src="images/facebook.webp" alt="facebook icon" class="social-media-icon-bottom">
+                <img src="images/twitter.webp" alt="twitter icon" class="social-media-icon-bottom">
+                <img src="images/linkedin.webp" alt="lilnkedin icon" class="social-media-icon-bottom">
+                <img src="images/instagram.webp" alt="instagram icon" class="social-media-icon-bottom">
+            </div>
+        </div>
+        </div>
+        <div class="footer">
+            <p class="paragraph-margin">© 2035 by Maya Nelson.</p>
+            <p class="paragraph-margin">Powered and secured by Wix</p>
+        </div>
+    </footer>
+
+
+    <!-- Please leave this in to credit the creators of this design -->
+    <p class="add">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