/
blog.html
147 lines (142 loc) · 5.14 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
<!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 - 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" type="text/css" href="../css/bulma.css">
<link rel="stylesheet" type="text/css" href="../css/blog.css">
</head>
<body>
<div class="columns is-fullheight">
<div class="column left-side is-half-desktop is-hidden-touch">
<section class="hero is-fullheight is-default is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<div class="title is-1">My Blog</div>
<div class="title is-5">A blog about stuff</div>
</div>
</div>
</section>
</div>
<div class="column right-side is-half-desktop is-full-mobile">
<nav class="nav is-hidden-tablet">
<div class="nav-left">
<a class="nav-item is-brand" href="#">
<img src="../images/bulma.png" alt="Bulma logo">
</a>
</div>
<div class="nav-center">
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="#">
Home
</a>
<a class="nav-item" href="#">
Documentation
</a>
<a class="nav-item" href="#">
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" href="#">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</nav>
<section class="hero is-fullheight is-default is-bold">
<div class="hero-body">
<div class="container">
<div class="column is-full-desktop">
<h1 class="blog-timestamp">
2 days ago
</h1>
<h1 class="blog-title">
Cras feugiat euismod sem accumsan ultrices.
</h1>
<h2 class="blog-summary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare malesuada dolor ut dictum. Pellentesque eget orci nisl. Vivamus sit amet ullamcorper elit. Donec mattis scelerisque dui sed convallis.
</h2>
</div>
<div class="column is-full-desktop">
<h1 class="blog-timestamp">
1 week ago
</h1>
<h1 class="blog-title">
Praesent dignissim vestibulum ex
</h1>
<h2 class="blog-summary">
Fusce sagittis ultrices ipsum quis posuere. Donec ornare, erat eget sollicitudin sagittis, lacus augue consectetur lorem, at pretium mauris ligula quis nisi. Curabitur ligula nisi, elementum at dapibus sit amet, venenatis a libero. Duis libero erat, pellentesque ac arcu ut, ultrices condimentum lacus.
</h2>
</div>
<div class="column is-full-desktop">
<h1 class="blog-timestamp">
1 year ago
</h1>
<h1 class="blog-title">
Phasellus aliquam sem libero
</h1>
<h2 class="blog-summary">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla sit amet facilisis purus, quis ullamcorper eros. Duis aliquam dignissim ipsum, malesuada commodo justo. Aliquam finibus vel massa non pharetra. Cras congue luctus pulvinar.
</h2>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<div class="tabs is-centered">
<ul>
<li><a href="#">View more posts</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</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>
<script async type="text/javascript" src="../js/bulma.js"></script>
</body>
</html>