upload

rshorche · Jan 29, 2024 · 24b89b2 · 24b89b2
commit 24b89b2
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/app.js b/app.js
@@ -0,0 +1,23 @@
+let text = document.getElementById("text");
+let tree = document.getElementById("tree");
+let gateLeft = document.getElementById("gate-left");
+let gateRight = document.getElementById("gate-right");
+let zombie = document.getElementById("zombie");
+let sec2Img = document.getElementById("sec2-img");
+let sec2Text = document.getElementById("sec2-text");
+let sec3 = document.getElementById("sec3");
+let sec4 = document.getElementById("sec4");
+
+window.addEventListener("scroll", () => {
+  let value = window.scrollY;
+  console.log(value);
+  text.style.top = value * -1.1 + "px";
+  tree.style.left = value * -1.5 + "px";
+  tree.style.top = value * -1.5 + "px";
+  gateLeft.style.translate = value * -2 + "px";
+  gateRight.style.translate = value * 2 + "px";
+  sec2Img.style.translate = value * -0.1 + "px";
+  sec2Text.style.translate = value * 0.08 + "px";
+  sec3.style.translate = value * 0.1 + "px";
+  sec4.style.translate = value * -0.1 + "px";
+});
diff --git a/assets/1.jfif b/assets/1.jfif
diff --git a/assets/2.jfif b/assets/2.jfif
diff --git a/assets/3.jpg b/assets/3.jpg
diff --git a/assets/4.jpg b/assets/4.jpg
diff --git a/assets/5.jpeg b/assets/5.jpeg
diff --git a/assets/images/about-pic.jpg b/assets/images/about-pic.jpg
diff --git a/assets/images/bat_animation.gif b/assets/images/bat_animation.gif
diff --git a/assets/images/footer-bg.jpg b/assets/images/footer-bg.jpg
diff --git a/assets/images/gate.png b/assets/images/gate.png
diff --git a/assets/images/halloween.jpg b/assets/images/halloween.jpg
diff --git a/assets/images/one.jpg b/assets/images/one.jpg
diff --git a/assets/images/thre.jpg b/assets/images/thre.jpg
diff --git a/assets/images/tree.png b/assets/images/tree.png
diff --git a/assets/images/two.jpg b/assets/images/two.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style/style.css">
+    <title>Halloween</title>
+</head>
+
+<body>
+    <header>
+        <h2 class="logo">logo</h2>
+        <nav class="nav">
+            <a class="active" href="#">Home <span></span></a>
+            <a href="#">Aboute <span></span></a>
+            <a href="#">Services <span></span></a>
+            <a href="#">Contact <span></span></a>
+        </nav>
+    </header>
+
+    <section class="parallax">
+        <h2 id="text">The Halloween Party
+        </h2>
+        <img id="bat" src="assets/images/bat_animation.gif" alt="">
+        <img id="tree" src="assets/images/tree.png" alt="tree">
+        <img id="gate-left" src="assets/images/gate.png" alt="">
+        <img id="gate-right" src="assets/images/gate.png" alt="">
+    </section>
+    <section class="sec2">
+        <img id="sec2-img" src="assets/images/about-pic.jpg" alt="">
+        <div id="sec2-text">
+            <span>About Us</span>
+            <h2>Trick or Treat? Boo!</h2>
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
+                and scrambled it to make a type specimen book.
+
+                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+                essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                containing Lorem Ipsum passages
+            </p>
+            <button>Get to know us</button>
+
+        </div>
+    </section>
+    <section class="sec3">
+        <span>Evening Program
+        </span><br>
+        <h3>Let the Party Begin!
+        </h3>
+        <div class="sec3-box" id="sec3">
+            <div>
+                <img src="assets/images/one.jpg" alt="">
+                <h2>Vampire Initiation Ritual </h2>
+                <p>It has survived not only five centuries, but also the leap into electronic.. </p>
+            </div>
+            <div>
+                <img src="assets/images/two.jpg" alt="">
+                <h2>Vampire Initiation Ritual </h2>
+                <p>It has survived not only five centuries, but also the leap into electronic.. </p>
+            </div>
+            <div>
+                <img src="assets/images/thre.jpg" alt="">
+                <h2>Vampire Initiation Ritual </h2>
+                <p>It has survived not only five centuries, but also the leap into electronic.. </p>
+            </div>
+            < </div>
+
+    </section>
+    <section class="sec4">
+        <span>Artists And Animators </span>
+        <h3>Fun and Fear this Night! </h3>
+        <div class="sec4-box" id="sec4">
+            <div>
+                <img src="assets/1.jfif" alt="">
+                <h4>Raino Due</h4>
+                <p>Death</p>
+            </div>
+            <div>
+                <img src="assets/2.jfif" alt="">
+                <h4>Raino Due</h4>
+                <p>Death</p>
+            </div>
+            <div>
+                <img src="assets/3.jpg" alt="">
+                <h4>Raino Due</h4>
+                <p>Death</p>
+            </div>
+            <div>
+                <img src="assets/4.jpg" alt="">
+                <h4>Raino Due</h4>
+                <p>Death</p>
+            </div>
+            <div>
+                <img src="assets/5.jpeg" alt="">
+                <h4>Raino Due</h4>
+                <p>Death</p>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div>
+            <h2>logo</h2>
+            <p class="footer-aboute">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
+                Ipsum has been the
+                industry's standard
+            </p>
+        </div>
+        <div>
+            <h2>Quick Links </h2>
+            <a href="#">Home </a>
+            <a href="#">Aboute </a>
+            <a href="#">Services </a>
+            <a href="#">Contact </a>
+        </div>
+        <div>
+            <h2>Our Address </h2>
+            <p> 40 Part Ave. Centraly Jc Road </p>
+            <p> +880 1723 456 </p>
+            <p> [email protected] </p>
+        </div>
+    </footer>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,196 @@
+@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  background: url("../assets/images/halloween.jpg") no-repeat;
+  font-family: "Creepster";
+  overflow-x: hidden;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+  font-size: 1.5rem;
+}
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1% 5%;
+  z-index: 100;
+}
+header h2 {
+  color: #cf6400;
+}
+.nav a {
+  z-index: 10;
+  position: relative;
+  color: #fff;
+  text-decoration: none;
+  margin-left: 2rem;
+  padding: 0.2rem 0.5rem;
+  line-height: 1.4;
+}
+.nav a span {
+  transform: scale(0);
+}
+.nav a:hover span,
+.active {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  background-color: #fff;
+  border-radius: 2rem;
+  z-index: -1;
+  transition: 0.2s;
+  transform: scale(1);
+}
+.nav a:hover,
+a.active {
+  color: #cf6400;
+}
+
+.parallax {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.parallax #text {
+  position: absolute;
+  top: 10%;
+  color: #cf6400;
+  font-size: 5rem;
+  text-shadow: 2px 4px 5px #000;
+  z-index: -1;
+}
+.parallax #bat {
+  position: absolute;
+  bottom: -100%;
+}
+.parallax #tree {
+  position: absolute;
+  left: 0;
+}
+.parallax #gate-left {
+  transform: translateX(-150px);
+}
+.parallax #gate-right {
+  transform: translateX(150px);
+}
+.sec2 {
+  margin-top: 35rem;
+  background-color: #000;
+  color: #fff;
+  padding: 2rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.sec2 div {
+  width: 50%;
+}
+.sec2 span {
+  color: #cf6400;
+}
+.sec2 p {
+  font-family: "Lucida Sans";
+}
+.sec2 button {
+  background-color: #cf6400;
+  color: #fff;
+  border-radius: 2rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  margin-top: 1rem;
+}
+.sec3 {
+  background-color: #000;
+  color: #fff;
+  padding: 2rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sec3 span{
+  color: #cf6400;
+
+}
+.sec3-box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4rem;
+}
+.sec3-box div {
+  width: 30%;
+}
+.sec3-box img {
+  width: 100%;
+  background-size: cover;
+}
+.sec3-box h2 {
+  color: #cf6400;
+}
+.sec3-box p {
+  font-family: "Lucida Sans";
+}
+
+.sec4 {
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0;
+}
+.sec4 span {
+  color: #cf6400;
+}
+.sec4-box {
+  margin: 3rem 0;
+  display: flex;
+  justify-content: space-between;
+}
+.sec4-box div {
+  width: 400px;
+  display: block;
+}
+.sec4-box img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+.sec4-box h4 {
+  margin: 0.5rem 0;
+  color: #cf6400;
+}
+footer {
+  background: url("/assets/images/footer-bg.jpg") no-repeat;
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  justify-content: space-between;
+  padding: 5rem;
+}
+footer a {
+  color: #fff;
+  text-decoration: none;
+  display: block;
+}
+footer h2 {
+  color: #cf6400;
+}
+footer p {
+  color: #fff;
+}
+.footer-aboute {
+  width: 300px;
+  font-family: "Lucida Sans";
+}