diff --git a/css/main.css b/css/main.css
index aa561706..11b1f7a3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,93 @@
-/* Add your CSS here */
+* {
+    font-family: 'Quicksand', sans-serif;
+}
 
-/* Dont' forget to link this file to your HTML in the <head> */
+.logo {
+    width: 17px;
+    height: 17px;
+    background-color: #0150FD;
+    border: 1px solid;
+    margin-left: 50px;
+    margin-right: 10px;
+}
+
+.custom-nav {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+}
+
+.nav-items--left {
+    font-size: 22px;
+}
+
+.nav-items--right {
+    display: flex;
+    margin-left: auto;
+}
+
+.nav-link {
+    margin-right: 50px;
+}
+
+.name {
+    font-family: 'Poppins', sans-serif;
+    font-size: 30px;
+}
+
+main {
+    background-color: antiquewhite;
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-section {
+    width: 25rem;
+    height: 35rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.picture-section {
+    background-color: #f4ece6;
+    margin-right: 3rem;
+    width: 36rem;
+    height: 35rem;
+    border: 1px solid grey;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#profile-image {
+    width: 8rem;
+    height: 8rem;
+    border-radius: 50%;
+    margin-top: 2rem;
+}
+
+#person-name {
+    font-size: 1.8rem;
+    font-weight: bolder;
+}
+
+#person-job {
+    font-size: 1.8rem;
+    margin-bottom: 8rem;
+}
+
+.footer-icons img {
+    width: 2rem;
+    height: 2rem;
+}
+
+footer {
+    display: flex;
+    margin-left: 4rem;
+    margin-top: 5rem;
+}
diff --git a/index.html b/index.html
index cd704c69..5f644882 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,49 @@
     <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>
+    <link rel="stylesheet" href="./css/main.css">
+    <title>My Portfolio</title>
 </head>
 
 <body>
+    <header>
+        <nav class="custom-nav">
+            <div class="logo"></div>
+            <div class="nav-items nav-items--left"><span class="name">John Doe</span> / WEB DEVELOPER</div>
+            <div class="nav-items nav-items--right">
+                <div class="nav-link"><a href="#">About Me</a></div>
+                <div class="nav-link"><a href="#">Resume</a></div>
+                <div class="nav-link"><a href="#">Projects</a></div>
+                <div class="nav-link"><a href="#">Contact</a></div>
+            </div>
+        </nav>
+    </header>
 
-    <!-- Add your markup here -->
-
+    <main>
+        <div class="info-section">
+            <div id="title">Hello</div>
+            <p id="subtitle">Here's who I am & what I do</p>
+            <div>
+                <p>I'm a passionate software developer with a strong focus on web development. I have experience working with HTML, CSS, and JavaScript, and I enjoy creating dynamic and interactive websites. I'm also proficient in various frameworks and libraries, such as React and Angular.</p>
+                <br>
+                <p>I'm constantly seeking opportunities to enhance my skills and stay up-to-date with the latest technologies in the industry. I love problem-solving and collaborating with teams to create innovative solutions that meet the needs of users.</p>
+            </div>
+        </div>
+        <div class="picture-section">
+            <img id="profile-image" 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 Image">
+            <p id="person-name">Maya <br>Nelson</p>
+            <hr style="width: 28%">
+            <p id="person-job">WEB DEVELOPER</p>
+            <div class="footer-icons">
+                <a href="#"><img src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/0fdef751204647a3bbd7eaa2827ed4f9.png"></a>
+                <a href="#"><img src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/c7d035ba85f6486680c2facedecdcf4d.png"></a>
+                <a href="#"><img src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_25,h_25,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6ea5b4a88f0b4f91945b40499aa0af00.png"></a>
+            </div>
+        </div>
+    </main>
 
-    <!-- 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>
+    <footer>
+        <p>This website design was created by Wix.com,<br> and is used here for strictly educational purposes.</p>
+    </footer>
 </body>
-
-</html>
\ No newline at end of file
+</html>
