diff --git a/css/main.css b/css/main.css
index aa561706..bc3a70d8 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,116 @@
 /* Add your CSS here */
 
 /* Dont' forget to link this file to your HTML in the <head> */
+
+
+/* ### 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 */
+
+
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Quicksand', sans-serif;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 140px 800px 200px;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100px;
+    padding: 8px 40px;
+    margin-bottom: 30px;
+}
+
+header a {
+    text-decoration: none;
+    padding: 10px;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    line-height: 0%;
+    margin-top: 16px;
+}
+
+.box {
+    background-color: #0150FD;
+    width: 16px;
+    height: 16px;
+    margin-right: 16px;
+    margin-left: 16px;
+    align-self: center;
+}
+
+.name {
+font-family: 'Poppins', sans-serif;
+font-weight: 600;
+font-size: 25px;
+
+}
+
+.portfolio-card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    width: 400px;
+    height: 500px;
+    background-color:#F4ECE6;
+    
+
+   
+}
+
+.portfolio-card img {
+    width: 130px;
+    border-radius: 50%;
+}
+
+.social-media-nav img {
+    width: 1.3rem;
+    padding: 0.5rem;
+    border-radius: 0%;
+}
+
+.first-button {
+    background-color: #0150FD;
+    color: #FFF;
+    align-self: center;
+    justify-content: center;
+    font-size: 15px;
+    font-weight: 300;
+    width: 135px;
+    height: 35px;
+    border-radius: 35px;
+    border: none;
+}
+
+.second-button {
+    background-color: #FFF;
+        color: #000;
+        align-self: center;
+        justify-content: center;
+        font-size: 15px;
+        font-weight: 300;
+        width: 135px;
+        height: 35px;
+        border-radius: 35px;
+        border: 1px solid #000;
+
+}
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index cd704c69..33786e4c 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,94 @@
     <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&display=swap" rel="stylesheet">
+    <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">
 
     <title>Responsive grid project</title>
 </head>
 
 <body>
+<header>
+    <div class="title">
+    <div class="box"></div>
+    <h2 class="name"> Maya Nelson</h2>
+    <p> / PROJECT MANAGER</p>
+    </div>
+    <nav class="header-navbar">
+        <a href="#">ABOUT ME</a>
+        <a href="#">RESUME</a>
+        <a href="#">PROJECTS</a>
+        <a href="#">CONTACT</a> 
+    </nav>
+</header>
+<main>
+    <div class="portfolio-card">
+        <img src="https://static.wixstatic.com/media/2e2a49_bd3a1599bc1b4265a01b2754b99b8536~mv2_d_5760_3840_s_4_2.jpeg/v1/crop/x_2703,y_43,w_2199,h_2205/fill/w_205,h_205,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/AdobeStock_230407429.jpeg" alt="profile picture" class="profile-picture">
+        <p class="name"><b>Maya<br /> Nelson</b></p>
+        <p>PROJECT MANAGER</p>
+        <nav class="social-media-nav">
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s" href=""   alt="Facebook">
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s" href=""
+                alt="Twitter">
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s" href=""
+                alt="Linkedin">
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s" href=""
+                alt="Instagram">
 
-    <!-- Add your markup here -->
+        </nav>
+    </div>
+    <div class="left-container"></div>
+    <div class="main-content">
+        <h1><b>Hello</b></h1>
+        <h3>Here's who I am & what I do</h3>
+        <button class="first-button">RESUME</button>
+        <button class="second-button">PROJECTS</button>
+        <p>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>
+</main>
+<footer>
+    <p>© 2035 by Maya Nelson.<br />
+    Powered and secured by Wix</p>
+    <div class="footer-contacts">
+        <div>
+           <p><b>Call</b></p>
+           <p>123-456-7890</p>
+        </div>
+        <div>  
+           <p><b>Write</b></p>
+           <p>info@mysite.com</p>
+        </div>
+        <div>
+        <p><b>Follow</b></p>
+      <nav class="social-media-nav-footer">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s"
+            href="" alt="Facebook">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s"
+            href="" alt="Twitter">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s"
+            href="" alt="Linkedin">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s"
+            href="" alt="Instagram">
+    
+        </nav>
+        </div>
+    </div>
+    
+    
+    <p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p></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>
+    
 </body>
 
 </html>
\ No newline at end of file
