New trending page

Created a new page for the trending page
apu52 · Oct 1, 2024 · 2adea4c · 2adea4c
1 parent 241e289
commit 2adea4c
Show file tree

Hide file tree

Showing 6 changed files with 363 additions and 74 deletions.
diff --git a/beach.png b/beach.png
diff --git a/forest.png b/forest.png
diff --git a/trending.css b/trending.css
@@ -1,11 +1,12 @@
-div.niha{
+div.niha {
 
     width: 500px;
     border: 2px solid rgb(151, 228, 240);
     display: inline-block;
     color: rgb(151, 228, 240);
     font-size: small;
 }
+
 /* Typing Effect CSS */
 /* 
 @keyframes typing {
@@ -18,7 +19,7 @@ div.niha{
     50% { border-color: transparent; }
 } */
 
-#heading2{
+#heading2 {
     font-family: 'Courier New', Courier, monospace;
     font-size: 2em;
     color: #d6cece;
@@ -44,7 +45,7 @@ div.niha{
     margin-top: 90px;
     margin-bottom: 110px;
     align-content: center;
-    
+
 }
 
 
@@ -53,25 +54,25 @@ div.niha{
     margin: 18px 18px 50px 540px;
     transition: 1s;
     border: none;
-    background-color:#C07F00;
+    background-color: #C07F00;
     padding: 13px 15px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     font-size: large;
     font-weight: bold;
-    border-radius: 20px ;
+    border-radius: 20px;
     cursor: pointer;
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
-   
+
 }
 
 #button1:hover {
     background: #C07F00;
     box-shadow: 0 0 90px#C07F00
-    /* transform: scale(1.3); */
+        /* transform: scale(1.3); */
 }
 
 a {
@@ -98,12 +99,10 @@ a {
     flex-direction: row;
     margin-left: 40px;
     margin-right: 40px;
-    margin-top:5px;
-    margin-bottom: 110px;
-    box-sizing:border-box;
+    box-sizing: border-box;
     border: 10 solid rgb(255, 130, 130);
     /* align-items:center; */
-    justify-content:space-between;
+    justify-content: space-between;
 }
 
 #box5 {
@@ -124,7 +123,7 @@ a {
     border: 3px solid rgb(206, 9, 6);
     transition: 0.9s;
     box-shadow: rgb(206, 9, 6);
-   
+
 }
 
 #box6 {
@@ -147,7 +146,7 @@ a {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
-   
+
 }
 
 #box7 {
@@ -173,7 +172,7 @@ a {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
-   
+
 }
 
 #box8 {
@@ -189,15 +188,16 @@ a {
     border: 2px solid rgb(206, 9, 6);
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
-  
-    
+
+
 }
 
 #box8:hover {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
 }
+
 #box9 {
     background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPF21UstFZ23Hy_Kfnad_8zlAcnMohJLuoBg&s");
     background-size: cover;
@@ -210,63 +210,77 @@ a {
     border: 2px solid rgb(206, 9, 6);
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
-   
+
 }
 
 #box9:hover {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
-  
+
 }
-#text1{
+
+#text1 {
     color: #c84d4d;
     align-content: center;
     padding-top: 10%;
 }
-#text2{
+
+#text2 {
     color: #c84d4d;
     padding-top: 10%;
 }
-#text3{
+
+#text3 {
     color: #c84d4d;
     padding-top: 10%;
 }
-#text4{
-    color:#c84d4d;
+
+#text4 {
+    color: #c84d4d;
     padding-top: 10%;
 }
-#text0{
+
+#text0 {
     color: #c84d4d;
     padding-top: 10%;
 }
-p{
+
+p {
     color: #c84d4d;
 }
-#pre{
+
+#pre {
     text-align: center;
 }
+
 .bottom-background {
     position: fixed;
-    top:0;
+    top: 0;
     bottom: 0%;
     left: 0%;
     width: 100%;
-    height: 100%; /* Adjust height as needed */
-    background-image: url("img/trendingbg.mp4"); /* Your moving background image */
+    height: 100%;
+    /* Adjust height as needed */
+    background-image: url("img/trendingbg.mp4");
+    /* Your moving background image */
     background-size: cover;
     background-repeat: no-repeat;
-    z-index: -1; /* Ensure it stays behind other content */
-    right:0%;
+    z-index: -1;
+    /* Ensure it stays behind other content */
+    right: 0%;
 }
-pre{
+
+pre {
     text-align: center;
     color: #c84d4d;
-    
+
 }
+
 .golden-button {
     position: absolute;
-    bottom: 30px; /* Adjust as needed */
+    bottom: 30px;
+    /* Adjust as needed */
     left: 20%;
     text-align: center;
     touch-action: manipulation;
@@ -282,35 +296,33 @@ pre{
     text-transform: uppercase;
     padding: 0 1em;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
-      inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
-      inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
-    background-image: linear-gradient(
-      160deg,
-      #a54e07,
-      #b47e11,
-      #fef1a2,
-      #bc881b,
-      #a54e07
-    );
+        inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
+        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
+    background-image: linear-gradient(160deg,
+            #a54e07,
+            #b47e11,
+            #fef1a2,
+            #bc881b,
+            #a54e07);
     border: 1px solid #a55d07;
     color: rgb(120, 50, 5);
     text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     background-size: 100% 100%;
     background-position: center;
-  }
-  
-  .golden-button:focus,
-  .golden-button:hover {
+}
+
+.golden-button:focus,
+.golden-button:hover {
     background-size: 150% 150%;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
-      inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
+        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
     border: 1px solid rgba(165, 93, 7, 0.6);
     color: rgba(120, 50, 5, 0.8);
-  }
-  
-  .golden-button:active {
+}
+
+.golden-button:active {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
-      inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
-  }
+        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
+}
diff --git a/trending.html b/trending.html
@@ -1,51 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TRENDING DESTINATIONS</title>
     <link rel="stylesheet" href="trending.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+        rel="stylesheet">
+
 </head>
+
 <body>
     <div class="bottom-background">
-        <video autoplay muted loop >
-          <source src="img/trendingbg.mp4">
+        <video autoplay muted loop>
+            <source src="img/trendingbg.mp4">
         </video>
-      </div>
+    </div>
     <h1 id="heading2" style="color: #b47e11;">TRENDING TOURS</h1>
-    <pre id="" style="font-size: x-large;" >Explore the world with confidence through our selection popular tours crafted for those seek
+    <pre id="" style="font-size: x-large;">Explore the world with confidence through our selection popular tours crafted for those seek
                 a perfect blend of discovery and relaxation."
     </pre>
     <div id="container2">
         <div class="niha" id="box5">
             <p>The Kesugi Ridge Trail </p>
             <span class="icon">
                 <i class="fa-regular fa-clock"></i>
-                
+
                 <i class="fa-solid fa-location-dot"></i>
-                
+
                 <a href="Blog/kesugi.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
             </span>
         </div>
         <div class="niha" id="box6">
             <p id="text1">Kepler Track</p>
             <span class="icon">
                 <i class="fa-regular fa-clock"></i>
-                
+
                 <br>
                 <i class="fa-solid fa-location-dot"></i>
-                
+
                 <a href="Blog/kepler.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
             </span>
         </div>
         <div class="niha" id="box7">
             <p id="text2">Du Mont Blanc</p>
             <span class="icon">
                 <i class="fa-regular fa-clock"></i>
-                
+
                 <br>
                 <i class="fa-solid fa-location-dot"></i>
-                
+
 
                 <a href="Blog/dumont.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
             </span>
@@ -54,28 +60,29 @@ <h1 id="heading2" style="color: #b47e11;">TRENDING TOURS</h1>
             <p id="text3">Kashmir </p>
             <span class="icon">
                 <i class="fa-regular fa-clock"></i>
-                
+
                 <br>
                 <i class="fa-solid fa-location-dot"></i>
-                
+
                 <a href="Blog/kashmir.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
             </span>
         </div>
-        <div class="niha"id="box9">
+        <div class="niha" id="box9">
             <p id="text4">Varanasi</p>
             <span class="icon">
                 <i class="fa-regular fa-clock"></i>
-                
+
                 <br>
                 <i class="fa-solid fa-location-dot"></i>
-                
+
                 <a href="Blog/varanasi.html" id="bolgbtn" role="button" class="golden-button">BLOG PAGE</a>
             </span>
         </div>
-        </div>
-        <button id="button1">
-            <a href="./package.html">View all tours</a>
-        </button>
-        <hr>
+    </div>
+    <button id="button1">
+        <a href="./package.html">View all tours</a>
+    </button>
+    <hr>
 </body>
+
 </html>