-
Notifications
You must be signed in to change notification settings - Fork 2
/
blog.html
205 lines (189 loc) · 10.4 KB
/
blog.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="mystyle.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<title>Blog</title>
</head>
<body>
<!--Start of Container Hero-head-->
<div class="hero-head">
<nav class="navbar is-dark">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<span style="font-weight: bolder; font-size: 28px;"> TRAVEL</span>
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroB" class="navbar-menu ">
<div class="navbar-end ">
<a class="navbar-item is-active " href="index.html">
Home
</a>
<a class="navbar-item " href="blogs.html">
Blogs
</a>
<a class="navbar-item " href="contact.html">
Contact
</a>
</div>
</div>
</div>
</nav>
</div>
<!--End of Hero-head-->
<!-- .section -->
<section class="section is-paddingless-horizontal">
<div class="container grid">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="blogs.html">Home</a></li>
<li class="is-active"><a href="#" aria-current="page">How to build a beautiful blog</a></li>
</ul>
</nav>
</div>
</section>
<!-- /.section -->
<!-- .section -->
<section class="section is-paddingless-horizontal" style="padding-top: 0;">
<div class="container grid" style="max-width: 1024px;">
<!-- .media -->
<article class="media center">
<figure class="media-left">
<span class="image is-64x64">
<img src="https://bulma.io/images/placeholders/96x96.png" class="is-rounded">
</span>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Sanjay Kandel</strong> <a>@username_sanjay</a><br>
<span class="has-text-grey">Self-taught, inspired to learn<br>
<time datetime="2018-04-20">May 30</time> · 4 min read</span>
</p>
</div>
</div>
</article>
<!-- /.media -->
<!-- .section -->
<div class="section is-paddingless-horizontal">
<h1 class="title is-2">
This is Travel Blog Demo
</h1>
<h2 class="subtitle is-3 has-text-grey-light">
My visit to golden temple.
</h2>
</div>
<!-- /.section -->
<!-- .columns -->
<figure class="columns is-mobile is-variable is-0 is-marginless grid-xl">
<div class="column">
<div class="image card">
<a><img src="https://unsplash.it/600/500/?random&pic=1"></a>
</div>
</div>
<div class="column">
<div class="image card">
<a><img src="https://unsplash.it/600/500/?random&pic=2"></a>
</div>
</div>
<div class="column">
<div class="image card">
<a><img src="https://unsplash.it/600/500/?random&pic=3"></a>
</div>
</div>
</figure>
<figcaption class="level">
<small class="level-item has-text-grey">
Blog Images
</small>
</figcaption>
<!-- /.columns -->
<div class="content is-medium">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
similique fuga tenetur vitae sit amet ratione! Eos ab consequuntur sapiente quos!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates officiis obcaecati tenetur ducimus ipsam alias inventore. Aliquid ex mollitia qui velit? Magni corporis commodi natus est eligendi quis, harum quo.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deserunt, voluptates dicta quod eligendi, odio est fugit numquam repellendus
temporibus animi nostrum modi vel aliquam quo in accusantium, veritatis ullam ipsum?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deserunt, voluptates <strong>This text is bold</strong>, odio est fugit numquam repellendus
temporibus animi nostrum modi vel aliquam quo in accusantium, veritatis ullam ipsum?
</p>
</div>
<img src="https://unsplash.it/1920/600/?random&pic=4" class="grid-xl" alt="">
<div class="content is-medium" style="padding-top: 20px;">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
similique fuga tenetur vitae sit amet ratione! Eos ab consequuntur sapiente quos!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates officiis obcaecati tenetur ducimus ipsam alias inventore. Aliquid ex mollitia qui velit? Magni corporis commodi natus est eligendi quis, harum quo.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deserunt, voluptates dicta quod eligendi, odio est fugit numquam repellendus
temporibus animi nostrum modi vel aliquam quo in accusantium, veritatis ullam ipsum?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deserunt, voluptates <strong>This text is bold</strong>, odio est fugit numquam repellendus
temporibus animi nostrum modi vel aliquam quo in accusantium, veritatis ullam ipsum?
</p>
</div>
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a></li>
<li><a class="pagination-link" aria-label="Goto page 2">2</a></li>
<li><a class="pagination-link" aria-label="Goto page 3">3</a></li>
<li><a class="pagination-link" aria-label="Goto page 4">4</a></li>
<li><a class="pagination-link" aria-label="Goto page 5">5</a></li>
</ul>
</nav>
</div>
<!-- Social Icons -->
<div class="social-icons center" style="padding-top: 20px;">
<div class="icon-div">
<span class="icon">
<a><img src="https://img.icons8.com/fluent/48/000000/facebook-new.png"/></a>
</span>
</div>
<div class="icon-div">
<span class="icon" >
<a><img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/></a>
</span>
</div>
<div class="icon-div">
<span class="icon">
<a> <img src="https://img.icons8.com/fluent/48/000000/twitter.png"/></a>
</span>
</div>
</div>
<!-- End Social Icons -->
</section>
<footer class="footer">
<div class="container has-text-white">
<div class="content has-text-centered">
<p>
Designed and Developed by Sanjay.
</p>
</div>
</div>
</footer>
<!-- /.section -->
<script src="script.js"></script>
</body>
</html>