diff --git a/capstone.css b/capstone.css
index ee8e0ce..83d9ce8 100644
--- a/capstone.css
+++ b/capstone.css
@@ -1,37 +1,244 @@
-
-*{
-    margin-left: 11px;
+* {
+    margin-left: 10px;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-body{
+body {
     background-color: black;
     color: white;
-    margin: 0;
-    padding: 0;
-    
+    font-family: 'Chivo', sans-serif;
+}
+
+.navbar {
+    width: 1344px;
+    height: 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid white;
+}
+
+.logo {
+    width: 139px;
+    height: 48px;
+}
+
+.titles {
+    display: flex;
+    gap: 24px;
+}
+
+.titles a {
+    font-weight: 400;
+    font-size: 28px;
+    line-height: 32px;
+    letter-spacing: -1%;
+}
+
+.hero {
+    width: 1344px;
+    text-align: center;
+    padding: 72px 0;
+    border-bottom: 1px solid white;
+}
+
+.title {
+    font-weight: 900;
+    font-size: 120px;
+    line-height: 120px;
+    letter-spacing: -2%;
+    margin-bottom: 32px;
+}
+
+.titleimg {
+    width: 100%;
+    max-width: 1344px;
+    height: 672px;
+    border-radius: 56px;
+    border: 1px solid black;
+}
+
+.grid {
+    width: 1344px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    gap: 32px;
+}
+
+.project {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.project img {
+    width: 100%;
+    height: 279px;
+    border: 1px solid white;
+    border-radius: 8px;
+}
+
+.info h3 {
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.info p {
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 17px;
+    line-height: 24px;
+    color: rgba(255, 255, 255, 0.6);
 }
-.navbar{
+
+.segment {
+    width: 1344px;
+    padding: 32px 0;
     display: flex;
-    
+    align-items: center;
+    gap: 32px;
 }
 
+.spacer {
+    width: 656px;
+    height: 154px;
+}
 
+.para {
+    width: 656px;
+    height: 154px;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+    letter-spacing: -0.5%;
+}
 
+.landing-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 150px;
+}
 
+.footer-para {
+    font-family: 'Chivo', sans-serif;
+    font-weight: 900;
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1%;
+    margin-bottom: 20px;
+}
 
-#row1{
+.footer-form {
+    width: 600px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin: 20px auto;
+}
+
+.email {
+    width: 490px;
+    border-radius: 8px;
+    padding: 6px 12px;
+    background-color: black;
+    border: 1px solid white;
     display: flex;
-   
+    justify-content: center;
+    align-items: center;
 }
 
+.email input {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    background: none;
+    color: white;
+}
+
+.submit {
+    width: 98px;
+    height: 40px;
+    border-radius: 8px;
+    background-color: #928DD3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
+.submit input {
+    width: 100%;
+    border: none;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    background: none;
+    color: black;
+    cursor: pointer;
+}
 
-#row2,#row3{
+.socials {
+    width: 192px;
+    height: 48px;
     display: flex;
-    
+    justify-content: center;
+    gap: 24px;
+    margin: 16px auto;
+}
 
+.socials img {
+    width: 48px;
+    height: 48px;
 }
 
+.footer {
+    width: 100%;
+    padding: 16px 0;
+    background-color: black;
+    color: white;
+    text-align: center;
+}
 
+.footer-content {
+    width: 1344px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
+#pagelinks p {
+    font-family: 'Chivo', sans-serif;
+    font-weight: 400;
+    font-size: 20px;
+    margin: 0;
+}
 
+.buttonlarge {
+    border: 1px solid white;
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+    cursor: pointer;
+    text-align: center;
+}
diff --git a/index.html b/index.html
index 98d5016..90484ac 100644
--- a/index.html
+++ b/index.html
@@ -8,190 +8,146 @@
 </head>
 <body>
 
-   
-    <!-- HEADER -->
-
-    <header  style="width: 1344px; height: 72px; border-bottom: 1px solid white; justify-content:space-between; padding-top: 12px; padding-bottom: 12px;" class="navbar">
-        <img  src="logo{-appType}.png" style="width: 139px; height: 48px; gap: 12px;">
-        
-        <div style="width: 446px;height: 32px; gap: 24px; display: flex;">
-        <h3 style="width: 76px; height: 32px; font: chivo; font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -1%; ">Home</h3>
-        <h3 style="width: 115px; height: 32px;font: chivo; font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -1%; ">Portfolio</h3>
-        <h3 style="width: 79px; height: 32px; font: chivo; font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -1%;">About</h3>
-        <h3 style="width: 104px ; height: 32px; font: chivo; font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: -1%;">Contact</h3>
+    <header class="navbar">
+        <img src="logo{-appType}.png" class="logo">
+        <div class="titles">
+            <a>Home</a>
+            <a>Portfolio</a>
+            <a>About</a>
+            <a>Contact</a>
         </div>
-        
     </header>
 
-    <!-- HEADER -->
-
-
-    <!-- CONTAINER -->
-
-    <div  style="width: 1344px; height: 4345px; padding-top: 48px; padding-bottom: 48px;">
-        <div  style="width: 1344px; height: 4249px;">
-            <div style="width: 1344px; height: 1088px; border-bottom: 1px solid white; padding-top: 72px; padding-bottom: 72px; gap: 32px;">
-                <h1 style="width: 1344px; height: 240px; font: chivo; font-weight: 900; font-size: 120px; line-height: 120px; letter-spacing: -2%; text-align: center;">Crafting Unique Geometric Designs</h1>
-                <img  style="width: 1344px; height: 672px; border-radius: 56px; border: 1px solid white;" src="cap1.png">
-            </div>
-
-            <div class="grid" style="width: 1344px; height: 1127px; border-bottom: 1px solid white;">
-                <div id="row1" style="width: 1344px; height: 397px; padding-top: 32px; padding-bottom: 32px; gap: 32px;">
-
-                    <div id="project1" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectA.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project A</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Web Design</p>
-                        </div>
-                    </div>
-
-                    <div id="project2" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="PROJECTB.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project B</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Graphic Design</p>
-                        </div>
-                    </div>
+    
+    <div class="container">
+        <div class="hero">
+            <h1 class="title">Crafting Unique Geometric Designs</h1>
+            <img src="cap1.png" class="titleimg">
+        </div>
 
-                    <div id="project3" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectC.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project C</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">App Design</p>
-                        </div>
+        
+        <div class="grid">
+           
+            <div id="row1" class="row">
+                <div id="project1" class="project">
+                    <img src="projectA.png">
+                    <div class="info">
+                        <h3>Project A</h3>
+                        <p>Web Design</p>
                     </div>
-            
-            
                 </div>
-
-                <div id="row2" style="width: 1344px; height: 397px; padding-top: 32px; padding-bottom: 32px; gap: 32px;">
-
-                    <div id="project4" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectD.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project D</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Branding</p>
-                        </div>
+                <div id="project2" class="project">
+                    <img src="projectB.png" >
+                    <div class="info">
+                        <h3>Project B</h3>
+                        <p>Graphic Design</p>
                     </div>
-
-                    <div id="project5" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectE.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project E</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">UI/UX</p>
-                        </div>
-                    </div>
-
-                    <div id="project6" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectF.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project F</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">illustration</p>
-                        </div>
+                </div>
+                <div id="project3" class="project">
+                    <img src="projectC.png">
+                    <div class="info">
+                        <h3>Project C</h3>
+                        <p>App Design</p>
                     </div>
-
                 </div>
+            </div>
 
-                <div id="row3" style="width: 1344px; height: 397px; padding-top: 32px; padding-bottom: 32px; gap: 32px;">
-
-                    <div id="project7" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectG.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project G</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Animation</p>
-                        </div>
+           
+            <div id="row2" class="row">
+                <div id="project4" class="project">
+                    <img src="projectD.png">
+                    <div class="info">
+                        <h3>Project D</h3>
+                        <p>Branding</p>
                     </div>
-
-                    <div id="project8" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectH.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project H</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Photography</p>
-                        </div>
+                </div>
+                <div id="project5" class="project">
+                    <img src="projectE.png">
+                    <div class="info">
+                        <h3>Project E</h3>
+                        <p>UI/UX</p>
                     </div>
-
-                    <div id="project9" style="width: 426.67px; height: 333px; gap: 6px;">
-                        <img  style="width: 426.67; height: 279px; border: 1px solid white;" src="projectI.png">
-                        <div style="width: 426.67px; height: 48px;">
-                        <h3 style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 20px; line-height: 24px;">Project I</h3>
-                        <p style="width: 426.67px; height: 24px; font: Archivo; font-weight: 500; font-size: 17px; line-height: 24px; color:rgba(255, 255, 255, 0.6);">Video Production</p>
-                        </div>
+                </div>
+                <div id="project6" class="project">
+                    <img src="projectF.png">
+                    <div class="info">
+                        <h3>Project F</h3>
+                        <p>Illustration</p>
                     </div>
-
                 </div>
             </div>
 
-            <div class="para" style="width: 1344px; height: 404px; border-bottom: 1px solid white; padding-top: 350px; padding-bottom: 100px; display: flex; justify-content: center;">
-                <p id="text" style="width: 900px; height: 260px; max-width: 900px; font: chivo; font-weight: 400; font-size: 48px; line-height: 52px; letter-spacing: -1%; text-align: center;">I am a passionate designer focused on creating dynamic, geometric visuals that captivate and inspire. My work spans various disciplines, including web design, branding, and illustration.</p>
-            </div>
-
-            <div style="width: 1344px; height: 1036px; border-bottom: 1px solid white; padding-top: 32px; padding-bottom: 32px; gap: 32px; " class="">
-                <div  style="width: 100%; height: 184px; gap: 32px;" class="featuredproject">
-                    <div style="width: 100%; height: 112px; max-width: 1260px; gap: 12px;"> 
-                    <h1 style="width: 100%; height: 68px; font: chivo; font-weight: 900; font-size: 64px; line-height: 68px;letter-spacing: -2%; text-align: center;">Featured Project</h1>
-                    <p style="width: 100%; height: 32px; font: Archivo; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.5% ; text-align: center;">Explore my latest project that combines cutting-edge design with a unique geometric style.</p>
+            
+            <div id="row3" class="row">
+                <div id="project7" class="project">
+                    <img src="projectG.png">
+                    <div class="info">
+                        <h3>Project G</h3>
+                        <p>Animation</p>
                     </div>
-                    <!-- <div style="width: 198px; height: 40px; border-radius: 8px; padding: 8px 16px 8px 16px; ">
-                    <button style="width: 166px; height: 24px; font: archivo; font-weight: 600; line-height: 24px; background-color: #928DD3;" type="button">Discover My Project</button>
-                    </div> -->
                 </div>
-                <div style="width: 95%; height: 40px; border-radius: 8px; padding: 8px 16px 8px 16px;display: flex; justify-content: center; ">
-                <button style="width: 166px; height: 24px; font: archivo; font-weight: 00; line-height: 24px; background-color: #928DD3; text-align: center; display: flex; justify-content: center; align-items: center;" type="button">Discover My Project</button>
+                <div id="project8" class="project">
+                    <img src="projectH.png">
+                    <div class="info">
+                        <h3>Project H</h3>
+                        <p>Photography</p>
+                    </div>
+                </div>
+                <div id="project9" class="project">
+                    <img src="projectI.png" >
+                    <div class="info">
+                        <h3>Project I</h3>
+                        <p>Video Production</p>
+                    </div>
                 </div>
-
-                <img style="width: 1344px; height: 756px; border: 1px solid ;" src="abstract.png">
             </div>
+        </div>
+    </div>
 
-            
-
-            <div style="width: 1344px; height: 218px; padding-top: 32px; padding-bottom: 32px; gap: 32px; display:flex; align-items: center;">
-                <div style="width: 656px; height: 154px;"></div>
-                <p style="width: 656px; height: 154px; font: Archivo; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.5%;">My design philosophy revolves around the use of geometric shapes and patterns to create visually striking and memorable experiences. I believe in the power of simplicity and the beauty of structure.</p>
-            </div>
-<!-- DONE -->
-            <div style="display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center;">
-                <div style="width: 720px; padding: 20px; text-align: center;">
-                    <h1 style="font-family: chivo, sans-serif; font-weight: 900; font-size: 34px; line-height: 40px; letter-spacing: -1%; text-align: center; margin-bottom: 20px;">
-                        Let's connect and create something amazing together.
-                    </h1>
+    
+    <div class="segment">
+        <div class="spacer"></div>
+        <p class="para">
+            My design philosophy revolves around the use of geometric shapes and patterns to create visually striking and memorable experiences. I believe in the power of simplicity and the beauty of structure.
+        </p>
+    </div>
 
-                    <form style="width: 600px; gap: 12px; display: flex; justify-content: space-between; align-items: center; margin: 20px auto;">
-                        <div style="width: 490px; border-radius: 8px; padding: 6px 12px; background-color: black; border: 1px solid white; display: flex; justify-content: center;align-items: center;">
-                            <input placeholder="Your Email" type="email" style="width: 100%; border: none; outline: none; font-family: archivo, sans-serif; font-weight: 500; font-size: 20px; line-height: 24px; background: none; color:white;">
-                        </div>
-                        <div style="width: 98px; height: 40px; border-radius: 8px; background-color: #928DD3; display: flex; justify-content: center; align-items: center;">
-                            <input type="submit" value="Submit" style="width: 100%; border: none; font-family: archivo, sans-serif; font-weight: 600; background: none; color:black; cursor: pointer;">
-                        </div>
-                    </form>
+       
+        <div class="landing-footer">
+            <div class="seg">
+                <h1 class="footer-para">
+                    Let's connect and create something amazing together.
+                </h1>
 
-                    <div id="socials" style="width: 192px; height: 48px; display: flex; justify-content: center; gap: 24px; margin: 16px auto;">
-                        <img style="width: 48px; height: 48px;" src="facebook.png" alt="Facebook">
-                        <img style="width: 48px; height: 48px;" src="instagram.png" alt="Instagram">
-                        <img style="width: 48px; height: 48px;" src="twitter.png" alt="Twitter">
+                <form class="footer-form">
+                    <div class="email">
+                        <input placeholder="Your Email" type="email">
                     </div>
+                    <div class="submit">
+                        <input type="submit" value="Submit">
+                    </div>
+                </form>
+
+                <div  class="socials">
+                    <img src="facebook.png" alt="Facebook">
+                    <img src="instagram.png" alt="Instagram">
+                    <img src="twitter.png" alt="Twitter">
                 </div>
             </div>
-
         </div>
-
     </div>
 
-    <div style="display: flex; flex-direction: column; min-height: 100vh;">
-        <div class="main-content" style="flex: 1;">       
-        </div>
-        <div class="footer" style="width: 100%; padding-top: 16px; padding-bottom: 16px; background-color: black; color: white;">
-            <div style="width: 100%; max-width: 1344px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
-                <div id="pagelinks" style="font-family: Chivo, sans-serif; font-weight: 400; font-size: 20px;">
-                    <p>© 2023 GeoArt</p>
-                </div>
-                <div id="buttonlarge" style="border: 1px solid white; border-radius: 8px; padding: 8px 16px; font-family: Archivo, sans-serif; font-weight: 600; font-size: 20px;">
-                    <p>Contact Me</p>
-                </div>
+    
+    <div class="footer">
+        <div class="footer-content">
+            <div id="pagelinks">
+                <p>© 2023 GeoArt</p>
+            </div>
+            <div class="buttonlarge" >
+                <p>Contact Me</p>
             </div>
         </div>
     </div>
-    
-    
 </body>
-</html>
\ No newline at end of file
+</html>
+