anchor tag animation

impondesk · Jun 3, 2024 · 6abdad6 · 6abdad6
1 parent 49788f4
commit 6abdad6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 15 deletions.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -69,20 +69,26 @@ import Sidebar from './Sidebar.astro';
           <!-- <Sidebar /> -->
 
           <!-- container page shadow-1 m-b-160 shadow-2xl-0 -->
-          <div class="lg:col-span-3 pt-5">
+          <div class="lg:col-span-3 pt-5 pb-16">
             <slot />
           </div>
 
           <div class="lg:col-span-1">
 
-            <div class="flex items-center mt-8 space-x-4">
-              <img src="/avtar.jpeg" alt="" class="w-10 h-10 rounded-full dark:bg-gray-500">
+            <div class="flex place-items-start mt-8 space-x-4  justify-center ">
+              <img src="/avtar.jpeg" alt="" class="w-10 h-10 rounded-full dark:bg-gray-500 pt-5">
               <div class="font-extrabold">
                 <h3 class="text-sm">
                   <span class="text-lg">{frontmatter.authors}</span>
                   <small class="block">Just another tech nerd!</small> 
                   <!-- <small><time datetime="2021-02-18" class="text-sm dark:text-gray-400">{frontmatter.date}</time></small>  -->
                 </h3>
+                <p class="mt-5 text-xs font-normal text-gray-500">
+                  Digital Transformation Strategist, Web Mobile Cloud Technology
+                  and Pre-Sales Consultant, Healthcare & Insurance Consultant,
+                  Strategic Accounts, Certified Associate AWS & Azure Solution
+                  Architect
+                  </p>
               </div>
             </div>
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -45,7 +45,7 @@ import '../styles/main.css';
 							<!-- <span class="absolute inline-block w-full bottom-0.5 h-1 bg-yellow-300"></span> -->
 							<span class="relative"> Have a question? </span>
 						</span>
-						<br class="block sm:hidden" />Ask me on <a href="https://twitter.com/impondesk" target="_blank" title="" class="">Twitter</a>
+						<br class="block sm:hidden" />Ask me on <a href="https://twitter.com/impondesk" target="_blank" title="" class="text-blue-500 dark:text-blue-500 hover:underline">Twitter</a>
 					</p>
 
 					  <!-- <div>
@@ -127,14 +127,14 @@ import '../styles/main.css';
 						  >
 						  </div> -->
 
-						  
+
 
-						  <div class="effect-six">
-						  <a href="/blog" class="mt-4 text-base text-gray-300 md:mt-8 ">
-							<span class="relative inline-block">
-								<!-- <span class="absolute inline-block w-full bottom-0.5 h-1 bg-yellow-300"></span> -->
-								<span class="relative"> Discover more </span>
-							</span>
+						<div class="">
+						<a href="/blog" title="" class="inline-flex items-center text-xs font-bold tracking-widest text-gray-900 uppercase group">
+							Discover More
+							<svg class="w-4 h-4 ml-2 transition-all duration-200 transform group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+							</svg>
 						</a>
 					</div>
 						</div>
@@ -151,4 +151,6 @@ import '../styles/main.css';
 	</section>
 
 
+
+
 </Layout>
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -171,14 +171,12 @@ li {
   color: #21242c;
 }
 
-.effect-six > a,
-a {
+.effect-six > a {
   padding: 0 5px;
   box-shadow: inset 0 0 0 0 white;
   transition: all 0.4s ease-in-out 0s;
 }
-.effect-six > a:hover,
-a:hover {
+.effect-six > a:hover {
   box-shadow: inset 300px 0 0 0 white;
   color: #21242c;
 }
@@ -202,3 +200,41 @@ a:hover {
   box-shadow: inset 0 300px 0 0 white;
   color: #21242c;
 }
+
+/* a {
+  position: relative;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+a::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #ffff00;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+a:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+} */
+
+a {
+  text-decoration: none;
+  background-image: linear-gradient(#ec4899, #eab308);
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% 2px;
+  transition: background-size 0.3s;
+}
+
+a:hover,
+a:focus {
+  background-size: 100% 2px;
+}