Add files via upload

gursewak8642 · Dec 19, 2023 · ef1fe7b · ef1fe7b
1 parent 9b43194
commit ef1fe7b
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 0 deletions.
diff --git a/background.png b/background.png
diff --git a/foreground.png b/foreground.png
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parallax Website</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div id="wrapper">
+      <div class="container">
+        <img src="background.png" alt="Background" class="background" />
+        <img src="foreground.png" alt="foreground" class="foreground" />
+        <h1>ADVENTURE</h1>
+      </div>
+      <section>
+        <h2 class="secondHeading">Adventure Time</h2>
+        <p class="text">
+          Adventure time embodies the spirit of exploration and excitement, beckoning individuals to break free from routine and embrace the unknown. It's a canvas where enthusiasts paint their stories with daring escapades, whether scaling lofty peaks, navigating untamed waters, or embarking on spontaneous road trips. The clock ticks differently in the realm of adventure, where uncertainty becomes a thrilling companion. Each moment becomes a chapter in a personal narrative, fostering resilience, courage, and an enduring appreciation for life's unexpected twists. Adventure time is not merely a break from the ordinary; it's a transformative journey that rekindles the flame of curiosity and fuels the soul with the unmatched vitality of the untamed outdoors.
+        </p>
+
+        <div class="bg bg1">
+          <h2 class="desc">BIKING</h2>
+        </div>
+        <p class="text">
+          Biking, a dynamic adventure on two wheels, propels enthusiasts into a world of speed, skill, and exploration. Whether navigating rugged mountain trails or cruising along scenic roads, the rhythmic pedal strokes create a symphony of motion. The wind becomes a companion as bikers embrace the thrill of the ride, conquering challenging terrains with each turn of the crank. Beyond the physical exertion, biking is a journey of discovery—unveiling hidden landscapes and pushing personal limits. From the adrenaline rush of downhill descents to the quiet satisfaction of conquering uphill climbs, biking is a versatile and invigorating pursuit that fosters a deep connection between rider and the ever-changing outdoor terrain.
+        </p>
+
+        <div class="bg bg2">
+          <h2 class="desc1">PARA GLIDING</h2>
+        </div>
+        <p class="text">
+          Paragliding, a breathtaking aerial pursuit, unlocks the boundless skies for thrill-seekers. Suspended beneath a colorful wing, adventurers soar with the wind, defying gravity's constraints. The sensation of flight is both liberating and exhilarating as paragliders navigate currents, gaining a bird's-eye view of landscapes below. Harnessing wind currents and thermals, they weave gracefully through the air, experiencing a profound sense of freedom. Paragliding is more than a sport; it's a fusion of adrenaline, tranquility, and a unique communion with the sky. Whether soaring over majestic mountains or coastal cliffs, every glide is an extraordinary journey, connecting enthusiasts to the vast, open expanses that beckon from above.
+        </p>
+
+        <div class="bg bg3">
+          <h2 class="desc">SURFING</h2>
+        </div>
+        <p class="text">
+          Surfing is more than a sport; it's a captivating dance with the ocean's rhythmic energy. As surfers paddle into the vast expanse, they become one with the rolling waves, skillfully riding the tide on a sleek board. The adrenaline surges as they carve through the water, finding a delicate balance between power and finesse. The sea becomes a dynamic playground, offering an ever-changing canvas for surfers to showcase their prowess. Beyond the physical demands, surfing instills a deep connection to nature—a communion of wind, water, and surfer. Each wave tells a unique story, making every ride a thrilling and immersive journey into the heart of the ocean's timeless allure.
+        </p>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/sport-1.jpg b/sport-1.jpg
diff --git a/sport-2.jpg b/sport-2.jpg
diff --git a/sport-3.jpg b/sport-3.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,96 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: cursive;
+}
+#wrapper {
+  height: 100vh;
+  overflow: auto;
+  overflow-x: hidden;
+  perspective: 10px;
+}
+.container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-style: preserve-3d;
+  z-index: -1;
+}
+.background {
+  transform: translatez(-49px) scale(6);
+}
+.foreground {
+  transform: translateZ(-20px) scale(3);
+}
+.background,
+.foreground {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+h1 {
+  position: absolute;
+  top: 5rem;
+  font-size: 10rem;
+  color: white;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  letter-spacing: 4px;
+}
+section {
+  background-color: rgb(45, 45, 45);
+  color: white;
+  padding: 5rem 0;
+}
+.secondHeading {
+  font-size: 5rem;
+  padding: 0 10rem;
+}
+.text {
+  font-size: 1.5rem;
+  padding: 0 10rem;
+  margin: 5rem 0;
+}
+.bg{
+  position: relative;
+  width: 100%;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+  height: 500px;
+}
+.desc{
+  position: absolute;
+  background-color: white;
+  padding: 0.5rem 2.5rem;
+  top:40%;
+  left: 60%;
+  transform:translateX(-50%) translateX(-50%);
+  color:black;
+  font-size: 3.5rem;
+  font-weight:600 ;
+}
+.desc1{
+  position: absolute;
+  background-color: white;
+  padding: 0.5rem 2.5rem;
+  top:40%;
+  left: 66%;
+  transform:translateX(-50%) translateX(-50%);
+  color:black;
+  font-size: 3.5rem;
+  font-weight:600 ;
+}
+.bg1 {
+  background-image: url(sport-1.jpg);
+}
+.bg2 {
+  background-image: url(sport-2.jpg);
+}
+.bg3 {
+  background-image: url(sport-3.jpg);
+}