-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
303 lines (290 loc) · 19.8 KB
/
index.html
File metadata and controls
303 lines (290 loc) · 19.8 KB
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!-- Page Format -->
<!--
* Head
* Body
1. Chat box/Pop up (HTML, JS)
2. Nav Bar (HTML)
3. Carousel effect (HTML)
4. About (HTML)
5. Project details (HTML)
6. Features of this project (HTML)
7. Footer (HTML)
8. External JS links Provided
-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Data visualization and Project Management">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="icon" type="png" href="bar-chart.png">
<title>Hyper Coders</title>
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<!-- Chat Box / pop up message ---------------------------------------------->
<button class="open-button" onclick="openForm()"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
</svg></button>
<div class="chat-popup" id="myForm">
<form action="/index.html" class="form-container">
<h1>Chat Box</h1>
<textarea placeholder="Hello! Please type your message..." name="msg" required></textarea>
<button type="submit" class="btn" onclick="sentNotifyUser()">Send</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function sentNotifyUser(){
alert("Your message has been sent! We will review your plea shortly.");
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
<!-- Navbar---------------------------------------------------------------------- -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navbar"> <!-- make the nav bar size, nav bar font color, navbar background color-->
<a class="navbar-brand" href=""><img src="images/analysis(1).png" style="width: 33%;" style="padding-right: 25px;">Data Vision</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#about" style=" padding-right: 10px;"">About Us</a>
</li>
<li class="nav-item" style="padding-right: 10px;"">
<a class="nav-link"href="#project">Project</a>
</li>
<li class="nav-item" style="padding-right: 10px;">
<a class="nav-link"href="#Contact">Contact</a>
</li>
<li class="nav-item" style="background-color: rgb(109, 109, 196); padding-right: 10px; border-radius: 5px;">
<a class="nav-link"href="login.html">login</a>
</li>
</ul>
</nav>
<!-- carousel effect to show images ---------------------------------------------->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/pexels-anna-nekrashevich-6802042.jpg" style="height: 600px;" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Data Visualization and Project Management</h5>
<p>Join hands with us to make the best output by visualizing the data and by providing the best project management system.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/wp1907055-industry-wallpapers.jpg" style="height: 600px;" style="width: 500px;" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Data Visualization benefits in Industrial Sector</h5>
<p>We help visualize the data and help in overall growth and provide risk management.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/th.png" style="height: 600px;" style="width: 500px;" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Project Management System benefits in all the categories for task management</h5>
<p>We provide the best task management system and help you to track the details of the data at real time experience</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- about section -------------------------------------------------------------------------------------------------------------->
<div class="card" id="about">
<div class="card-header" id="about-head">
<div class="font-sans">About us</div>
</div>
<div id="card-body">
<div class="text-content">
<blockquote class="blockquote mb-0">
<p>  Welcome to Hyper Coders, your go-to solution for seamless project management and insightful data visualization. Our platform is designed to streamline your workflow, boost productivity, and enhance team collaboration, making project management more efficient and effective.
<br>
  At Hyper Coders, we understand the challenges of managing complex projects and the need for clear, actionable insights. That’s why we offer a robust suite of tools tailored to meet diverse needs. Our dynamic data visualization features allow you to transform raw data into easy-to-understand graphs and charts, helping you make informed decisions quickly.
<br>
  Our task management system is designed for simplicity and efficiency. With just a few clicks, you can add, update, and track tasks, set deadlines, and assign responsibilities. This ensures that every team member stays organized and focused on their goals.</p>
</blockquote>
</div>
<div class="image-content">
<img src="images/bar-chart(1).png" alt="">
</div>
</div>
</div>
<!-- Viewing a new project -->
<div class="card text-center" id="project">
<div class="card" id="about">
<div class="font-sans">Project Management Tool</div>
<p class="card-text">This tool helps streamline human resources and industrial management by automating tasks, improving data accuracy, and facilitating better decision-making. It enables efficient tracking of employee performance, simplifies recruitment processes, and enhances overall operational productivity.</p>
<a href="view-project.html" class="btn btn-primary">Check it out!</a>
</div>
<div class="card-footer text-muted"></div>
</div>
<!--features content--------------------->
<div class="card" id="about">
<div class="card-header" id="about-head">
<div class="font-sans">Features of Project</div>
</div>
<div class="ag-format-container">
<div class="ag-courses_box">
<div class="ag-courses_item" style="size: 50px;">
<a href="" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Worldclass Infra
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg">
</div>
<div class="ag-courses-item_title">
Ease of Governance
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Social Infra
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Ease of Business
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Technology
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Sustainability
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Security
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Internal Connectivity
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">
Live tracking
</div>
</a>
</div>
</div>
</div>
</div>
<!-- footer code-------------------------------------------------------------------------------------------------------------------- -->
<footer class="new_footer_area bg_color" id="Contact">
<div class="new_footer_top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="f_widget company_widget wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInLeft;">
<h3 class="f-title f_600 t_color f_size_18">Get in Touch</h3>
<p>Don’t miss any updates of our newest Developments in our project!</p>
<form action="#" class="f_subscribe_two mailchimp" method="post" novalidate="true" _lpchecked="1">
<input type="text" name="EMAIL" class="form-control memail" placeholder="example@example.com">
<button class="btn btn_get btn_get_two" type="submit">Subscribe</button>
<p class="mchimp-errmessage" style="display: none;"></p>
<p class="mchimp-sucmessage" style="display: none;"></p>
</form>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="f_widget about-widget pl_70 wow fadeInLeft" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInLeft;">
<h3 class="f-title f_600 t_color f_size_18">Help</h3>
<ul class="list-unstyled f_list">
<li style="font-size: 18px"><a href="#">Term & conditions</a></li>
<li style="font-size: 18px"><a href="#">Documentation</a></li>
<li style="font-size: 18px"><a href=mailto:"example@gmail.com">Contact me</a></li>
<li style="font-size: 18px"><a href="#">Privacy</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="f_widget social-widget pl_70 wow fadeInLeft" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInLeft;">
<h3 class="f-title f_600 t_color f_size_18">Hyper Coders : Social Media(s)</h3>
<div>
<span style="padding: 10px;"><a href="https://github.com/Tushar-sugandhi/Hyper-Coders.git"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg></a></span>
<span style="padding: 10px;"><a href=mailto:"example@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-envelope-fill" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/></svg></a></span>
<span style="padding: 10px;"><a href="https:linkedin.com"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/></svg></a></span>
<span style="padding: 10px;"><a href="https://instagram.com"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/></svg></a></span>
</div>
</div>
</div>
</div>
</div>
<div class="footer_bg">
<div class="footer_bg_one"></div>
<div class="footer_bg_two"></div>
</div>
</div>
<div class="footer_bottom" style="color: black;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-sm-7">
<p class="mb-0 f_400"><b><center>© Hyper Coders 2024. All rights reserved.</center></b></p>
</div>
</div>
</div>
</div>
</footer>
<!-- JavaScript ----------------------------------------------------------------------------------------------------------------------->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>