forked from cxi-miet/cssbattleground
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (218 loc) · 9.54 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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!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">
<title>CSS BattleGround</title>
<link rel="icon" href="images/logo1.png">
<link rel="stylesheet" href="css/res.css ">
<link rel="stylesheet" href="css/member.css ">
<link rel="stylesheet" href="css/style.css ">
<!-- aos -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<div class="back center">
<img src="images/logo.png" alt="">
</div>
<div class="present center col" id="present">
<img src="images/logo.png" alt="">
<h2>Presenting...</h2>
</div>
<div class="heading center " id="heading">
<h1 class="center"><p data-aos="slide-right" data-aos-delay="2800" >CSS</p> <span data-aos="slide-left" data-aos-delay="2800" >battleground 2.0</span> </h1>
</div>
<img src="images/tright.png" id="tRight" class="t-right" alt="">
<section class="center col" >
<div class="content section fade-up" id="section">
<p>CSS BattleGround is an online CSS code golfing game...
</p>
<p>CSS BattleGround is one of its kind game for frontend developers.<br>
The objective of the game is to write CSS to replicate the given target image in the least code possible in
the given time allotted.</p>
<div class="date center col">
<img src="images/img-1.png" alt="">
<h2>You can take above image as an example for the competition or you can also visit <a href="https://cssbattle.dev/">cssBattle</a> website for more info.</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wd1KbgrGDMI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-top:2rem;"></iframe>
</div>
<div class="date center ">
<img src="images/date.png" alt="">
</div>
</div>
<div class="price section fade-up" id="section">
<h3 class="shead">Price</h3>
<p>There were 5 position </p>
<ul>
<li>🏆 I<sup>st</sup> position got ₹1500 cash price</li>
<li>🏆 II<sup>nd</sup> position got ₹1500 cash price</li>
<li>🏅 III<sup>rd</sup> position got ₹1000 cash price</li>
<li>🏅 IV<sup>th</sup> position got ₹1000 cash price</li>
<li>🏅 V<sup>th</sup> position got ₹1000 cash price</li>
<li>🎫 100% Certification</li>
</ul>
</div>
<div class="description section fade-up" id="section">
<h3 class="shead">Description</h3>
<ul>
<li>🔷 In this contest we will give you a specific time to complete a task.</li>
<li>🔷 The Task is to make a picture same as given in the file(provided you on that day only). </li>
<li>🔷 After the submission we will give you points according to the accuracy of the picture you made.</li>
<li>🔷 Also there was an extra point for extra Creativity.</li>
</ul>
</div>
<div class="rules section fade-up" id="section">
<h3 class="shead">Rules and regulation</h3>
<ul>
<li>🔷 You can use HTML, CSS, CSS Pre-processor(if you know), js.</li>
<li>🔷 Use of any framework is prohibited.</li>
<li>🔷 Any use of CDN is also prohibited.</li>
<li>🔷 Any use of links will also be treated as CDN</li>
<li>🔷 Use of any photos or picture is prohibited</li>
<li>🔷 Any use of code which is not associated with you are prohibited.</li>
<li id="button_gameon">🔷 Replicated image should be submitted in given time limit.</li>
<li>🔷 Single response will be considered.</li>
<li>🔷 Certification of participation is only given to those who has done the submittion.</li>
<li>🔷 Kindly submit your response with your registered email id.</li>
</ul>
</div>
<div class="button section " >
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox" class="checkbox" >I have read all the <span>rules</span> and <span>regulations</span> and follows all during this event.</label>
</div>
<main class="center col">
<button disabled id="button" class="Button fade" onclick="navigate()"> Game on!! </button>
<p class="hide" id="hide">Please tick Checkbox</p>
</main>
</div>
</section>
<!-- members=================================== -->
<div class="member center col">
<div class="shead">
Faculty COORDINATORS
</div>
<div class="MEM center fade-up " id="section">
<div class="mem fade-up" id="section">
<div class="over center col">
<h3>Dr. Bhawna Mallick</h3>
<p>Dean Academics</p>
</div>
<img src="images/members/fac1.png" alt="">
</div>
<div class="mem ">
<div class="over center col">
<h3>Dr. Mukesh Rawat</h3>
<p>Prof. CSE</p>
</div>
<img src="images/members/fac2.png" alt="">
</div>
</div>
<div class="MEM center fade-up" id="section" style="justify-content: space-evenly !important;">
<div class="mem fade-up" id="section">
<div class="over center col">
<h3>Dr. Swati Sharma</h3>
<p>HOD - IT</p>
</div>
<img src="images/members/fac3.png" alt="">
</div>
<div class="mem fade-up" id="section">
<div class="over center col">
<h3>Dr. Arvind Kushwah</h3>
<p>HOD - CSE</p>
</div>
<img src="images/members/fac4.png" alt="">
</div>
</div>
</div>
<div class="member center col">
<div class="shead">
STUDENT COORDINATORS
</div>
<div class="MEM center fade-up" id="section">
<div class="mem fade-up" id="section">
<div class="over center col">
<h3>Abhishek Singhal</h3>
<p>B.Tech CSIT 3<sup>rd</sup> year <br>Mob. 9927245142</p>
</div>
<img src="images/members/mem1.png" alt="">
</div>
<div class="mem">
<div class="over center col">
<h3>Abhinav Yadav</h3>
<p>B.Tech CSE 3<sup>rd</sup> year <br>Mob. 8791292122</p>
</div>
<img src="images/members/mem2.png" alt="">
</div>
</div>
<div class="MEM center fade-up" id="section" style="justify-content: space-evenly !important;">
<div class="mem">
<div class="over center col">
<h3>Nishita Sharma</h3>
<p>B.Tech CSE 3<sup>rd</sup> year <br></p>
</div>
<img src="images/members/mem3.png" alt="">
</div>
<div class="mem">
<div class="over center col">
<h3>Dhruv</h3>
<p>B.Tech CSE 2<sup>nd</sup> year <br></p>
</div>
<img src="images/members/mem4.png" alt="">
</div>
</div>
<div class="mem fade-up" id="section">
<div class="over center col">
<h3>Ankit Chaudhary</h3>
<p>B.Tech CSE 3<sup>rd</sup> year <br></p>
</div>
<img src="images/members/mem5.png" alt="">
</div>
<div class="previous section fade-up" id="section">
<h3 class="shead">Previous Contest Details </h3>
<main class="center col">
<button class="Button " onclick="navigateShow()"> SHOW </button>
</main>
</div>
</div>
<!-- footer=================================== -->
<footer class="center">
<div class="bottom center">
<p>© 2022 <a href="https://cxi-miet.github.io/">CXI</a> ,Meerut Institute Of Engineering and Technology, Meerut, 250005.</p>
<p>Designed by <a href="https://github.com/Abhimrt">Abhishek Singhal</a></p>
</div>
</footer>
<!-- time--------------------------->
<a href="#button_gameon">
<div class="time " style="height:140px; top: 0;" id="time">
<h3 style="color: white;"> Registration: <span style="color: red;" >Closed</span></h3><br>
<h3 style="color: white;"> Battle Live in:</h3><br>
<div class="center">
<div class="tim">
<div id="day">00</div>
<p>Days</p>
</div>
<div class="tim">
<div id="hrs">: 00</div>
<p>hour</p>
</div>
<div class="tim">
<div id="min">: 00</div>
<p>Min</p>
</div>
<div class="tim">
<div id="sec">: 00</div>
<p>Sec</p>
</div>
</div>
</div>
</a>
<!-- js aos -->
<script src="js/script.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init({
duration:1000
});
</script>
</body>
</html>