add icons

index.html

@@ -17,8 +17,8 @@
                 <div class="links">
                     <ul>
                         <li><a href="home" class="active">Home</a></li>
-                        <li><a href="#">Services</a></li>
                         <li><a href="#">About</a></li>
+                        <li><a href="#">Services</a></li>
                         <li><a href="#">Contact</a></li>
                         <li><button>Hire Me!</button></li>
                         <div class="mode" id="mode"><i class="bi bi-brightness-high" id="icon"></i></div>
@@ -45,14 +45,29 @@ <h1>Web and Mobile Developer👋</h1>
                 </div>
             </div>
             <div class="container home">
-                <div class="grid-container-1">
+                <div class="grid-container">
                     <div class="item-1 programming">
                         <h4>Tech Stack | </h4>
+                        <img src="/assets/images/html.png" alt="html">
+                        <img src="/assets/images/css.png" alt="css">
+                        <img src="/assets/images/php.png" alt="php">
+                        <img src="/assets/images/js.png" alt="js">
+                        <img src="/assets/images/laravel.png" alt="laravel">
+                        <img src="/assets/images/livewire.png" alt="livewire">
                     </div>
                 </div>
             </div>
            </div>
         </section>
+
+        <section id="about">
+            <div class="container about">
+                <div class="grid-container-2">
+                    <div class="item-1"></div>
+                    <div class="item-2"></div>
+                </div>
+            </div>
+        </section>
 
 
 

style.css

@@ -50,6 +50,12 @@ img {
   /* background-color: var(--orange-color); */
 }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+}
+
 .grid-container-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -103,6 +109,7 @@ img {
   align-items: center;
   height: 1rem;
   padding: 1.50rem;
+  background-color: transparent;
 }
 .logo,
 .mode{
@@ -178,9 +185,7 @@ body {
   color: var(--gray-color);
   font-weight: 550;
   display: inline-block;
-  max-width: 50%;
-
-
+  max-width: 75%;
 }
 .home .grid-container-2 .message .social :is(i){
   font-size: 1.50rem;
@@ -189,7 +194,21 @@ body {
 .profile{
   max-width: 100%;
   height: 20rem;
-  border-radius: 50%;
+  border-top-left-radius: 5%;
+  border-bottom-left-radius: 5%;
+  border-top-right-radius: 70%;
+  border-bottom-right-radius: 70%;
+}
+.home .grid-container .programming{
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+.home .grid-container .programming img{
+  max-width: 100%;
+  height: 2rem;
+  object-fit: cover;
+  padding-inline: 2rem;
 }
 
 /*---------------------*\
@@ -218,6 +237,8 @@ body.light-mode .header .links button{
   color: var(--black-color);
   transition: 1s ease;
 }
+.profile{filter: drop-shadow(0px 0px 1rem var(--black-color));}
+
 /*---------------------*\
   #Media Queries 
 \*----------------------*/