Half work done in the about section of the page.

About section half done

Author: muhammad-awais-web-dev

Decor.css

@@ -59,4 +59,70 @@
   to {
     transform: rotate(360deg);
   }
+}
+
+
+/* From Uiverse.io by Sharkotech */ 
+.card {
+  width: 190px;
+  height: 254px;
+  position: absolute;
+  transition: .3s ease-in-out;
+  cursor: pointer;
+  border-radius: 20px;
+  box-shadow: 0px 0px 30px -10px rgba(225, 225, 225, 0.1);
+}
+
+#c1 {
+  background-color: black;
+}
+
+#c2 {
+  background-color: blue;
+}
+
+#c3 {
+  background-color: red;
+}
+
+#c4 {
+  background-color: green;
+}
+
+.main:hover #c1 {
+  transform: translateX(-100px) rotate(-40deg);
+}
+
+.main:hover #c2 {
+  transform: translateX(-50px) rotate(-30deg);
+}
+
+.main:hover #c3 {
+  transform: translateX(0) rotate(-20deg);
+}
+
+.main:hover #c4 {
+  transform: translateX(50px) rotate(-10deg);
+}
+
+#c1:hover {
+  transform: translateX(-150px) rotate(0deg) !important;
+}
+
+#c2:hover {
+  transform: translateX(-100px) rotate(0deg) !important;
+}
+
+#c3:hover {
+  transform: translateX(-50px) rotate(0deg) !important;
+}
+
+#c4:hover {
+  transform: translateX(50px) rotate(0deg) !important;
+}
+
+.main {
+  display: grid;
+  height: 50vmax;
+  place-items: center;
 }

index.html

@@ -45,22 +45,22 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
                     <a href="curriculum vitae.pdf" download ><span>Download CV</span></a>
                 </div>
                 <div class="social-buttons-container">
-                    <div class="social-button">
+                    <a href="#" class="social-button">
                         <i class="fa-brands fa-linkedin-in"></i>
                         <span class="icon-text">LinkedIn</span>
-                    </div>
-                    <div class="social-button">
+                    </a>
+                    <a href="#" class="social-button">
                         <i class="fa-brands fa-facebook-f"></i>
                         <span class="icon-text">Facebook</span>
-                    </div>
-                    <div class="social-button">
+                    </a>
+                    <a href="#" class="social-button">
                         <i class="fa-brands fa-x-twitter"></i>
                         <span class="icon-text">X (Twetter)</span>
-                    </div>
-                    <div class="social-button">
+                    </a>
+                    <a href="#" class="social-button">
                         <i class="fa-brands fa-github"></i>
                         <span class="icon-text">Github</span>
-                    </div>
+                    </a>
                 </div>
             </div>
             <div class="hero-decor">
@@ -113,6 +113,36 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
 
             </div>
         </section>
+        <section class="about">
+            <div class="about-info">
+                <h2>About Me</h2>
+                <p style="font-size: 1.4rem; font-weight: 600;padding: 10px 0;"><i class="fa-solid fa-user"></i> Personal Info</p>
+                <p>I am a freelance <strong>Web Developer</strong> & <strong>Ux/Ui Designer</strong> based in Pakistan. I am proficient in design tools like <strong>Figma</strong> and content management systems such as <strong>WordPress</strong>. My focus is on crafting visually appealing, user-centered websites and digital experiences, with a commitment to expanding my skills and services to meet diverse client needs.</p>
+                <table>
+                    <tr>
+                        <td><i class="fa-solid fa-user-tie"></i> Muhammad Awais</td>
+                        <td><i class="fa-solid fa-phone"></i>(+92)325-9350593</td>
+                    </tr>
+                    <tr>
+                        <td><i class="fa-solid fa-address-book"></i>Mianwali,Punjab,Pakistan</td>
+                        <td><i class="fa-solid fa-calendar"></i>24/6/2003</td>
+                    </tr>
+                    <tr>
+                        <td><i class="fa-solid fa-language"></i>English, Urdu</td>
+                        <td><i class="fa-solid fa-at"></i>[email protected]</td>
+                    </tr>
+                </table>
+            </div>
+            <div class="about-pic">
+                <!-- From Uiverse.io by Sharkotech --> 
+                <div class="main">
+                    <div class="card" id="c1"></div>
+                    <div class="card" id="c2"></div>
+                    <div class="card" id="c3"></div>
+                    <div class="card" id="c4"></div>
+                </div>
+            </div>
+        </section>
     </main>
     <script src="javascript.js"></script>
     <script src="https://kit.fontawesome.com/4cfda748cf.js" crossorigin="anonymous"></script>

styles.css

@@ -149,6 +149,7 @@ body{
 
     background: white;
     color: black;
+    text-decoration: none;
     border-radius: 40px;
     display: inline-flex;
     align-items: center;
@@ -188,12 +189,58 @@ body{
     padding: 0 10px;
 }
 
+.about{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 90vh;
+    color: #fff;
+}
+.about-info{
+    display: flex;
+    flex-direction: column;
+    flex: 6 6 60%;
+    padding: 0 50px;
+    text-align: left;
+    gap: 20px;
+}
+.about-info h2{
+    font-size: 2rem;
+    font-weight: 600;
+    line-height: 1.2;
+}
+.about-info p{
+    font-size: 1.2rem;
+    text-align: justify;
+    color: #ccc;
+}
+.about-info table tr{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+}
+.about-info table tr td{
+    display: flex;
+    flex: 1 1 50%;
+    vertical-align: middle;
+    padding: 10px 0;
+}
+.about-info table tr td i{
+    font-size: 1.5rem;
+    margin-right: 10px;
+    color: #fff;
+}
+.about-pic{
+    flex: 4 4 40%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
 
 @media(max-width: 880px){
-    .navbar{
-        backdrop-filter: none;
-    }
     .navbar-container .navbar-menu{
         display: none;
         flex-direction: column;