-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
280 lines (245 loc) · 14.4 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
280
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev Online</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand ml-3">Dev Online</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"></div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn menu-right-btn border" type="submit">Request A Quote</button>
</form>
</div>
</nav>
</header>
<main>
<div class="container-fluid p-0">
<div class="site-content">
<div class="d-flex justify-content-center">
<div class="d-flex flex-column text-center">
<h1 class="site-title">Dev Online</h1>
<p class="site-desc">The Power of Bootstrap Discover it with The Future. New HTML Templates Genaration.</p>
<div class="d-flex flex-row">
<input type="button" value="Learn More" class="btn site-btn1 px-4 py-3 mr-4 btn-primary" />
<input type="button" value="Services" class="btn site-btn2 px-4 py-3 mr-4 btn-light" />
</div>
</div>
</div>
</div>
</div>
<div class="section-1">
<div class="container text-center">
<h1 class="heading-1">Fantastic Features</h1>
<h1 class="heading-2">& Different Types of Template</h1>
<p class="para-1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="row justify-content-center text-center">
<div class="col-md-4">
<div class="card">
<img src="./images/responsive.jpeg" alt="image" class="card-image-top" />
<div class="card-body">
<h4 class="card-title">Responsive</h4>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="./images/ui &ux.png" alt="image" class="card-image-top" />
<div class="card-body">
<h4 class="card-title">UI / UX</h4>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="./images/flexible.jpeg" alt="image" class="card-image-top" />
<div class="card-body">
<h4 class="card-title">Flexible</h4>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-2">
<div class="container-fluid">
<div class="d-flex justify-content-end">
<div class="d-flex flex-column m-4">
<h1 class="heading-1">Like & Share Your Love</h1>
<p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<input type="button" name="show" value="Show" class="btn btn-light">
</div>
</div>
</div>
</div>
<div class="section-3">
<div class="container">
<h1 class="heading-1 text-center">Our Services</h1>
<hr class="hr-line-1"/>
<div class="row">
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="fas fa-pencil-ruler fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Bootstrap Framework</h4>
<p class="m-2">The Future is based on Bootstrap Framework, which makes it a nice template for any purpose.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="fas fa-tv fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Responsive & Retina Ready</h4>
<p class="m-2">The Future looks great on any screen resolution and on any device due to its responsiveness.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="fas fa-city fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Tons Of Tools For Real Needs</h4>
<p class="m-2">Event calendar, bookings and schedule are just some of tools that come on board.</p>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="fas fa-home fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Though Through Layout</h4>
<p class="m-2">Huge number of content layouts allow to assemble unique pages with great flexibility.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="far fa-edit fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Clean & Crispy Design</h4>
<p class="m-2">The Future is crafted by top industry leaders with love, care and customer needs in mind.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="d-flex flex-row">
<i class="fas fa-magic fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Build For Speed</h4>
<p class="m-2">Our template was built for speed. Get the best results at GTmetrix and Google PageSpeed.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-4">
<div class="container-fluid p-0">
<div class="row">
<div class="col-md-5">
<img src="images/section-4.jpeg" alt="section-4" width="100%" height="100%" />
</div>
<div class="col-md-7">
<h3 class="heading-1">About Us</h3>
<hr class="h-line-1" />
<br />
<p class="para-1">We are a team of professional, energetic individuals with talented designers and experienced managers
available to guide our clients through the flawless and timely execution of any web design project.
Since day one, we have been delivering creative and unique websites to our clients worldwide.</p>
<div class="d-flex flex-row">
<div class="col-md-6">
<div class="d-flex flex-row">
<i class="fas fa-pencil-ruler fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Bootstrap Framework</h4>
<p class="m-2">The Future is based on Bootstrap Framework, which makes it a nice template for any purpose.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex flex-row">
<i class="far fa-edit fa-2x m-2"></i>
<div class="d-flex flex-column">
<h4 class="m-2">Clean & Crispy Design</h4>
<p class="m-2">The Future is crafted by top industry leaders with love, care and customer needs in mind.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="section-5 text-center">
<h4 class="footer-heading-2">Get Templates from Dev Online</h4>
<h4 class="my-4">If You Need any Help</h4>
<div class="form-inline justify-content-center">
<input type="text" name="Email" id="email" placeholder="Email" size="40px;" class="form-control px-4 py-2" />
<input type="button" value="Contact Us" class="btn btn-light px-4 py-2" />
</div>
<div class="social">
<div class="d-flex flex-row justify-content-center">
<i class="fab fa-facebook-f m-2"></i>
<i class="fab fa-twitter m-2"></i>
<i class="fab fa-instagram m-2"></i>
<i class="fab fa-youtube m-2"></i>
<i class="fab fa-linkedin m-2"></i>
</div>
<hr>
<h5 class="footer-heading">Dev Online ©</h5>
</div>
</div>
</footer>
<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://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>
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({ duration : 1000 });
sr.reveal('.site-content .d-flex');
sr.reveal('.section-1 .card');
sr.reveal('.section-2 .d-flex');
sr.reveal('.section-3 .col-md-4');
sr.reveal('.section-4 .col-md-7');
</script>
</body>
</html>