From 25a30c2f09e23fe633b0d5a84a278114d7277a7d Mon Sep 17 00:00:00 2001 From: BlrChessClub <147967524+BlrChessClub@users.noreply.github.com> Date: Thu, 25 Jul 2024 12:18:47 +0530 Subject: [PATCH] New events design --- test_events.css | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ test_events.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+) diff --git a/test_events.css b/test_events.css new file mode 100644 index 0000000..ef73fec 100644 --- /dev/null +++ a/test_events.css @@ -1,0 +1,132 @@ +.events_section .container { + font-family: 'Roboto', sans-serif; + max-width: 1170px; + margin: 0 auto; +} + +.events_section .event-slider { + display: flex; + overflow-x: hidden; + margin: 0 -10px; + padding: 20px; +} + +.events_section .event-card { + flex: 0 0 calc(33.333% - 20px); + margin: 0 10px; + border: none; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease-in-out; + background-color: #fff; + height: 100%; +} + +.events_section .event-card:hover { + transform: scale(1.05); +} + +.events_section .event-image { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 15px 15px 0 0; +} + +.events_section .event-details { + padding: 20px; +} + +.events_section .event-name { + font-size: 1.5em; + margin-top: 10px; + color: #4CAF50; + font-weight: bold; + text-transform: uppercase; + font-family: 'Roboto', sans-serif; + background: linear-gradient(45deg, #3498db, #e74c3c); + -webkit-background-clip: text; + color: transparent; +} + +.events_section .event-datetime, +.events_section .event-venue { + margin-bottom: 10px; + color: #555; + font-size: 1em; +} + +.events_section .event-venue::before { + content: "\f041"; + font-family: FontAwesome; + margin-right: 5px; + color: #FF5733; +} + +.events_section .event-datetime::before { + content: "\f073"; + font-family: FontAwesome; + margin-right: 5px; + color: #3498db; +} + +.events_section .button-container { + display: flex; + justify-content: space-between; +} + +.events_section .read-more-text a { + text-decoration: none; + color: #3498db; + transition: color 0.3s; +} + +.events_section .read-more-text a:hover { + color: #217dbb; +} + +.events_section .event-book { + background-color: #c6e5ee; + padding: 20px; + text-align: center; +} + +.events_section .combine-book-button { + padding: 12px 25px; + font-weight: bold; + color: #333; + background-color: #FFD700; + border: none; + border-radius: 30px; + cursor: pointer; + transition: background-color 0.3s; +} + +.events_section .combine-book-button:hover { + background-color: #e6c900; +} + +.events_section .slider_navigation { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.events_section .prev_button, +.events_section .next_button { + font-size: 2em; + background-color: #3498db; + color: #fff; + border: none; + border-radius: 50%; + cursor: pointer; + padding: 10px 15px; + margin: 0 10px; + transition: background-color 0.3s; +} + +.events_section .prev_button:hover, +.events_section .next_button:hover { + background-color: #217dbb; +} diff --git a/test_events.html b/test_events.html new file mode 100644 index 0000000..bcf51c0 100644 --- /dev/null +++ a/test_events.html @@ -1,0 +1,85 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Title</title> + <link rel="stylesheet" type="text/css" href="test_events.css" /> + <link href="css/font-awesome.min.css" rel="stylesheet"/> +</head> +<body> + + +<section id="events_section" class="events_section layout_padding"> + <section class="slider_section"> + <div id="customCarousel1" class="carousel slide" data-ride="carousel"> + <div class="carousel-inner"> + <div class="carousel-item active"> + <div class="container"> + <div class="event-slider"> + <div class="event-card"> + <img src="images/test_banner.jpeg" alt="Event Banner" class="event-image"> + <div class="event-details"> + <h3 class="event-name">Coffee And Checkmate</h3> + <p class="event-datetime">January 15, 2024 | 10:00 AM to 12:30 PM</p> + <p class="event-venue"> Cafe Azzure: MG Road</p> + <div class="button-container"> + <p class="read-more-text"><a href="#">Read More</a></p> + </div> + </div> + <div class="event-book"> + <form> + <script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_NF3CCQooxqCLM8" async></script> + </form> + </div> + </div> + + <div class="event-card"> + <img src="images/chessconnect_19052024.png" alt="Event Banner" class="event-image"> + <div class="event-details"> + <h3 class="event-name">Chess Connect</h3> + <p class="event-datetime">January 22, 2024 | 10:00 AM to 1:00 PM</p> + <p class="event-venue"> The Hub : MG Road</p> + <div class="button-container"> + <p class="read-more-text"><a href="#">Read More</a></p> + </div> + </div> + <div class="event-book"> + <form> + <script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_NF3CCQooxqCLM8" async></script> + </form> + </div> + </div> + + <div class="event-card"> + <img src="images/coffee_and_checkmate_hsr.jpeg" alt="Event Banner" class="event-image"> + <div class="event-details"> + <h3 class="event-name">Coffee And Checkmate</h3> + <p class="event-datetime">January 15, 2024 | 10:00 AM to 12:30 PM</p> + <p class="event-venue"> Cafe Azzure: HSR Layout</p> + <div class="button-container"> + <p class="read-more-text"><a href="#">Read More</a></p> + </div> + </div> + <div class="event-book"> + <form> + <script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_NF3CCQooxqCLM8" async></script> + </form> + </div> + </div> + </div> + </div> + </div> + <!-- Add more carousel items as needed --> + </div> + </div> + </section> +</section> + +<!-- Navigation Arrows --> +<!--<div class="slider-navigation">--> +<!-- <button class="prev-button"><</button>--> +<!-- <button class="next-button">></button>--> +<!--</div>--> + +</body> +</html> -- rgit 0.1.5