(index.html) Line 295: Added another class called "slide-right".

(style.css) LIne 490-509: Added animation to the block of text that goes from left to right as to improve the user interface.
PriyaGhosal · Oct 10, 2024 · 12993b8 · 12993b8
1 parent 0307104
commit 12993b8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -292,10 +292,12 @@
   <main>
     <section class="hero" id="home">
       <div class="header2"><h1>Travel Beyond Limits</h1></div>
-      <h3>
+      <div class="slide-right">
+        <h3>
         Connect, Explore, and Discover Together. <br />
         BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
       </h3>
+    </div>
       <a href="book.html" id="btn">Book now</a>
     </section>
 

diff --git a/style.css b/style.css
@@ -487,6 +487,26 @@ nav {
   letter-spacing: 0.7px;
   padding: 5rem;
 }
+.slide-right {
+  width: 100%;
+  overflow: hidden;
+  max-width: 500px
+}
+
+.slide-right h3 {
+  animation: 3s slide-right;
+  animation-delay: 3s;
+}
+
+@keyframes slide-right {
+   from {
+      margin-left: -500px;
+   }
+
+   to {
+      margin-left: 0%;
+   }
+}
 
 
 /* Section Styles */