thisisnotras

Neum code

Oct 8th, 2016
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.77 KB | None | 0 0
  1. <style>
  2.  
  3. body{
  4. background: black;
  5. overflow: hidden;
  6. }
  7.  
  8. @font-face{
  9. src:url(https://dl.dropboxusercontent.com/u/4556289/Overdose%20Sunrise.otf);
  10. font-family:'hallfont';}
  11.  
  12. @font-face{
  13. src:url(https://dl.dropboxusercontent.com/u/4556289/PilotLLJ.ttf);
  14. font-family:'bodyfont';
  15. }
  16.  
  17. ::-webkit-scrollbar {
  18. width: 4px;
  19. background-color: transparent;
  20. }
  21.  
  22.  
  23. ::-webkit-scrollbar-thumb {
  24. border-radius: 0px;
  25. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  26. background-color: #6B0512;
  27. }
  28.  
  29.  
  30.  
  31. #whole{
  32. position: absolute;
  33. top: 0px;
  34. left: 0px;
  35. right: 0px;
  36. bottom: 0px;
  37. background-image:url(http://i.picpar.com/sYbc.png);
  38. background-size: auto 100%;
  39. background-position: top left;
  40. background-repeat: no-repeat;
  41. }
  42.  
  43. #rightdiv{
  44. position: absolute;
  45. left: 200px;
  46. right: 0px;
  47. top: 200px;
  48. margin: auto;
  49. height: 435px;
  50. width: 400px;
  51. border: 0px solid white;
  52. z-index: 3;
  53. }
  54.  
  55. #textsway{
  56. position: absolute;
  57. left: 0px;
  58. top: 0px;
  59. right: 0px;
  60. height: 55px;
  61. border: 0px solid red;
  62. color: black;
  63. font-size: 40pt;
  64. text-align: center;
  65. -webkit-transition: all 1s;
  66. transition: all 1s;
  67. letter-spacing: 3px;
  68. font-family: 'hallfont';
  69. text-decoration: none;
  70. text-shadow: 0px 0px 0px transparent;
  71. -webkit-transition: all 1s;
  72. transition: all 1s;
  73. }
  74.  
  75. #textsway:before{
  76. position: absolute;
  77. top: 0px;
  78. left: 0px;
  79. content:'';
  80. height: 50px;
  81. width: 50px;
  82. border-radius: 360px 360px 360px 360px;
  83. background: #D41924;
  84. -webkit-filter:blur(30px);
  85. filter:blur(30px);
  86. z-index: -1;
  87. -webkit-transition: all 1s;
  88. transition: all 1s;
  89. opacity: 0;
  90. }
  91.  
  92. #textsway:after{
  93. position: absolute;
  94. top: 0px;
  95. right: 0px;
  96. content:'';
  97. height: 50px;
  98. width: 50px;
  99. border-radius: 360px 360px 360px 360px;
  100. background: #D41924;
  101. -webkit-filter:blur(30px);
  102. filter:blur(30px);
  103. z-index: -1;
  104. opacity: 0;
  105. -webkit-transition: all 1s;
  106. transition: all 1s;
  107. }
  108.  
  109. #whole:hover #textsway:before{
  110. left: 115px;
  111. width: 80px;
  112. opacity: 1;
  113. }
  114.  
  115. #whole:hover #textsway:after{
  116. right: 115px;
  117. width: 80px;
  118. opacity: 1;
  119. }
  120.  
  121. #div0:target ~ #rightdiv #textsway,
  122. #div1:target ~ #rightdiv #textsway,
  123. #div2:target ~ #rightdiv #textsway,
  124. #div3:target ~ #rightdiv #textsway{
  125. -webkit-transition: all 1s, color 2s 1s, letter-spacing 1s 1.5s;
  126. transition: all 1s, color 2s 1s, letter-spacing 1s 1.5s;
  127. text-shadow: 0px 0px 3px #D41924;
  128. color: #D41924;
  129. letter-spacing: 15px;
  130. }
  131.  
  132. #div0:target ~ #rightdiv #textsway:before,
  133. #div0:target ~ #rightdiv #textsway:after,
  134. #div1:target ~ #rightdiv #textsway:before,
  135. #div2:target ~ #rightdiv #textsway:before,
  136. #div3:target ~ #rightdiv #textsway:before,
  137. #div1:target ~ #rightdiv #textsway:after,
  138. #div2:target ~ #rightdiv #textsway:after,
  139. #div3:target ~ #rightdiv #textsway:after{
  140. -webkit-transition: all 3s ease-in;
  141. transition: all 3s ease-in;
  142. opacity: 0;
  143. }
  144.  
  145. #linkholder{
  146. position: absolute;
  147. left: 0px;
  148. right: 0px;
  149. top: 100px;
  150. height: 50px;
  151. border: 0px solid white;
  152. }
  153.  
  154. .linkers{
  155. float: left;
  156. height: 40px;
  157. width: 130px;
  158. border: 0px solid green;
  159. text-align: center;
  160. -webkit-transition: all 1s;
  161. transition: all 1s;
  162. opacity: 0;
  163. }
  164.  
  165. #div0:target ~ #rightdiv .linkers:nth-child(1),
  166. #div1:target ~ #rightdiv .linkers:nth-child(1),
  167. #div2:target ~ #rightdiv .linkers:nth-child(1),
  168. #div3:target ~ #rightdiv .linkers:nth-child(1){
  169. -webkit-transition: all 1s 2s;
  170. transition: all 1s 2s;
  171. opacity: 1;
  172. }
  173.  
  174. #div0:target ~ #rightdiv .linkers:nth-child(2),
  175. #div1:target ~ #rightdiv .linkers:nth-child(2),
  176. #div2:target ~ #rightdiv .linkers:nth-child(2),
  177. #div3:target ~ #rightdiv .linkers:nth-child(2){
  178. -webkit-transition: all 1s 2.7s;
  179. transition: all 1s 2.7s;
  180. opacity: 1;
  181. }
  182.  
  183. #div0:target ~ #rightdiv .linkers:nth-child(3),
  184. #div1:target ~ #rightdiv .linkers:nth-child(3),
  185. #div2:target ~ #rightdiv .linkers:nth-child(3),
  186. #div3:target ~ #rightdiv .linkers:nth-child(3){
  187. -webkit-transition: all 1s 3.3s;
  188. transition: all 1s 3.3s;
  189. opacity: 1;
  190. }
  191.  
  192. .linkins{
  193. height: 100%;
  194. width: 100%;
  195. text-align: center;
  196. font-family: 'hallfont';
  197. font-size: 15pt;
  198. color: #D41924;
  199. opacity: .8;
  200. text-decoration: none;
  201. -webkit-transition: all 1s;
  202. transition: all 1s;
  203. }
  204.  
  205. .linkins:before{
  206. content:'';
  207. height: 0%;
  208. width: 30%;
  209. position: absolute;
  210. background: #D41924;
  211. border-radius: 10px 10px 10px 10px;
  212. -webkit-filter:blur(5px);
  213. filter:blur(5px);
  214. margin-top: -1%;
  215. margin-left: -4%;
  216. opacity: 0;
  217. -webkit-transition: all 1s;
  218. transition: all 1s;
  219. z-index: -1;
  220. }
  221.  
  222. .linkins:hover{
  223. text-shadow: 0px 0px 5px purple;
  224. }
  225.  
  226. #contentcontainer{
  227. position: absolute;
  228. top: 140px;
  229. left: 0px;
  230. right: 0px;
  231. bottom: 0px;
  232. border: 0px solid red;
  233. overflow: auto;
  234. z-index: 1;
  235. -webkit-transition: all 1s;
  236. transition: all 1s;
  237. opacity: 0;
  238. }
  239.  
  240. #contentcontainer:before{
  241. content:'';
  242. position: absolute;
  243. top: 0px;
  244. left: 0px;
  245. right: 0px;
  246. bottom: 0px;
  247. background-image:url(https://www.clipartsgram.com/image/447071550-mozaic2.png);
  248. background-color: black;
  249. opacity: .3;
  250. }
  251.  
  252. .contentss{
  253. position: absolute;
  254. top: 0px;
  255. left: 15px;
  256. right: 0px;
  257. bottom: 0px;
  258. overflow: auto;
  259. text-align: left;
  260. font-size: 12pt;
  261. font-family: Times;
  262. color: #D41924;
  263. box-sizing: border-box;
  264. padding: 5px;
  265. padding-right: 7px;
  266. letter-spacing: 2px;
  267. font-style: italic;
  268. -webkit-transition: all 1s;
  269. transition: all 1s;
  270. opacity: 0;
  271. }
  272.  
  273. #div0:target ~ #rightdiv #contentcontainer,
  274. #div1:target ~ #rightdiv #contentcontainer,
  275. #div2:target ~ #rightdiv #contentcontainer,
  276. #div3:target ~ #rightdiv #contentcontainer{
  277. -webkit-transition: all 1s 3.7s;
  278. transition: all 1s 3.7s;
  279. opacity: 1;
  280. }
  281.  
  282. #div1:target ~ #rightdiv #div11,
  283. #div2:target ~ #rightdiv #div22,
  284. #div3:target ~ #rightdiv #div33{
  285. -webkit-transition: all 1s .5s;
  286. transition: all 1s .5s;
  287. opacity: 1;
  288. z-index: 1;
  289. }
  290.  
  291. #div1:target ~ #rightdiv .linkers:nth-child(1) .linkins,
  292. #div2:target ~ #rightdiv .linkers:nth-child(2) .linkins,
  293. #div3:target ~ #rightdiv .linkers:nth-child(3) .linkins{
  294. color: black;
  295. text-shadow: 0px 0px 3px #D41924;
  296. }
  297.  
  298. #div1:target ~ #rightdiv .linkers:nth-child(1) .linkins:before,
  299. #div2:target ~ #rightdiv .linkers:nth-child(2) .linkins:before,
  300. #div3:target ~ #rightdiv .linkers:nth-child(3) .linkins:before{
  301. opacity: 0;
  302. }
  303.  
  304.  
  305. </style>
  306.  
  307. <div id="whole">
  308. <div id="div0"></div>
  309. <div id="div1"></div>
  310. <div id="div2"></div>
  311. <div id="div3"></div>
  312. <div id="rightdiv">
  313. <a id="textsway" href="#div0">
  314. Neum
  315. </a>
  316. <div id="linkholder">
  317. <div class="linkers">
  318. <a class="linkins" href="#div1">
  319. Link One.
  320. </a>
  321. </div>
  322. <div class="linkers">
  323. <a class="linkins" href="#div2">
  324. Link Two.
  325. </a>
  326. </div>
  327. <div class="linkers">
  328. <a class="linkins" href="#div3">
  329. Link Three.
  330. </a>
  331. </div>
  332. </div>
  333. <div id="contentcontainer">
  334. <div class="contentss" id="div11">
  335. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>
  336. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  337. </div>
  338. <div class="contentss" id="div22">
  339. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>
  340. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  341. </div>
  342. <div class="contentss" id="div33">
  343. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br>
  344. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  345. </div>
  346. </div>
  347. </div>
  348.  
  349.  
  350. </div>
Advertisement
Add Comment
Please, Sign In to add comment