Merge pull request #10 from Uzair-Manzoor/animation-transition

Animation transition

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

index.html

@@ -45,12 +45,12 @@
         <section class="headline-container">
             <article class="article">
                 <div class="article-item1">
-                    <h1 class="headline-title">I'm Uzair.<br>Glad to see you!</h1>
-            <p class="headline-content">
+                    <h1 class="headline-title scale-para">I'm Uzair.<br>Glad to see you!</h1>
+            <p class="headline-content scale-para">
                 I'm a software developer! I can help you build a product, feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, don't hestiate to contact me.
             </p>
             <div class="headline-social">
-                <a class="social-title" href="#">LET'S CONNECT</a>
+                <h3 class="scale-para"><a class="social-title" href="#">LET'S CONNECT</a></h3>
                 <ul class="social-links">
                     <li class="social-link">
                         <a href="#">

style.css

@@ -211,6 +211,7 @@ body {
 .btn:hover {
   color: #fff;
   background: #4269cc;
+  transform: perspective(150px) translateZ(20px);
 }
 
 .btn:active {
@@ -441,6 +442,15 @@ a:hover {
     line-height: 60px;
   }
 
+  .social-link {
+    max-width: 100%;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .social-link:hover {
+    transform: scale(1.5);
+  }
+
   .work-section {
     margin: 80px 50px;
   }
@@ -515,6 +525,7 @@ a:hover {
     background: #fff;
     border-radius: 10px;
     border: 1px solid #396df2;
+    transition: transform 1s;
   }
 
   .btn:hover {
@@ -593,4 +604,19 @@ a:hover {
     width: 500px;
     justify-self: center;
   }
+
+  .scale-para:hover {
+    -webkit-animation: scale-text 2s;
+    animation: scale-text 2s;
+  }
+
+  @keyframes scale-text {
+    from {
+      scale: 1;
+    }
+
+    to {
+      scale: 1.05;
+    }
+  }
 }