diff options
| author | Pinapelz <yukais@pinapelz.com> | 2023-09-19 17:53:21 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2023-09-19 17:53:21 -0700 |
| commit | 599437caddfa1399cf475dd70c6da4adcaadb96e (patch) | |
| tree | 9599ddc68ed4a637f10ff03756826d1dd700d572 /src/components/SocialNavbar.astro | |
| parent | f2ff1aeb03400c77396c729d887bb284da963378 (diff) | |
implemented home page
- CSS animation
- Social media navbar
Diffstat (limited to 'src/components/SocialNavbar.astro')
| -rw-r--r-- | src/components/SocialNavbar.astro | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/SocialNavbar.astro b/src/components/SocialNavbar.astro new file mode 100644 index 0000000..ed020e4 --- /dev/null +++ b/src/components/SocialNavbar.astro @@ -0,0 +1,46 @@ +--- +import '@fortawesome/fontawesome-free/css/all.min.css'; +--- +<style> + .dark-social-navbar-wrapper { + display: flex; + margin-top: 5px; + justify-content: center; + } + + .dark-social-navbar { + display: flex; + gap: 15px; + padding: 10px 20px; + border-radius: 8px; + } + + .dark-social-icon { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #3a3f4b; + color: #fff; + text-decoration: none; + transition: background-color 0.3s ease, transform 0.3s ease; + } + + .dark-social-icon:hover { + background-color: #4a4f5b; + transform: scale(1.1); + } +</style> + +<div class="dark-social-navbar-wrapper"> + <div class="dark-social-navbar"> + <a href="#" class="dark-social-icon"><i class="fab fa-github"></i></a> + <a href="#" class="dark-social-icon"><i class="fab fa-twitter"></i></a> + <a href="#" class="dark-social-icon"><i class="fa fa-book"></i></a> + <a href="#" class="dark-social-icon"><i class="fab fa-discord"></i></a> + <a href="#" class="dark-social-icon"><i class="fa fa-envelope"></i></a> + <a href="#" class="dark-social-icon"><i class="fa fa-globe"></i></a> + </div> +</div>
\ No newline at end of file |