Add files via upload

eDC-IITD · Dec 19, 2023 · afa256a · afa256a
1 parent 5f31077
commit afa256a
Show file tree

Hide file tree

Showing 4 changed files with 368 additions and 0 deletions.
diff --git a/back.jpg b/back.jpg
diff --git a/front.png b/front.png
diff --git a/index.html b/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Zoom On Scroll | Parallax Effect | HTML, CSS & JQuery</title>
+  <link rel="stylesheet" href="main.css" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap">
+</head>
+
+<body>
+  <div class="heading-container">
+    <h1 class="big-heading">Becon-24</h1>
+  </div>
+
+  <div class="heading-container1">
+    <h1 class="big-heading1">Coming Soon...</h1>
+  </div>
+
+  <div class="foreground-img">
+    <h1>hi</h1>
+    <img src="front.png" alt="">
+  </div>
+
+  <div class="hero-back">
+    <img src="back.jpg" alt="">
+  </div>
+
+  <div class="content"> 
+    <p>The Entrepreneurship Development Cell at IIT Delhi serves as a dedicated hub fostering a culture of innovation and enterprise among the student community. Its mission is to empower aspiring student entrepreneurs, providing essential resources to transform visionary ideas into impactful ventures. From engaging competitions like Muskeeters and Mad for Ad to thought-provoking seminars and immersive workshops, it provides a vibrant space for students to explore, learn, and collaborate. This community thrives on entrepreneurial spirit, making it a space where ideas find wings. for eDC 
+      BECon'24, the flagship Annual Business and Entrepreneurship Conclave at IIT Delhi, asserts its prominence with the 2024 edition on February 3rd and 4th. Anticipating a staggering footfall of 1 lakh+ attendees, BECon serves as India's foremost entrepreneurship conference, creating a dynamic platform for the exchange of ideas among business experts, entrepreneurs, and change-makers.</p> 
+
+    <p>More than a conventional conference, BECon 2024 is a nexus of inspiration and collaboration, uniting students and aspiring change-makers in the pursuit of groundbreaking concepts and innovative solutions. The event's rich lineup of competitions seamlessly connects young talents with the corporate world, shaping an environment where ideas flourish and innovation takes center stage. 
+
+      Beyond the entrepreneurial hustle, BECon is a celebration of creativity and joy. Amidst groundbreaking discussions and intense competitions, we also immerse ourselves in the rhythm of dance and other exhilarating activities. Join us at BECon, where innovation meets enjoyment, and every moment is a celebration of success, passion, and the sheer joy of connecting! 
+      </p> 
+</div> 
+
+  <div class="container mt-5">
+    <div class="row">
+      <div class="col-sm-12">
+        <div id="countdown" class="text-center mt-4"></div>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    $(window).scroll(function() {
+      var scrollPos = $(this).scrollTop();
+      $(".hero-back img").css({
+        'transform': 'scale(' + (1 + scrollPos / 100) + ')'
+      });
+    });
+  </script>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+  <script>
+    const countDownDate = new Date("December 30, 2023 23:59:59").getTime();
+    const countdownElement = document.getElementById("countdown");
+
+    const countdownFunction = setInterval(function() {
+      const now = new Date().getTime();
+      const distance = countDownDate - now;
+
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      const colo = ":";
+
+      countdownElement.innerHTML = `
+        <div class="row">
+          <div class="col">
+            <div class="display-4">${days}</div>
+            <div>Days</div>
+          </div>
+          <div class="col">
+            <div class="display-4">${colo}</div>
+            <div></div>
+          </div>
+          <div class="col">
+            <div class="display-4">${hours}</div>
+            <div>Hours</div>
+          </div>
+          <div class="col">
+            <div class="display-4">${colo}</div>
+            <div></div>
+          </div>
+          <div class="col">
+            <div class="display-4">${minutes}</div>
+            <div>Minutes</div>
+          </div>
+          <div class="col">
+            <div class="display-4">${colo}</div>
+            <div></div>
+          </div>
+          <div class="col">
+            <div class="display-4">${seconds}</div>
+            <div>Seconds</div>
+          </div>
+        </div>
+      `;
+
+      if (distance < 0) {
+        clearInterval(countdownFunction);
+        countdownElement.innerHTML = "EXPIRED";
+      }
+    }, 1000);
+  </script>
+
+  <div class="container mt-3">
+    <div class="row justify-content-center">
+      <button class="button-26" role="button">Register Now</button>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,243 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #122D4C;
+  background-size: cover;
+  position: relative;
+  height: 100%;
+}
+
+.hero-back {
+  width: 100%;
+  height: 100vh;
+  background: url(back.png) no-repeat 50% 50%;
+  background-size: cover;
+  position: relative;
+  overflow: hidden;
+  opacity: 0.8;
+}
+
+.hero-back img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: center top;
+  transition: transform 0.3s ease-out;
+}
+
+.foreground-img {
+  position: absolute;
+  top: -20%;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 2;
+}
+
+.foreground-img img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.hero-back {
+  z-index: 1;
+}
+
+
+.heading-container {
+  position: absolute;
+  top: 11%;
+  left: 53%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 3;
+}
+
+.heading-container1 {
+  position: absolute;
+  top: 45%;
+  left: 53%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 3;
+}
+
+.big-heading,
+.big-heading1 {
+  font-size: 4em;
+  color: #fff;
+  font-family: 'Playfair Display', serif;
+  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
+  margin-bottom: 20px;
+  letter-spacing: 1px;
+  font-style: italic;
+}
+
+.big-heading1 {
+  font-size: 5em;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.big-heading:hover,
+.big-heading1:hover {
+  color: #ffcc00;
+  transition: color 0.5s ease-in-out;
+}
+
+.content {
+  width: 100%;
+  max-width: 90%;
+  margin: auto;
+  padding: 40px;
+  top: 10%;
+  font-family: 'Playfair Display', serif;
+  line-height: 2;
+  color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.content p {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.content p:first-of-type {
+  font-size: 0.95em;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.content strong {
+  color: #ff3366;
+}
+
+.content a {
+  color: #00ffcc;
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease-in-out;
+}
+
+.content a:hover {
+  color: #ffcc00;
+}
+
+.content p::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+  pointer-events: none;
+  z-index: -1;
+}
+
+#clockdiv {
+  font-family: sans-serif;
+  color: #fff;
+  display: inline-block;
+  font-weight: 100;
+  text-align: center;
+  font-size: 2vw;
+  margin-inline: 38%;
+  margin-block-end: 3%;
+}
+
+#clockdiv > div {
+  padding: 10px;
+  border-radius: 0.6vw;
+  background: #00bf96;
+  display: inline-block;
+}
+
+#clockdiv div > span {
+  padding: 0.7vw;
+  border-radius: 0.4vw;
+  background: #00816a;
+  display: inline-block;
+}
+
+.smalltext {
+  padding-top: 0.9vw;
+  font-size: 0.9vw;
+}
+
+.button-26 {
+  appearance: button;
+  background-color: #1652F0;
+  border: 1px solid #1652F0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-family: Graphik, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 1.15;
+  overflow: visible;
+  padding: 12px 16px;
+  position: relative;
+  text-align: center;
+  text-transform: none;
+  transition: all 80ms ease-in-out;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 10vw;
+  margin-inline: 45%;
+  margin-block-end: 5%;
+}
+
+.button-26:disabled {
+  opacity: 0.5;
+}
+
+.button-26:focus {
+  outline: 0;
+}
+
+.button-26:hover {
+  background-color: #0A46E4;
+  border-color: #0A46E4;
+}
+
+.button-26:active {
+  background-color: #0039D7;
+  border-color: #0039D7;
+}
+
+#countdown {
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  color: #fff;
+  text-align: center;
+  font-size: 2vw;
+  margin-block-end: 3%;
+}
+
+#countdown > div {
+  padding: 10px;
+  border-radius: 1.6vw;
+  background: black;
+  display: inline-flex;
+  margin: 5px;
+}
+
+#countdown div > span {
+  padding: 0.7vw;
+  border-radius: 1.4vw;
+  background: #00816a;
+  display: inline-block;
+}
+
+.smalltext {
+  font-size: 1.9vw;
+}