New events design
Diff
test_events.css | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
test_events.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 217 insertions(+)
@@ -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;
}
@@ -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>
</div>
</div>
</section>
</section>
</body>
</html>