-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
208 lines (164 loc) · 8.17 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boted</title>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Carter+One&family=Dancing+Script:wght@500&family=Lobster&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- fontawesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<!-- Title -->
<nav>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #222831">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Boted</a>
<div class="collapse navbar-collapse id="navbarTogglerDemo">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#features">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Bots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Contact</a>
</li>
</ul>
</div>
</nav>
<section id="title">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1 class="big-h">Bring home your smart little companion.</h1>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-outline-dark" type="button"><i class="fas fa-sign-in-alt"></i> Subscribe</button>
</div>
</div>
<div class="col-lg-6">
<img class="title-img" src="https://miro.medium.com/max/640/1*HorjAr_5bsCJwF3yBmnoPA.jpeg" alt="household-bot">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3 class="feature-heading">Easy to use</h3>
<p class="feature-detail">Just say "Hey Boted, start vaccuming" and consider it done.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-robot fa-4x"></i>
<h3 class="feature-heading">Digital bumper</h3>
<p class="feature-detail">Multiple Ultrasonic sensors of Boted recognize obstacles precisely and minimize collision by even sensing transparent objects.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-toolbox fa-4x"></i>
<h3 class="feature-heading">Hassle Free Installation</h3>
<p class="feature-detail">Once you place order, your installation request will be generated post-delivery and our expert engineers will guide you through user manual.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">The Endhira 270 from boted is truly a fabulous addition to our home! A magnificent robot which cleans our home like it's never been cleaned before.
Will recommend it to anyone who needs household help without tears.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">We were skeptical to make the purchase initially, thinking whether it would suit our living. But once we saw
the demo, we made up our mind and knew this is something we want being the cleanliness freaks. And, OMG this keeps our floors so clean that
even our maid feels that it's magic.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<!-- Pricing -->
<section class="white-section" id="pricing">
<h2 class="section-heading">Explore our Bots</h2>
<div class="row">
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h2>Endhira 270</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtqzUikVlXkk4QxflR2MCXdjqOtdoMyH945w&usqp=CAU" class="card-img-top" alt="Endhira">
</div>
<div class="card-body">
<h3 class="price-text">Rs 18,449</h3>
<p>LDS Laser Navigation System</p>
<p>2-in-1 Sweeping & Mopping Function</p>
<p>2000 Pa Powerful Suction</p>
<p>Intelligent Mapping and Route Planning</p>
<button class="w-100 btn btn-lg btn-block btn-outline-dark" type="button">Buy Now</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h2>Robie 310</h2>
<img src="https://i.pinimg.com/originals/8f/58/9c/8f589c494835745297e13d6e5b27c434.jpg" class="card-img-top" alt="Robie">
</div>
<div class="card-body">
<h3 class="price-text">Rs 33,999</h3>
<p>Contains an iPad with a size of 9 inches</p>
<p>Intelligent Route Setting</p>
<p>Multi-point Delivery</p>
<p>Business Explanation and fun chat</p>
<button class="w-100 btn btn-lg btn-block btn-outline-dark" type="button">Buy Now</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4">
<div class="card">
<div class="card-header">
<h2>Bosso 975</h2>
<img src="https://i.guim.co.uk/img/media/397f19630c41a3ed63918c2e0e9e9060e0ad9706/158_60_1611_967/master/1611.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=d72f7e7085307cacab465c5c2fe0bc30" class="card-img-top" alt="Bosso">
</div>
<div class="card-body">
<h3 class="price-text">Rs 49,800</h3>
<p>Tele connect Feature For Video Calling</p>
<p>Face Recognition</p>
<p>Parental Control</p>
<p>Play Music,Dance,serve and Tell Stories</p>
<button class="w-100 btn btn-lg btn-block btn-outline-dark" type="button">Buy Now</button>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="colored-section" id="cta">
<h3 class="cta-h">Get your all-time companion today.</h3>
</section>
<!-- Footer -->
<footer id="footer">
<p class="footer-h">© Copyright 2020 Boted</p>
</footer>
<!-- Bootstrap Scripts (Always add scripts after HTML Elements and Tags i.e., end of the body) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>