-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (133 loc) · 3.35 KB
/
index.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 lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Butter demo page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css" />
<script src="dist/image-butter.js"></script>
<script>
imageButter()
</script>
<style>
img {
padding: 0;
margin: 0;
}
.grid-3 {
display: grid;
gap: 5px;
margin-bottom: 5px;
grid-template-areas:
'a b'
'a c';
}
.grid-3 > *:nth-child(1) {
grid-area: a;
}
.grid-3 > *:nth-child(2) {
grid-area: b;
}
.grid-3 > *:nth-child(3) {
grid-area: c;
}
.grid-1 {
display: grid;
gap: 5px;
grid-template-areas:
'b a'
'c a';
}
.grid-1 > *:nth-child(1) {
grid-area: a;
}
.grid-1 > *:nth-child(2) {
grid-area: b;
}
.grid-1 > *:nth-child(3) {
grid-area: c;
}
</style>
</head>
<body>
<h1 class="title">
Butter
</h1>
<p>
🧈 Makes your webpage loading smooth and animated.
</p>
<p>
<a
href="https://github.com/mvoloskov/image-butter"
target="_blank"
rel="noopener noreferrer"
>Get it on GitHub</a
>
</p>
<p class="c-gray" style="opacity: 0.3">
A paragraph (from the Greek paragraphos, “to write beside” or “written
beside”) is a self-contained unit of a discourse in writing dealing
with a particular point or idea. A paragraph consists of one or more
sentences. Though not required by the syntax of any language,
paragraphs are usually an expected part of formal writing, used to
organize longer prose.
</p>
<div class="grid-3">
<img
src="https://source.unsplash.com/800x1000"
width="400"
height="500"
alt="Image alt text"
/>
<img
src="https://source.unsplash.com/800x400"
width="400"
height="200"
alt="Image alt text"
/>
<img
src="https://source.unsplash.com/800x587"
width="400"
height="293"
alt="Image alt text"
/>
</div>
<div class="grid-1">
<img
src="https://source.unsplash.com/801x999"
width="400"
height="500"
alt="Image alt text"
/>
<img
src="https://source.unsplash.com/801x401"
width="400"
height="200"
alt="Image alt text"
/>
<img
src="https://source.unsplash.com/801x588"
width="400"
height="293"
alt="Image alt text"
/>
</div>
<p class="c-gray" style="opacity: 0.3">
A paragraph (from the Greek paragraphos, “to write beside” or “written
beside”) is a self-contained unit of a discourse in writing dealing
with a particular point or idea. A paragraph consists of one or more
sentences. Though not required by the syntax of any language,
paragraphs are usually an expected part of formal writing, used to
organize longer prose.
</p>
<p class="c-gray" style="opacity: 0.3">
A paragraph (from the Greek paragraphos, “to write beside” or “written
beside”) is a self-contained unit of a discourse in writing dealing
with a particular point or idea. A paragraph consists of one or more
sentences. Though not required by the syntax of any language,
paragraphs are usually an expected part of formal writing, used to
organize longer prose.
</p>
</body>
</html>