-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (254 loc) · 15 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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap CSS link-->
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<!--Font Awesome link-->
<link rel="stylesheet" href="CSS/all.css">
<!--Custum CSS link-->
<link rel="stylesheet" href="style.css">
<!--Google Font link-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Web Dev</title>
</head>
<body>
<!--Start Navigation Bar-->
<div class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<h1 class="navbar-brand text-dark font-weight-bold display-4"
style="font-family: cursive;"><a href="www.bhargav.com" style="text-decoration: none; color:rgba(0, 0, 0, 0.856);"><span class="c_2"><i class="fab fa-bootstrap text-danger px-1"></i>Bhargav's</span></a></h1>
<button type="button" class="navbar-toggler" data-target="#Menu" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse c_1" id="Menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item "><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item "><a href="#about" class="nav-link">About</a></li>
<li class="nav-item "><a href="#about" class="nav-link">Service</a></li>
<li class="nav-item "><a href="#team" class="nav-link">Team</a></li>
<li class="nav-item "><a href="#connect" class="nav-link">Connect</a></li>
</ul>
</div>
</div> <!--End Navigation-->
<!--Start Image Slider-->
<div class="carousel slide" data-ride="carousel" id="slideshow">
<ol class="carousel-indicators">
<li data-target="#slideshow" class="active" data-slide-to="0"></li>
<li data-target="#slideshow" data-slide-to="1"></li>
<li data-target="#slideshow" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-target="#slideshow">
<img src="image/background.png" class="d-block w-100 img-fluid" style="max-height: 500px; object-fit: cover;">
<div class="carousel-caption d-none d-sm-block d-md-block">
<h1 class="text-uppercase mb-3">Bootstrap</h1>
<h2 class="mb-3">Complete Website Layout</h2>
<button type="button" class="btn btn-outline-light btn-lg mb-5 ">View Demo</button>
<button type="button" class="btn btn-primary btn-lg mb-5">Get Started</button>
</div>
</div>
<div class="carousel-item" data-target="#slideshow">
<img src="image/background2.png" class="d-block img-fluid w-100" style="max-height: 500px; object-fit: cover;">
</div>
<div class="carousel-item" data-target="#slideshow">
<img src="image/background3.png" class="d-block img-fluid w-100" style="max-height: 500px; object-fit: cover;">
</div>
</div>
<a href="#slideshow" role="button" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slideshow" role="button" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div> <!--End Image Slider-->
<!--Start Jumbotron-->
<div class="container-fluid jumbotron" style="border-radius: 0%;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead mb-4">A web hosting service allows individuals and organizations to make their website accessible via the world wide web
</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2">
<button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button>
</div>
</div>
</div> <!--End Jumbotron-->
<!--Start Welcome Section-->
<div class="container-fluid">
<div class="container text-center c_5">
<p class="pb-4 display-4" >Built with ease.</p>
<h5 class="pt-4 mb-5 lead">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, autem! In accusamus praesentium quibusdam cumque veritatis aut iusto neque ea!</h5>
</div>
<div class="row pb-5 border-bottom">
<div class="col-sm-6 col-xs-12 col-md-6 col-lg-4 text-center mb-3">
<i class="fas fa-code fa-5x text-danger mb-2"></i>
<h3>HTML5</h3>
<p class="font-weight-bold">Built with the latest version of HTML, HTML5.</p>
</div>
<div class="col-sm-6 col-xs-12 col-md-6 col-lg-4 text-center mb-3">
<i class="fas fa-bold fa-5x mb-2" style="color: #563d7c;"></i>
<h3>BOOTSTRAP</h3>
<p class="font-weight-bold">Built with the latest version of Bootstrap, Bootstrap4.</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4 text-center mb-30">
<i class="fab fa-css3 fa-5x text-primary mb-2"></i>
<h3>CSS3</h3>
<p class="font-weight-bold">Built with the latest version of CSS, CSS3.</p>
</div>
</div>
</div> <!--End Welcome section-->
<!--Start Two Collumn Section-->
<div class="container-fluid pb-5">
<div class="row mt-5">
<div class="col-sm-12 col-md-12 col-lg-6 mb-5">
<h1>If you build it...</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, temporibus enim cupiditate ea similique maxime
praesentium laborum repellendus totam fugiat!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium aperiam quibusdam tempore, doloremque ab, eius, repellendus illo totam fugit similique cupiditate itaque dolorum non. In perspiciatis deserunt autem laborum nobis odio, optio laudantium eaque ea impedit dignissimos. Blanditiis, dolores pariatur!</p>
<p class="mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque ullam unde error rem sunt fugit explicabo iusto id. Nulla, ullam.</p>
<button type="button" class="btn btn-primary btn-lg">Learn More</button>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<img src="image/desk.png" class="img-fluid rounded" style="width: 100%; object-fit: cover;">
</div>
</div>
</div> <!--End Two Collumn Section-->
<!--Fixed Background-->
<hr class="my-4">
<figure>
<div class="fixed-wrap">
<div id="fixed"></div>
</div>
</figure>
<!--End Fixed Background-->
<!--Start Emoji Section-->
<button type="button" class="btn btn-light w-100" data-toggle="collapse" data-target="#emoji">Click for fun...</button>
<div id="emoji" class="collapse">
<div class="container-fluid">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img src="image/gif/chicken.gif" class="img-fluid">
</div>
<div class="col-sm-6 col-md-3">
<img src="image/gif/panda.gif" class="img-fluid">
</div>
<div class="col-sm-6 col-md-3">
<img src="image/gif/poo.gif" class="img-fluid">
</div>
<div class="col-sm-6 col-md-3">
<img src="image/gif/unicorn.gif" class="img-fluid">
</div>
</div>
</div>
</div> <!--End Emoji Section-->
<!--Start Team-->
<div class="container c_7" id="team">
<h1 class="display-4 text-center pt-5 pb-4" style="font-weight: 400; border-bottom: 3px solid rgba(0, 0, 0, 0.226);">Meet the Team</h1>
</div>
<div class="container-fluid mt-5">
<div class="row">
<div class="col-sm-12 col-md-4 mb-4">
<div class="card">
<img src="image/team1.png" class="card-img-top img-fluid mb-3">
<div class="card-body">
<div class="card-title"><h4>Jhon Doe</h4></div>
<div class="card-text lead mb-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam aliquid mollitia tempore, dicta ad unde deleniti soluta fugiat!</div>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 mb-4">
<div class="card">
<img src="image/team2.png" class="card-img img-fluid mb-3">
<div class="card-body">
<div class="card-title"><h4>Mary Jo</h4></div>
<div class="card-text lead mb-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam aliquid mollitia tempore, dicta ad unde deleniti soluta fugiat!</div>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 mb-4">
<div class="card">
<img src="image/team3.png" class="card-img img-fluid mb-3">
<div class="card-body">
<div class="card-title"><h4>Phil Ho</h4></div>
<div class="card-text lead mb-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam aliquid mollitia tempore, dicta ad unde deleniti soluta fugiat!</div>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
</div>
</div> <!--End Team-->
<!--Start two collumn section-->
<div class="container-fluid pb-5 border-bottom">
<div class="row mt-5">
<div class="col-lg-6 mb-4">
<h1>Our Philosophy</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, harum asperiores? Iure neque rerum enim aliquid laudantium quibusdam ducimus in!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ea asperiores sit quos quasi doloribus eum eveniet qui optio ab! Cum repellat nisi incidunt quasi. Libero aliquam sequi quam omnis, sed corporis, natus facere deleniti architecto iusto excepturi ipsa maxime!</p>
</div>
<div class="col-lg-6">
<img src="image/bootstrap2.png" class="img-fluid" >
</div>
</div>
</div> <!--End Two collumn Section-->
<!--Start Connect-->
<div class="container mt-5" id="connect">
<div class="row">
<div class="col-12 c_6">
<h2 class="display-4 text-center" style="font-weight: 350;">Connect</h2>
</div>
<div class="col-12 text-center c_4">
<a href="https://www.facebook.com/campaign/landing.php?campaign_id=1653993517&extra_1=s%7Cc%7C318504236063%7Ce%7Cfacebook%7C&placement&creative=318504236063&keyword=facebook&partner_id=googlesem&extra_2=campaignid%3D1653993517%26adgroupid%3D63066387003%26matchtype%3De%26network%3Dg%26source%3Dnotmobile%26search_or_content%3Ds%26device%3Dc%26devicemodel%3D%26adposition%3D%26target%3D%26targetid%3Dkwd-541132862%26loc_physical_ms%3D20468%26loc_interest_ms%3D%26feeditemid%3D%26param1%3D%26param2%3D&gclid=CjwKCAjwydP5BRBREiwA-qrCGrjCkxyzmcnnZQDqSMpTMRoY2ZNRo7FuMCarX4A_KKO_g7EkH8Ke8xoCLecQAvD_BwE" class="fab fa-facebook-square fa-4x"></a>
<a href="https://twitter.com/home" class="fab fa-twitter fa-4x"></a>
<a href="https//www.google.com" class="fab fa-google-plus-g fa-4x"></a>
<a href="https://www.instagram.com/i_a__j/?hl=en" class="fab fa-instagram fa-4x"></a>
<a href="https://www.youtube.com/channel/UC-rA33_DgEXdazJMwTIPaSw?view_as=subscriber" class="fab fa-youtube fa-4x"></a>
</div>
</div>
</div> <!--End Connect-->
<!--Start Footer-->
<footer id="about">
<div class="container-fluid bg-dark mt-5">
<div class="row text-center c_4 border-bottom pt-5 pb-5">
<div class="col-md-12 col-lg-4 mb-3">
<h1 style="font-family: cursive;"><a href="www.bhargav.com" style="color:#d5d5d5; text-decoration: none;" ><i class="fab fa-bootstrap px-1"></i>Bhargav's</a></h1>
<hr class="my-3">
<p >+91 7296909049</p>
<p >[email protected]</p>
<p ></p>JK puram, sirohi</p>
<p >Udaipur, Rajasthan, 307019</p>
</div>
<div class="col-md-12 col-lg-4 mb-3">
<hr class="my-3">
<h3>Our Hours</h3>
<hr class="my-3">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-12 col-lg-4 mb-3">
<hr class="my-3">
<h3>Service Area</h3>
<hr class="my-3">
<p>Sirohi, Rajasthan, 307019</p>
<p>jamnagar, Gujarat, 346589</p>
<p>peshwe, Hariyana, 897559</p>
<p>Gokolnagar, Mumbai, 472075</p>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-center pt-3 pb-3">
<span style="font-size: 24px;">©<a href="#" style="color: #d5d5d5; text-decoration: none;">Bhargav's.com</a></span>
</div>
</footer>
<!--Bootstrap Jquery link-->
<script src="js/jquery-3.5.1.js"></script>
<!--Popper js link-->
<script src="js/popper.js"></script>
<!--Bootstrap Java link-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>