forked from BulmaTemplates/bulma-templates
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog-post.html
More file actions
168 lines (156 loc) · 7.62 KB
/
Copy pathblog-post.html
File metadata and controls
168 lines (156 loc) · 7.62 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Post - Free Bulma template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" id="bulma" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="../css/blog-post.css">
</head>
<body>
<div class="container">
<nav class="nav section" id="top">
<div class="nav-left">
<a class="nav-item">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma logo">
</a>
</div>
<div class="nav-center">
<a class="nav-item">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
<a class="nav-item">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<!-- This "nav-menu" is hidden on mobile -->
<!-- Add the modifier "is-active" to display it on mobile -->
<div class="nav-right nav-menu">
<a class="nav-item">
Home
</a>
<a class="nav-item">
Documentation
</a>
<a class="nav-item">
Blog
</a>
<span class="nav-item">
<a class="button" >
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>Tweet</span>
</a>
<a class="button is-primary">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</nav>
<section class="hero is-primary is-medium">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title is-2">
Blog post title
</h1>
<h2 class="subtitle is-4">
Blog post subtitle
</h2>
</div>
</div>
</section>
<section class="section blog">
<div class="container">
<div class="columns is-mobile">
<div class="column is-8 is-offset-2">
<div class="content blog-post section">
<p class="has-text-right has-text-muted">published 2 days ago</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit massa eget mauris hendrerit, sit amet laoreet ex mattis. Aenean finibus massa eget finibus faucibus. Etiam dolor lacus, imperdiet et nisl vitae, lacinia euismod arcu. Aliquam non sapien hendrerit nisi semper rhoncus a eget erat. Maecenas accumsan semper ante eu molestie. Integer tristique erat sit amet posuere cursus. Aliquam placerat sit amet lectus laoreet vestibulum. Sed pharetra neque ac libero ornare, nec viverra ante tristique. Mauris eget urna metus.
</p>
<p>
Nunc blandit leo orci, ornare consequat lacus cursus ac. In tincidunt nulla pharetra, vulputate nisl non, molestie tellus. Pellentesque consectetur dolor id diam mattis, at luctus nibh ultricies. Sed ac mi a est venenatis accumsan nec sed urna. Nullam ut interdum elit. Nulla facilisi. Suspendisse lacinia nisi in tincidunt ornare. Nam lobortis justo eu sapien vestibulum, et ullamcorper orci iaculis. Nullam at nulla in eros dictum condimentum vel id ante.
</p>
<p>
Morbi mollis ipsum vitae turpis molestie, sollicitudin dictum nunc condimentum. Nullam lobortis metus vitae ligula dictum, in congue est egestas. Aliquam enim massa, fermentum sed massa ut, varius sagittis metus. In eu nisi at eros tincidunt feugiat vitae sed libero. Aliquam urna metus, venenatis id feugiat tristique, sagittis in nunc. Sed volutpat eget neque sit amet convallis. Sed maximus quam sed magna congue, in gravida leo commodo. Mauris auctor nulla ultricies aliquam pharetra. Nulla in tristique sem, nec pellentesque erat. Donec a porttitor leo, vel sollicitudin lectus. Donec dictum mauris non congue efficitur.
</p>
<p>
Morbi auctor consequat facilisis. Fusce eu vehicula tellus, eget imperdiet lacus. Praesent dapibus rutrum tellus, vitae sollicitudin nulla tincidunt a. In metus felis, aliquam aliquet convallis eu, vulputate vel nunc. Etiam metus odio, tristique in tristique sed, congue ultricies sapien. Vestibulum velit massa, rhoncus vel suscipit sed, mattis nec odio. Cras justo lectus, tincidunt in interdum vitae, finibus nec neque. Nullam dolor purus, bibendum ut ex vitae, tristique fringilla quam. Sed dapibus mi erat, ut efficitur nulla vulputate id. Quisque turpis ligula, fermentum id sagittis vitae, fermentum vel magna. Nunc neque nunc, commodo nec facilisis eget, mollis mollis massa. Quisque venenatis maximus turpis vitae rhoncus.
</p>
<p>
Aenean at dignissim lacus. Etiam id dolor mauris. Aenean mollis sollicitudin blandit. Nulla elementum, metus ut commodo gravida, diam ligula volutpat mauris, dignissim lacinia eros ipsum sit amet dolor. Ut vestibulum sem nec luctus interdum. Integer ut efficitur nisl. Nam eu neque turpis.
</p>
</div>
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
About the author
</p>
<a class="card-header-icon" href="#top">
<i class="fa fa-angle-up"></i>
</a>
</header>
<div class="card-content">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="http://placehold.it/128x128" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</p>
</div>
</div>
</article>
</div>
<footer class="card-footer">
<a class="card-footer-item">Share on Facebook</a>
<a class="card-footer-item">Share on Twitter</a>
<a class="card-footer-item">Share on G+</a>
</footer>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
</p>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
</body>
</html>