WORK IN PROGRESS

MahibAbrar222 · Sep 5, 2024 · 5a54728 · 5a54728
1 parent 325ea90
commit 5a54728
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 7 deletions.
diff --git a/css/style.css b/css/style.css
@@ -14,6 +14,41 @@ body{
     background: #f1f1f1;
 }
 
+nav{
+    width: 100%;
+    background: #333;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+nav .brand{
+    font-size: 24px;
+    font-weight: 600;
+    color: #fff;
+    text-decoration: none;
+}
+
+nav ul{
+    list-style: none;
+    display: flex;
+}
+
+nav ul li{
+    margin-left: 20px;
+}
+
+nav ul li a{
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+}
+
+nav ul li a:hover{
+    color: #3498db;
+}
+
 .hero{
     width: 100%;
     padding: 10%;
@@ -82,7 +117,84 @@ body{
     transform: translateY(-10px);
 }
 .skills .container .skill h3{
-    font-size: 30px;
+    font-size: 23px;
     font-weight: 600;
     color: #333;
+    text-wrap: nowrap;
+    padding: 5px;
+}
+.skills .container .skill ul{
+    margin-top: 20px;
+    list-style: none;
+    text-align: left;
+}
+.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;
+}
+
+
+.discord-bots{
+    width: 100%;
+    padding: 10%;
+    text-align: center;
+    background: #fff;
+}
+.discord-bots h2{
+    font-size: 40px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20px;
+}
+.discord-bots .container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.discord-bots .container .discord-bot{
+    width: 250px;
+    height: 300px;
+    margin: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    transition: 0.3s;
+}
+.discord-bots .container .discord-bot:hover{
+    transform: translateY(-10px);
+}
+/* Invite Link style */
+.discord-bots .container .discord-bot a{
+    text-decoration: none;
+    color: #333;
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 20px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background: #3498db;
+    color: #fff;
+    transition: 0.3s;
+}
+
+/* Footer  */
+footer{
+    width: 100%;
+    padding: 20px;
+    background: #333;
+    color: #fff;
+    text-align: center;
 }
diff --git a/index.html b/index.html
@@ -57,23 +57,47 @@ <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>
+                <h3><i class="bi bi-code"></i> Web Development</h3>
                 <ul>
-                    <li><i class="bi bi-filetype-html"></i> HTML</li>
-                    <li><i class="bi bi-filetype-css"></i> CSS</li>
-                    <li><i class="bi bi-filetype-js"></i> JAVASCRIPT</li>
+                    <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>
             </div>
             <div class="skill">
-                <i class="bi bi-code"></i>
-                <h3>Programming Languages</h3>
+                <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>
             </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>
+            </div>
         </div>
     </section>
+
+    <!-- Discord Bots -->
+    <section class="discord-bots">
+        <h2>Discord Bots</h2>
+        <div class="container">
+            <div class="discord-bot">
+                <img src="https://top.gg/_next/image?url=https%3A%2F%2Fimages.discordapp.net%2Favatars%2F1273205467803549729%2F9686c1adfb20e020c4f407a6f00201ec.png%3Fsize%3D128&w=128&q=75" alt="Quran Bot">
+                <h3>Quran Bot</h3>
+                <p>It is a bot that can play al quran in your voice channel!</p>
+                <a href="https://top.gg/bot/1273205467803549729/invite" class="btn">Invite</a>
+            </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <p>&copy; 2024 Mahib Abrar</p>
+    </footer>
 </body>
 </html>