COMMIT

MahibAbrar222 · Sep 6, 2024 · 5811d3d · 5811d3d
1 parent 5f62eef
commit 5811d3d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/css/style.css b/css/style.css
@@ -123,22 +123,21 @@ nav ul li a:hover{
     text-wrap: wrap;
     padding: 5px;
 }
-.skills .container .skill ul{
-    margin-top: 20px;
-    list-style: none;
-    text-align: left;
+.skills .container .skill img{
+    max-width: 200px;
+    max-height: 200px;
+    padding: 20px;
 }
-.skills .container .skill ul li{
-    font-size: 22px;
-    color: #333;
-    margin: 10px 0;
-    font-weight: 800;
-    /* Linear gradient of blue, red, indigo and so nice */
-    background: linear-gradient(90deg, #11517c,  #380e4b, #1e2e38);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -moz-background-clip: text;
-    color: transparent;
+.skills .container .skill .skillbar{
+    width: 100%;
+    background: #ffbcbc;
+    margin-top: 10px;
+    color: #fff;
+}
+.skills .container .skill .skillbar .bar{
+    background: #074d6d;
+    padding: 8px;
+    text-align: center;
 }
 
 

diff --git a/index.html b/index.html
@@ -42,7 +42,13 @@
     <!-- A Navbar for my portfolio -->
     <nav>
         <a href="#" class="brand">Mahib Abrar</a>
+        <ul>
+            <li><a href="#about">About</a></li>
+            <li><a href="#projects">Projects</a></li>
+            <li><a href="#contact">Contact</a></li>
+        </ul>
     </nav>
+
 
     <!-- A Hero Section -->
     <section class="hero">
@@ -57,28 +63,28 @@ <h1>Hello, I'm Mahib Abrar</h1>
         <h2>My Skills</h2>
         <div class="container">
             <div class="skill">
-                <h3><i class="bi bi-code"></i> Web Development</h3>
-                <ul>
-                    <li><i class="bi bi-file-earmark-code"></i> HTML</li>
-                    <li><i class="bi bi-file-earmark-code"></i> CSS</li>
-                    <li><i class="bi bi-file-earmark-code"></i> JAVASCRIPT</li>
-                </ul>
+                <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="HTML">
+                <div class="skillbar">
+                    <div class="bar" style="width: 100%;">100%</div>
+                </div>
             </div>
             <div class="skill">
-                <h3><i class="bi bi-code"></i> Programming Languages</h3>
-                <ul>
-                    <li><i class="bi bi-file-earmark-code"></i> Python</li>
-                    <li><i class="bi bi-file-earmark-code"></i> Java</li>
-                    <li><i class="bi bi-file-earmark-code"></i> PHP</li>
-                </ul>
+                <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg" alt="Css">
+                <div class="skillbar">
+                    <div class="bar" style="width: 80%">80%</div>
+                </div>
             </div>
             <div class="skill">
-                <h3><i class="bi bi-code"></i> Frameworks</h3>
-                <ul>
-                    <li>.</li>
-                    <li><i class="bi bi-file-earmark-code"></i> Django</li>
-                    <li>.</li>
-                </ul>
+                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript">
+                <div class="skillbar">
+                    <div class="bar" style="width: 90%">90%</div>
+                </div>
+            </div>
+            <div class="skill">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python">
+                <div class="skillbar">
+                    <div class="bar" style="width: 100%">100%</div>
+                </div>
             </div>
         </div>
     </section>