Skip to content

Commit

Permalink
chore: add custom border to prevent jump in transition
Browse files Browse the repository at this point in the history
  • Loading branch information
Extheoisah committed Apr 17, 2024
1 parent d5e811f commit d59c9e6
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 6 deletions.
19 changes: 14 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,21 @@
<link rel="stylesheet" href="./output.css" />
</head>
<body>
<main class="flex flex-col h-screen items-center justify-center text-center gap-4 p-4">
<h1 class="text-4xl sm:text-4xl md:text-7xl font-bold text-black">Stay Tuned</h1>
<p class="text-center text-gray-500 dark:text-gray-400 text-base md:text-xl max-w-[600px] font-normal mb-2">
We're launching a scholarship to help students learn about the Bitcoin technology.
<main
class="flex flex-col h-screen items-center justify-center text-center gap-4 p-4"
>
<h1 class="text-4xl sm:text-4xl md:text-7xl font-bold text-black">
Stay Tuned
</h1>
<p
class="text-center text-gray-500 dark:text-gray-500 text-base md:text-xl max-w-[600px] font-normal mb-2"
>
We're launching a scholarship to help students learn about the Bitcoin
technology.
</p>
<button class="bg-black font- text-white w-fit p-3 px-6 rounded-md text-sm md:text-base hover:bg-transparent border-2 hover:border-black hover:text-black">
<button
class="custom-border bg-black text-white w-fit p-3 px-6 rounded-md text-sm md:text-base hover:border-2 hover:bg-transparent hover:border-black hover:text-black transition-colors"
>
Apply for the Bitcoin Scholarship
</button>
</main>
Expand Down
6 changes: 5 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;

.custom-border {
border: 2px solid #000;
}

0 comments on commit d59c9e6

Please sign in to comment.