you-dont-need · SankalpKatiyar · Oct 16, 2024
diff --git a/parallax/.DS_Store b/parallax/.DS_Store
diff --git a/parallax/Untitled.png b/parallax/Untitled.png
diff --git a/parallax/ni.jpg b/parallax/ni.jpg
diff --git a/parallax/parallex website.html b/parallax/parallex website.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="pexels-peter-spencer-663487.jpg">
+    <title>Parallex web page</title>
+    <link rel="stylesheet" href="parallex.css">
+</head>
+
+<body>
+    <div id="wrapper">
+        <!-- in this container we create the paralax effect -->
+        <div class="container">
+            <img src="Untitled.png" alt="image not loaded" id="background">
+            <h1>NATURE</h1>
+        </div>
+        <section
+        >
+            <h3 class="secheading">NATURE SCENES</h3>
+            <P class="text">
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga neque non perspiciatis? Dolor voluptas
+                explicabo earum doloremque quos necessitatibus tempore, natus inventore voluptate et. Consectetur
+                molestiae vitae dignissimos laboriosam tempore, suscipit quae nemo corrupti incidunt maxime impedit!
+                Sequi voluptatem odit repudiandae modi magnam, earum impedit commodi praesentium corrupti error
+                accusantium!
+                <br>
+                <br>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit minus error modi expedita tempore
+                itaque unde, harum provident? Quae, voluptatibus.
+            </P>
+            <div class="bg bg1">
+                    <h2 class="desc">VOLCANO</h2>
+             </div>
+                    <P class="text">
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga neque non perspiciatis? Dolor voluptas
+                        explicabo earum doloremque quos necessitatibus tempore, natus inventore voluptate et. Consectetur
+                        molestiae vitae dignissimos laboriosam tempore, suscipit quae nemo corrupti incidunt maxime impedit!
+                        Sequi voluptatem odit repudiandae modi magnam, earum impedit commodi praesentium corrupti error
+                        accusantium!
+                        <br>
+                        <br>
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit minus error modi expedita tempore
+                        itaque unde, harum provident? Quae, voluptatibus.
+                    </P>
+
+            <div class="bg bg2">
+                <h2 class="desc">WATER FALLS</h2>
+            </div>
+                <P class="text">
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga neque non perspiciatis? Dolor voluptas
+                    explicabo earum doloremque quos necessitatibus tempore, natus inventore voluptate et. Consectetur
+                    molestiae vitae dignissimos laboriosam tempore, suscipit quae nemo corrupti incidunt maxime impedit!
+                    Sequi voluptatem odit repudiandae modi magnam, earum impedit commodi praesentium corrupti error
+                    accusantium!
+                    <br>
+                    <br>
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit minus error modi expedita tempore
+                    itaque unde, harum provident? Quae, voluptatibus.
+                </P>
+
+        <div class="bg bg3">
+            <h2 class="desc">LAKES</h2>
+        </div>
+            <P class="text">
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga neque non perspiciatis? Dolor voluptas
+                explicabo earum doloremque quos necessitatibus tempore, natus inventore voluptate et. Consectetur
+                molestiae vitae dignissimos laboriosam tempore, suscipit quae nemo corrupti incidunt maxime impedit!
+                Sequi voluptatem odit repudiandae modi magnam, earum impedit commodi praesentium corrupti error
+                accusantium!
+                <br>
+                <br>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit minus error modi expedita tempore
+                itaque unde, harum provident? Quae, voluptatibus.
+            </P>
+
+        </section>
+    </div>
+</body>
+
+</html>
diff --git a/parallax/parallex.css b/parallax/parallex.css
@@ -0,0 +1,78 @@
+#wrapper{
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 10px;
+}
+.container{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform-style: preserve-3d;
+    height: 100%;
+    z-index: -1;
+
+}
+#background{
+    transform: translateZ(-40px) scale(5);
+
+}
+#background{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+    object-fit: cover;
+}
+h1{
+    position: absolute;
+    top: 3px;
+    letter-spacing: 5px;
+    color: rgb(210, 195, 195);
+    font-size: 10rem;
+    font-weight: 400;
+    text-shadow: 0 0 10px rgba(0,0,0.3);
+
+}
+.secheading{
+    font-size: 5rem;
+    padding: 0 10;
+}
+.text{
+    font-size: 1rem;
+    padding: 0 10;
+    margin: 3rem 0;
+}
+
+section{
+    background-color: rgb(45, 45 ,45);
+    color: white;
+    padding: 5rem 0;
+}
+.bg1{
+    background-image: url(pexels-tirachard-kumtanom-347145.jpg);
+}
+.bg2{
+    background-image: url(pexels-ray-bilcliff-1493839.jpg);
+}
+.bg3{
+    background-image: url(pexels-eberhard-grossgasteiger-518485.jpg);
+}
+.bg{
+    position: relative;
+    width: 100%;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 350px;
+}
+h2{
+    position: absolute;
+   background-color: white;
+   color: black;
+   padding: 0.5rem 2.5rem;
+   top: 37%;
+   left: 37%;
+   font-size: 1.5rem;
+   font-weight: 600;
+}
diff --git a/parallax/pexels-eberhard-grossgasteiger-518485.jpg b/parallax/pexels-eberhard-grossgasteiger-518485.jpg
diff --git a/parallax/pexels-jaime-reimer-2662116.jpg b/parallax/pexels-jaime-reimer-2662116.jpg
diff --git a/parallax/pexels-liger-pham-1108701.jpg b/parallax/pexels-liger-pham-1108701.jpg
diff --git a/parallax/pexels-peter-spencer-663487.jpg b/parallax/pexels-peter-spencer-663487.jpg
diff --git a/parallax/pexels-pixabay-147411.jpg b/parallax/pexels-pixabay-147411.jpg
diff --git a/parallax/pexels-ray-bilcliff-1493839.jpg b/parallax/pexels-ray-bilcliff-1493839.jpg
diff --git a/parallax/pexels-tirachard-kumtanom-347145.jpg b/parallax/pexels-tirachard-kumtanom-347145.jpg