header colored

git-pi-e · git-pi-e · commit 6441de48e3e7 · 2021-03-13T17:07:28.000+05:30
diff --git a/index.html b/index.html
@@ -16,15 +16,18 @@
 </head>
 <body>
     <header>
-        <div class="logo">
-            <img src="./img/pi-logo.png" alt="mohite-pi">
-        </div>
-        <button class="nav-toggle"></button>
+       
+        <!-- <button class="nav-toggle"></button>
     
     <button class="nav-toggle">
         <span class="nav-button"></span>
-    </button>
-    <div class="nav-div"><nav class="nav">
+    </button> -->
+    <div class="nav-div flex">
+        <span class="logo flex">
+            <img src="./img/pi-logo.png" alt="mohite-pi">
+        </span>
+        
+        <nav class="nav flex">
         
             <a class="nav__list" href="#home">Home</a>
             <a class="nav__list" href="#my-work">My Work</a>
@@ -64,11 +67,13 @@ <h3 id="workid3">Sleep</h3>
         <!-- About Me -->
 
     <section class="aboutme" id="about-me">
+    <div id="about-me-box">
         <div class="container"><h2 class="section__title section__title--aboutme">About Me</h2></div>
         <div><img src="./img/myself.jpeg" alt="Piyush" id="myself"></div>
         <h3 class="section__subtitle section__subtitle--aboutme">Undergrad student based in Maharashtra, India</h3>
         <div><p id="aboutme-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero omnis eos minima illo accusantium dolorum illum nam, perspiciatis fuga deserunt deleniti. Nemo ea dolorum delectus fugiat molestiae, odit temporibus explicabo?</p>
         </div>
+    </div>
     </section>
 
     <!-- Connect with Me -->
diff --git a/style.css b/style.css
@@ -2,6 +2,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    -webkit-font-smotthing: antialiased;
 }
 
 html{
@@ -20,7 +21,7 @@ body{
 }
 
 section{
-    margin: 15%;
+    margin: auto;
     padding: 12%;
     justify-content: center;
 }
@@ -31,6 +32,33 @@ section{
 }
 
 
+/* navbar */
+header{
+    background-color: #42f08d;
+    height: 20px;
+}
+
+.nav-div{
+    max-width: 1152px;
+    padding: 0 15px;
+    margin: 0 auto;
+}
+
+header .nav-div nav a{
+    color: #272525;
+    text-decoration: none;
+    justify-content: space-between;
+}
+
+
+.logo img{
+    max-width: 10%;
+    
+}
+
+.flex{
+    display: flex;
+}
 
 
 
@@ -68,3 +96,7 @@ section{
 
 
 /* Connect With Me */
+.handles a{
+    text-decoration: none;
+    color: #42f08d;
+}
