-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathall_events.html
132 lines (118 loc) · 4.06 KB
/
all_events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Events</title>
<style>
/* Global Styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-image: url('Logos/background1.jpeg'); /* Replace 'background_image.jpg' with your image */
background-size: cover;
background-position: center;
background-attachment: fixed;
backdrop-filter: blur(8px); /* Apply blur effect to the background */
color: #fff; /* White text color */
}
.section {
padding: 50px 0;
text-align: center;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
font-size: 36px;
font-weight: bold;
margin-bottom: 30px;
}
/* Album Box Styles */
.albums-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.album-box {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
width: 300px; /* Adjust box width as needed */
}
.album-box:hover {
transform: translateY(-5px);
}
.album-thumbnail img {
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
}
.album-info {
padding: 20px;
text-align: left;
}
.album-info h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.album-info p {
font-size: 16px;
margin-bottom: 0;
}
</style>
</head>
<body>
<section id="all-events" class="section">
<div class="container">
<h2 class="section-title">All Events</h2>
<div class="albums-container">
<!-- Event Box 1 -->
<div class="album-box" onclick="openEvent('Event1')">
<div class="album-thumbnail">
<img src="Event_Images/imgp1.jpg" alt="Event 1 Thumbnail">
</div>
<div class="album-info">
<h3><b>Workshop: Introduction to Competitive Programming</b></h3>
<h4><b>Date: April 18, 2024</b></h4>
</div>
</div>
<!-- Add more event boxes -->
<!-- Event Box 2 -->
<div class="album-box" onclick="openEvent('Event2')">
<div class="album-thumbnail">
<img src="Event_Images/img1.jpeg" alt="Event 2 Thumbnail">
</div>
<div class="album-info">
<h3><b>Competitive Programming Session</b></h3>
<h4><b>Date: April 20, 2024</b></h4>
</div>
</div>
<!-- Event Box 3 -->
<div class="album-box" onclick="openEvent('Event3')">
<div class="album-thumbnail">
<img src="Event_Images/matlab3.jpeg" alt="Event 3 Thumbnail">
</div>
<div class="album-info">
<h3><b>Workshop: MATLAB Day at CSVTU Computer Lab</b></h3>
<h4><b>Date: May 8, 2024</b></h4>
</div>
</div>
<!-- Repeat the pattern for other events -->
</div>
</div>
</section>
<script>
function openEvent(eventId) {
window.location.href = "event_" + eventId.toLowerCase() + ".html";
}
</script>
</body>
</html>