-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (158 loc) · 5.3 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>noeldelgado - Direcion-aware hover effect</title>
<link rel="stylesheet" href="dist/style.css"/>
</head>
<body>
<svg width="0" height="0" style="position:absolute">
<symbol viewBox="0 0 80 76" id="image">
<path d="M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z"/>
</symbol>
</svg>
<header>
<div class="container">
<h1>Direction-aware hover effect</h1>
<p>CSS & bits of JS</p>
</div>
</header>
<div class="container">
<ul>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
<li>
<a href="#" class="normal">
<svg>
<use xlink:href="#image"></use>
</svg>
</a>
<div class="info">
<h3>Single-origin coffee whatever</h3>
<p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
</div>
</li>
</ul>
</div>
<script src="src/script.js"></script>
</body>
</html>