-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
206 lines (199 loc) · 7.77 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
/>
<link rel="stylesheet" href="./mid/style.css" />
<!-- <link rel="stylesheet" href="../gallery/gallery.css" /> -->
<link rel="stylesheet" href="./hero/hero.css" />
<title>TechFest</title>
</head>
<body>
<main>
<section class="hero-container">
<h1 class="hero-title hero-heading">TECHFEST</h1>
<div class="hero-img-div">
<img
src="https://raw.githubusercontent.com/KGEC-Robotics-Society/assets/main/gallery/techfest-images/Image1.jpg"
alt=""
/>
</div>
<div class="slider-text-container">
<h1 class="slider-text hero-heading">
<span>EXPLORATION</span><span>EXECUTI0N</span>
</h1>
</div>
</section>
<section class="tf-past-events">
<header class="tf-past-events-header">sOME pAST eVENTS</header>
<div class="tf-past-events-box">
<div class="tf-past-events-text-box">
<div class="text-box-header">About TechFest</div>
<div class="text-box-write-up">
Techtix, the TechFest hosted by Kalyani Government Engineering
College has a lot of events envolving the knowledge and expetise
in the film of Robotics. These events are organized by us Robotics
Society, KGEC. The members and interns of the club come together
and work hard for around 2 months for the smooth conduction of all
the events.
</div>
<div class="text-box-cta">
<a href="#">
<button class="btn cta-btn btn-primary">EXPLORE MORE</button>
</a>
</div>
</div>
<div class="tf-past-events-img parallax1">
<img
src="https://raw.githubusercontent.com/KGEC-Robotics-Society/assets/main/gallery/techfest-images/Image2.jpg"
alt=""
/>
</div>
</div>
<div class="tf-past-events-box">
<div class="tf-past-events-img parallax2">
<img
src="https://raw.githubusercontent.com/KGEC-Robotics-Society/assets/main/gallery/techfest-images/Image3.jpg"
alt=""
/>
</div>
<div class="tf-past-events-text-box right" id="align">
<div class="text-box-header">The events include:</div>
<div class="text-box-write-up">
<ul>
<li>
<b><i class="fa-solid fa-angles-right"></i> Robowar -</b> War
between manual bots
</li>
<li>
<b><i class="fa-solid fa-angles-right"></i> RoboMaze -</b>
Line follower Maze solver
</li>
<li>
<b><i class="fa-solid fa-angles-right"></i> Robo Soccer -</b>
Football match type with two bots
</li>
<li>
<b><i class="fa-solid fa-angles-right"></i> Terbulance -</b>
Robots have to run through Rough tracks and obstacles
</li>
<li>
<b><i class="fa-solid fa-angles-right"></i> RoboCarrom -</b>
There will be multiple balls of two colours and two manual
bots, now bots drop(in one and only centre hole) more amount
of same coloured(each bot have to put diff color balls) balls
wins(if red and blue there the bot1 have put red or blue only,
putting other ball will let bot2's score increase)
</li>
</ul>
</div>
<div class="text-box-cta">
<a href="#">
<button class="btn cta-btn btn-primary">EXPLORE MORE</button>
</a>
</div>
</div>
</div>
</section>
<section class="tf-gallery-section">
<h1 class="tf-gallery-heading">eXPLORE oUR gALLERY</h1>
<div class="tf-gallery">
<div class="tf-gallery-container" id="img1">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image4.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image5.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image6.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/image13.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image3.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container" id="img6">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/image15.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container" id="img7">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image10.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container" id="img8">
<img
src="https://github.com/KGEC-Robotics-Society/assets/blob/main/gallery/techfest-images/Image12.jpg?raw=true"
alt=""
/>
</div>
<div class="tf-gallery-container" id="explore-more">
<h2>WANNA SEE MORE??</h2>
<p>I KNOW YOU<br />NOW INTO<br />IT :)</p>
<p>SO WHAT ARE YOU THINKING</p>
<a href="#">
<button class="btn cta-btn btn-primary">EXPLORE MORE</button>
</a>
<!-- <a href="#" class="btn">EXPLORE MORE</a> -->
</div>
</div>
</section>
<footer>
<div class="footer_content">
© Copyright 2021 - KGEC, Robotics Society
</div>
</footer>
</main>
<script>
const tfBox = document.getElementById("align");
function alignment(elem) {
if (elem.matches) {
tfBox.classList.remove("right");
} else {
tfBox.classList.add("right");
}
}
elem = window.matchMedia("(max-width: 540px)");
alignment(elem);
elem.addListener(alignment);
// parallax scrolling effect
window.addEventListener("scroll", () => {
const parallax1 = document.querySelector(".parallax1");
const parallax2 = document.querySelector(".parallax2");
// const parallax3 = document.querySelector(".parallax3");
let scrollposition = window.pageYOffset;
// console.log(scrollposition);
parallax1.style.transform =
"translateY(-" + scrollposition * 0.5 + "px)";
parallax2.style.transform =
"translateY(-" + scrollposition * 0.3 + "px)";
// parallax3.style.transform =
// "translateY(-" + scrollposition * 0.8 + "px)";
});
</script>
</body>
</html>