-
Notifications
You must be signed in to change notification settings - Fork 0
/
blogs.html
277 lines (243 loc) · 16.8 KB
/
blogs.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
<!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">
<link rel="icon" type="images/jpg" sizes="32x32" href="img/DX.jpg"/>
<title>Blog</title>
<link rel="stylesheet" href="css/all.min.css"> <!--font awesome-->
<link rel="stylesheet" href="css/bootstrap.css"> <!--bootstrap-->
<link rel="stylesheet" href="css/blogs.css"> <!--blogs style-->
<link rel="stylesheet" href="css/animate.min.css"> <!--animate css-->
<link rel="stylesheet" href="css/main.css"> <!--main stylesheet-->
</head>
<body data-wow-duration="2s" class="wow animate__animated animate__fadeIn">
<!-------navbar--------->
<article class="sticky-top height">
<nav class="navbar navbar-expand-lg navbar-light " id="nav">
<div class="container">
<a class="navbar-brand fw-bolder fs-2" href="#">DATAX</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 me-auto ms-auto fs-5">
<li class="nav-item m-3">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item m-3">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item m-3">
<a class="nav-link" href="services.html">Service</a>
</li>
<li class="nav-item m-3">
<a class="nav-link" href="blogs.html">Blog</a>
</li>
<li class="nav-item m-3">
<a class="nav-link" href="contact-us.html">Contact</a>
</li>
</ul>
<a href="contact-us.html" class="btn custom-btn-light d-lg-block d-none">Get A Quote <i class="fas fa-long-arrow-alt-right"></i></a>
</div>
</div>
</nav>
</article>
<!-----hero section------->
<article class="hero text-center text-md-start text-lg-start">
<section class="container hero-content">
<section>
<div class="content-1 text-start text-capitalize mb-5">
<p class="wow animate__animated animate__fadeIn">We keep safe & secure your data</p>
<h1 data-wow-delay="0.2s" class="pt-1 pb-1 fw-bold wow animate__animated animate__fadeIn">blog details</h1>
</div>
</section>
</section>
</article>
<!-----main section------>
<article class="main-blog custom-padding">
<section class="container text-capitalize">
<div class="row justify-content-between">
<!--first blog column-->
<div class="first-blog-column col-lg-8 col-md-12 col-sm-12 mb-5">
<img class="img-fluid " src="img/industry.svg" alt="">
<ul class="admin-info d-flex pt-4 pb-4 ps-3 mt-4 list-unstyled">
<li class="me-5"><i class="far fa-user pe-1"></i>by admin</li>
<li><i class="far fa-calendar-alt pe-1"></i>June 27, 2021</li>
</ul>
<p class="custom-paragraph">Praesent consectetur velit eu mauris porttitor ultricies. Nam volutpat pretium lacinia. Aenean vel ipsum non turpis efficitur accumsan. Donec ut purus quam. Nam eleifend id metus quis faucibus. Donec dapibus ligula ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt purus mattis arcu convallis, sit amet tincidunt ex rhoncus. Etiam nec justo sit amet quam dapibus lobortis. Sed porta, lacus sit amet auctor commodo, libero ex suscipit dolor, quis egestas libero velit nec turpis. Nunc et risus non erat fringilla rutrum. Curabitur sollicitudin lobortis lectus, eget congue nisi imperdiet gravida. Etiam eget vestibulum quam, ut gravida justo. In tortor massa, posuere in dolor ac, pulvinar tincidunt nisi. Vestibulum vitae massa non nibh cursus auctor.</p>
<div class="quote-paragraph p-4 mt-2 mb-4">
<p>- harold riddle</p>
<p>Fusce posuere risus vel odio gravida pellentesque. Morbi et condimentum leo. Aenean elit magna commodo at blandit gravida congue et ligula. Maecenas mattis dui sit amet porttitor condimentum.</p>
</div>
<div class="row mt-5">
<ul class="col-6 list-unstyled">
<h4>Proin ultricies mi eget laoreet tincidunt:</h4>
<li class="pt-3 pb-3"><i class="fas fa-check pe-1"></i>Mauris nec gravida quam, eu aliquet purus</li>
<li class="pt-3 pb-3"><i class="fas fa-check pe-1"></i>Sed vehicula sit amet erat egestas tincidunt.</li>
<li class="pt-3 pb-3"><i class="fas fa-check pe-1"></i>Fusce posuere risus vel odio gravida pellentesque.</li>
<li class="pt-3 pb-3"><i class="fas fa-check pe-1"></i>Praesent consectetur velit eu mauris porttitor ultricies.</li>
<li class="pt-3 pb-3"><i class="fas fa-check pe-1"></i>Nam interdum nulla quis justo eleifend rutrum.</li>
</ul>
<div class="col-6">
<img class="img-fluid" src="img/blog1.jpg" alt="">
</div>
</div>
<h4>Fusce condiment massa et scelerisque molestie</h4>
<p class="custom-paragraph">Proin ultricies, mi eget laoreet tincidunt, urna justo porta risus, id porttitor erat nunc quis ante. Nullam tellus est, ultricies ut orci ac, porttitor semper turpis. In mollis accumsan egestas. Fusce et nibh venenatis libero rhoncus faucibus vel quis erat. Aliquam tempus odio ut lacus congue, at laoreet ipsum imperdiet. Suspendisse placerat consequat erat, vitae aliquet risus vehicula sed. Pellentesque sem neque, ornare eu lacus ut, venenatis auctor augue. Morbi vulputate sapien vitae velit vestibulum, et pharetra arcu tristique. Morbi aliquam elementum dolor quis vehicula. Aenean posuere vitae mauris sed molestie. Praesent interdum eu metus quis mattis.</p>
</div>
<!--second blog column-->
<div class="second-blog-column col-lg-4 col-md-12 col-sm-12">
<div class="search-area d-flex flex-row card p-4 wow animate__animated animate__fadeIn">
<input type="text" placeholder="search here...">
<a class="btn ms-1" href="#"><i class="fas fa-search"></i></a>
</div>
<div data-wow-delay="0.2s" class="categories card p-4 mt-5 wow animate__animated animate__fadeIn">
<h4>categories</h4>
<ul class="list-unstyled">
<li class="mt-2"><i class="fas fa-angle-double-right me-1"></i>data analysis</li>
<li class="mt-3"><i class="fas fa-angle-double-right me-1"></i>digital marketing</li>
<li class="mt-3"><i class="fas fa-angle-double-right me-1"></i>big data process</li>
<li class="mt-3"><i class="fas fa-angle-double-right me-1"></i>data collection</li>
<li class="mt-3"><i class="fas fa-angle-double-right me-1"></i>digital world</li>
</ul>
</div>
<div data-wow-delay="0.4s" class="latest-post card p-4 mt-5 wow animate__animated animate__fadeIn">
<h4 class="mb-4">Latest Posts</h4>
<ul class="list-unstyled">
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer1.jpg" alt="">
<div>
<a href="#">Etiam nisi odio malesuada non pretium ut</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer2.jpg" alt="">
<div>
<a href="#">Aenean venenatis lorem massa nec rutrum</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer3.jpg" alt="">
<div>
<a href="#">Ociosqu ad litora torquent perlo conubia</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
</ul>
</div>
<div data-wow-delay="0.6s" class="follow-us card p-4 mt-5 wow animate__animated animate__fadeIn">
<h4>follow us</h4>
<div class="followus-social mt-4">
<a class="p-3 me-2" href="#"><i class="fab fa-behance"></i></a>
<a class="p-3 me-2" href="#"><i class="fab fa-twitter"></i></a>
<a class="p-3 me-2" href="#"><i class="fab fa-google-plus-g"></i></a>
</div>
</div>
<div data-wow-delay="0.8s" class="popular-tags card p-4 mt-5 wow animate__animated animate__fadeIn">
<h4>Popular Tags</h4>
<div class="tags mt-4 d-flex flex-wrap">
<a class='p-3 mt-2 me-2' href="">data</a>
<a class='p-3 mt-2 me-2' href="">analysis</a>
<a class='p-3 mt-2 me-2' href="">process</a>
<a class='p-3 mt-2 me-2' href="">digital</a>
<a class='p-3 mt-2 me-2' href="">creative</a>
<a class='p-3 mt-2' href="">collect</a>
</div>
</div>
</div>
</div>
</section>
</article>
<!----footer----->
<article class="footer custom-padding text-capitalize">
<section class="container">
<div class="row justify-content-between">
<div class="first-section section col-lg-3 col-md-6 col-sm-12">
<h2 class="mb-4 h1 fw-bold text-uppercase">datax</h2>
<p class="custom-paragrapg-3 mt-4 mb-4">We vel ex eu diam aliquam fermentum. Maecenas leo tellus tincidunt auctor massa nec sagittis scelerisque nunc. Cras nisi tellus luctus at nisi venenatis lacinia.</p>
<div class="footer-social-icon d-flex">
<a class="p-2" href=""><i class="p-1 fab fa-behance"></i></a>
<a class="p-2 ms-1" href=""><i class="p-1 fab fa-linkedin-in"></i></a>
<a class="p-2 ms-1" href=""><i class="p-1 fab fa-twitter"></i></a>
<a class="p-2 ms-1" href=""><i class="p-1 fab fa-google-plus-g"></i></a>
</div>
</div>
<div class="second-section section col-lg-3 col-md-6 col-sm-12">
<h4 class="mb-4 fw-bold">important links</h4>
<ul class="list-unstyled">
<li><a href="about-us.html"><i class="fas fa-angle-double-right"></i> abour us</a></li>
<li><a href="FAQ.html"><i class="fas fa-angle-double-right"></i> faq</a></li>
<li><a href="blogs.html"><i class="fas fa-angle-double-right"></i> our blog</a></li>
<li><a href="services.html"><i class="fas fa-angle-double-right"></i> our services</a></li>
<li><a href="contact-us.html"><i class="fas fa-angle-double-right"></i> contact us</a></li>
<li><a href="404.html"><i class="fas fa-angle-double-right"></i>Error 404</a></li>
</ul>
</div>
<div class="third-section section col-lg-3 col-md-6 col-sm-12">
<h4 class="mb-4 fw-bold">contact info</h4>
<ul class="list-unstyled">
<li class="d-flex">
<span class="me-3 p-2"><i class="fas fa-map-marked-alt p-2"></i></span>
<div>2191 Railroad Street,<br>New York, USA</div>
</li>
<li class="d-flex">
<span class="me-3 p-2"><i class="fas fa-phone-alt p-2"></i></span>
<div>+1 123 456 7894<br>+1 123 456 7895</div>
</li>
<li class="d-flex">
<span class="me-3 p-2"><i class="far fa-envelope p-2"></i></span>
<div>info@example.com<br>sales@example.com</div>
</li>
<li class="d-flex">
<span class="me-3 p-2"><i class="far fa-clock p-2"></i></span>
<div>Fri-Mon<br>08:00pm - 06:00pm</div>
</li>
</ul>
</div>
<div class="fourth-section section col-lg-3 col-md-6 col-sm-12">
<h4 class="mb-4 fw-bold">Latest Posts</h4>
<ul class="list-unstyled">
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer1.jpg" alt="">
<div>
<a href="#">Etiam nisi odio malesuada non pretium ut</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer2.jpg" alt="">
<div>
<a href="#">Aenean venenatis lorem massa nec rutrum</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
<li class="d-flex">
<img class="img-fluid me-3" src="img/footer3.jpg" alt="">
<div>
<a href="#">Ociosqu ad litora torquent perlo conubia</a>
<p class="mt-2"><i class="far fa-calendar-alt"></i> June 27, 2021</p>
</div>
</li>
</ul>
</div>
</div>
</section>
</article>
<!-----scroll to top icon------->
<a id="scroll" class="scrollTop" href="#">
<i class="fas fa-chevron-up"></i>
</a>
<!--script-->
<script src="js/bootstrap.min.js"></script> <!--bootstrap-->
<script src="js/wow.min.js"></script> <!--wow animation on scroll-->
<script>
wow = new WOW()
.init();
</script> <!--wow init-->
<script src="js/main.js"></script> <!--main javascript file-->
</body>
</html>