-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
361 lines (321 loc) · 18.4 KB
/
index.html
File metadata and controls
361 lines (321 loc) · 18.4 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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!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">
<title>Opstel IT</title>
<link rel="stylesheet" href="assest/css_plugins/slick.css">
<link rel="stylesheet" href="assest/css_plugins/slick-theme.css">
<link rel="stylesheet" href="assest/header.css">
<link rel="stylesheet" href="assest/footer.css">
<link rel="stylesheet" href="assest/style.css">
<link rel="stylesheet" href="assest/layout.css">
</head>
<body>
<div class="wrapper">
<!-- header section -->
<header id="main_header" class="">
<div id="menu-container" class="">
<!-- Main nav bar -->
<nav class="nav-bar">
<!-- nav logo -->
<div class="logo">
<!-- <img src="assest/images/logo.png" alt=""> -->
<h2 class="logo">Opstel IT</h2>
</div><!-- nav logo end -->
<button class="menu-bar"><i class="fas fa-bars"></i></button>
<!-- nav bar items -->
<ul class="nav-items">
<button class="menu-close"><i class="fas fa-times"></i></button>
<li class="menu-items active"> <a href="index.html">Home</a></li>
<li class="menu-items"> <a href="service.html">Services</a></li>
<li class="menu-items"> <a href="Portfolio.html">Portfolio</a></li>
<li class="menu-items"> <a href="team.html">Team</a></li>
<li class="menu-items"> <a href="about.html">About Us</a></li>
<li class="menu-items"> <a href="contact.html">Contact Us</a></li>
</ul><!-- nav bar items end -->
</nav><!-- Main nav bar end -->
</div>
<div class="container">
<!-- hero section -->
<section class="hero_content">
<!-- left content box -->
<div class="left_content">
<div class="text-box">
<h2>we are the brilliants in <br> terms of digital<br> marketing</h2>
<p class="sort_desctiption">book your 30-minutes free strategy call.</p>
<a href="contact.html" id="btn">Book Now </a>
</div>
</div><!-- left content box end-->
<!-- right content box -->
<div class="right_content">
<div class="img_box">
<img src="assest/images/5141097.png" alt="">
</div>
</div><!-- right content box end-->
</section>
</div>
</header><!-- header section end-->
<!-- our features section -->
<section class="our_features">
<div class="contaienr">
<div class="heading">
<h4 class="sub_heading">Care Features</h4>
<h2 class="heading">Provide Awesome Services <br>with our tools</h2>
<p class="sort_desctiption">some of the features advantages that we provide fot those of you who store data in this data warehoue</p>
</div>
<!-- our services box contienr -->
<div class="our_services-box">
<!-- services item -->
<a href="#" class="serv_items">
<div class="img-box">
<img src="assest/images/web-design.svg" alt="">
</div>
<div class="text-box">
<h2 class="title">Web Design</h2>
<p>We progressively design a website with all the amazing features including attractive layout, user-friendly, SEO-optimized, mobile and desktop friendly, highly responsive, plugins and all the front-end design of a website.</p>
</div>
</a><!-- services item end -->
<!-- services item -->
<a href="#" class="serv_items">
<div class="img-box">
<img src="assest/images/web-dev.svg" alt="">
</div>
<div class="text-box">
<h2 class="title">Web Development</h2>
<p>Our Experts are always ready to look into your website and figure out where your website requires to be developed. We focus accordingly on the front-end, back-end, and full-stack development of a website.</p>
</div>
</a><!-- services item end -->
<!-- services item -->
<a href="#" class="serv_items">
<div class="img-box">
<img src="assest/images/Social-tree.svg" alt="">
</div>
<div class="text-box">
<h2 class="title">Digital marketing</h2>
<p>Digital Content promotion and development is one of the best services we provide. Our experts belong to a massive experience in digital marketing and promotion for any digital content to get its most possible result.</p>
</div>
</a><!-- services item end -->
</div><!-- our services box contienr end -->
</div>
</section><!-- our features section end -->
<!-- about us section -->
<section class="about_us">
<div class="container">
<!-- about use left content box-->
<div class="left_content">
<div class="text_box">
<h4 class="sub_heading">About Us</h4>
<h2 class="heading">We Lead From The Front</h2>
<p class="passage">
Opstel IT is a world-class Web Design and Development, Digital Technology, and Digital Marketing Company around the world. <br><br>The services we provide with reputation are Web Design and Development, Software Development, UI/UX Design, App Design, Product Design, Branding Design, E-Commerce, and Digital Content.
</p>
<a href="contact.html" id="btn1">Learn More</a>
<button id="watchVideo"><i class="fas fa-play"></i> Watch Video</button>
</div>
</div><!-- about use left content box-->
<!--about right content box -->
<div class="right_contente">
<div class="img_box">
<img src="assest/images/Team-pana.svg" alt="">
</div>
</div><!--about right content box -->
</div>
</section><!-- about us section end here -->
<!-- our clients -->
<section class="our_clients">
<div class="container">
<!--heading -->
<div class="heading">
<h4 class="sub_heading">clients</h4>
<h2 class="heading">Our Worldwide clients</h2>
<p class="sort_desctiption">some of the features advantages that we provide fot those of you who store data in this data warehoue</p>
</div><!--heading end-->
<div class="slider clients_logos">
<div class="items">
<img src="assest/images/clients/3.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/3.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/2.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/3.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/4.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/3.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/2.png" alt="">
</div>
<div class="items">
<img src="assest/images/clients/4.png" alt="">
</div>
</div>
</div>
</section><!-- our work end -->
<!-- our work -->
<section class="our_work">
<div class="container">
<!--heading -->
<div class="heading">
<h4 class="sub_heading">Our Best Work</h4>
<h2 class="heading">Our Latest Works</h2>
<p class="sort_desctiption">some of the features advantages that we provide fot those of you who store data in this data warehoue</p>
</div><!--heading end-->
<div class="works_slider">
<div class="items">
<div class="content">
<div class="left-content">
<h2 class="project_name">Hi-Fi E-commerce Website</h2>
<p class="project_dec">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
<a href="#" class="view_btn">View</a>
</div>
<div class="img_box">
<img src="assest/images/portfolio/HIFICOM-min.jpg" alt="">
</div>
</div>
</div>
<div class="items">
<div class="content">
<div class="left-content">
<h2 class="project_name">Sylcare E-commerce Website</h2>
<p class="project_dec">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
<a href="#" class="view_btn">View</a>
</div>
<div class="img_box">
<img src="assest/images/portfolio/sylcare-min.jpg" alt="">
</div>
</div>
</div>
<div class="items">
<div class="content">
<div class="left-content">
<h2 class="project_name">Seefood Website</h2>
<p class="project_dec">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
<a href="#" class="view_btn">View</a>
</div>
<div class="img_box">
<img src="assest/images/portfolio/seefood-min.jpg" alt="">
</div>
</div>
</div>
<div class="items">
<div class="content">
<div class="left-content">
<h2 class="project_name">Reliable Recruit</h2>
<p class="project_dec">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words</p>
<a href="#" class="view_btn">View</a>
</div>
<div class="img_box">
<img src="assest/images/portfolio/REL2-min.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section><!-- our work end -->
<!-- Contact us section -->
<section class="contact_us">
<div class="container">
<!-- Contact us left content box-->
<div class="left_content">
<div class="img_box">
<img src="assest/images/contact2.svg" alt="">
</div>
</div><!-- Contact us left content box-->
<!--about right content box -->
<div class="right_contente">
<h2 class="heading">Need a help? <br>don't worry just contact us </h2>
<form action=" ">
<input type="text" required placeholder="Full Name">
<input type="email" required placeholder="Email">
<textarea placeholder="Message" name="" id="" cols="30" rows="5"></textarea>
<button id="btn1" type="submit">submit</button>
</form>
</div><!--Contact right content box -->
</div>
</section><!-- about use section end here -->
<!-- footer section -->
<section class="footer">
<!-- footer heading -->
<div class="heding_box">
<h2 class="heading">Have a project in mind?</h2>
<a href="contact.html" id="btn1">Book Now</a>
</div> <!-- footer heading end-->
<!-- footer container -->
<div class="contaienr">
<!-- footer wedget one -->
<div class="wedget_1 items">
<div class="content">
<h2 class="w_title">About Opstel IT</h2>
<p class="passage">We are leading online marketing agency and web development company & we always promised to get the best result on our every project.</p>
<div class="social_box">
<li><a href="https://www.facebook.com/opstelit"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</div>
</div>
</div><!-- footer wedget one end-->
<!-- footer wedget two -->
<div class="wedget_2 items">
<div class="content">
<h2 class="w_title">Our Services</h2>
<ul>
<li><a href="service.html">Web Design</a></li>
<li><a href="service.html">Web Development</a></li>
<li><a href="service.html">Digital Marketing (SEO)</a></li>
<li><a href="service.html">Graphics Design</a></li>
<li><a href="service.html">Content Writing</a></li>
</ul>
</div>
</div><!-- footer wedget two end -->
<!-- footer wedget three -->
<div class="wedget_3 items">
<div class="content">
<h2 class="w_title">Quick Links</h2>
<ul>
<li><a href="#">Our Works</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!-- footer wedget three -->
<!-- footer wedget four -->
<div class="wedget_4 items">
<div class="content">
<h2 class="w_title">Address</h2>
<li><i class="fas fa-phone-alt"></i> <span>+88017xxxxxxx</span> </li>
<li><i class="far fa-envelope"></i> <span>[email protected]</span> </li>
<li><i class="fas fa-map-marker-alt"></i> <span>AL-HAMRA 6th floor, sylhet , Bangladesh</span> </li>
</div>
</div><!-- footer wedget four end-->
</div>
<div class="copyright">
<p>© 2021 Opstel IT All Rights Reserved</p>
</div>
</section> <!-- footer section end-->
<div class="watch_video_popup">
<div class="container">
<button class="close"><i class="fas fa-times"></i></button>
<iframe width="560" height="315" src="https://www.youtube.com/embed/X0g7F4ojpPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="assest/js_plugins/slick.min.js"></script>
<script src="assest/app.js"></script>
<script src="https://kit.fontawesome.com/f0ce275083.js"></script>
<script>
</script>
</body>
</html>