API tools faq
paste
M-21

waterfall

M-21
Jun 2nd, 2021
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.55 KB | None | 0 0
raw download clone embed print report
  1. <link rel=preconnect href=www.marapets.com>
  2. <link href=https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap rel=stylesheet>
  3. <link href=https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap rel=stylesheet>
  4. <link href=https://fonts.googleapis.com/css2?family=Sen&display=swap rel=stylesheet>
  5. <link href=https://fonts.googleapis.com/css2?family=Open+Sans&display=swap rel=stylesheet>
  6. <link href=https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap rel=stylesheet>
  7. <link href=https://fonts.googleapis.com/css2?family=PT+Mono&display=swap rel=stylesheet>
  8. <link href=https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC&display=swap rel=stylesheet>
  9.  
  10. <style>
  11.  
  12.  
  13.  
  14.  
  15.  
  16. /* !!!!!! DO NOT REMOVE THE CREDITS !!!!!! */
  17.  
  18.  
  19.  
  20.  
  21.  
  22. * {
  23. cursor: url(https://i.imgur.com/DA8Oo9Y.png
  24. ), default;
  25. }
  26. ::selection {
  27. background: #86B1B7;
  28. color: #fff;
  29. }
  30. a {
  31. text-decoration: underline;
  32. color: #2E4559;
  33. font-weight: bold;
  34. text-shadow: 0 0 3px #A9E0F0;
  35. }
  36. a:hover {
  37. cursor: url(https://i.imgur.com/2GfdT8s.png
  38. ), pointer;
  39. }
  40. img {
  41. width: 250px;
  42. height: auto;
  43. text-align: center;
  44. border-radius: 15px;
  45. margin-top: 10px;
  46. margin-bottom: 10px;
  47. }
  48. div.container {
  49. width: 665px;
  50. height: 800px;
  51. overflow: auto;
  52. overflow: -moz-scrollbars-none;
  53. scrollbar-width: none;
  54. -ms-overflow-style: none;
  55. }
  56.  
  57. div.container::-webkit-scrollbar {
  58. width: 0;
  59. display: none;
  60. }
  61. /* page 1 login page */
  62. .page1 {
  63. width: 665px;
  64. height: 800px;
  65. float: left;
  66. overflow: hidden;
  67. background-image: url(https://i.imgur.com/HkXdl9d.png
  68. );
  69. backdrop-filter: blur(3px);
  70. }
  71.  
  72.  
  73. #TITLE {
  74. font-family: 'Covered By Your Grace', cursive;
  75. color: #fff;
  76. font-size: 60px;
  77. text-transform: uppercase;
  78. letter-spacing: -2px;
  79. word-spacing: -20px;
  80. text-align: center;
  81. width: 665px;
  82. margin-top: 250px;
  83. transition: letter-spacing 500ms ease-in-out;
  84. -webkit-transition: letter-spacing 500ms ease-in-out;
  85. -moz-transition: letter-spacing 500ms ease-in-out;
  86. -o-transition: letter-spacing 500ms ease-in-out;
  87. -webkit-animation: glow1 2s ease-in-out infinite alternate, floating 3s infinite ease-in-out;
  88. -moz-animation: glow1 2s ease-in-out infinite alternate, floating 3s infinite ease-in-out;
  89. animation: glow1 2s ease-in-out infinite alternate, floating 3s infinite ease-in-out;
  90. }
  91. #TITLE:hover {
  92. letter-spacing: 2px;
  93. }
  94. @-webkit-keyframes floating {
  95. 0% { transform: translate(0, 0px); }
  96. 50% { transform: translate(0, 5px); }
  97. 100% { transform: translate(0, -0px); }
  98. }
  99. @keyframes floating {
  100. 0% { transform: translate(0, 0px); }
  101. 50% { transform: translate(0, 5px); }
  102. 100% { transform: translate(0, -0px); }
  103. }
  104. @-webkit-keyframes glow1 {
  105. from {
  106. text-shadow: 0 0 5px #fff, 0 0 20px #C0EDFC, 0 0 25px #C0EDFC;
  107. }
  108. to {
  109. text-shadow: 0 0 10px #fff, 0 0 25px #C0EDFC, 0 0 30px #C0EDFC;
  110. }
  111. }
  112. @keyframes glow1 {
  113. from {
  114. text-shadow: 0 0 5px #fff, 0 0 20px #C0EDFC, 0 0 25px #C0EDFC;
  115. }
  116. to {
  117. text-shadow: 0 0 10px #fff, 0 0 25px #C0EDFC, 0 0 30px #C0EDFC;
  118. }
  119. }
  120.  
  121. #DESCRIPTION {
  122. width: 200px;
  123. text-align: justify;
  124. overflow: auto;
  125. font-variant: small-caps;
  126. overflow: -moz-scrollbars-none;
  127. scrollbar-width: none;
  128. -ms-overflow-style: none;
  129. line-height: 12px;
  130. font-family: Calibri;
  131. font-size: 15px;
  132. color: #fff;
  133. margin: auto;
  134. height: 50px;
  135. margin-top: -15px;
  136. opacity: .8;
  137. transition: opacity .5s;
  138. }
  139. #DESCRIPTION:hover {
  140. opacity: 1;
  141. }
  142. #DESCRIPTION::-webkit-scrollbar {
  143. width: 0;
  144. display: none;
  145. }
  146.  
  147. #SCROLLDOWN {
  148. width: 200px;
  149. height: 30px;
  150. background-color: #fff;
  151. opacity: .8;
  152. text-align: center;
  153. line-height: 29px;
  154. font-family: 'Quicksand', sans-serif;
  155. font-size: 16px;
  156. text-transform: uppercase;
  157. color: #759A9F;
  158. font-weight: bold;
  159. margin: auto;
  160. margin-top: 5px;
  161. transition: opacity .5s;
  162. }
  163. #SCROLLDOWN:hover {
  164. opacity:1;
  165. }
  166.  
  167. #EST {
  168. font-size: 15px;
  169. font-family: Calibri;
  170. text-transform: uppercase;
  171. color: #fff;
  172. opacity: .8;
  173. width: 200px;
  174. height: 30px;
  175. text-align: right;
  176. margin: auto;
  177. margin-top: 5px;
  178. }
  179. .border1 {
  180. width: 665px;
  181. height: 5px;
  182. background-color: #fff;
  183. margin-top: 330px;
  184. opacity: .7;
  185. }
  186.  
  187. /* CREDITS :: DO NOT REMOVE */
  188. #CREDITS {
  189. text-decoration: none;
  190. color: #FFFFFF;
  191. font-family: 'Quicksand', sans-serif;
  192. font-size: 16px;
  193. text-transform: uppercase;
  194. text-align: center;
  195. line-height: 27px;
  196. transition: letter-spacing 500ms ease-in-out;
  197. -webkit-transition: letter-spacing 500ms ease-in-out;
  198. -moz-transition: letter-spacing 500ms ease-in-out;
  199. -o-transition: letter-spacing 500ms ease-in-out;
  200. }
  201. #CREDITS:hover {
  202. letter-spacing: 2px;
  203. }
  204.  
  205. /* page 2 */
  206. .page2 {
  207. width: 665px;
  208. height: 800px;
  209. float: left;
  210. background: #8dc0cd;
  211. background: -moz-linear-gradient(top, #8dc0cd 0%, #ffffff 100%);
  212. background: -webkit-linear-gradient(top, #8dc0cd 0%,#ffffff 100%);
  213. background: linear-gradient(to bottom, #8dc0cd 0%,#ffffff 100%);
  214. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc0cd', endColorstr='#ffffff',GradientType=0 );
  215. }
  216.  
  217. .border2 {
  218. width: 665px;
  219. height: 5px;
  220. background-color: #fff;
  221. -webkit-box-shadow: 0px -33px 8px 38px #FFFFFF, 0px -24px 50px 50px #FFFFFF;
  222. box-shadow: 0px -33px 8px 38px #FFFFFF, 0px -24px 50px 50px #FFFFFF;
  223. }
  224. div.BRUSHSTROKE {
  225. background-image: url(https://i.imgur.com/e3Nz0Pi.png
  226. );
  227. height: 100px;
  228. background-size: 300px 100px;
  229. background-repeat: no-repeat;
  230. margin: auto;
  231. margin-top: 30px;
  232. text-align: center;
  233. background-position: center;
  234. }
  235.  
  236. div#CLUBNAME {
  237. font-family: 'Sen', sans-serif;
  238. color: #FFFFFF;
  239. text-shadow: 0 0 3px #A9E0F0;
  240. line-height: 100px;
  241. font-size: 35px;
  242. text-transform: uppercase;
  243. transition: all 200ms linear;
  244. }
  245. div#CLUBNAME:hover {
  246. transform: scale(1.2);
  247. }
  248. div.navbar {
  249. border-width: 5px 0px 5px 0px;
  250. border-color: #fff;
  251. border-style: solid;
  252. padding: 10px 0px 5px 0px
  253. width: 665px;
  254. height: 40px;
  255. }
  256.  
  257. /* NAVIGATION BAR */
  258. ul.navigation {
  259. list-style-type: none;
  260. padding: 6px;
  261. overflow: hidden;
  262. text-align: center;
  263. margin-top: 5px;
  264. }
  265. li{
  266. display: inline;
  267. }
  268. li a {
  269. color: #fff;
  270. text-decoration: none;
  271. text-align: center;
  272. padding: 5px 8px 5px 8px;
  273. font-family: 'Open Sans', sans-serif;
  274. text-transform: uppercase;
  275. font-size: 13px;
  276. height: 15px;
  277. margin-right: 5px;
  278. }
  279. a.active {
  280. border-width: 1px 0px 1px 0px;
  281. border-color: rgba(255, 255, 255, 1);
  282. color: #ffffff;
  283. border-style: solid;
  284. transition: all 300ms linear;
  285. }
  286. a.active:hover {
  287. background-color: #fff;
  288. color: #86B1B7;
  289. border-offset: -1px;
  290. border-color: rgba(255, 255, 255, 1);
  291. border-style: solid;
  292. letter-spacing: 1px;
  293. cursor: url(https://i.imgur.com/2GfdT8s.png
  294. ), pointer;
  295. }
  296. a.inactive {
  297. transition: all 400ms linear;
  298. }
  299. a.inactive:hover {
  300. letter-spacing: 1px;
  301. background-color: #fff;
  302. color: #86B1B7;
  303. cursor: url(https://i.imgur.com/2GfdT8s.png
  304. ), pointer;
  305. }
  306.  
  307. /* ICON */
  308. div.firstbox {
  309. height: 150px;
  310. width: 150px;
  311. border-width: 3px;
  312. border-style: solid;
  313. border-color: #fff;
  314. padding: 5px;
  315. float: left;
  316. margin: 30px 0px 0px 30px;
  317. overflow: hidden;
  318. }
  319. img.icon {
  320. width: 150px;
  321. height: 150px;
  322. filter: brightness(125%) blur(1px);
  323. text-align: center;
  324. border-radius: 0px;
  325. margin-top: 0px;
  326. margin-bottom: 0px;
  327. }
  328. div.imgoverlay {
  329. height: 150px;
  330. width: 150px;
  331. opacity: 0;
  332. transition: .5s ease;
  333. background-color: rgba(255, 255, 255, .9);
  334. -webkit-transform: translateY(-150px);
  335. -ms-transform: translateY(-150px);
  336. transform: translateY(-150px);
  337. }
  338. div.imgoverlay:hover {
  339. opacity:1;
  340. }
  341. div.imgtext {
  342. color: #759A9F;
  343. padding: 20px;
  344. width: 110px;
  345. height: 110px;
  346. font-size: 14px;
  347. text-align: center;
  348. font-family: 'Open Sans', sans-serif;
  349. text-transform: uppercase;
  350. line-height: 14px;
  351. }
  352.  
  353. /* RULES */
  354. div.rulebox {
  355. float: left;
  356. height: 166px;
  357. width: 420px;
  358. border-width: 0px 0px 0px 3px;
  359. border-style: solid;
  360. border-color: #fff;
  361. padding: 0px 0px 0px 0px;
  362. margin: 30px 0px 0px 10px;
  363. transition: all .5s ease;
  364. background: -moz-linear-gradient(left, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.7) 100%);
  365. background: -webkit-linear-gradient(left, rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.34) 50%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.7) 100%);
  366. background: linear-gradient(to right, rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.34) 50%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.7) 100%);
  367. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57ffffff', endColorstr='#ffffff',GradientType=1 );
  368. background-size: 200% 100%;
  369. overflow: auto;
  370. overflow: -moz-scrollbars-none;
  371. scrollbar-width: none;
  372. -ms-overflow-style: none;
  373. }
  374. div.rulebox::-webkit-scrollbar {
  375. width: 0;
  376. display: none;
  377. }
  378. div.rulebox:hover {
  379. background-position: -100% 0;
  380. }
  381.  
  382. h1 {
  383. text-align: left;
  384. text-transform: uppercase;
  385. border-width: 0px 0px 1px 0px;
  386. border-style: solid;
  387. border-color: #86B1B7;
  388. padding: 5px;
  389. line-height: 20px;
  390. font-size: 22px;
  391. width: 380px;
  392. margin: auto;
  393. margin-top: 5px;
  394. font-family: 'Kanit', sans-serif;
  395. color: #fff;
  396. text-shadow: 0 0 3px #A9E0F0, 0 0 5px #759A9F;
  397. }
  398. p {
  399. font-family: 'PT Mono', monospace;
  400. font-size: 14px;
  401. padding: 5px;
  402. width: 380px;
  403. margin: auto;
  404. color: #2E4559;
  405. text-align: justify;
  406. margin-top: 3px;
  407. line-height: 15px;
  408. }
  409.  
  410. /* ANNOUNCEMENTS */
  411. div.announcements {
  412. margin: 10px 0px 0px 30px;
  413. background-color: rgba(255, 255, 255, .7);
  414. width: 350px;
  415. height: 300px;
  416. float: left;
  417. overflow: auto;
  418. overflow: -moz-scrollbars-none;
  419. scrollbar-width: none;
  420. -ms-overflow-style: none;
  421. }
  422. div.announcements::-webkit-scrollbar {
  423. width: 0;
  424. display: none;
  425. }
  426. h2 {
  427. text-align: left;
  428. text-transform: uppercase;
  429. border-width: 0px 0px 1px 0px;
  430. border-style: solid;
  431. border-color: #86B1B7;
  432. padding: 5px;
  433. line-height: 20px;
  434. font-size: 22px;
  435. width: 310px;
  436. margin: auto;
  437. margin-top: 5px;
  438. font-family: 'Kanit', sans-serif;
  439. color: #fff;
  440. text-shadow: 0 0 3px #A9E0F0, 0 0 5px #759A9F;
  441. }
  442. h3 {
  443. font-family: 'PT Mono', monospace;
  444. font-size: 14px;
  445. padding: 5px;
  446. width: 310px;
  447. margin: auto;
  448. color: #2E4559;
  449. text-align: justify;
  450. margin-top: 5px;
  451. line-height: 15px;
  452. }
  453.  
  454. /* BANNER */
  455. div.banner {
  456. width: 239px;
  457. height: 100px;
  458. overflow: hidden;
  459. margin-left: 10px;
  460. margin-top: 10px;
  461. float:left;
  462. }
  463. img.banner {
  464. width: 239px;
  465. height: auto;
  466. border-radius: 0px;
  467. margin-top: -15px;
  468. opacity: .7;
  469. transition: all .5s ease;
  470. }
  471. img.banner:hover {
  472. opacity: 1;
  473. }
  474.  
  475. /* STAFF */
  476. div.staff {
  477. width: 239px;
  478. height: 190px;
  479. background-color: rgba(255, 255, 255, .5);
  480. margin-left: 10px;
  481. margin-top: 10px;
  482. float:left;
  483. overflow: auto;
  484. overflow: -moz-scrollbars-none;
  485. scrollbar-width: none;
  486. -ms-overflow-style: none;
  487. }
  488. div.staff::-webkit-scrollbar {
  489. width: 0;
  490. display: none;
  491. }
  492. h4 {
  493. text-align: right;
  494. text-transform: uppercase;
  495. border-width: 0px 0px 1px 0px;
  496. border-style: solid;
  497. border-color: #86B1B7;
  498. padding: 5px;
  499. line-height: 20px;
  500. font-size: 22px;
  501. width: 200px;
  502. margin: auto;
  503. margin-top: 8px;
  504. font-family: 'Kanit', sans-serif;
  505. color: #fff;
  506. text-shadow: 0 0 3px #A9E0F0, 0 0 5px #759A9F;
  507. }
  508. div.avatar {
  509. margin-top: 15px;
  510. margin-left: 15px;
  511. margin-right: 3px;
  512. float: left;
  513. background-color: #fff;
  514. overflow: hidden;
  515. width: 50px;
  516. height: 50px;
  517.  
  518. }
  519. img.avatar {
  520. width: 50px;
  521. height: 50px;
  522. filter: grayscale(80%);
  523. transition: all .5s ease;
  524. text-align: center;
  525. border-radius: 0px;
  526. margin-top: 0px;
  527. margin-bottom: 0px;
  528. }
  529. img.avatar:hover {
  530. filter: grayscale(0%);
  531. }
  532. div.aboutstaff {
  533. float: left;
  534. font-family: 'Alegreya Sans SC', sans-serif;
  535. font-size: 14px;
  536. line-height: 12px;
  537. color: #2E4559;
  538. width: 145px;
  539. height: 105px;
  540. padding: 7px;
  541. margin-top: 10px;
  542. margin-left: 0px;
  543. overflow: auto;
  544. overflow: -moz-scrollbars-none;
  545. scrollbar-width: none;
  546. -ms-overflow-style: none;
  547. text-align: justify;
  548.  
  549. }
  550. div.aboutstaff::-webkit-scrollbar {
  551. width: 0;
  552. display: none;
  553. }
  554. </style>
  555.  
  556. <body>
  557. <div class=container>
  558.  
  559. <div class=page1>
  560.  
  561. <div id=TITLE>flow away</div>
  562. <div id=DESCRIPTION>(this can be as long as you want / it's scrollable) A world where what you see isn't everything. The depth and weight of each story are different. Flow away, away, away</div>
  563. <div id=SCROLLDOWN>SCROLL DOWN?</div>
  564. <div id=EST>EST 060121</div>
  565. <div class=border1></div>
  566. <div class=DONOTREMOVE id=CREDITS><a target=_blank href=https://www.marapets.com/profile.php?id=5481177 id=CREDITS>©Kagayama</a></div>
  567. </div>
  568.  
  569. <div class=page2>
  570. <div class=border2></div>
  571. <div class=BRUSHSTROKE>
  572. <div id=CLUBNAME>clubname</p>
  573. </div>
  574. <div class=navbar>
  575. <ul class=navigation>
  576. <li><a class=active href=www.marapets.com>home</a></li>
  577. <li><a class=inactive href=www.marapets.com>link2</a></li>
  578. <li><a class=inactive href=www.marapets.com>link3</a></li>
  579. <li><a class=inactive href=www.marapets.com>link4</a></li>
  580. <li><a class=inactive href=www.marapets.com>link5</a></li>
  581. <li><a class=inactive href=www.marapets.com>link6</a></li>
  582. </ul>
  583. </div>
  584.  
  585. <div class=firstbox>
  586. <img src=https://i.imgur.com/GQwYoCq.png class=icon />
  587. <div class=imgoverlay>
  588. <div class=imgtext>6.2.2021
  589. <br />
  590. listen to b.i's waterfall album!</div>
  591. </div>
  592. </div>
  593.  
  594. <div class=rulebox>
  595. <h1>rule 1</h1>
  596. <p>Forever wondering, <i>Who is the enemy?</i> <b>Who is the star?</b> Everybody gotta be careful when the devil puts out his hand. You have to realize that life is collateral. Blessings to those who have become stars. <a href=www.marapets.com>click here.</a></p>
  597. <h1>rule 2</h1>
  598. <p>When you complain about loneliness, the sun goes down. I know you've lost your heart, I know you've lost your mind. But don't leave me alone, don't leave me alone. </p>
  599. <h1>rule 3</h1>
  600. <p>What is it that drives me so far? I have a lot of tears. I want you to stay. But let me pour my heart out for the last time. If you gotta go, leave it all behind. Leave your pain, worries, and your regrets. I'm already missin' you, missin' us. I'll go missin' too straight disappear into thin air. So can't you just...? Stay by my side.</p>
  601. <h1>rule 4</h1>
  602. <p>Let's be together for just one day. Stay by my side now. STAY - Tablo & B.I.</p>
  603. </div>
  604.  
  605. <div class=announcements>
  606. <h2>announcements</h2>
  607. <h3>B.I.'s new album <a href=https://youtu.be/5GaVA3ebKCo
  608. target=blank_ >'Waterfall'</a> just dropped!! <br /></h3>
  609. <img src=https://i.imgur.com/aepKxOQ.png />
  610. </div>
  611.  
  612. <div class=banner>
  613. <img src=https://i.imgur.com/y9j0FHB.png class=banner />
  614. </div>
  615.  
  616. <div class=staff>
  617. <h4>STAFF</h4>
  618. <div class=avatar><img src=https://i.imgur.com/KfvwPPI.gif class=avatar /></div>
  619. <div class=aboutstaff><b>staff member name - position - etc</b> <br />
  620. Did I have a long, long dream? Everything is just unfamiliar. Your memories were too sweet for me to forget easily. I feel like a mess, my head is a disaster.
  621. When I open my eyes, my room is hollow again.
  622. </div>
  623. <div class=avatar><img src=https://i.imgur.com/JfNwMW4.gif class=avatar /></div>
  624. <div class=aboutstaff><b>staff member name - position - etc</b> <br />
  625. You looked sad there, but why? I have no sense of reality and I get dizzy from anemia.
  626. </div>
  627. <div class=avatar><img src=https://i.imgur.com/IjAbITK.gif class=avatar /></div>
  628. <div class=aboutstaff><b>staff member name - position - etc</b> <br />
  629. I'm walking somewhere at the edge of the faint memories. You spill water on the back of your hand where the warmth remains.
  630. </div>
  631. <div class=avatar><img src=https://i.imgur.com/Z4KFcZw.gif class=avatar /></div>
  632. <div class=aboutstaff><b>staff member name - position - etc</b> <br />
  633. Time is twisted, a day feels like a year. I'll weep every night in the grave of memories.
  634. </div>
  635.  
  636.  
  637. </div>
  638. </div>
  639. </div>
  640. </div>
  641.  
  642. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!