Merge branch 'PritamSarbajna:main' into main

PritamSarbajna · Aug 5, 2023 · 65302b9 · 65302b9
2 parents 2a80c66 + 9420cc8
commit 65302b9
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 11 deletions.
diff --git a/css/responsive.css b/css/responsive.css
@@ -46,6 +46,31 @@
     margin: 30px auto;
   }
 }
+
+@media screen and (max-width: 1440px) {
+	 .containerx {
+	  top: 40%;
+	  bottom: 40%;
+	  transform-style: preserve-3d;
+	}
+
+	#about_us div {
+		padding: 10px;
+		display: block;
+		align-items: normal;
+	}
+
+	.cards {
+		position: relative;
+		width: 90vw;
+		height: 100%;
+	}
+
+	#about-quad {
+		display: none;
+	}
+}
+
 @media only screen and (max-width: 850px) {
   /*events*/
   .row {

diff --git a/css/style.css b/css/style.css
@@ -375,6 +375,27 @@ section {
   margin: 30px 0px 0px 0px;
 }
 
+#about_us div {
+  padding: 10px;
+  display: grid;
+  align-items: center; 
+  grid-template-columns: 2fr 1fr 1fr;
+  column-gap: 5px;
+  position: relative;
+}
+
+
+#about_us div span {
+  margin: 0;
+  position: absolute;
+  top: 60%;
+  opacity: 0;
+  left: 80%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  transition: 1s;
+}
+
 #about_us p {
   width: 43em;
   color: white;
@@ -790,4 +811,79 @@ body.dark{
   }
 }
 
-/* end */
+
+/* carousel */
+
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
+
+
+input[type=radio] {
+  display: none;
+}
+
+.cardt {
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 5vw;
+  right: 0;
+  top: 14%;
+  margin: auto;
+  transition: transform .4s ease;
+  cursor: pointer;
+}
+
+.containerx {
+  width: 100%;
+  height: 50vh;
+  transform-style: preserve-3d;
+}
+
+.cards {
+  position: relative;
+  width: 100vh;
+  height: 100%;
+}
+
+.cards label img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+#item-1:checked ~ .cards #col-img-3, #item-2:checked ~ .cards #col-img-1, #item-3:checked ~ .cards #col-img-2 {
+  transform: translatex(-40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+}
+
+#item-1:checked ~ .cards #col-img-2, #item-2:checked ~ .cards #col-img-3, #item-3:checked ~ .cards #col-img-1 {
+  transform: translatex(40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+}
+
+#item-1:checked ~ .cards #col-img-1, #item-2:checked ~ .cards #col-img-2, #item-3:checked ~ .cards #col-img-3 {
+  transform: translatex(0) scale(1);
+  opacity: 1;
+  z-index: 1;
+
+  img {
+    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
+  }
+}
+
+#item-2:checked ~ .player #test {
+  transform: translateY(0);
+}
+
+#item-2:checked ~ .player #test  {
+  transform: translateY(-40px);
+}
+
+#item-3:checked ~ .player #test  {
+  transform: translateY(-80px);
+}
+
+/* end */
diff --git a/img/carousel-img1.jpg b/img/carousel-img1.jpg
diff --git a/img/carousel-img2.jpg b/img/carousel-img2.jpg
diff --git a/img/carousel-img3.jpg b/img/carousel-img3.jpg
diff --git a/img/mountain.png b/img/mountain.png
diff --git a/img/mountain_dark.jpg b/img/mountain_dark.jpg
diff --git a/index.html b/index.html
@@ -10,14 +10,14 @@
     <link rel="stylesheet" href="css/responsive.css">
     <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="im/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
 </head>
-<body>
+<body onload='if (window.location.href.substr(window.location.href.length - 6) == "#about") { introAboutLogoTransition(); }'>
     <!--navbar-->
     <nav class="navbar glass" style="height: 70px;">
-        <span><a href="#home" style="display:flex; align-items: center;"><img class="img2"src="https://drive.google.com/uc?export=view&id=18w44M_wq9TbQlwsK126yf8IAin4VxGiK" width="40"
-            style="margin: -25px -10px -25px -20px"><h1 class="logo">ADVENTURE</h1></a></span>
+        <span><a href="#home" style="display:flex; align-items: center;"><img class="img2" src="./img/mountain.png" width="40"
+            style="margin: -25px -10px -25px -20px"><h1 class="logo">&nbsp;ADVENTURE</h1></a></span>
         <ul class="nav-links">
             <li><a href="#home" id="pri" class="active cir_border">Home</a></li>
             <li><a href="#events"  id="sec" class="cir_border">Tours</a></li>
@@ -43,7 +43,7 @@
             <h2  id="quote">Explore the colourful World</h2>
             <div class="line"></div>
             <h1 >A WONDERFUL GIFT </h1>
-            <a href="#" class="ctn">Learn more</a>
+            <a href="#about" class="ctn" onclick='removeall(); $("#quad").css("border", "2px solid whitesmoke"); $("#quad").css("border-radius", "20px");'>Learn more</a>
         </div>
     </header>
 
@@ -96,7 +96,7 @@ <h1>EXPLORE THE WORLD</h1>
             <div class="col content-col">
                 <h1 class="font-color">UPCOMING TOURS & DESTINATION</h1>
                 <div class="line"></div>
-                <p>Wed 28 sept 2023 : Port of Spain City Tour and Birdseye Fort View . </br>
+                <p>Wed 28 sept 2023 : Port of Spain City Tour and Birdseye Fort View. </br>
                    Sat 1 oct 2023 : Tour the Gasparee Caves.</br>
                    Tues 4 oct 2023 : Trinidad North Coast Experience. </br> 
                     and many more ......
@@ -112,6 +112,7 @@ <h1 class="font-color">UPCOMING TOURS & DESTINATION</h1>
                 </div>
             </div>
         </div>
+        <br><br><br><br>
     </section>
     <!--tours-->
 
@@ -121,11 +122,26 @@ <h1 class="font-color">UPCOMING TOURS & DESTINATION</h1>
             <h1 class="font-color">About Us</h1>
             <div class="line"></div>
         </div>
+        <br>
         <div id="about_us">
             <div class="boxx">
-                <p>Inspire you to explore World tours beyond the usual well-known locations. Heritage Tours of World. Art & Culture Tours. Wildlife with Game Drive.
-                    Our experienced travel experts design the trips covering the most famous tourist destinations, including sightseeing and accommodation at fine quality hotels. We aim at providing guests with the best of each country.
-                </br></br>Explore the different horizons of the world with us and create memories for a lifetime.</p>
+                <div class="containerx">
+					<input type="radio" name="slider" id="item-1" checked>
+					<input type="radio" name="slider" id="item-2">
+					<input type="radio" name="slider" id="item-3">
+				  <div class="cards">
+					<label class="cardt" for="item-1" id="col-img-1">
+					  <img src="./img/carousel-img1.jpg">
+					</label>
+					<label class="cardt" for="item-2" id="col-img-2">
+					  <img src="./img/carousel-img2.jpg">
+					</label>
+					<label class="cardt" for="item-3" id="col-img-3">
+					  <img src="./img/carousel-img3.jpg">
+					</label>
+				  </div>
+				</div>
+                <span id="about-quad"><a href="#home"><center><h1 style="font-family: var(--ff-montserrat); color: white;">Find that</h1><br><img class="img2" src="./img/mountain_dark.jpg" width="200" style="border-radius: 12%;"><br><h1 class="logo" style="font-size: 50px;">ADVENTURE</h1></a></center></span>
             </div>
         </div>
     </section>

diff --git a/js/script.js b/js/script.js
@@ -32,9 +32,24 @@ $("#hex").on("click", function () {
   $("#hex").css("border-radius", "20px");
 });
 
+$("#about").on("mouseover", function () {
+  introAboutLogoTransition();
+});
+
+$('input').on('change', function() {
+  $('body').toggleClass('blue');
+});
+
+
+
 // Light/Dark toggle
 const checkbox = document.getElementById('checkbox');
 
+function introAboutLogoTransition() {
+  $("#about-quad").css("top", "70%");
+  $("#about-quad").css("opacity", "1");
+}
+
 function checkDarkMode(){
   if (localStorage.getItem("tourism_website_darkmode") !== null && localStorage.getItem("tourism_website_darkmode") === "true") {
     document.body.classList.add('dark');
@@ -67,4 +82,4 @@ function scrollFunction() {
 function topFunction() {
   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0; 
-}
+}