Skip to content

Commit 4ac2453

Browse files
kevalpithadiyakevalpithadiya
authored
Merge pull request #23 from kevalpithadiya/master
Move Open Day page from Navbar to Events page
2 parents f68809e + e460323 commit 4ac2453

File tree

4 files changed

+217
-78
lines changed

4 files changed

+217
-78
lines changed

‎css/events.css

+126-2
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,138 @@
22
background-image: url(../img/backgroundsbundle/Whangaehu.png);
33
text-align: center;
44
height: 100vh;
5+
padding-top: 100px;
6+
padding-bottom: 80px;
7+
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
513
background-size: cover;
614
background-position: center;
715
background-attachment: fixed;
816
}
17+
918
#title h1{
10-
font-size: 25vw;
11-
line-height: 100vh;
19+
font-size: 80px;
20+
text-shadow: #000 0px 0px 5px;
21+
}
22+
23+
#major-event-container {
24+
width: 1200px;
25+
max-width: 95%;
26+
aspect-ratio: 2;
27+
height: auto;
28+
margin-top: 30px;
29+
30+
background: rgba(16, 16, 16, 0.8);
31+
32+
display: flex;
33+
flex-direction: row;
34+
}
35+
36+
#major-event-info {
37+
height: 100%;
38+
width: 35%;
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: center;
42+
align-items: center;
43+
}
44+
45+
#major-event-info-title {
46+
font-family: "Montserrat", sans-serif;
47+
font-size: 40px;
48+
letter-spacing: 4px;
49+
}
50+
51+
#major-event-info-title > span {
52+
font-size: 80px;
53+
}
54+
55+
#major-event-info-btn {
56+
clear: both;
57+
display: block;
58+
background-color: #fff;
59+
color: rgb(4, 4, 108);
60+
padding: 10px;
61+
text-transform: uppercase;
62+
text-decoration: none;
63+
font-weight: 600;
64+
margin-top: 80px;
65+
width: 200px;
66+
text-align: center;
67+
transition: 0.3s all;
68+
}
69+
70+
#major-event-info-btn span {
71+
color: rgb(4, 4, 108);
72+
vertical-align: bottom;
73+
font-size: 18px;
74+
font-weight: 600;
75+
}
76+
77+
#major-event-info-btn:hover {
78+
background: #000;
79+
color: #fff;
80+
letter-spacing: 1px;
81+
}
82+
83+
#major-event-info-btn:hover span{
84+
color: #fff;
1285
}
86+
87+
#major-event-photo {
88+
width: 65%;
89+
height: 100%;
90+
91+
background: url("../img/open-day/team.webp");
92+
background-size: contain;
93+
background-repeat: no-repeat;
94+
background-position: center;
95+
}
96+
97+
@media only screen and (max-width: 800px) and (orientation: portrait) {
98+
#title h1 {
99+
font-size: 50px;
100+
}
101+
102+
#major-event-container {
103+
flex-direction: column;
104+
align-items: center;
105+
width: 600px;
106+
height: auto;
107+
max-height: 80vh;
108+
aspect-ratio: auto;
109+
}
110+
111+
#major-event-info {
112+
width: 100%;
113+
height: auto;
114+
align-items: center;
115+
}
116+
117+
#major-event-info-title {
118+
font-size: 30px;
119+
}
120+
121+
#major-event-info-title > span {
122+
font-size: 60px;
123+
}
124+
125+
#major-event-info-btn {
126+
margin-top: 10px;
127+
}
128+
129+
#major-event-photo {
130+
width: calc(100% - 10px);
131+
height: auto;
132+
margin: 30px 0 5px 0;
133+
aspect-ratio: 1.3;
134+
}
135+
}
136+
13137
main{
14138
margin: 50px auto;
15139
}

‎events/index.html

+91-74
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,80 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<meta charset="UTF-8" />
5-
<link rel="manifest" href="../manifest.json" />
6-
<meta name="mobile-web-app-capable" content="yes" />
7-
<meta name="apple-mobile-web-app-capable" content="yes" />
8-
<meta name="application-name" content="Databased" />
9-
<meta name="apple-mobile-web-app-title" content="Databased" />
10-
<meta name="theme-color" content="#101010" />
11-
<meta name="msapplication-navbutton-color" content="#101010" />
12-
<meta
13-
name="apple-mobile-web-app-status-bar-style"
14-
content="black-translucent"
15-
/>
16-
<meta name="msapplication-starturl" content="/" />
17-
<meta
18-
name="viewport"
19-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
20-
/>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="manifest" href="../manifest.json" />
7+
<meta name="mobile-web-app-capable" content="yes" />
8+
<meta name="apple-mobile-web-app-capable" content="yes" />
9+
<meta name="application-name" content="Databased" />
10+
<meta name="apple-mobile-web-app-title" content="Databased" />
11+
<meta name="theme-color" content="#101010" />
12+
<meta name="msapplication-navbutton-color" content="#101010" />
13+
<meta
14+
name="apple-mobile-web-app-status-bar-style"
15+
content="black-translucent"
16+
/>
17+
<meta name="msapplication-starturl" content="/" />
18+
<meta
19+
name="viewport"
20+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
21+
/>
2122

22-
<link
23-
rel="icon"
24-
type="image/png"
25-
sizes="192x192"
26-
href="../../img/icon-192x192.png"
27-
/>
28-
<link
29-
rel="apple-touch-icon"
30-
type="image/png"
31-
sizes="192x192"
32-
href="../img/icon-192x192.png"
33-
/>
34-
<link
35-
rel="icon"
36-
type="image/png"
37-
sizes="256x256"
38-
href="../img/icon-256x256.png"
39-
/>
40-
<link
41-
rel="apple-touch-icon"
42-
type="image/png"
43-
sizes="256x256"
44-
href="../img/icon-256x256.png"
45-
/>
46-
<link
47-
rel="icon"
48-
type="image/png"
49-
sizes="384x384"
50-
href="../img/icon-384x384.png"
51-
/>
52-
<link
53-
rel="apple-touch-icon"
54-
type="image/png"
55-
sizes="384x384"
56-
href="../img/icon-384x384.png"
57-
/>
58-
<link
59-
rel="icon"
60-
type="image/png"
61-
sizes="512x512"
62-
href="../img/icon-512x512.png"
63-
/>
64-
<link
65-
rel="apple-touch-icon"
66-
type="image/png"
67-
sizes="512x512"
68-
href="../img/icon-512x512.png"
69-
/>
23+
<link
24+
rel="icon"
25+
type="image/png"
26+
sizes="192x192"
27+
href="../../img/icon-192x192.png"
28+
/>
29+
<link
30+
rel="apple-touch-icon"
31+
type="image/png"
32+
sizes="192x192"
33+
href="../img/icon-192x192.png"
34+
/>
35+
<link
36+
rel="icon"
37+
type="image/png"
38+
sizes="256x256"
39+
href="../img/icon-256x256.png"
40+
/>
41+
<link
42+
rel="apple-touch-icon"
43+
type="image/png"
44+
sizes="256x256"
45+
href="../img/icon-256x256.png"
46+
/>
47+
<link
48+
rel="icon"
49+
type="image/png"
50+
sizes="384x384"
51+
href="../img/icon-384x384.png"
52+
/>
53+
<link
54+
rel="apple-touch-icon"
55+
type="image/png"
56+
sizes="384x384"
57+
href="../img/icon-384x384.png"
58+
/>
59+
<link
60+
rel="icon"
61+
type="image/png"
62+
sizes="512x512"
63+
href="../img/icon-512x512.png"
64+
/>
65+
<link
66+
rel="apple-touch-icon"
67+
type="image/png"
68+
sizes="512x512"
69+
href="../img/icon-512x512.png"
70+
/>
7071

71-
<title>Events - Databased | IISc's Undergraduate CS Club</title>
72-
<link rel="stylesheet" href="../css/common.css" />
73-
<link rel="stylesheet" href="../css/events.css" />
74-
<link rel="icon" href=".././img/favicon-32x32.png" type="image/x-icon" />
75-
<script src="../js/footerinclude.js"></script>
76-
</head>
72+
<title>Events - Databased | IISc's Undergraduate CS Club</title>
73+
<link rel="stylesheet" href="../css/common.css" />
74+
<link rel="stylesheet" href="../css/events.css" />
75+
<link rel="icon" href=".././img/favicon-32x32.png" type="image/x-icon" />
76+
<script src="../js/footerinclude.js"></script>
77+
</head>
7778

7879
<body>
7980
<div id="loader"></div>
@@ -83,9 +84,25 @@
8384
</header>
8485

8586
<div id="title">
86-
<h1>
87-
Events
88-
</h1>
87+
<h1> Events </h1>
88+
89+
<div id="major-event-container">
90+
<div id="major-event-info">
91+
<span id="major-event-info-title">
92+
<span>IISc</span>
93+
<br/>
94+
OPEN DAY
95+
<br/>
96+
2024
97+
</span>
98+
99+
<a href="../pages/open-day" id="major-event-info-btn">
100+
View More
101+
<span class="material-symbols-outlined"> arrow_forward </span>
102+
</a>
103+
</div>
104+
<div id="major-event-photo"></div>
105+
</div>
89106
</div>
90107
<main>
91108
<div id="eventsGrid"></div>

‎img/open-day/team.webp

219 KB
Binary file not shown.

‎js/footerinclude.js

-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ headerTemplade.innerHTML = `
4040
<a href="https://databasediisc.blogspot.com/" class="nav-list-link">Blog</a>
4141
<a href="/pages/projects" class="nav-list-link">Projects</a>
4242
<a href="/#contact" class="nav-list-link">Contact</a>
43-
<a href="/pages/open-day" class="nav-list-link">Open Day</a>
4443
4544
<a id="nav-hamburger" data-state="inactive">
4645
<span></span><span></span><span></span>
@@ -55,7 +54,6 @@ headerTemplade.innerHTML = `
5554
<a href="https://databasediisc.blogspot.com/">Blog</a>
5655
<a href="/pages/projects">Projects</a>
5756
<a href="/#contact">Contact</a>
58-
<a href="/pages/open-day">Open Day</a>
5957
</div>
6058
`;
6159

0 commit comments

Comments
 (0)