-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog-page.html
273 lines (265 loc) · 14.5 KB
/
blog-page.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
<!doctype html>
<html lang="en">
<head>
<!-- Title of The Page -->
<title>Gaspar | Personal Portfolio HTML Template</title>
<!-- Meta Informations -->
<meta charset="utf-8">
<meta name="description" content="Bootstrap 5 Responsive Gaspar | Personal Portfolio HTML Template">
<meta name="keywords"
content="Gaspar | Personal Portfolio HTML Template , template, bootstrap 5, ui template kit, Gaspar Personal Portfolio, html, css">
<meta name="author" content="Gaspar | Personal Portfolio HTML Template">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Favicon -->
<link type="image/x-icon" rel="shortcut icon" href="assets/images/logo/favicon.png" />
<!-- Font CSS -->
<link type="text/css" rel="stylesheet" href="assets/fonts/font.css" />
<!-- Font-Awesome All CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/all.css" />
<!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- Owlcarousel CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/owl.carousel.min.css" />
<!-- Fancybox CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.min.css" />
<!-- Animate CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/animate.min.css" />
<!-- colors CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/colors.css" />
<!-- Styles CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/styles.css" />
<!-- Live Style Switcher - demo only -->
<link id="style-switch" href="assets/css/colors/orange.css" media="screen" rel="stylesheet" type="text/css">
<!-- Responsive CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/responsive.css" />
</head>
<body>
<!-- Body Part Start -->
<div class="gaspar" data-magic-cursor="show" data-color="crimson">
<!-- Pre-Loader Start-->
<div id="preloader">
<div class="loader_line"></div>
</div>
<!-- Pre-Loader end -->
<!-- Style switcher start -->
<div class="style-switch-wrapper">
<div class="style-switch-button">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<h4>Unlimited Colors</h4>
<ul class="">
<li id="preset1" class=""><img src="assets/images/colors/orange.png" alt="orange" /></li>
<li id="preset2" class=""><img src="assets/images/colors/purple.png" alt="purple" /></li>
<li id="preset3" class=""><img src="assets/images/colors/red.png" alt="red" /></li>
<li id="preset4" class=""><img src="assets/images/colors/violet.png" alt="violet" /></li>
<li id="preset5" class=""><img src="assets/images/colors/blue.png" alt="blue" /></li>
<li id="preset6" class=""><img src="assets/images/colors/golden.png" alt="golden" /></li>
<li id="preset7" class=""><img src="assets/images/colors/magenta.png" alt="magenta" /></li>
<li id="preset8" class=""><img src="assets/images/colors/yellowgreen.png" alt="yellowgreen" /></li>
<li id="preset9" class=""><img src="assets/images/colors/green.png" alt="green" /></li>
<li id="preset10" class=""><img src="assets/images/colors/yellow.png" alt="yellow" /></li>
</ul>
<h4>Light Mode</h4>
<div class="switch" id="switcherrr">
<a href="../Light/blog-page.html"><i
class="fas fa-sun open"></i></a>
</div>
<h4 class="title">Magic Cursor</h4>
<ul class="cursor">
<li><a class="showme show" href="blog-page.html#"></a></li>
<li><a class="hide" href="blog-page.html#"><svg xmlns="http://www.w3.org/2000/svg" class="svg" id="Capa_1"
enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512">
<g>
<path d="m451.002 183.574h29.997v84.853h-29.997z"
transform="matrix(.707 -.707 .707 .707 -23.318 395.706)"></path>
<path d="m271.002 3.574h29.997v84.853h-29.997z" transform="matrix(.707 -.707 .707 .707 51.241 215.706)">
</path>
<path d="m423.574 31.002h84.853v29.997h-84.853z"
transform="matrix(.707 -.707 .707 .707 103.961 342.985)"></path>
<path
d="m42.422 512 150.458-150.458 42.114 125.464 152.988-362.988-362.988 152.988 125.464 42.114-150.458 150.458z">
</path>
<path d="m361 0h30v61h-30z"></path>
<path d="m451 121h61v30h-61z"></path>
</g>
</svg></a></li>
</ul>
<a target="_blank" href="https://themeforest.net/item/gaspar-personal-portfolio-html-template/36192601"
class="purchse-btn"><i class="fa fa-shopping-cart"></i> Purchase</a>
</div>
<!-- Header section Start-->
<div class="header-holder services-section text-center animate__animated animate__zoomIn">
<div class="navigation">
<ul class="nav">
<li class="list">
<a href="index.html"><span class="icon"><i class="fas fa-house-user"></i></span>
<div class="social__tooltip social__tooltip-bottom">Home</div>
</a>
</li>
<li class="list">
<a href="index.html"><span class="icon"><i class="fas fa-user-alt"></i></span>
<div class="social__tooltip social__tooltip-bottom">About</div>
</a>
</li>
<li class="list">
<a href="index.html#portfolio"><span class="icon"><i class="fas fa-briefcase"></i></span>
<div class="social__tooltip social__tooltip-bottom">Portfolio</div>
</a>
</li>
<li class="list active">
<a href="blog-page.html#blog" class="active"><span class="icon"><i class="fas fa-blog"></i></span>
<div class="social__tooltip social__tooltip-bottom">Blog</div>
</a>
</li>
<li class="list">
<a href="index.html"><span class="icon"><i class="fas fa-phone-alt"></i></span>
<div class="social__tooltip social__tooltip-bottom">Contact</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Header section End-->
<!-- Blog-page Section Start -->
<section id="blog-page" class="section active">
<div class="homecolor-box"></div>
<!-- Blog-content Start-->
<div class="common_bg animate__animated animate__fadeInDown">
<div class="container">
<!-- blog-content -->
<div class="blog-content">
<!-- Blog-page Title -->
<div class="row ">
<div class="col-12 ">
<div class="section-title animate__animated animate__fadeInDown animate__delay-0.8s">
<P class="common-desctiption">Everything You Need To Know</P>
<h1 class="common-title">my<span>blog</span></h1>
<div class="animated-bar"></div>
</div>
</div>
</div>
<!-- Blog-page Title End -->
<!-- Blog-header -->
<div class="row">
<div class="col-12 justify-content-center">
<div class="blog-header animate__animated animate__fadeInDown animate__delay-1s">
<span><i class="fa fa-user"></i> Alex Smith</span>
<span><i class="fa fa-tags"></i> design, webdesign, webdevelopment, business, IT industry</span>
</div>
</div>
</div>
<!--Blog-header End -->
<!-- Blog-Body Part Start -->
<div class="row">
<div class="col-12 justify-content-center">
<div class=" text-center animate__animated animate__fadeInUp animate__delay-2s">
<img src="assets/images/blog/01.jpg" alt="new blog" class="blog-img">
</div>
<div class="blog-body news-details animate__animated animate__fadeInLeft animate__delay-3s">
<span class="date">10 Dec, 2021</span>
<div class="animate__animated animate__fadeInLeft animate__delay-3s">
<h2 class="title">Women in Web Design: How To Achieve Success</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Qui debitis officia officiis illo.</p>
<h4>Be smart with your learning</h4>
<p>You can set yourself up for success at the very start of your career in web design. Being smart
with how you learn your trade will help you develop faster and better.
From understanding how you learn best to get the fundamentals under your belt quickly,
there’s a number of routes you can take to achieve your goals.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales, orci eu bibendum
efficitur, metus massa eleifend ex, vehicula consequat arcu libero vel leo. Vestibulum sit amet
felis rutrum, rhoncus justo id, semper lectus. Aliquam erat volutpat. Maecenas faucibus gravida
ornare. Praesent laoreet risus ac ligula volutpat, a imperdiet nunc auctor. Vivamus tincidunt eu
erat non scelerisque. Curabitur blandit tempus dui, ut aliquam lorem mattis vel. Duis pulvinar
volutpat ornare. Etiam id elementum dolor. Sed posuere eleifend massa vitae vehicula. Maecenas
metus felis, tincidunt sit amet lorem quis, malesuada ornare enim. Praesent a est sed purus
imperdiet venenatis. Ut quis sapien iaculis, tempus dui et, maximus ex. Sed in fringilla libero.
</p>
<p>Vivamus eget dolor pretium, dignissim turpis sit amet, faucibus orci. Quisque eget nunc eget
justo lobortis ultricies. Praesent id elit nisl. Praesent mauris magna, dapibus ut semper
faucibus, auctor vel quam. Maecenas facilisis ullamcorper turpis, dignissim tristique orci semper
eu. Vestibulum sit amet tortor vel metus congue placerat in at lorem. Suspendisse mollis tincidunt
dolor nec ultricies. Suspendisse potenti. Curabitur at libero purus. Aliquam lobortis tincidunt
risus, at ornare sapien.</p>
<h4>On-the-job experience</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales, orci eu bibendum
efficitur, metus massa eleifend ex, vehicula consequat arcu libero vel leo. <br>Vestibulum sit
amet felis rutrum, rhoncus justo id, semper lectus. Aliquam erat volutpat. Maecenas faucibus
gravida ornare. Praesent laoreet risus ac ligula volutpat, a imperdiet nunc auctor. Vivamus
tincidunt eu erat non scelerisque. Curabitur blandit tempus dui, ut aliquam lorem mattis vel. Duis
pulvinar volutpat ornare. Etiam id elementum dolor. Sed posuere eleifend massa vitae vehicula.
Maecenas metus felis, tincidunt sit amet lorem quis, malesuada ornare enim. Praesent a est sed
purus imperdiet venenatis. Ut quis sapien iaculis, tempus dui et, maximus ex. Sed in fringilla
libero.</p>
</div>
</div>
</div>
</div>
<!-- Blog-Body Part End -->
<!-- Contact form-->
<div class="contact-section animate__animated animate__fadeInRight animate__delay-3s">
<div class="row">
<div class="contact-form " id="contact-form">
<h4 class="content-title">Leave your Review</h4>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-6">
<form class="contact-form ">
<div class="col-12 form-group"><input class="form-control" id="contact-name" type="text" name="name"
placeholder="Name" required=""></div>
<div class="col-12 form-group"><input class="form-control" id="contact-email" type="email"
name="email" placeholder="Email" required=""></div>
<div class="col-12 form-group"><input class="form-control" id="contact-subject" type="text"
name="subject" placeholder="Subject" required=""></div>
</form>
</div>
<div class="col-lg-6">
<form class="contact-form ">
<div class="form-group form-message"><textarea class="form-control" id="contact-message"
name="message" placeholder="Message" rows="7" required=""></textarea>
</div>
</form>
</div>
<div class="mb-4 form-submit"><button class="clickbtn button-main button-scheme" id="contact-submit"
type="submit">Send Message</button>
</div>
</div>
<!-- Social media icons-->
<div
class="fixed-block d-flex animate__animated animate__jackInTheBox animate__delay-5s justify-content-center">
<ul class="list-unstyled social-icons p-3">
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-github-square"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram-square"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Blog-content End-->
</section>
<!-- Blog-page Section End-->
<!-- Mouse-Cursor -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-- Mouse-Cursor End-->
</div>
<!-- Body Part End -->
<!-- Optional JavaScript -->
<!-- Jquery Js -->
<script src="assets/js/jquery.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Wow Js -->
<script src="assets/js/wow.min.js"></script>
<!-- colors JS -->
<script src="assets/js/color.js"></script>
<!-- Style.switch.js -->
<script src="assets/js/style.switch.js"></script>
</body>
</html>