-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
129 lines (114 loc) 路 3.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image-Zoom demo page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css" />
<style>
img {
padding: 0;
margin: 0;
}
body > * + * {
margin-top: 1rem !important;
}
.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;
}
a.raw {
background: none;
opacity: 1;
line-height: 1;
margin-left: 0.5rem;
position: relative;
top: 1px;
}
</style>
</head>
<body>
<h1 class="title">
Image-zoom
<a class="raw" href="https://github.com/mvoloskov/image-zoom" target="_blank">
<img
style="display: inline"
alt="Get it on GitHub"
src="https://img.shields.io/badge/Get%20it%20on%20GitHub--green?style=social&logo=github"
data-image-zoom-disabled
/>
</a>
</h1>
<p>
This works as seen on popular blogging platform but
<em>even better</em>.
</p>
<p>Try clicking on images.</p>
<p style="opacity: 0.7">
Identify pain points punter today shall be a cloudy day, thanks to blue sky thinking, we can
now deploy our new ui to the cloud . Currying favour we need to socialize the comms with the
wider stakeholder community so they have downloaded gmail and seems to be working for now nor
we need to touch base off-line before we fire the new ux experience what about scaling
components to a global audience?.
</p>
<div class="grid-3">
<img src="https://source.unsplash.com/800x1000" width="400" height="500" alt="..." />
<img src="https://source.unsplash.com/400x200" width="400" height="200" alt="..." />
<img src="https://source.unsplash.com/800x587" width="400" height="293" alt="..." />
</div>
<p style="opacity: 0.7">
Weaponize the data they have downloaded gmail and seems to be working for now. Run it up the
flagpole, ping the boss and circle back cross functional teams enable out of the box
brainstorming and it's about managing expectations nor shotgun approach. Zeitgeist (let's not
try to) boil the ocean (here/there/everywhere), if you could do that, that would be great.
</p>
<p style="opacity: 0.7">
Currying favour great plan! let me diarize this, and we can synchronise ourselves at a later
timepoint or mumbo jumbo yet radical candor for zeitgeist and the last person we talked to
said this would be ready so it's about managing expectations. Quick win.
</p>
<div class="grid-1">
<img src="https://source.unsplash.com/801x999" width="400" height="500" alt="..." />
<img src="https://source.unsplash.com/801x401" width="400" height="200" alt="..." />
<img src="https://source.unsplash.com/801x588" width="400" height="293" alt="..." />
</div>
<p style="opacity: 0.7">
Spinning our wheels. Strategic high-level 30,000 ft view we want to see more charts we have to
leverage up the messaging let's prioritize the low-hanging fruit for execute, nor quick win.
</p>
<script src="dist/fast-image-zoom.js"></script>
<script>
const destroy = imageZoom()
</script>
</body>
</html>