style fixes

a4ojha · Jul 23, 2024 · 52748bf · 52748bf
1 parent d138580
commit 52748bf
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/projects/cinebite.html b/projects/cinebite.html
@@ -6,7 +6,8 @@
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&family=Montserrat+Subrayada&family=Raleway&family=Roboto:wght@400;500;700&family=Silkscreen&display=swap" rel="stylesheet">
-
+
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
       <link rel="stylesheet" href="../styles/general.css">
       <link rel="stylesheet" href="../styles/header.css">
       <link rel="stylesheet" href="../styles/intro.css">
@@ -56,6 +57,12 @@
           <p class="body" style="margin-bottom: 20px;">
             The frontend is developed using <span style="font-weight: 700">React 18.2.0</span> and <span style="font-weight: 700">Bootstrap</span>.  
           </p>
+          <div style="margin-bottom: 20px;">
+            <a href="https://cinebite.adonojha.com" target="_blank" id="project-link">
+              <span class="body link">🚀 Visit application</span>
+              <i class="fa-solid fa-arrow-right arrow-icon" style="margin-left: 2px"></i>
+            </a>
+          </div>
         </div>
         <!-- Video -->
         <div class="videos-row">

diff --git a/styles/projects.css b/styles/projects.css
@@ -290,3 +290,19 @@
     opacity: 0.8;
     cursor: default;
 }
+
+.arrow-icon {
+    opacity: 0;
+    transition: opacity 0.25s;
+}
+
+#project-link:hover .arrow-icon {
+    opacity: 1;
+    animation: swooshRight 0.5s forwards;
+}
+
+@keyframes swooshRight {
+    0% { transform: translateX(-30%); }
+    100% { transform: none; }
+
+}