-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (166 loc) · 9.26 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
<!doctype html>
<html lang="en" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hacklympic Timer 🕕 |🏃 A Sportman's Practice friend</title>
<!--for search engine optimization(SEO)-->
<!-- Search Engine -->
<meta name="description"
content="elixir is the health and fitness society of Delhi Technological University started with the aim of promoting health and wellness among engineering students">
<meta name="image" content="./assets/images/logo-elixir.png">
<!-- Schema.org for Google -->
<meta itemprop="name" content="Elixir DTU , Health and Fitness society of Delhi Technological University">
<meta itemprop="description"
content="elixir is the health and fitness society of Delhi Technological University started with the aim of promoting health and wellness among engineering students">
<meta itemprop="image" content="./assets/images/logo-elixir.png">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta property="og:title" content="Elixir DTU , Health and Fitness society of Delhi Technological University" />
<meta name="og:description"
content="elixir is the health and fitness society of Delhi Technological University started with the aim of promoting health and wellness among engineering students">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pg07codes.github.io/elixirDTU/" />
<meta property="og:image" content="./assets/images/logo-elixir.png" />
<meta property="og:site_name" content="Elixir DTU" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/loaders.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/lux/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/customStyles.css">
</head>
<body>
<!--preloader is here-->
<div id="preload">
<div class="loader">
<div class="line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<!--preloader ends here-->
<!--navbar component-->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#banner-head">
<img id="logo" src="./assets/images/LogoMono.png" width="200" height="150" class="d-inline-block align-top" alt="elixir,DTU">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<!--<li class="nav-item">-->
<!--<a class="nav-link" id="link" href="#banner-head"><i class="fas fa-home fa-nav"></i>Home</a>-->
<!--</li>-->
<li class="nav-item">
<a class="nav-link" id="link1" href="https://devpost.com/software/hacklympic-timer"><i class="fas fa-pen-fancy fa-nav"></i>About the Device</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link2" href="#what-we-do""><i class="fas fa-suitcase fa-nav"></i>How to Use ?</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link4" href="#what-we-do""><i class="fas fa-comment-alt fa-nav"></i>Technologies</a>
</li>
</ul>
</div>
</nav>
<!--navbar component ends-->
<div class="container-fluid banner" id="banner-head">
<div class="row justify-content-center heading">
<div class="col-md-10 ">
<h1 class="text-center" style="color:blue; font-weight: bolder; font-size: 6vw; letter-spacing: 5pt; border-bottom: red solid 3px;">Hacklympic Timer⏰</h1>
</div>
<div class="col-md-10">
<h3 class="text-center" style="color:yellow;font-weight:lighter;font-size: 2vw">An Automatic timer for Sprinters</h3>
</div>
</div>
</div>
<div id="theme"></div>
<!--about US part-->
<div class="container-fluid" id="what-we-do">
<h1 class="col-md-9" data-aos="slide-down" data-aos-duration="600"><i class="fas fa-check-double" style="margin:2vh; color:#EF5324;"></i>HOW TO USE?✍</h1>
<div class="row justify-content-center">
<p class="col-md-9" data-aos="slide-up" data-aos-duration="900">
<ul>
<li><h3 style="color:whitesmoke">⏱ Place the device on the finish line of your track.</h3></li>
<li><h3 style="color:whitesmoke">⏱ Start the timer.</h3></li>
<li><h3 style="color:whitesmoke">⏱ The timer automatically stops when you cross the device ie the finish line.</h3></li>
<li> <marquee direction = "right" scrollamount="8" bgcolor="blue" behaviour="alternate" scrollamount="10"><h3 style="color:whitesmoke"> Voilaa that's all you've to do get hacklympic timer ⏱ ready and running.</h3></marquee></li>
</ul>
</p>
<br>
<br>
<br>
</div>
<h1 class="col-md-9" data-aos="slide-down" data-aos-duration="600"><i class="fas fa-check-double" style="margin:2vh; color:#EF5324;"></i>Technologies Used✍</h1>
<div id="img-group" class="row justify-content-center">
<div class="col-md-3 m-3" data-aos="slide-up" data-aos-duration="600">
<img src="./assets/images/x%20(142).jpg" height="300px" width="300px" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-3 m-3" data-aos="slide-up" data-aos-duration="600">
<img src="./assets/images/x%20(141).jpg" height="300px" width="300px" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-3 m-3" data-aos="slide-up" data-aos-duration="600">
<img src="./assets/images/x%20(140).jpg" height="300px" width="300px" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<!--about US part ends here-->
<!--who can join us-->
<div class="container-fluid info-card-group" id="who-can-join-us">
<!--this section links to the #who-can-join-page component-->
<div class="row justify-content-center">
<div class="col-md-5 col-sm-6 left-box">
<div class="row justify-content-center mt-5">
<div class="col-md-12 col-sm-12 mt-4 mb-4">
<h2 align="center" style="color: whitesmoke">Our Hardware Project</h2>
</div>
<div class="col-md-12 col-md-12">
<hr style="margin:10px auto; width:60px; border: 2px solid #5ac88b; background: #5ac88b">
</div>
<div class="col-md-12 col-sm-12">
<p align="center"></p>
</div>
<div class="col-md-5 col-sm-8">
<a href="https://www.youtube.com/watch?v=pIDoHr5gBqw&feature=emb_title"><button class="btn btn-outline-success">Check working prototype Video</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--who can join us ends here-->
<!--connect with us-->
<div class="container-fluid" id="connect">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-6 mt-5" data-aos="slide-down" data-aos-duration="800">
<h2 style="color:#FFF; display: inline-block;"><i class="fas fa-comments fa-2x" style="margin:2vh; color:#EF5324;"></i>Let's connect !!</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-5 col-sm-6 mt-3" style="font-size: 24pt" style="background:red padding" >
<a href="https://github.com/mdb571" target="_blank"><i class="sm_handles fab fa-twitter"></i></a>
<a href="mailto:[email protected]"><i class=" sm_handles far fa-lg fa-envelope-open"></i></a>
<a href="https://github.com/mdb571"><i class=" sm_handles fab fa-lg fa-linkedin-in"></i></a>
<a href="https://github.com/mdb571" target="_blank"><i class="sm_handles fab fa-github"></i></a>
<a href="https://github.com/mdb571" target="_blank"><i class="sm_handles fab fa-facebook"></i></a>
</div>
</div>
</div>
<!--connect with us ends here-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once:true,
offset:120,
});
</script>
<script src="./assets/js/customjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>