API tools faq
paste
M-21

main page

M-21
Jan 16th, 2019
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.91 KB | None | 0 0
raw download clone embed print report
  1. <link href=https://fonts.googleapis.com/css?family=Reenie+Beanie rel=stylesheet>
  2. <link href=https://fonts.googleapis.com/css?family=Staatliches rel=stylesheet>
  3. <link href=https://fonts.googleapis.com/css?family=Indie+Flower rel=stylesheet>
  4. <link href=https://fonts.googleapis.com/css?family=Josefin+Sans rel=stylesheet>
  5. <link href=https://fonts.googleapis.com/css?family=Shadows+Into+Light rel=stylesheet>
  6. <link href=https://fonts.googleapis.com/css?family=Comfortaa rel=stylesheet>
  7. <link href=https://fonts.googleapis.com/css?family=Prompt rel=stylesheet>
  8. <link href=https://fonts.googleapis.com/css?family=M+PLUS+1p rel=stylesheet>
  9.  
  10.  
  11. <style>
  12.  
  13. /* !!! EVERYTHING CONTAINED IN < style > < / style >
  14. ARE FOR EDITING THE THEME/COLORS OF EVERYTHING. !!! */
  15.  
  16. /* !!! everything with 3 exclamation points are tool tips
  17. to help you edit the layout !!! */
  18.  
  19. div.container {
  20. width: 665px;
  21. height: 800px;
  22.  
  23. /* !!! USE THIS TO CHANGE THE BACKGROUND COLOR !!
  24. !!!!!! THEN REPLACE THE CHUNK BELOW !!!!!!:
  25. http://colorzilla.com/gradient-editor/#c6e5d9+0,f4ead5+64 */
  26.  
  27. background: #c6e5d9;
  28. background: -moz-linear-gradient(top, #c6e5d9 0%, #f4ead5 36%);
  29. background: -webkit-linear-gradient(top, #c6e5d9 0%,#f4ead5 36%);
  30. background: linear-gradient(to bottom, #c6e5d9 0%,#f4ead5 36%);
  31. filter: progid:DXImageTransform.Microsoft.gradient(
  32. startColorstr='#c6e5d9', endColorstr='#f4ead5',GradientType=0 );
  33. }
  34.  
  35. /* !!! CUSTOMIZE CLUB TITLE COLORS !!! */
  36. div.headingbox {
  37. text-align: center;
  38. height: 100px;
  39. float:left;
  40. width: 665px;
  41. font-family: 'Staatliches', cursive;
  42. color: #FFFFFF;
  43. font-size: 50px;
  44. text-shadow: 0px 2px 2px #E94E77;
  45. -webkit-transition: font-size .3s, text-shadow .5s;
  46. transition: font-size .3s, text-shadow .5s;
  47. line-height: 120px;
  48. }
  49. div.headingbox:hover {
  50. font-size: 60px;
  51. text-shadow: 0px 0px 6px #E94E77;
  52. }
  53. div.subheadingbox {
  54. height: 100px;
  55. text-align: center;
  56. float:left;
  57. width: 665px;
  58. font-family: 'Reenie Beanie', cursive;
  59. line-height: 0px;
  60. margin-top: -10px;
  61. color: #D68189;
  62. font-size: 20px;
  63. text-shadow: 0px 2px 0px #F4EAD5;
  64. -webkit-animation: fade 16s infinite;
  65. animation: fade 16s infinite;
  66. opacity:0;
  67. }
  68. @keyframes fade {
  69. 0% {
  70. opacity:0;
  71. }
  72. 20% {
  73. opacity:1;
  74. }
  75. 70% {
  76. opacity:1;
  77. }
  78. 100% {
  79. opacity:0;
  80. }
  81. }
  82. @-moz-keyframes fade {
  83. 0% {
  84. opacity:0;
  85. }
  86. 20% {
  87. opacity:1;
  88. }
  89. 70% {
  90. opacity:1;
  91. }
  92. 100% {
  93. opacity:0;
  94. }
  95. }
  96.  
  97. /* !!! CUSTOMIZE MOVING HEADER TEXT COLORS !!! */
  98. div.movingtxt {
  99. width: 617px;
  100. height: 25px;
  101. padding: 10px 10px 0px 10px;
  102. background-color: #FBFBE3;
  103.  
  104. Border: 5px solid transparent;
  105. border-image-repeat:round;
  106. border-image-slice: 20;
  107. Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
  108. )
  109. ;
  110. margin-left: 10px;
  111. float:left;
  112. margin-top: -60px;
  113. overflow: hidden;
  114. }
  115. marquee {
  116. font-size: 14px;
  117. line-height: 14px;
  118. color: #E94E77;
  119. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  120. letter-spacing: 1px;
  121. font-family: 'Josefin Sans', sans-serif;
  122. -webkit-animation: switch 14s infinite;
  123. animation: switch 14s infinite;
  124. }
  125. @keyframes switch {
  126. 0% {
  127. color: #E94E77;
  128. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  129. }
  130. 50% {
  131. color: #C6A49A;
  132. text-shadow: 0px 0px 2px #FBCFCF, 0px 0px 4px #FBCFCF, 0px 0px 6px #FBCFCF;
  133. }
  134. 100% {
  135. color: #E94E77;
  136. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  137. }
  138. }
  139. @-moz-keyframes switch {
  140. 0% {
  141. opacity:0;
  142. }
  143. 50% {
  144. opacity:1;
  145. }
  146. 100% {
  147. opacity:0;
  148. }
  149. }
  150. @-webkit-keyframes switch {
  151. 0% {
  152. opacity:0;
  153. }
  154. 50% {
  155. opacity:1;
  156. }
  157. 100% {
  158. opacity:0;
  159. }
  160. }
  161.  
  162. div.pets1 {
  163. width: 150px;
  164. height: 135px;
  165. overflow: hidden;
  166. float:left;
  167. margin-top:-183px;
  168. margin-left: 60px;
  169. }
  170. div.pets2 {
  171. width: 150px;
  172. height: 135px;
  173. overflow: hidden;
  174. float:left;
  175. margin-top:-152px;
  176. margin-left: 450px;
  177. }
  178.  
  179. div.mainpic {
  180. width: 150px;
  181. height: 150px;
  182. overflow: hidden;
  183. margin-left: 10px;
  184. background-color: #000000;
  185. position: relative;
  186. Border: 5px solid transparent;
  187. border-image-repeat:round;
  188. border-image-slice: 20;
  189. Border-image-source: url(https://i.imgur.com/3nldOv0.png
  190. )
  191. ;
  192. }
  193. img.box {
  194. width: 150px;
  195. height: 150px;
  196. display: block;
  197. position: relative;
  198. }
  199. div.hoverpic {
  200. width: 150px;
  201. height: 150px;
  202. overflow: hidden;
  203. margin-left: 15px;
  204. margin-top: -155px;
  205. text-align:center;
  206. letter-spacing: 1px;
  207. opacity:0;
  208. position: absolute;
  209. background-color: rgba(0, 0, 0, 0.19);
  210. -webkit-transition: opacity .3s;
  211. transition: opacity .3s;
  212. }
  213. div.hoverpic:hover {
  214. opacity:1;
  215. }
  216. p.date {
  217. font-family: 'Shadows Into Light', cursive;
  218. color: #FFFFFF;
  219. font-size: 15px;
  220. line-height: 15px;
  221. }
  222. p.shortac {
  223. font-family: 'Comfortaa', cursive;
  224. color: #FFFFFF;
  225. font-size: 13px;
  226. }
  227.  
  228. /* !!! DON'T TOUCH : THIS IS DECORATION/CUPCAKES !!! */
  229. div.decoration {
  230. width: 160px;
  231. height: 400px;
  232. float:left;
  233. margin-left: 10px;
  234. }
  235. .line1 {
  236. width: 5px;
  237. height: 10px;
  238. padding: 290px 0px 0px 0px;
  239. background-color: #C6A49A;
  240. margin-left: 34px;
  241. float:left;
  242. margin-top: -30px;
  243. -webkit-transition: margin-top .3s;
  244. transition: margin-top .3s;
  245. }
  246. .line1:hover {
  247. margin-top:0px;
  248. }
  249. .cc1 {
  250. width: 33px;
  251. height: 40px;
  252. margin-left: -14px;
  253. -webkit-filter: drop-shadow(0px 0px 2px #D68189);
  254. filter: urlwww.marapets.com);
  255. -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  256. filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  257. }
  258. .cc2 {
  259. width: 38px;
  260. height: 40px;
  261. margin-left: -14px;
  262. -webkit-filter: drop-shadow(0px 0px 2px #D68189);
  263. filter: urlwww.marapets.com);
  264. -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  265. filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  266. }
  267. .line2 {
  268. width: 5px;
  269. height: 10px;
  270. padding: 250px 0px 0px 0px;
  271. background-color: #C6E5D9;
  272. margin-left: 37px;
  273. float:left;
  274. margin-top: -30px;
  275. -webkit-transition: margin-top .3s;
  276. transition: margin-top .3s;
  277. }
  278. .line2:hover {
  279. margin-top:0px;
  280. }
  281. .line3 {
  282. width: 5px;
  283. height: 10px;
  284. padding: 270px 0px 0px 0px;
  285. background-color: #D68189;
  286. margin-left: 40px;
  287. float:left;
  288. margin-top: -30px;
  289. -webkit-transition: margin-top .3s;
  290. transition: margin-top .3s;
  291. }
  292. .line3:hover {
  293. margin-top:0px;
  294. }
  295.  
  296. div.welcomebox {
  297. width: 150px;
  298. height: 150px;
  299. float:left;
  300. overflow: hidden;
  301. margin-top: 15px;
  302. margin-left: -160px;
  303. background-color: #FBFBE3;
  304. Border: 5px solid transparent;
  305. border-image-repeat:round;
  306. border-image-slice: 20;
  307. Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
  308. )
  309. ;
  310. }
  311. div.textbox {
  312. width: 152px;
  313. height: 140px;
  314. overflow: auto;
  315. text-align: justify;
  316. font-size: 12px;
  317. color: #C6A49A;
  318. padding: 0px 13px 0px 0px;
  319. font-family: 'Josefin Sans', sans-serif;
  320. border-width: 5px 15px 5px 5px;
  321. border-style: solid;
  322. border-color: #FBFBE3;
  323. -webkit-transition: color .23s;
  324. transition: color .23s;
  325. }
  326. div.textbox:hover {
  327. color: #E94E77;
  328. }
  329.  
  330. /* !!! NAVIGATION !!! */
  331. div.navigation {
  332. height: 50px;
  333. width: 452px;
  334. padding: 5px;
  335. float:left;
  336. overflow:hidden;
  337. margin-top: -160px;
  338. margin-left: 15px;
  339. Border: 5px solid transparent;
  340. border-image-repeat:round;
  341. border-image-slice: 20;
  342. Border-image-source: url(https://i.imgur.com/3nldOv0.png
  343. )
  344. ;
  345. background-color: transparent;
  346. }
  347. div.button {
  348. width:50px;
  349. height:50px;
  350. margin-left: 15px;
  351. float:left;
  352. }
  353. img.home {
  354. width: 40px;
  355. height: 40px;
  356. margin-top: 5px;
  357. -webkit-transition: all .3s;
  358. transition: all .3s;
  359. }
  360. img.home:hover {
  361. transform: scale(1.3,1.3);
  362. }
  363.  
  364. /* !!! LINK 1 : CLUB SITE !!! */
  365. div.link1 {
  366. width: 75px;
  367. height: 12px;
  368. padding: 3px;
  369. background-color: #F4EAD5;
  370. color: #E94E77;
  371. font-family: 'Josefin Sans', sans-serif;
  372. font-size: 11px;
  373. text-align: center;
  374. margin-top: 3px;
  375. float:left;
  376. letter-spacing: 0px;
  377. line-height:15px;
  378. margin-left: 16px;
  379. border: 1px solid #E94E77;
  380. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  381. transition: background-color .3s, letter-spacing .3s, color .3s;
  382. }
  383. div.link1:hover {
  384. background-color: #E94E77;
  385. }
  386. a.clubsite {
  387. text-decoration: none;
  388. color: #E94E77;
  389. -webkit-transition: all .3s;
  390. transition: all .3s;
  391. }
  392. a.clubsite:hover {
  393. color: #F4EAD5;
  394. letter-spacing: 2px;
  395. }
  396.  
  397. /* !!! LINK 2 !!! */
  398. div.link2 {
  399. width: 75px;
  400. height: 12px;
  401. padding: 3px;
  402. background-color: #F4EAD5;
  403. color: #E94E77;
  404. font-family: 'Josefin Sans', sans-serif;
  405. font-size: 11px;
  406. text-align: center;
  407. margin-top: 3px;
  408. float:left;
  409. letter-spacing: 0px;
  410. line-height:15px;
  411. margin-left: 8px;
  412. border: 1px solid #E94E77;
  413. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  414. transition: background-color .3s, letter-spacing .3s, color .3s;
  415. }
  416. div.link2:hover {
  417. background-color: #E94E77;
  418. }
  419. a.link2 {
  420. text-decoration: none;
  421. color: #E94E77;
  422. -webkit-transition: all .3s;
  423. transition: all .3s;
  424. }
  425. a.link2:hover {
  426. color: #F4EAD5;
  427. letter-spacing: 2px;
  428. }
  429.  
  430. /* !!! LINK 3 !!! */
  431. div.link3 {
  432. width: 75px;
  433. height: 12px;
  434. padding: 3px;
  435. background-color: #F4EAD5;
  436. color: #E94E77;
  437. font-family: 'Josefin Sans', sans-serif;
  438. font-size: 11px;
  439. text-align: center;
  440. margin-top: 3px;
  441. float:left;
  442. letter-spacing: 0px;
  443. line-height:15px;
  444. margin-left: 8px;
  445. border: 1px solid #E94E77;
  446. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  447. transition: background-color .3s, letter-spacing .3s, color .3s;
  448. }
  449. div.link3:hover {
  450. background-color: #E94E77;
  451. }
  452. a.link3 {
  453. text-decoration: none;
  454. color: #E94E77;
  455. -webkit-transition: all .3s;
  456. transition: all .3s;
  457. }
  458. a.link3:hover {
  459. color: #F4EAD5;
  460. letter-spacing: 2px;
  461. }
  462.  
  463. /* !!! LINK 4 !!! */
  464. div.link4 {
  465. width: 75px;
  466. height: 12px;
  467. padding: 3px;
  468. background-color: #F4EAD5;
  469. color: #E94E77;
  470. font-family: 'Josefin Sans', sans-serif;
  471. font-size: 11px;
  472. text-align: center;
  473. margin-top: 3px;
  474. float:left;
  475. letter-spacing: 0px;
  476. line-height:15px;
  477. margin-left: 8px;
  478. border: 1px solid #E94E77;
  479. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  480. transition: background-color .3s, letter-spacing .3s, color .3s;
  481. }
  482. div.link4:hover {
  483. background-color: #E94E77;
  484. }
  485. a.link4 {
  486. text-decoration: none;
  487. color: #E94E77;
  488. -webkit-transition: all .3s;
  489. transition: all .3s;
  490. }
  491. a.link4:hover {
  492. color: #F4EAD5;
  493. letter-spacing: 2px;
  494. }
  495.  
  496. /* !!! LINK 5 !!! */
  497. div.link5 {
  498. width: 75px;
  499. height: 12px;
  500. padding: 3px;
  501. background-color: #F4EAD5;
  502. color: #E94E77;
  503. font-family: 'Josefin Sans', sans-serif;
  504. font-size: 11px;
  505. text-align: center;
  506. margin-top: 3px;
  507. float:left;
  508. letter-spacing: 0px;
  509. line-height:15px;
  510. margin-left: 16px;
  511. border: 1px solid #E94E77;
  512. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  513. transition: background-color .3s, letter-spacing .3s, color .3s;
  514. }
  515. div.link5:hover {
  516. background-color: #E94E77;
  517. }
  518. a.link5 {
  519. text-decoration: none;
  520. color: #E94E77;
  521. -webkit-transition: all .3s;
  522. transition: all .3s;
  523. }
  524. a.link5:hover {
  525. color: #F4EAD5;
  526. letter-spacing: 2px;
  527. }
  528.  
  529. /* !!! LINK 6 !!! */
  530. div.link6 {
  531. width: 75px;
  532. height: 12px;
  533. padding: 3px;
  534. background-color: #F4EAD5;
  535. color: #E94E77;
  536. font-family: 'Josefin Sans', sans-serif;
  537. font-size: 11px;
  538. text-align: center;
  539. margin-top: 3px;
  540. float:left;
  541. letter-spacing: 0px;
  542. line-height:15px;
  543. margin-left: 8px;
  544. border: 1px solid #E94E77;
  545. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  546. transition: background-color .3s, letter-spacing .3s, color .3s;
  547. }
  548. div.link6:hover {
  549. background-color: #E94E77;
  550. }
  551. a.link6 {
  552. text-decoration: none;
  553. color: #E94E77;
  554. -webkit-transition: all .3s;
  555. transition: all .3s;
  556. }
  557. a.link6:hover {
  558. color: #F4EAD5;
  559. letter-spacing: 2px;
  560. }
  561.  
  562. /* !!! LINK 7 !!! */
  563. div.link7 {
  564. width: 75px;
  565. height: 12px;
  566. padding: 3px;
  567. background-color: #F4EAD5;
  568. color: #E94E77;
  569. font-family: 'Josefin Sans', sans-serif;
  570. font-size: 11px;
  571. text-align: center;
  572. margin-top: 3px;
  573. float:left;
  574. letter-spacing: 0px;
  575. line-height:15px;
  576. margin-left: 8px;
  577. border: 1px solid #E94E77;
  578. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  579. transition: background-color .3s, letter-spacing .3s, color .3s;
  580. }
  581. div.link7:hover {
  582. background-color: #E94E77;
  583. }
  584. a.link7 {
  585. text-decoration: none;
  586. color: #E94E77;
  587. -webkit-transition: all .3s;
  588. transition: all .3s;
  589. }
  590. a.link7:hover {
  591. color: #F4EAD5;
  592. letter-spacing: 2px;
  593. }
  594.  
  595. /* !!! DO NOT TOUCH !!! */
  596. /* !!! CREDITS !!! */
  597. div.credits {
  598. width: 75px;
  599. height: 12px;
  600. padding: 3px;
  601. background-color: #F4EAD5;
  602. color: #E94E77;
  603. font-family: 'Josefin Sans', sans-serif;
  604. font-size: 11px;
  605. text-align: center;
  606. margin-top: 3px;
  607. float:left;
  608. letter-spacing: 0px;
  609. line-height:15px;
  610. margin-left: 8px;
  611. border: 1px solid #E94E77;
  612. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  613. transition: background-color .3s, letter-spacing .3s, color .3s;
  614. }
  615. div.credits:hover {
  616. background-color: #E94E77;
  617. }
  618. a.credits {
  619. text-decoration: none;
  620. color: #E94E77;
  621. -webkit-transition: all .3s;
  622. transition: all .3s;
  623. }
  624. a.credits:hover {
  625. color: #F4EAD5;
  626. letter-spacing: 2px;
  627. }
  628.  
  629. /* !!! RULES heading !!! */
  630. .hrules {
  631. font-family: 'Staatliches', cursive;
  632. color: #FFFFFF;
  633. font-size: 35px;
  634. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  635. margin-left: 15px;
  636. width: 180px;
  637. height: 35px;
  638. float:left;
  639. margin-top: -75px;
  640. -webkit-transition: all .3s;
  641. transition: all .3s;
  642. letter-spacing: 1px;
  643. }
  644. .hrules:hover {
  645. letter-spacing: 4px;
  646. }
  647. /* !!! RULES text !!! */
  648. .rules {
  649. font-family: 'Josefin Sans', sans-serif;
  650. width: 170px;
  651. overflow:hidden;
  652. height: 200px;
  653. margin-top: -34px;
  654. margin-left: 15px;
  655. float:left;
  656. background-color: #FBFBE3;
  657. Border: 5px solid transparent;
  658. border-image-repeat:round;
  659. border-image-slice: 20;
  660. Border-image-source: url(https://i.imgur.com/3nldOv0.png
  661. )
  662. ;
  663. }
  664. .rulescroll {
  665. width: 182px;
  666. height: 190px;
  667. border-width: 5px 15px 5px 2px;
  668. border-style: solid;
  669. border-color: #FBFBE3;
  670. padding: 0px 20px 0px 0px;
  671. text-align: justify;
  672. overflow:auto;
  673. }
  674. .rule {
  675. font-size: 11px;
  676. line-height: 12px;
  677. color: #C6A49A;
  678. -webkit-transition: all .3s;
  679. transition: all .3s;
  680. }
  681. .rule:hover {
  682. color: #E94E77;
  683. }
  684.  
  685. /* !!! ANNOUNCEMENTS BUBBLE !!! */
  686. .bubble {
  687. width: 250px;
  688. height: 300px;
  689. border: 10px solid #FFFFFF;
  690. border-radius: 20%;
  691. float:left;
  692. overflow:hidden;
  693. background-color: #FFFFFF;
  694. margin-left: 15px;
  695. box-shadow: 0px 0px 4px #C6A49A, 3px 0px 0px #D68189;
  696. margin-top: -75px;
  697. }
  698. .invisb {
  699. overflow-x: hidden; /* Hide horizontal scrollbar */
  700. overflow-y: scroll; /* Add vertical scrollbar */
  701. width:250px;
  702. height: 230px;
  703. margin-top:20px;
  704. padding: 8px;
  705. border: 5px solid #FFFFFF;
  706. }
  707. /* !!! COPY .abox and .abox:hover !!! */
  708. /* !!! THEN LOOK FOR THE NEXT INSTRUCTION !!! */
  709. .abox {
  710. overflow:hidden;
  711. width:212px;
  712. height: 100px;
  713. padding: 5px;
  714. border-width: 0px 0px 1px 0px;
  715. border-style: solid;
  716. border-color: #D68189;
  717. font-family: 'Josefin Sans', sans-serif;
  718. font-size: 11px;
  719. line-height: 12px;
  720. color: #C6A49A;
  721. -webkit-transition: all .3s;
  722. transition: all .3s;
  723. }
  724. .abox:hover {
  725. color: #E94E77;
  726. }
  727. /* !!! PASTE BELOW IN A NEW SPOT !!! */
  728. /* !!! FOR EXAMPLE LOOK BELOW !!! */
  729. /* !!! CHANGE .abox and .aboxhover !!! */
  730. /* !!! TO THE CLASS NAME YOU USED BEFORE !!! */
  731. /* !!! FOR EXAMPLE, I CHANGED IT TO !! */
  732. /* !!! .abox2 and .abox2:hover !!! */
  733. .abox2 {
  734. overflow:hidden;
  735. width:212px;
  736. height: 10px;
  737. padding: 5px;
  738. border-width: 0px 0px 1px 0px;
  739. border-style: solid;
  740. border-color: #D68189;
  741. font-family: 'Josefin Sans', sans-serif;
  742. font-size: 11px;
  743. line-height: 12px;
  744. color: #C6A49A;
  745. -webkit-transition: all .3s;
  746. transition: all .3s;
  747. }
  748. .abox2:hover {
  749. color: #E94E77;
  750. }
  751.  
  752. .abox3 {
  753. overflow:hidden;
  754. width:212px;
  755. height: 34px;
  756. padding: 5px;
  757. border-width: 0px 0px 1px 0px;
  758. border-style: solid;
  759. border-color: #D68189;
  760. font-family: 'Josefin Sans', sans-serif;
  761. font-size: 11px;
  762. line-height: 12px;
  763. color: #C6A49A;
  764. -webkit-transition: all .3s;
  765. transition: all .3s;
  766. }
  767. .abox3:hover {
  768. color: #E94E77;
  769. }
  770.  
  771. .abox4 {
  772. overflow:hidden;
  773. width:212px;
  774. height: 82px;
  775. padding: 5px;
  776. border-width: 0px 0px 1px 0px;
  777. border-style: solid;
  778. border-color: #D68189;
  779. font-family: 'Josefin Sans', sans-serif;
  780. font-size: 11px;
  781. line-height: 12px;
  782. color: #C6A49A;
  783. -webkit-transition: all .3s;
  784. transition: all .3s;
  785. }
  786. .abox4:hover {
  787. color: #E94E77;
  788. }
  789.  
  790. .triangle {
  791. height:0px;
  792. width: 0px;
  793. float:left;
  794. margin-left: 370px;
  795. border-left: 20px solid transparent;
  796. border-right:20px solid transparent;
  797. border-top:20px solid #FFFFFF;
  798. -webkit-filter: drop-shadow(3px 0px 0px #D68189);
  799. filter: urlwww.marapets.com);
  800. -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=0, Color='#D68189');
  801. filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=0, Color='#D68189');
  802. }
  803. div.announcement {
  804. width:250px; height: 28px;
  805. Border-bottom: 5px solid #E94E77;
  806. Border-top: 0px solid transparent;
  807. Border-left: 0px solid transparent;
  808. Border-right: 0px solid transparent;
  809. float:left;
  810. padding: 0px 0px 0px 2px;
  811. overflow:hidden;
  812. margin-left: 390px;
  813. margin-top: -150px;
  814. font-family: 'Staatliches', cursive;
  815. color: #FFFFFF;
  816. font-size: 24px;
  817. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  818. -webkit-transition: all .2s;
  819. transition: all .2s;
  820. }
  821. div.announcement:hover {
  822. letter-spacing:1px;
  823. }
  824. p.heart {
  825. margin-top: -35px;
  826. margin-left: 198px;
  827. -webkit-animation: heart 5s infinite;
  828. animation: heart 5s infinite;
  829. }
  830. @keyframes heart {
  831. 0% {
  832. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  833. }
  834. 50% {
  835. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
  836. }
  837. 100% {
  838. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  839. }
  840. }
  841. @-moz-keyframes heart {
  842. 0% {
  843. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  844. }
  845. 50% {
  846. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
  847. }
  848. 100% {
  849. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  850. }
  851. }
  852. @-webkit-keyframes heart {
  853. 0% {
  854. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  855. }
  856. 50% {
  857. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
  858. }
  859. 100% {
  860. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  861. }
  862. }
  863.  
  864. /*!!!!!!!!!!!!!!!!*/
  865. /*!!! !!!*/
  866. /*!!! EVENTS !!!*/
  867. /*!!! !!!*/
  868. /*!!!!!!!!!!!!!!!!*/
  869. .hevents {
  870. font-family: 'Staatliches', cursive;
  871. color: #FFFFFF;
  872. font-size: 35px;
  873. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  874. margin-left: 185px;
  875. width: 180px;
  876. height: 35px;
  877. float:left;
  878. margin-top: -210px;
  879. -webkit-transition: all .3s;
  880. transition: all .3s;
  881. letter-spacing: 1px;
  882. }
  883. .hevents:hover {
  884. letter-spacing: 4px;
  885. }
  886. div.events {
  887. width: 170px;
  888. height: 150px;
  889. float:left;
  890. overflow: hidden;
  891. margin-top: -167px;
  892. margin-left: 185px;
  893. background-color: #FBFBE3;
  894. Border: 5px solid transparent;
  895. border-image-repeat:round;
  896. border-image-slice: 20;
  897. Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
  898. )
  899. ;
  900. }
  901. div.evis {
  902. width: 165px;
  903. height: 130px;
  904. padding: 5px 10px 5px 5px;
  905. text-align: justify;
  906. border: 5px solid #FBFBE3;
  907. overflow-x: hidden;
  908. overflow-y: scroll;
  909. }
  910. h1 {
  911. font-family: 'Prompt', sans-serif;
  912. color: #E94E77;
  913. font-size: 18px;
  914. margin-top: -10px;
  915. }
  916. p.ed {
  917. font-family: 'Josefin Sans', sans-serif;
  918. color: #D68189;
  919. font-size: 12px;
  920. line-height:12px;
  921. margin-top: -10px;
  922. }
  923. h2 {
  924. font-family: 'Prompt', sans-serif;
  925. color: #E94E77;
  926. font-size: 15px;
  927. margin-top: -10px;
  928. }
  929.  
  930. /*!!!!!!!!!!!!!!!!!*/
  931. /*!!! !!!*/
  932. /*!!! RANKS !!!*/
  933. /*!!! !!!*/
  934. /*!!!!!!!!!!!!!!!!!*/
  935. div.rankbox {
  936. float:left;
  937. width: 232px;
  938. height: 80px;
  939. background-color: #E94E77;
  940. padding: 5px;
  941. border: 5px solid #E94E77;
  942. overflow:hidden;
  943. margin-left: 390px;
  944. margin-top:-110px;
  945. }
  946. div.rank {
  947. width: 240px;
  948. height: 70px;
  949. padding: 5px 10px 5px 5px;
  950. overflow-x:hidden;
  951. overflow-y:scroll;
  952. font-family: 'M PLUS 1p', sans-serif;
  953. text-align: justify;
  954. line-height: 12px;
  955. font-size: 12px;
  956. }
  957. span.bold {
  958. font-weight:bold;
  959. color: #EBF7F8;
  960. }
  961. span.dsc {
  962. color:#FFFFFF;
  963. }
  964. </style>
  965.  
  966. <body>
  967. <div class=container>
  968. <div class=headingbox>
  969. HEADING
  970. </div>
  971. <div class=subheadingbox>
  972. SUBHEADING
  973. </div>
  974.  
  975. <div class=movingtxt>
  976. <marquee>
  977. hover over cupcake pic // change this to anything you want
  978. </marquee>
  979. </div>
  980.  
  981.  
  982. <div class=pets1>
  983. <img class=pet1 src=https://i.imgur.com/xZxH8YF.png />
  984. </div>
  985. <div class=pets2>
  986. <img class=pet1 src=https://i.imgur.com/oVlIRQX.gif />
  987. </div>
  988.  
  989. <div class=mainpic>
  990. <img src=https://66.media.tumblr.com/00a00df53538bb60251c8bb5865585d1/tumblr_om9cxjP3YT1w5vv5po1_400.gif class=box>
  991. </div>
  992.  
  993. <div class=hoverpic>
  994. <p class=date>
  995. 1/15/2019
  996. </p>
  997. <p class=shortac>
  998. short announcement here
  999. </p>
  1000. </div>
  1001.  
  1002. <div class=decoration>
  1003. <div class=line1><img src=https://i.imgur.com/vLng10I.png class=cc1 /></div>
  1004. <div class=line2><img src=https://i.imgur.com/9BegT1g.png class=cc2 /></div>
  1005. <div class=line3><img src=https://i.imgur.com/vLng10I.png class=cc1 /></div>
  1006. </div>
  1007.  
  1008. <div class=welcomebox>
  1009. <div class=textbox>
  1010. use < / br > without the spaces to make a new line
  1011. </br> </br>
  1012. Red flavor, I’m curious honey </br>
  1013. It tastes like slowly melting strawberry when I bite into it </br>
  1014. Look for the corner candy shop baby </br>
  1015. What I like the most is the taste of summer </br>
  1016. I wanna fall asleep underneath a palm tree </br>
  1017. While the hot summer night breeze blows </br>
  1018. We’re nineteen, easily falling in love </br>
  1019. We’re cute together and cool too </br>
  1020. I like you, it was love at first sight </br>
  1021. I keep thinking of you </br>
  1022. I wanna go my own way
  1023. </div>
  1024. </div>
  1025.  
  1026. <div class=navigation>
  1027. <div class=button><a href=https://www.marasites.com/?name=Kagayama&page=example><img src=https://i.imgur.com/C91FqxQ.png class=home /></a>
  1028. </div>
  1029.  
  1030. <div class=link1><a href=https://www.marasites.com/?name=Kagayama&page=example class=clubsite target=_blank>club site</a></div>
  1031.  
  1032. <div class=link2><a href=https://www.marasites.com/?name=Kagayama&page=example2 class=link2>staff</a></div>
  1033.  
  1034. <div class=link3><a href=https://www.marasites.com/?name=Kagayama&page=example class=link3>link 3</a></div>
  1035.  
  1036. <div class=link4><a href=https://www.marasites.com/?name=Kagayama&page=example class=link4>link 4</a></div>
  1037.  
  1038. <div class=link5><a href=https://www.marasites.com/?name=Kagayama&page=example class=link5>link 5</a></div>
  1039.  
  1040. <div class=link6><a href=https://www.marasites.com/?name=Kagayama&page=example class=link6>link 6</a></div>
  1041.  
  1042. <div class=link7><a href=https://www.marasites.com/?name=Kagayama&page=example class=link7>link 7</a></div>
  1043.  
  1044. <div class=credits><a href=https://www.marapets.com/profile.php?id=5481177 class=credits title=©Kagayama target=_blank>credits</a></div>
  1045. </div>
  1046.  
  1047. <div class=hrules>RULES</div>
  1048. <div class=rules>
  1049. <div class=rulescroll>
  1050. <p class=rule>1. add a new < p class = rule > for every new line or rule.</p>
  1051. <p class=rule>2. or use < / br > to make a new line in the same rule/same number. </p>
  1052. <p class=rule>3. hovering over a rule makes it turn hot pink</p>
  1053. <p class=rule>4. keep the credits intact</p>
  1054. <p class=rule>5. this box has an invisible scroll</p>
  1055. <p class=rule>6. i hope you like the layout.</p>
  1056. <p class=rule>7. you can just copy and paste this line in the code</p>
  1057. <p class=rule>8. like this:</p>
  1058. <p class=rule>9. i hope you like the layout.</p>
  1059. <p class=rule>9. i hope you like the layout.</p>
  1060. </div>
  1061. </div>
  1062.  
  1063. <div class=bubble>
  1064. <div class=invisb>
  1065. <div class=abox>1/16/19: new club layout! adjust the height on the boxes and give it a new class to fit how long the text is. after giving it a new class name, for example : abox, abox1, abox2- then copy and paste the css which i'll have labelled under !!! then adjust the name to match the class, then adjust the height.
  1066. </div>
  1067. <div class=abox2>1/15/19: this is an example.
  1068. </div>
  1069. <div class=abox3>1/14/19: this is another example. contact me if you need any further help editing the layout.
  1070. </div>
  1071. <div class=abox4>1/13/19: a shining crescent far beneath the flying vessel. it was going to be a lonely trip back. mist enveloped the ship three hours our from port. my two natures had memory in common. silver mist suffused the deck of the ship. the face of the moon was in shadow.
  1072. </div>
  1073. <div class=abox4>1/13/19: a shining crescent far beneath the flying vessel. it was going to be a lonely trip back. mist enveloped the ship three hours our from port. my two natures had memory in common. silver mist suffused the deck of the ship. the face of the moon was in shadow.
  1074. </div>
  1075. </div>
  1076. </div>
  1077. <div class=triangle></div>
  1078.  
  1079. <div class=announcement> ANNOUNCEMENTS
  1080. <p class=heart>♡</p></div>
  1081.  
  1082. <div class=hevents>EVENTS</div>
  1083. <div class=events>
  1084. <div class=evis>
  1085. <H1>Event Name</H1>
  1086. <p class=ed>event dscrptn goes here. short event dscrptn goes here. use < H2 > to start a new section like rules of the event. use p class = ed in brackets to make text like this. </p>
  1087. <H2>Rules</h2>
  1088. <p class=ed>1. blah blah this is an example.</p>
  1089. <p class=ed>2. blah blah this is also an example.</p>
  1090. <p class=ed>3. rules go here blah blah.</p>
  1091. <H2>Prizes</h2>
  1092. <p class=ed>list the prizes here. remember < / br > to start a new line.</br>
  1093. like this.</p>
  1094. </div>
  1095. </div>
  1096.  
  1097. <div class=rankbox>
  1098. <div class=rank>
  1099. <span class=bold>rank: </span><span class=dsc>dscrptn of the rank and how to get it. hover over rank to make it change colors. type < / br > to create a line break.</span></br></br>
  1100. <span class=bold>rank: </span><span class=dsc>dscrptn of the rank and how to get it. hover over rank to make it change colors. type < / br > to create a line break.</span></br></br>
  1101. <span class=bold>rank: </span><span class=dsc>dscrptn of the rank and how to get it. hover over rank to make it change colors. type < / br > to create a line break.</span></br></br>
  1102. <span class=bold>rank: </span><span class=dsc>dscrptn of the rank and how to get it. hover over rank to make it change colors. type < / br > to create a line break.</span></br></br>
  1103. <span class=bold>rank: </span><span class=dsc>dscrptn of the rank and how to get it. hover over rank to make it change colors. type < / br > to create a line break.</span></br></br>
  1104. </div>
  1105. </div>
  1106.  
  1107. </div>
  1108. </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!