-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_2.html
133 lines (116 loc) · 4.84 KB
/
index_2.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
<!DOCTYPE html>
<html lang="es">
<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">
<title>Hello Bulma !</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- <link rel="stylesheet" href="styles/debug.css"> -->
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
}
.is-paddingless-horizontal { padding-left: 0; padding-right: 0; }
.grid {
display: grid;
grid-template-columns:
[xl-start] 1fr 1.5rem [md-start] minmax(0, 624px) [md-end] 1.5rem 1fr [xl-end];
}
.grid * { grid-column: md; }
.grid-xl { grid-column: xl; }
@media (max-width: 672px) {
:root {
font-size: 90%;
}
}
</style>
</head>
<body>
<!-- .section -->
<section class="section is-paddingless-horizontal">
<div class="container grid">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">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="images/me.jpg">
</span>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Zaydek Michels-Gualtieri</strong> <a>@username_zaydek</a><br>
<span class="has-text-grey">Self-taught, inspired to learn<br>
<time datetime="2018-04-20">Apr 20</time> · 20 min read</span>
</p>
</div>
</div>
</article>
<!-- /.media -->
<!-- .section -->
<div class="section is-paddingless-horizontal">
<h1 class="title is-2">
How to build a beautiful blog
</h1>
<h2 class="subtitle is-3 has-text-grey-light">
Learn from first-principles
</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="images/blog-1.jpg"></a>
</div>
</div>
<div class="column">
<div class="image card">
<a><img src="images/blog-2.jpg"></a>
</div>
</div>
<div class="column">
<div class="image card">
<a><img src="images/blog-3.jpg"></a>
</div>
</div>
</figure>
<figcaption class="level">
<small class="level-item has-text-grey">
The blog we'll build. Click to continue on Scrimba
</small>
</figcaption>
<!-- /.columns -->
<div class="content is-medium">
<p>
If you’re like me, you’re interested in the web and its overwhelming reach, but you’re also inundated with the mess of information that is learning HTML and CSS.
The thing is, these languages are unlike other domains, like Word Processors and Programming Languages.
<strong>The web is another world</strong>, and it’s not the prettiest thing around.
</p>
<p>
Having learned me some web, I’m here to give a gentle push of encouragement, because, <strong>with a little guidance</strong>, these domains can be a lot easier than you imagine.
Continue reading, and we’ll build a beautiful blog from scratch.
We’ll also learn some CSS Grid, Flexbox, and Responsive Design.
</p>
</div>
</div>
</section>
<!-- /.section -->
</body>
</html>