Skip to content

Commit

Permalink
Add hover effect to external link button
Browse files Browse the repository at this point in the history
  • Loading branch information
“Sophie committed Mar 18, 2024
1 parent 8fde128 commit a794830
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 22 deletions.
42 changes: 38 additions & 4 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,44 @@ html {
transition: opacity 0.5s ease-in-out;
}

.external-link::after {
content: "\2197";
margin-left: 0.2em;
}
/* ABOUT US - Button with Icon Animation */

@media (min-width: 768px) {

.ts-external-link {
text-align: center;
width: auto;
overflow: hidden; /* prevents the pseudo element from being visible outside the button */
position: relative;
}

.ts-external-link span {
display: inline-block;
position: relative;
transition: padding-right 0.5s;
}

.ts-external-link::after {
content: '\2197';
position: absolute;
opacity: 0;
top: 50%;
right: -20px; /* Hide icon outside the button */
transform: translateY(-50%);
transition: opacity 0.5s, right 0.5s;
}

.ts-external-link:hover {
width: auto;
}

.ts-external-link:hover::after {
opacity: 1;
right: 5px; /* Position next to the button text */
}

}


/* DOCUMENT - List item marker */

Expand Down
37 changes: 19 additions & 18 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,14 @@ <h1 class="text-4xl/normal w-full font-bold pt-6 lg:pt-2 md:text-5xl/normal lg:t
<p class="text-2xl/normal mt-6 mb-12 md:text-1xl/normal lg:text-3xl/loose">
Identify and mitigate potential security threats with ThreatShield's threat modelling service</p>
<a href="mailto:[email protected]"
class="block sm:w-full lg:inline bg-primary-800 text-white text-center tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-800 transition-all">
<span class="align-middle">Send Us an E-mail</span>
class="block sm:w-full lg:inline bg-secondary-400 text-white text-center tracking-wider py-4 px-6 rounded hover:bg-secondary-500 active:bg-secondary-600 transition-all duration-300 hover:ease-in">
<span class="align-middle text-secondary-900 font-medium">Send Us an E-mail</span>
</a>
<div class="mt-12 pb-8">
<span class="hover:text-primary-900">
<img src="./logos/github-mark-white.png" alt="GitHub Logo" class="w-6 h-6 mx-1 inline-block">
<a href="https://github.com/inspired-consulting/threat_shield" target="_blank"
class="underline underline-offset-4 active:text-primary-100 hover:primary-300 transition-all">
class="underline underline-offset-4 active:text-primary-100 hover:primary-300 transition-all duration-300 hover:ease-in">
Fork Us on GitHub</a>
</span>
</div>
Expand Down Expand Up @@ -234,7 +234,7 @@ <h3 class="font-bold text-xl/loose mb-2 text-primary-800 text-center">
<!-- HOW DOES IT WORK -->

<section id="how-does-it-work" class="w-full bg-primary-200">
<div class="container mx-auto h-full py-20 px-4 bg-primary-200">
<div class="container mx-auto h-full py-20 px-4">
<h3 class="text-center leading-normal text-primary-800 mb-4 uppercase">HOW DOES IT WORK</h3>
<hr class="border-t-2 border-primary-300 w-48 mx-auto my-4">
<h2 class="text-4xl/normal mb-8 font-bold text-center text-primary-800 pt-2">
Expand Down Expand Up @@ -284,8 +284,8 @@ <h3 class="font-bold text-xl/loose mt-6 mb-2 text-primary-800 text-center">
initial threat model and learn how to effectively use ThreatShield.</p>
</div>
<div
class="border px-4 py-2 rounded-md border-primary-400 my-4 text-primary-600 text-center">
<span class="text-xs/loose font-semibold">Be Quick:</span><br>
class="border-dashed border-2 border-secondary-500 px-4 py-2 rounded-md my-4 text-secondary-500 text-center">
<span class="text-xs/loose"><b>Be Quick:</b></span><br>
<b>Free of Charge for First Requests</b>
</div>
</div>
Expand Down Expand Up @@ -359,7 +359,7 @@ <h2 class="text-4xl leading-normal mb-8 font-bold text-center text-primary-800 p
</ul>
</div>
<a href="mailto:[email protected]"
class="w-full bg-primary-500 text-white text-center py-3 mb-4 rounded hover:bg-primary-700 active:bg-primary-500 lg:mt-8 transition-all">
class="w-full bg-primary-500 text-white text-center py-3 mb-4 rounded hover:bg-primary-700 active:bg-primary-500 lg:mt-8 transition-all duration-300 hover:ease-in">
Get In Touch
</a>
</div>
Expand Down Expand Up @@ -409,7 +409,7 @@ <h2 class="text-4xl leading-normal mb-8 font-bold text-center text-primary-800 p
</ul>
</div>
<a href="mailto:[email protected]"
class="w-full bg-primary-500 text-white text-center py-3 mb-4 lg:mt-8 rounded hover:bg-primary-700 active:bg-primary-500 transition-all">
class="w-full bg-primary-500 text-white text-center py-3 mb-4 lg:mt-8 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 hover:ease-in">
Get In Touch</a>
</div>
</div>
Expand Down Expand Up @@ -461,7 +461,7 @@ <h2 class="text-4xl leading-normal mb-8 font-bold text-center text-primary-800 p
</ul>
</div>
<a href="mailto:[email protected]"
class="w-full bg-primary-500 text-white text-center py-3 mb-4 lg:mt-8 rounded hover:bg-primary-700 active:bg-primary-500 transition-all">
class="w-full bg-primary-500 text-white text-center py-3 mb-4 lg:mt-8 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 hover:ease-in">
Get In Touch
</a>
</div>
Expand All @@ -474,18 +474,19 @@ <h2 class="text-4xl leading-normal mb-8 font-bold text-center text-primary-800 p

<section id="about" class="w-full bg-primary-200 flex flex-col pt-1 items-center lg:flex-row">
<div class="container flex flex-row justify-center mx-auto">
<div class="mx-auto px-4 w-full lg:px-8 flex flex-col justify-center">
<div class="mx-auto px-4 w-full lg:px-8 flex flex-col justify-center text-center lg:text-left">
<div>
<h3 class="text-center lg:text-left text-primary-800 leading-normal px-2 uppercase">About us</h3>
<hr class="border-t-2 border-primary-500 w-24 mx-auto my-4 lg:mx-0">
</div>
<h2 class="text-4xl text-primary-800 mb-8 pt-2 font-bold text-center leading-normal lg:text-left">
Discover the Team Behind ThreatShield
<h2 class="text-4xl/normal text-primary-800 pt-2 font-bold">
The Team
</h2>
<div class="text-center lg:text-left">
<p class="text-xl/loose leading-loose text-primary-800 mb-6 mt-2">Discover the Team Behind ThreatShield</p>
<div>
<a href="https://inspired.consulting/en/about" target="_blank"
class="block md:inline-block bg-primary-500 external-link text-white tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-500 transition-all">
Get to Know the Team
class="block md:inline-block bg-primary-500 ts-external-link text-white tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 ease-in">
<span class="text-center">Get to Know the Team</span>
</a>
</div>
</div>
Expand All @@ -503,14 +504,14 @@ <h2 class="text-4xl text-primary-800 mb-8 pt-2 font-bold text-center leading-nor
<h3 class="text-primary-800 mb-4 uppercase leading-normal">Ready to protect your business?</h3>
<hr class="border-t-2 border-secondary-400 mx-auto w-80 my-4">
<h2 class="text-4xl font-bold text-primary-800 py-2 leading-normal">
Any Questions?<br>
Feel Free to Reach Out — We'd Love to Hear from You.
Feel Free to Reach Out
</h2>
<p class="text-xl/loose leading-loose text-primary-800 mt-2">We'd Love to Hear from You</p>
<div class="flex justify-center">
<img src="img/chatbot.gif" alt="Animated icon" class="w-24 h-24 my-4">
</div>
<a href="mailto:[email protected]"
class="block md:inline-block bg-primary-500 text-white tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-500 transition-all">
class="block md:inline-block bg-primary-500 text-white tracking-wider py-4 px-6 rounded hover:bg-primary-700 active:bg-primary-500 transition-all duration-300 hover:ease-in">
<span class="align-middle">Send Us an E-mail</span>
</a>
</div>
Expand Down

0 comments on commit a794830

Please sign in to comment.