-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
259 lines (247 loc) · 14.6 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
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
<!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">
<meta name="description" content="U-Move a smarter, faster, greener way to get around campus.">
<meta name="keywords" content="u-move,chitkara,university,HTML, CSS, JavaScript">
<meta name="author" content="Dev Dynamos">
<title>U-Move - The smarter, faster, greener way to get around campus."</title>
<link rel="icon" type="image/png" href="images/logopng.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Bruno Ace' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body onload="loader_off()">
<div id="loading"></div>
<!-- Navbar section -->
<header class="header sticky">
<a href="#home">
<img src="images/logo2.png" alt="U-move logo" class="logo" /></a>
<nav class="navbar">
<ul class="navbar-list">
<li class="li-all"><a class="navbar-link" href="#home">Home</a></li>
<li class="li-all"><a class="navbar-link" href="#about">About</a></li>
<li class="li-all"><a class="navbar-link" href="#services">Services</a></li>
<li class="li-all"><a class="navbar-link" href="#spots">spots</a></li>
<li class="li-all"><a class="navbar-link" href="#contact">Contact Us</a></li>
<a href="loginSignUp.html"><button class="btn" style="background-color: red; border-radius: 30px; height: 5rem;font-family: bruno ace;
box-shadow: rgba(0,0,0,0.3) 0px 19px 38px,rgba(0,0,0,0.22) 0px 15px 12px; font-size: 1.8rem; color: white;
">Login/Signup</button></a>
</ul>
</nav>
<div class="mobile-navbar-btn">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
<ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
</div>
</header>
<!-- Hero Section -->
<section class="section-hero" id="home">
<!-- leftside code -->
<div class="hero-leftside">
<h1>The smarter, faster, greener way to get around campus.</h1>
<p>Zip around campus sustainably with our electric scooter service. Download our app to rent and ride hassle-free!</p>
<div class="button-group">
<a href="#">
<img src="images/google-play.png" alt="Playstore" class="playstore">
</a>
<a href="#">
<img src="images/app-store.png" alt="applestore" class="appstore"
>
</a>
</div>
</div>
<!-- rightside code -->
<div class="hero-rightside">
<img src="images/product.png" alt="heroimg">
</div>
</section>
<!-- About Section -->
<section class="section-about" id="about">
<!-- left side of sabout section -->
<div class="left-side">
<img src="images/demo.png" alt="demo">
</div>
<div class="right-side">
<h2>ABOUT</h2>
<p>Our campus offers a paid electric scooter service with charging stations available for use. Our service provides
convenient and efficient transportation options for a fee. We aim to provide access to sustainable transportation and
contribute to a greener campus environment.</p>
<button class="btn common-button" style="background-color: red; border-radius: 30px; height: 5rem;font-family: bruno ace;
box-shadow: rgba(0,0,0,0.3) 0px 19px 38px,rgba(0,0,0,0.22) 0px 15px 12px; font-size: 1.8rem;width: 17.2rem;
">Learn More</button>
</div>
</section>
<!-- Services Section -->
<section class="Section-Services" id="services">
<h2>Our Services</h2>
<p class="inner-text">Explore the services we offer</p>
<div class="section-services-task">
<div class="task-1">
<img src="images/2.png">
<h3>EV Scooter</h3>
<p>This service provides electric scooters specifically designed for students and staff members within the university
campus.</p>
</div>
<div class="task-2">
<img src="images/1.png">
<h3>Goods Delivery</h3>
<p>This service focuses on transporting luggage and belongings for students, staff, and visitors within the university
campus.</p>
</div>
<div class="task-3">
<img src="images/3.png">
<h3>University Shuttle</h3>
<p>This service provides convenient transportation for students, staff, and visitors within the university campus.</p>
</div>
</div>
</section>
<!-- spots section -->
<section class="section-about" id="spots">
<div class="right-side">
<h2>SPOTS</h2>
<p>Our electric campus transport service offers eco-friendly electric scooters for easy campus travel. Check out our Google
Map to find our parking slots and charging booths.</p>
<a href="" target="_blank"><button class="btn common-button" style="background-color: red; border-radius: 30px; height: 5rem;font-family: bruno ace;
box-shadow: rgba(0,0,0,0.3) 0px 19px 38px,rgba(0,0,0,0.22) 0px 15px 12px; font-size: 1.8rem;
">View</button></a>
</div>
<!-- left side of sabout section -->
<div class="left-side">
<p>Map Space</p>
</div>
</section>
<!-- Section for contact us -->
<section id='contact' class="contact">
<h2 class="text-center">Contact Us</h2>
<form method="post" action="" name="contact-form" class="form" id="contact-form">
<input class="form-input" type="text" name="name" id="name" placeholder="Enter your name">
<input class="form-input" type="phone" name="phone" id="phone" placeholder="Enter your Phone No.">
<input class="form-input" type="email" name="email" id="email" placeholder="Enter your E-mail">
<textarea class="form-input" name="message" id="message" cols="20" rows="5"
placeholder="enter your message"></textarea>
<input type="submit" class="btnsub" value="Submit" id="submit">
</form>
</section>
<footer class="footer-section">
<div class="container">
<div class="footer-cta pt-5 pb-5">
<div class="row">
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<i class="fas fa-map-marker-alt"></i>
<div class="cta-text">
<h4>Find us</h4>
<span>1010 Avenue, sw 54321, chandigarh</span>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<i class="fa fa-phone" aria-hidden="true"></i>
<div class="cta-text">
<h4>Call us</h4>
<span>9876543210 0</span>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 mb-30">
<div class="single-cta">
<div class="cta-text">
<h4> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="red" 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.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.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.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"></path>
</svg>
Mail us <hr> <span>[email protected]</span>
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="footer-content pt-5 pb-5">
<div class="row">
<div class="col-xl-4 col-lg-4 mb-50">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html"><img src="images/logo2.png" class="img-fluid" alt="logo"></a>
</div>
<div class="footer-text">
<p>Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do eiusmod tempor incididuntut consec tetur adipisicing
elit,Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 mb-30">
<div class="footer-widget">
<div class="footer-widget-heading">
<h3>Useful Links</h3>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Expert Team</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Latest News</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 mb-50">
<div class="footer-widget">
<div class="footer-widget-heading">
<h3>Subscribe</h3>
</div>
<div class="footer-text mb-25">
<p>Don’t miss to subscribe to our new feeds, kindly fill the form below.</p>
</div>
<div class="subscribe-form">
<form name="submit-to-google-sheet">
<input type="email" name="Email" placeholder="Email Address" required>
<button><i class="bi bi-telegram"></i>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
</svg></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 text-center text-lg-left copyright-area-flex">
<div class="copyright-text">
<p>Copyright © 2023, All Right Reserved </p>
</div>
</div>
<div class="col-xl-6 col-lg-6 d-none d-lg-block text-right copyright-area-flex">
<div class="footer-menu">
<ul class="m-0">
<li><a href="#">Home</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Policy</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>