View difference between Paste ID: wBR1zeAi and TCHkrkMw
SHOW: | | - or go back to the newest paste.
1
<style>
2
@import url(https://fonts.googleapis.com/css?family=Montserrat);
3
@import url(https://fonts.googleapis.com/css?family=Playfair Display SC);
4
@import url(https://fonts.googleapis.com/css?family=Questrial);
5
@import url(https://fonts.googleapis.com/css?family=Roboto);
6
@import url(https://fonts.googleapis.com/css?family=Merriweather);
7
@import url(https://fonts.googleapis.com/css?family=Oxygen);
8
9
/*coded by [punpun]. do not steal the concept. do not remove the credit. do not remove this.*/ 
10
::-webkit-scrollbar-thumb {background-color: #8B9BA8; width: 1px; }
11
::-webkit-scrollbar {background-color: transparent; width: 1px;}
12
13
 body {background: linear-gradient(to bottom, #eee 0%,#cccccc 250%); cursor:url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important; }
14
15
a {
16
 color: #aeaeae;
17
 text-decoration: none;
18
 transition: all 0.4s ease-in-out;
19
 -moz-transition: all 0.4s ease-in-out;
20
 -webkit-transition: all 0.4s ease-in-out;}
21
a:hover {
22
 color: #ffffff;background-color: #000; cursor:url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important; 
23
 text-decoration: none;
24
 transition: all 0.4s ease-in-out;
25
 -moz-transition: all 0.4s ease-in-out;
26
 -webkit-transition: all 0.4s ease-in-out;}
27
28
.tatami1
29
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
30
height: 145px;
31
width: 145px;
32
border: 7px solid #eee;
33
z-index:10;
34
background-image: url('https://66.media.tumblr.com/bcd7af497f2547f95c01117b6119dbf6/tumblr_nvy3mfSGMv1uxvvvzo1_500.gif');
35
background-repeat: no-repeat;
36
background-size: 270px; /*width, height*/
37
background-position: -80px 0px;
38
-webkit-filter: grayscale(0%);
39
filter: grayscale(0%);
40
opacity:0.75;
41
transition:all 0.6s ease-out;
42
}
43
.text1
44
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
45
height: 105px;
46
width: 105px;
47
border: 0px solid #eee;
48
z-index:9;
49
font-size:19px;
50
background:#f3f3f3;
51
line-height:5;
52
border-right: 2px solid #eee;
53
border-left: 2px solid #eee;
54
padding:30px;
55
color: #aeaeae;
56
letter-spacing: 0.1px;
57
text-align: justify;
58
font-family: roboto;
59
overflow-y:auto;
60
overflow-x:hidden;
61
opacity:0.2;
62
-webkit-transition: all 0.6s ease-out;
63
 transition: all 0.6s ease-out;
64
}
65
.tatami1:hover {opacity:0;}
66
67
68
69
70
.tatami2
71
{ position: fixed; margin: auto; right: 157px; left:0; top: 0; bottom: 315;
72
height: 145px;
73
width: 303px;
74
border: 7px solid #eee;
75
z-index:10;
76
background-image: url('http://image.prntscr.com/image/8e08ad1a92404edf9105f1ca6a7cea7c.png');
77
background-repeat: no-repeat;
78
background-size: 400px; /*width, height*/
79
background-position: -15px -30px;
80
-webkit-filter: grayscale(10%);
81
filter: grayscale(10%);
82
opacity:0.75;
83
transition:all 0.6s ease-out;
84
}
85
86
87
88
.tatami3
89
{ position: fixed; margin: auto; right: 0; left:157px; top: 315; bottom: 0;
90
height: 145px;
91
width: 303px;
92
border: 7px solid #eee;
93
z-index:10;
94
background-image: url('http://image.prntscr.com/image/051eba70ec464cf29a41cc6e4bb21d55.png');
95
background-repeat: no-repeat;
96
background-size: 400px; /*width, height*/
97
background-position: -15px -50px;
98
  -webkit-filter: hue-rotate(0deg);
99
  filter: hue-rotate(0deg);
100
opacity:0.75;
101
transition:all 0.6s ease-out;}
102
103
.tatami4
104
{ position: fixed; margin: auto; right: 315px; left:0; top: 160; bottom: 0;
105
height: 301px;
106
width: 145px;
107
border: 7px solid #eee;
108
z-index:10;
109
background-image: url('http://i0.wp.com/halcyonrealms.com/blogpics/gardenwords02.jpg');
110
background-repeat: no-repeat;
111
background-size: 500px; /*width, height*/
112
background-position: -45px -20px;
113
  -webkit-filter: hue-rotate(30deg);
114
  filter: hue-rotate(30deg);
115
opacity:0.75;
116
transition:all 0.6s ease-out;
117
}
118
119
.tatami5
120
{ position: fixed; margin: auto; right: 0px; left:315; top: 0; bottom: 159;
121
height: 301px;
122
width: 145px;
123
border: 7px solid #eee;
124
z-index:10;
125
background-image: url('http://i.imgur.com/wqIfuIW.png');
126
background-repeat: no-repeat;
127
background-size: 550px; /*width, height*/
128
background-position: -265px 0px;
129
  -webkit-filter: hue-rotate(90deg);
130
  filter: hue-rotate(90deg);
131
opacity:0.75;
132
transition:all 0.6s ease-out;
133
}
134
135
136
137
.was {
138
position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height: 100%;
139
background-color:#f3f3f3;
140
 opacity: 0; border: 20.99px solid #;
141
 z-index: 5;
142
 text-align: justify;
143
 transition: all 1.6s linear;
144
}
145
 
146
.was:target {
147
 z-index: 30;
148
 opacity: 1;
149
 transition: all 1.6s linear;
150
}
151
152
153
.container {position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height:100%;
154
background-color:#;
155
 opacity: 0; border: 1px solid #;
156
 z-index: 11;
157
 text-align: justify;
158
-webkit-transition: all 0.6s ease-out;
159
 transition: all 0.6s ease-out;}
160
161
.tat1
162
{ position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
163
height: 145px;
164
width: 145px;
165
border: 7px solid #eee;
166
z-index:30;
167
background-image: url('https://66.media.tumblr.com/bcd7af497f2547f95c01117b6119dbf6/tumblr_nvy3mfSGMv1uxvvvzo1_500.gif');
168
background-repeat: no-repeat;
169
background-size: 270px; /*width, height*/
170
background-position: -80px 0px;
171
-webkit-filter: grayscale(0%);
172
filter: grayscale(0%);
173
opacity:0.75;
174
transition:all 1.5s ease-out;
175
}
176
177
178
.tattxt
179
{ 
180
height: 125px;
181
width: 215px;
182
border: px solid #eee;
183
z-index:30;
184
font-size:11px;
185
background:#;
186
padding:px;
187
color: #8B9BA8;
188
letter-spacing: 0.1px;
189
text-align: justify;
190
font-family: Questrial;
191
overflow-y:auto;
192
overflow-x:hidden;
193
opacity:0;
194
-webkit-transition: all 0.6s ease-out;
195
 transition: all 0.6s ease-out;
196
}
197
.was:hover .tattxt{opacity:1;}
198
199
200
.tattxta
201
{ 
202
height: 145px;
203
width: 105px;
204
border: px solid #000;
205
z-index:30;
206
font-size:11px;
207
background:#;
208
padding:10px;
209
color: #8B9BA8;
210
letter-spacing: 0.1px;
211
text-align: justify;
212
font-family: Questrial;
213
overflow-y:auto;
214
overflow-x:hidden;
215
opacity:0;
216
-webkit-transition: all 0.6s ease-out;
217
 transition: all 0.6s ease-out;
218
}
219
.was:hover .tattxta{opacity:1;}
220
221
.sts2 {
222
 font-family: Questrial;
223
 font-size: 10px;width:95px; height: 8px;
224
 text-align: left;
225
 font-weight:100;
226
 color: #8B9BA8;
227
 background-color: #;
228
 padding: 3px;
229
 margin-bottom: px;
230
 margin-top: px;
231
 line-height: 10px;
232
 border-bottom: 1px solid #8B9BA8; border-right: 2px solid #8B9BA8;
233
}
234
.sts2:hover{ background-color: #000;-webkit-transition: all 0.6s ease-out;
235
 transition: all 0.6s ease-out;}
236
237
</style>
238
239
<a href="#1"><div class="tatami1"></div></a>
240
<a href="#3"><div class="tatami2"></div></a>
241
<a href="#4"><div class="tatami3"></div></a>
242
<a href="#2"><div class="tatami4"></div></a>
243
<a href="#5"><div class="tatami5"></div></a>
244
245
<div class="text1"><center><i>ENTER</i></center></div>
246
247
248
<div id="1" class="was">
249
250-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
250+
<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
251
<a href="#"><div class="tat1" ></div></a>
252
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:400; top: 0; bottom: 0;"><b>/TATAMI EXPRESS/</b> &nbsp; A cafe that couldn't be missed, even if though it was at the sidelines of the bustling Shinjuku Station halls. It wasn't because it had any flashy attributes. It was quite normal:  a bar for those who wanted just a quick rest before they boarded a train, and some tables for those who wanted to enjoy the comfort of that small cafe, maybe, just for a little longer. <br><br>
253
254
There was a certain gravity that pulled people to this cafe. It wasn't the atmosphere, and it certainly wasn't the coffee. Perhaps its placement was just right, or perhaps it had to do with something supernatural. <br><br>
255
256
However, people never minded that triviality. The crowd was pleasant, and the price was right; there was nothing wrong with the ordinarily generic menu either. It didn't leave any impressions. But it was just right. </div>
257
258
<div class="tattxta" style="position: absolute; margin: auto; right: 300px; left:0; top: 20; bottom: 0;">
259
260
EMPLOYEES:
261
<div class="sts2">npc</div>
262
<div class="sts2">npc</div>
263
<div class="sts2">npc</div><br>
264
OTHER POI's:
265
<div class="sts2">Shinjuku Station</div>
266
<div class="sts2">Department Stores</div><br>
267
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#4">▼</a> / <a href="#5">►</a>
268
</div></div>
269
270
<div id="2" class="was">
271
272-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
272+
<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
273
<a href="#"><div class="tatami4"></div></a>
274
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:100; top: 0; bottom: 0;"><b>/NISHI-SHINJUKU/</b> &nbsp; 
275
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
276
277
<div class="tattxta" style="position: absolute; margin: auto; right: 12px; left:0; top: 300; bottom: 0;">
278
279
POI's:
280
<div class="sts2">n/a</div>
281
<div class="sts2">n/a</div>
282
<div class="sts2">n/a</div><br>
283
FACTIONS:
284
<div class="sts2">n/a</div>
285
<div class="sts2">n/a</div><br>
286
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◥</a> / <a href="#3">▲</a> / <a href="#4">►</a> / <a href="#5">◥</a>
287
</div></div>
288
289
290
<div id="3" class="was">
291
292-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
292+
<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
293
<a href="#"><div class="tatami2"></div></a>
294
295
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 20;"><b>/SJINJUKU GYOEN/</b> &nbsp; 
296
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
297
298
<div class="tattxta" style="position: absolute; margin: auto; right: 350px; left:0; top: 0; bottom: 0;">
299
300
POI's:
301
<div class="sts2">n/a</div>
302
<div class="sts2">n/a</div>
303
<div class="sts2">n/a</div><br>
304
FACTIONS:
305
<div class="sts2">n/a</div>
306
<div class="sts2">n/a</div><br>
307
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◢ </a> / <a href="#2">◣</a> / <a href="#4">▼</a> / <a href="#5">►</a>
308
</div></div>
309
310
311
<div id="4" class="was">
312
313-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
313+
<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
314
<a href="#"><div class="tatami3"></div></a>
315
316
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;"><b>/NORTH-SJINJUKU/</b> &nbsp; 
317
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
318
319
320
<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:350; top: 20; bottom: 0;">
321
322
POI's:
323
<div class="sts2">n/a</div>
324
<div class="sts2">n/a</div>
325
<div class="sts2">n/a</div><br>
326
FACTIONS:
327
<div class="sts2">n/a</div>
328
<div class="sts2">n/a</div><br>
329
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◤</a> / <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#5">◥</a>
330
</div></div>
331
332
333
<div id="5" class="was">
334
335-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
335+
<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
336
<a href="#"><div class="tatami5"></div></a>
337
338
<div class="tattxt" style="position: absolute; margin: auto; right: 80px; left:0; top: 0; bottom: 280;"><b>/NAITO-SHINJUKU/</b> &nbsp; 
339
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
340
341
<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:30; top: 20; bottom: 0;">
342
POI's:
343
<div class="sts2">n/a</div>
344
<div class="sts2">n/a</div>
345
<div class="sts2">n/a</div><br>
346
FACTIONS:
347
<div class="sts2">n/a</div>
348
<div class="sts2">n/a</div><br>
349
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="#2">◣</a> / <a href="#1">◄</a> / <a href="#3">◤</a> / <a href="#4">▼</a>
350
</div></div>
351
352
353-
<a href="https://pastebin.com/u/punpunrpc" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; left:10; bottom:0;width:25;-webkit-transform: scaleX(-1); filter: FlipH;"></a>
353+
<a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; left:10; bottom:0;width:25;-webkit-transform: scaleX(-1); filter: FlipH;"></a>