Added Event Page

Prakrati1907 · Jan 8, 2024 · 99cb441 · 99cb441
1 parent 940a421
commit 99cb441
Show file tree

Hide file tree

Showing 14 changed files with 350 additions and 7 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -61,6 +61,7 @@ h3{
     border-bottom: 2px solid rgba(255, 255, 255, 0.2);
     position: sticky;
     top:0;
+    z-index: 2;
 }
 
 .website-title{
@@ -345,6 +346,148 @@ h3{
   margin:1rem;
 }
 
+/* ------------------------------------------ */
+
+        /* Styling for Events Page */ 
+
+/* -------------------------------------------- */
+.slider-container {
+  margin: 0;
+  padding-top: 2rem;
+  /* height: 70vh; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.slider {
+  max-width: 70%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.slides {
+  width: 500%;
+  /* height: 400px; */
+  display: flex;
+}
+.slides input {
+  display: none;
+}
+.slide {
+  width: 20%;
+  transition: 2s;
+}
+.slide img {
+  width: 100%;
+  /* height: 400px; */
+  aspect-ratio: 16 / 9;
+}
+
+#radio1:checked ~ .first {
+  margin-left: 0;
+}
+#radio2:checked ~ .first {
+  margin-left: -20%;
+}
+#radio3:checked ~ .first {
+  margin-left: -40%;
+}
+#radio4:checked ~ .first {
+  margin-left: -60%;
+}
+
+/* css for events cards  */
+.container-card{
+  width:90%;
+  margin: auto;
+}
+
+.events {
+  display: flex;
+  flex-wrap:wrap;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 30px;
+}
+
+.card {
+  position: relative;
+  width: 400px;
+  height: 230px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: all 0.7s ease-in-out;
+  font-weight: 900;
+  font-size: 3rem;
+  margin: 3rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.card.techBuzz{
+  background-image: url(../images/Events/Techbuzz.JPG);
+}
+
+.card.techMania{
+  background-image: url(../images/Events/TechMania.jpg);
+}
+
+.coming-soon{
+  background-image: url(../images/Events/Coming\ soon.jpg);
+  /* background-color: black; */
+}
+
+.card:hover {
+  cursor: pointer;
+  transform: scale(1.2);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(40px);
+}
+
+.card:hover .name {
+  scale: 0;
+  transition: all 0.4s ease-in-out;
+}
+
+.details {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0%, 0%);
+  width: 90%;
+  height: 90%;
+  padding: 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(3px) saturate(50%);
+  background-color: rgba(178, 50, 195, 0.5);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.125);
+  opacity: 0;
+  transition: all 0.7s ease-in-out;
+}
+
+.card:hover .details {
+  transform: translate(-50%, -50%) rotate(5deg);
+  opacity: 1;
+  border-radius: 10px;
+}
+
+.title {
+  margin: 0;
+  font-size: 24px;
+  color: #eee;
+  font-weight: 700;
+}
+
+.description {
+  margin: 10px 0 0;
+  font-size: 14px;
+  color: #fff;
+  line-height: 1.4;
+}
+
 /* ------------------------------------------ */
 
         /* Styling for Responsiveness */ 

diff --git a/events.html b/events.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Funtech Club</title>
+
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="./css/styles.css">
+
+    <!-- Favicon -->
+    <link rel="icon" href="images/Home/Funtech-favicon.png">
+
+    <!-- Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Kanit:wght@500&family=Lora&family=Montserrat&family=Tektur&display=swap" rel="stylesheet">
+
+    <!-- Font Awesome -->
+    <script src="https://kit.fontawesome.com/2397a0c019.js" crossorigin="anonymous"></script>
+
+</head>
+<body>
+
+    <!-- Header -->
+    <nav class="navbar">
+        <div class="website-title">
+            <img class="website-logo" src="images/Home/Funtech-logo.png" alt="Website-Logo" >
+            <h1 class="heading neon-text" data-text="FunTech">FUNTECH</h1>
+        </div>
+
+        <ul class="features">
+            <li class="feature-item"><a class="nav-item" href="#">Home</a></li>
+            <li class="feature-item"><a class="nav-item" href="#">About</a></li>
+            <!-- <li><a class="nav-item" href="#">Events</a></li> -->
+            <li class="feature-item dropdown">
+                <a href="events.html" class="nav-item">Events</a>
+                <!-- <div class="dropdown-content">
+                    <ul>
+                        <li class="dropdown-list"><a class="dropdown-item" href="#">Past Events</a></li>
+                        <li class="dropdown-list"><a class="dropdown-item" href="#">Future Events</a></li>
+                    </ul>
+                </div> -->
+            </li>
+            <li class="feature-item"><a class="nav-item" href="#">Register</a></li>
+            <li class="feature-item"><a class="nav-item" href="#">Members</a></li>
+            <li class="feature-item"><a class="nav-item" href="#">Contact</a></li>
+        </ul>
+        <div class="navbar-btn">
+            <img class="nav-icon menu" src="images/Home/Hamburger-menu.png" alt="hamburger" >
+            <img class="nav-icon close" src="images/Home/Cross.png" alt="hamburger" >
+        </div>
+    </nav>
+
+    <!-- image slider -->
+    <div class="slider-container">
+        <div class="slider">
+          <div class="slides">
+            <!-- radio buttons -->
+            <input type="radio" name="radio-btn" id="radio1" />
+            <input type="radio" name="radio-btn" id="radio2" />
+            <input type="radio" name="radio-btn" id="radio3" />
+            <input type="radio" name="radio-btn" id="radio4" />
+            <!-- radio buttons end -->
+
+            <!-- slide images -->
+            <div class="slide first">
+              <img src="/images/Events/Techbuzz.JPG" alt="" />
+            </div>
+            <div class="slide">
+              <img src="/images/Events/TechBuzz2.jpg" alt="" />
+            </div>
+            <div class="slide">
+              <img src="/images/Events/TechMania.jpg" alt="" />
+            </div>
+            <div class="slide">
+              <img src="/images/Events/Techmania2.jpg" alt="" />
+            </div>
+            <!-- slide images end -->
+          </div>
+        </div>
+      </div>
+      <!-- image slider end -->
+
+
+      <!-- events cards with description  -->
+      <div class="container-card">
+        <div class="events">
+            <div class="card techBuzz">
+              <div class="name neon-text">TechBuzz</div>
+              <div class="details">
+                <p class="title">Description</p>
+                <p class="description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+                  ad minim veniam, quis nostrud exercitation ullamco. Lorem, ipsum
+                  dolor. 
+                </p>
+              </div>
+            </div>
+            <div class="card techMania">
+              <div class="name neon-text">TechMania</div>
+              <div class="details">
+                <p class="title">Description</p>
+                <p class="description">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+                  ad minim veniam, quis nostrud exercitation ullamco. Lorem, ipsum
+                  dolor. 
+                </p>
+            </div>
+        </div>
+      </div>
+
+      <div class="events">
+        <div class="card coming-soon">
+          <div class="name neon-text">Coming Soon</div>
+          <div class="details">
+            <p class="title">Description</p>
+            <p class="description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+              ad minim veniam, quis nostrud exercitation ullamco. Lorem, ipsum
+              dolor. 
+            </p>
+          </div>
+        </div>
+        <div class="card coming-soon">
+          <div class="name neon-text">Coming Soon</div>
+          <div class="details">
+            <p class="title">Description</p>
+            <p class="description">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+              ad minim veniam, quis nostrud exercitation ullamco. Lorem, ipsum
+              dolor. 
+            </p>
+          </div>
+        </div>
+      </div>
+      </div>
+
+<!-- events cards end  -->
+
+<!-- Contact -->
+<footer class="footer">
+    <section class="container">
+        <div class="row">
+            <div class="footer-col">
+                <h4>Contact Us</h4>
+                <ul class="footer-list">
+                    <li><a href="#">Instagram</a></li>
+                    <li><a href="#">LinkedIn</a></li>
+                    <li><a href="#">Facebook</a></li>
+                    <li><a href="#">X (Twitter)</a></li>
+                </ul>
+            </div>
+            <div class="footer-col">
+                <h4>Get Help</h4>
+                <ul class="footer-list">
+                    <li><a href="#">FAQ</a></li>
+                    <li><a href="#">Call Us</a></li>
+                    <li><a href="#">Mail Us</a></li>
+                </ul>
+            </div>
+            <div class="footer-col">
+                <h4>Help Us Serve You Better</h4>
+                <ul class="footer-list">
+                    <li><a href="#">Suggestion</a></li>
+                    <li><a href="#">Feedback</a></li>
+                </ul>
+            </div>
+            <div class="footer-col">
+                <h4>Follow us</h4>
+                <div class="social-links">
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                    <a href="#"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+                </div>
+            </div>
+        </div>
+        <br>
+        <hr>
+        <p class="copyright">© Funtech Club</p>
+    </section>
+</footer>
+<script src="src/index.js" charset="utf-8"></script>
+
+    </body>
+  </html>
diff --git a/images/Events/Coming soon.jpg b/images/Events/Coming soon.jpg
diff --git a/images/Events/TechBuzz2.jpg b/images/Events/TechBuzz2.jpg
diff --git a/images/Events/TechMania.jpg b/images/Events/TechMania.jpg
diff --git a/images/Events/Techbuzz.JPG b/images/Events/Techbuzz.JPG
diff --git a/images/Events/Techmania2.jpg b/images/Events/Techmania2.jpg
diff --git a/images/Cross.png → images/Home/Cross.png b/images/Cross.png → images/Home/Cross.png
diff --git a/images/Funtech-favicon.png → images/Home/Funtech-favicon.png b/images/Funtech-favicon.png → images/Home/Funtech-favicon.png
diff --git a/images/Funtech-logo.png → images/Home/Funtech-logo.png b/images/Funtech-logo.png → images/Home/Funtech-logo.png
diff --git a/images/Hamburger-menu.png → images/Home/Hamburger-menu.png b/images/Hamburger-menu.png → images/Home/Hamburger-menu.png
diff --git a/images/cordinator-image.jpg → images/Home/cordinator-image.jpg b/images/cordinator-image.jpg → images/Home/cordinator-image.jpg