API tools faq
paste
M-21

staff page

M-21
Jan 16th, 2019
45
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.61 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. <link href=https://fonts.googleapis.com/css?family=Julius+Sans+One rel=stylesheet>
  10. <link href=https://fonts.googleapis.com/css?family=Spinnaker rel=stylesheet>
  11.  
  12.  
  13.  
  14. <style>
  15.  
  16. /* !!! EVERYTHING CONTAINED IN < style > < / style >
  17. ARE FOR EDITING THE THEME/COLORS OF EVERYTHING. !!! */
  18.  
  19. /* !!! everything with 3 exclamation points are tool tips
  20. to help you edit the layout !!! */
  21.  
  22. div.container {
  23. width: 665px;
  24. height: 800px;
  25.  
  26. /* !!! USE THIS TO CHANGE THE BACKGROUND COLOR !!
  27. !!!!!! THEN REPLACE THE CHUNK BELOW !!!!!!:
  28. http://colorzilla.com/gradient-editor/#c6e5d9+0,f4ead5+64 */
  29.  
  30. background: #c6e5d9;
  31. background: -moz-linear-gradient(top, #c6e5d9 0%, #f4ead5 36%);
  32. background: -webkit-linear-gradient(top, #c6e5d9 0%,#f4ead5 36%);
  33. background: linear-gradient(to bottom, #c6e5d9 0%,#f4ead5 36%);
  34. filter: progid:DXImageTransform.Microsoft.gradient(
  35. startColorstr='#c6e5d9', endColorstr='#f4ead5',GradientType=0 );
  36. }
  37.  
  38. /* !!! CUSTOMIZE CLUB TITLE COLORS !!! */
  39. div.headingbox {
  40. text-align: center;
  41. height: 100px;
  42. float:left;
  43. width: 665px;
  44. font-family: 'Staatliches', cursive;
  45. color: #FFFFFF;
  46. font-size: 50px;
  47. text-shadow: 0px 2px 2px #E94E77;
  48. -webkit-transition: font-size .3s, text-shadow .5s;
  49. transition: font-size .3s, text-shadow .5s;
  50. line-height: 120px;
  51. }
  52. div.headingbox:hover {
  53. font-size: 60px;
  54. text-shadow: 0px 0px 6px #E94E77;
  55. }
  56. div.subheadingbox {
  57. height: 100px;
  58. text-align: center;
  59. float:left;
  60. width: 665px;
  61. font-family: 'Reenie Beanie', cursive;
  62. line-height: 0px;
  63. margin-top: -10px;
  64. color: #D68189;
  65. font-size: 20px;
  66. text-shadow: 0px 2px 0px #F4EAD5;
  67. -webkit-animation: fade 16s infinite;
  68. animation: fade 16s infinite;
  69. opacity:0;
  70. }
  71. @keyframes fade {
  72. 0% {
  73. opacity:0;
  74. }
  75. 20% {
  76. opacity:1;
  77. }
  78. 70% {
  79. opacity:1;
  80. }
  81. 100% {
  82. opacity:0;
  83. }
  84. }
  85. @-moz-keyframes fade {
  86. 0% {
  87. opacity:0;
  88. }
  89. 20% {
  90. opacity:1;
  91. }
  92. 70% {
  93. opacity:1;
  94. }
  95. 100% {
  96. opacity:0;
  97. }
  98. }
  99.  
  100. /* !!! CUSTOMIZE MOVING HEADER TEXT COLORS !!! */
  101. div.movingtxt {
  102. width: 617px;
  103. height: 25px;
  104. padding: 10px 10px 0px 10px;
  105. background-color: #FBFBE3;
  106.  
  107. Border: 5px solid transparent;
  108. border-image-repeat:round;
  109. border-image-slice: 20;
  110. Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
  111. )
  112. ;
  113. margin-left: 10px;
  114. float:left;
  115. margin-top: -60px;
  116. overflow: hidden;
  117. }
  118. marquee {
  119. font-size: 14px;
  120. line-height: 14px;
  121. color: #E94E77;
  122. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  123. letter-spacing: 1px;
  124. font-family: 'Josefin Sans', sans-serif;
  125. -webkit-animation: switch 14s infinite;
  126. animation: switch 14s infinite;
  127. }
  128. @keyframes switch {
  129. 0% {
  130. color: #E94E77;
  131. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  132. }
  133. 50% {
  134. color: #C6A49A;
  135. text-shadow: 0px 0px 2px #FBCFCF, 0px 0px 4px #FBCFCF, 0px 0px 6px #FBCFCF;
  136. }
  137. 100% {
  138. color: #E94E77;
  139. text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
  140. }
  141. }
  142. @-moz-keyframes switch {
  143. 0% {
  144. opacity:0;
  145. }
  146. 50% {
  147. opacity:1;
  148. }
  149. 100% {
  150. opacity:0;
  151. }
  152. }
  153. @-webkit-keyframes switch {
  154. 0% {
  155. opacity:0;
  156. }
  157. 50% {
  158. opacity:1;
  159. }
  160. 100% {
  161. opacity:0;
  162. }
  163. }
  164.  
  165. div.pets1 {
  166. width: 150px;
  167. height: 135px;
  168. overflow: hidden;
  169. float:left;
  170. margin-top:-183px;
  171. margin-left: 60px;
  172. }
  173. div.pets2 {
  174. width: 150px;
  175. height: 135px;
  176. overflow: hidden;
  177. float:left;
  178. margin-top:-152px;
  179. margin-left: 450px;
  180. }
  181.  
  182. div.mainpic {
  183. width: 150px;
  184. height: 150px;
  185. overflow: hidden;
  186. margin-left: 10px;
  187. background-color: #000000;
  188. position: relative;
  189. Border: 5px solid transparent;
  190. border-image-repeat:round;
  191. border-image-slice: 20;
  192. Border-image-source: url(https://i.imgur.com/3nldOv0.png
  193. )
  194. ;
  195. }
  196. img.box {
  197. width: 150px;
  198. height: 150px;
  199. display: block;
  200. position: relative;
  201. }
  202. div.hoverpic {
  203. width: 150px;
  204. height: 150px;
  205. overflow: hidden;
  206. margin-left: 15px;
  207. margin-top: -155px;
  208. text-align:center;
  209. letter-spacing: 1px;
  210. opacity:0;
  211. position: absolute;
  212. background-color: rgba(0, 0, 0, 0.19);
  213. -webkit-transition: opacity .3s;
  214. transition: opacity .3s;
  215. }
  216. div.hoverpic:hover {
  217. opacity:1;
  218. }
  219. p.date {
  220. font-family: 'Shadows Into Light', cursive;
  221. color: #FFFFFF;
  222. font-size: 15px;
  223. line-height: 15px;
  224. }
  225. p.shortac {
  226. font-family: 'Comfortaa', cursive;
  227. color: #FFFFFF;
  228. font-size: 13px;
  229. }
  230.  
  231. /* !!! DON'T TOUCH : THIS IS DECORATION/CUPCAKES !!! */
  232. div.decoration {
  233. width: 160px;
  234. height: 400px;
  235. float:left;
  236. margin-left: 10px;
  237. }
  238. .line1 {
  239. width: 5px;
  240. height: 10px;
  241. padding: 290px 0px 0px 0px;
  242. background-color: #C6A49A;
  243. margin-left: 34px;
  244. float:left;
  245. margin-top: -30px;
  246. -webkit-transition: margin-top .3s;
  247. transition: margin-top .3s;
  248. }
  249. .line1:hover {
  250. margin-top:0px;
  251. }
  252. .cc1 {
  253. width: 33px;
  254. height: 40px;
  255. margin-left: -14px;
  256. -webkit-filter: drop-shadow(0px 0px 2px #D68189);
  257. filter: urlwww.marapets.com);
  258. -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  259. filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  260. }
  261. .cc2 {
  262. width: 38px;
  263. height: 40px;
  264. margin-left: -14px;
  265. -webkit-filter: drop-shadow(0px 0px 2px #D68189);
  266. filter: urlwww.marapets.com);
  267. -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  268. filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
  269. }
  270. .line2 {
  271. width: 5px;
  272. height: 10px;
  273. padding: 250px 0px 0px 0px;
  274. background-color: #C6E5D9;
  275. margin-left: 37px;
  276. float:left;
  277. margin-top: -30px;
  278. -webkit-transition: margin-top .3s;
  279. transition: margin-top .3s;
  280. }
  281. .line2:hover {
  282. margin-top:0px;
  283. }
  284. .line3 {
  285. width: 5px;
  286. height: 10px;
  287. padding: 270px 0px 0px 0px;
  288. background-color: #D68189;
  289. margin-left: 40px;
  290. float:left;
  291. margin-top: -30px;
  292. -webkit-transition: margin-top .3s;
  293. transition: margin-top .3s;
  294. }
  295. .line3:hover {
  296. margin-top:0px;
  297. }
  298.  
  299. div.welcomebox {
  300. width: 150px;
  301. height: 150px;
  302. float:left;
  303. overflow: hidden;
  304. margin-top: 15px;
  305. margin-left: -160px;
  306. background-color: #FBFBE3;
  307. Border: 5px solid transparent;
  308. border-image-repeat:round;
  309. border-image-slice: 20;
  310. Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
  311. )
  312. ;
  313. }
  314. div.textbox {
  315. width: 152px;
  316. height: 140px;
  317. overflow: auto;
  318. text-align: justify;
  319. font-size: 12px;
  320. color: #C6A49A;
  321. padding: 0px 13px 0px 0px;
  322. font-family: 'Josefin Sans', sans-serif;
  323. border-width: 5px 15px 5px 5px;
  324. border-style: solid;
  325. border-color: #FBFBE3;
  326. -webkit-transition: color .23s;
  327. transition: color .23s;
  328. }
  329. div.textbox:hover {
  330. color: #E94E77;
  331. }
  332.  
  333. /* !!! NAVIGATION !!! */
  334. div.navigation {
  335. height: 50px;
  336. width: 452px;
  337. padding: 5px;
  338. float:left;
  339. overflow:hidden;
  340. margin-top: -160px;
  341. margin-left: 15px;
  342. Border: 5px solid transparent;
  343. border-image-repeat:round;
  344. border-image-slice: 20;
  345. Border-image-source: url(https://i.imgur.com/3nldOv0.png
  346. )
  347. ;
  348. background-color: transparent;
  349. }
  350. div.button {
  351. width:50px;
  352. height:50px;
  353. margin-left: 15px;
  354. float:left;
  355. }
  356. img.home {
  357. width: 40px;
  358. height: 40px;
  359. margin-top: 5px;
  360. -webkit-transition: all .3s;
  361. transition: all .3s;
  362. }
  363. img.home:hover {
  364. transform: scale(1.3,1.3);
  365. }
  366.  
  367. /* !!! LINK 1 : CLUB SITE !!! */
  368. div.link1 {
  369. width: 75px;
  370. height: 12px;
  371. padding: 3px;
  372. background-color: #F4EAD5;
  373. color: #E94E77;
  374. font-family: 'Josefin Sans', sans-serif;
  375. font-size: 11px;
  376. text-align: center;
  377. margin-top: 3px;
  378. float:left;
  379. letter-spacing: 0px;
  380. line-height:15px;
  381. margin-left: 16px;
  382. border: 1px solid #E94E77;
  383. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  384. transition: background-color .3s, letter-spacing .3s, color .3s;
  385. }
  386. div.link1:hover {
  387. background-color: #E94E77;
  388. }
  389. a.clubsite {
  390. text-decoration: none;
  391. color: #E94E77;
  392. -webkit-transition: all .3s;
  393. transition: all .3s;
  394. }
  395. a.clubsite:hover {
  396. color: #F4EAD5;
  397. letter-spacing: 2px;
  398. }
  399.  
  400. /* !!! LINK 2 !!! */
  401. div.link2 {
  402. width: 75px;
  403. height: 12px;
  404. padding: 3px;
  405. background-color: #F4EAD5;
  406. color: #E94E77;
  407. font-family: 'Josefin Sans', sans-serif;
  408. font-size: 11px;
  409. text-align: center;
  410. margin-top: 3px;
  411. float:left;
  412. letter-spacing: 0px;
  413. line-height:15px;
  414. margin-left: 8px;
  415. border: 1px solid #E94E77;
  416. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  417. transition: background-color .3s, letter-spacing .3s, color .3s;
  418. }
  419. div.link2:hover {
  420. background-color: #E94E77;
  421. }
  422. a.link2 {
  423. text-decoration: none;
  424. color: #E94E77;
  425. -webkit-transition: all .3s;
  426. transition: all .3s;
  427. }
  428. a.link2:hover {
  429. color: #F4EAD5;
  430. letter-spacing: 2px;
  431. }
  432.  
  433. /* !!! LINK 3 !!! */
  434. div.link3 {
  435. width: 75px;
  436. height: 12px;
  437. padding: 3px;
  438. background-color: #F4EAD5;
  439. color: #E94E77;
  440. font-family: 'Josefin Sans', sans-serif;
  441. font-size: 11px;
  442. text-align: center;
  443. margin-top: 3px;
  444. float:left;
  445. letter-spacing: 0px;
  446. line-height:15px;
  447. margin-left: 8px;
  448. border: 1px solid #E94E77;
  449. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  450. transition: background-color .3s, letter-spacing .3s, color .3s;
  451. }
  452. div.link3:hover {
  453. background-color: #E94E77;
  454. }
  455. a.link3 {
  456. text-decoration: none;
  457. color: #E94E77;
  458. -webkit-transition: all .3s;
  459. transition: all .3s;
  460. }
  461. a.link3:hover {
  462. color: #F4EAD5;
  463. letter-spacing: 2px;
  464. }
  465.  
  466. /* !!! LINK 4 !!! */
  467. div.link4 {
  468. width: 75px;
  469. height: 12px;
  470. padding: 3px;
  471. background-color: #F4EAD5;
  472. color: #E94E77;
  473. font-family: 'Josefin Sans', sans-serif;
  474. font-size: 11px;
  475. text-align: center;
  476. margin-top: 3px;
  477. float:left;
  478. letter-spacing: 0px;
  479. line-height:15px;
  480. margin-left: 8px;
  481. border: 1px solid #E94E77;
  482. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  483. transition: background-color .3s, letter-spacing .3s, color .3s;
  484. }
  485. div.link4:hover {
  486. background-color: #E94E77;
  487. }
  488. a.link4 {
  489. text-decoration: none;
  490. color: #E94E77;
  491. -webkit-transition: all .3s;
  492. transition: all .3s;
  493. }
  494. a.link4:hover {
  495. color: #F4EAD5;
  496. letter-spacing: 2px;
  497. }
  498.  
  499. /* !!! LINK 5 !!! */
  500. div.link5 {
  501. width: 75px;
  502. height: 12px;
  503. padding: 3px;
  504. background-color: #F4EAD5;
  505. color: #E94E77;
  506. font-family: 'Josefin Sans', sans-serif;
  507. font-size: 11px;
  508. text-align: center;
  509. margin-top: 3px;
  510. float:left;
  511. letter-spacing: 0px;
  512. line-height:15px;
  513. margin-left: 16px;
  514. border: 1px solid #E94E77;
  515. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  516. transition: background-color .3s, letter-spacing .3s, color .3s;
  517. }
  518. div.link5:hover {
  519. background-color: #E94E77;
  520. }
  521. a.link5 {
  522. text-decoration: none;
  523. color: #E94E77;
  524. -webkit-transition: all .3s;
  525. transition: all .3s;
  526. }
  527. a.link5:hover {
  528. color: #F4EAD5;
  529. letter-spacing: 2px;
  530. }
  531.  
  532. /* !!! LINK 6 !!! */
  533. div.link6 {
  534. width: 75px;
  535. height: 12px;
  536. padding: 3px;
  537. background-color: #F4EAD5;
  538. color: #E94E77;
  539. font-family: 'Josefin Sans', sans-serif;
  540. font-size: 11px;
  541. text-align: center;
  542. margin-top: 3px;
  543. float:left;
  544. letter-spacing: 0px;
  545. line-height:15px;
  546. margin-left: 8px;
  547. border: 1px solid #E94E77;
  548. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  549. transition: background-color .3s, letter-spacing .3s, color .3s;
  550. }
  551. div.link6:hover {
  552. background-color: #E94E77;
  553. }
  554. a.link6 {
  555. text-decoration: none;
  556. color: #E94E77;
  557. -webkit-transition: all .3s;
  558. transition: all .3s;
  559. }
  560. a.link6:hover {
  561. color: #F4EAD5;
  562. letter-spacing: 2px;
  563. }
  564.  
  565. /* !!! LINK 7 !!! */
  566. div.link7 {
  567. width: 75px;
  568. height: 12px;
  569. padding: 3px;
  570. background-color: #F4EAD5;
  571. color: #E94E77;
  572. font-family: 'Josefin Sans', sans-serif;
  573. font-size: 11px;
  574. text-align: center;
  575. margin-top: 3px;
  576. float:left;
  577. letter-spacing: 0px;
  578. line-height:15px;
  579. margin-left: 8px;
  580. border: 1px solid #E94E77;
  581. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  582. transition: background-color .3s, letter-spacing .3s, color .3s;
  583. }
  584. div.link7:hover {
  585. background-color: #E94E77;
  586. }
  587. a.link7 {
  588. text-decoration: none;
  589. color: #E94E77;
  590. -webkit-transition: all .3s;
  591. transition: all .3s;
  592. }
  593. a.link7:hover {
  594. color: #F4EAD5;
  595. letter-spacing: 2px;
  596. }
  597.  
  598. /* !!! DO NOT TOUCH !!! */
  599. /* !!! CREDITS !!! */
  600. div.credits {
  601. width: 75px;
  602. height: 12px;
  603. padding: 3px;
  604. background-color: #F4EAD5;
  605. color: #E94E77;
  606. font-family: 'Josefin Sans', sans-serif;
  607. font-size: 11px;
  608. text-align: center;
  609. margin-top: 3px;
  610. float:left;
  611. letter-spacing: 0px;
  612. line-height:15px;
  613. margin-left: 8px;
  614. border: 1px solid #E94E77;
  615. -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
  616. transition: background-color .3s, letter-spacing .3s, color .3s;
  617. }
  618. div.credits:hover {
  619. background-color: #E94E77;
  620. }
  621. a.credits {
  622. text-decoration: none;
  623. color: #E94E77;
  624. -webkit-transition: all .3s;
  625. transition: all .3s;
  626. }
  627. a.credits:hover {
  628. color: #F4EAD5;
  629. letter-spacing: 2px;
  630. }
  631.  
  632. /* !!! heading !!! */
  633. .title {
  634. font-family: 'Staatliches', cursive;
  635. color: #FFFFFF;
  636. font-size: 35px;
  637. text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
  638. margin-left: 15px;
  639. width: 180px;
  640. height: 35px;
  641. float:left;
  642. margin-top: -75px;
  643. -webkit-transition: all .3s;
  644. transition: all .3s;
  645. letter-spacing: 1px;
  646. }
  647. .title:hover {
  648. letter-spacing: 4px;
  649. }
  650. .boxbox {
  651. width: 470px;
  652. height: 400px;
  653. background-color: white;
  654. float:left;
  655. margin-left: 15px;
  656. margin-top:-30px;
  657. overflow:hidden;
  658. }
  659. .invisbox {
  660. width: 480px;
  661. height: 400px;
  662. padding: 0px 15px 0px 0px;
  663. overflow-x: hidden;
  664. overflow-y: scroll;
  665. }
  666. .staff1 {
  667. background-color: #ffb8c4;
  668. background-image: url(https://www.transparenttextures.com/patterns/grid-me.png
  669. )
  670. ;
  671. width: 470px;
  672. height: 100px;
  673. overflow:hidden;
  674. }
  675. .staff2 {
  676. background-color: #FFFFFF;
  677. background-image: url(https://www.transparenttextures.com/patterns/grid-me.png
  678. )
  679. ;
  680. width: 470px;
  681. height: 100px;
  682. overflow:hidden;
  683. }
  684. img.icon {
  685. margin-left:25px;
  686. margin-top: 25px;
  687. float:left;
  688. -webkit-transition: all .3s;
  689. transition: all .3s;
  690. }
  691. img.icon:hover {
  692. transform: scale(1.1,1.1);
  693. }
  694. div.info {
  695. float:left;
  696. height: 90px;
  697. width: 350px;
  698. padding: 5px;
  699. overflow:hidden;
  700. margin-left: 25px;
  701. }
  702. p.name {
  703. font-family: 'Julius Sans One', sans-serif;
  704. font-size: 16px;
  705. color: #FFFFFF;
  706. text-transform: uppercase;
  707. letter-spacing: 1px;
  708. text-shadow: 0px 0px 1px #E94E77;
  709. }
  710. p.role {
  711. color: #E94E77;
  712. font-size:13px;
  713. margin-top:-21px;
  714. letter-spacing: 1px;
  715. font-family: 'Josefin Sans', sans-serif;
  716. text-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;
  717. }
  718. p.dsc {
  719. color: #FFFFFF;
  720. font-size:11px;
  721. margin-top:-10px;
  722. line-height: 12px;
  723. letter-spacing: 1px;
  724. font-family: 'Josefin Sans', sans-serif;
  725. }
  726.  
  727. div.info2 {
  728. float:left;
  729. height: 90px;
  730. width: 350px;
  731. padding: 5px;
  732. overflow:hidden;
  733. margin-left: 25px;
  734. }
  735. p.name2 {
  736. font-family: 'Julius Sans One', sans-serif;
  737. font-size: 16px;
  738. color: #E94E77;
  739. text-transform: uppercase;
  740. letter-spacing: 1px;
  741. text-shadow: 0px 0px 1px #E94E77;
  742. }
  743. p.role2 {
  744. color: #C6A49A;
  745. font-size:13px;
  746. margin-top:-21px;
  747. letter-spacing: 1px;
  748. font-family: 'Josefin Sans', sans-serif;
  749. text-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;
  750. }
  751. p.dsc2 {
  752. color: #D68189;
  753. font-size:11px;
  754. margin-top:-10px;
  755. line-height: 12px;
  756. letter-spacing: 1px;
  757. font-family: 'Josefin Sans', sans-serif;
  758. }
  759. </style>
  760.  
  761. <body>
  762. <div class=container>
  763. <div class=headingbox>
  764. HEADING
  765. </div>
  766. <div class=subheadingbox>
  767. SUBHEADING
  768. </div>
  769.  
  770. <div class=movingtxt>
  771. <marquee>
  772. hover over cupcake pic // change this to anything you want
  773. </marquee>
  774. </div>
  775.  
  776.  
  777. <div class=pets1>
  778. <img class=pet1 src=https://i.imgur.com/xZxH8YF.png />
  779. </div>
  780. <div class=pets2>
  781. <img class=pet1 src=https://i.imgur.com/oVlIRQX.gif />
  782. </div>
  783.  
  784. <div class=mainpic>
  785. <img src=https://66.media.tumblr.com/00a00df53538bb60251c8bb5865585d1/tumblr_om9cxjP3YT1w5vv5po1_400.gif class=box>
  786. </div>
  787.  
  788. <div class=hoverpic>
  789. <p class=date>
  790. 1/15/2019
  791. </p>
  792. <p class=shortac>
  793. short announcement here
  794. </p>
  795. </div>
  796.  
  797. <div class=decoration>
  798. <div class=line1><img src=https://i.imgur.com/vLng10I.png class=cc1 /></div>
  799. <div class=line2><img src=https://i.imgur.com/9BegT1g.png class=cc2 /></div>
  800. <div class=line3><img src=https://i.imgur.com/vLng10I.png class=cc1 /></div>
  801. </div>
  802.  
  803. <div class=welcomebox>
  804. <div class=textbox>
  805. use < / br > without the spaces to make a new line
  806. </br> </br>
  807. Red flavor, I’m curious honey </br>
  808. It tastes like slowly melting strawberry when I bite into it </br>
  809. Look for the corner candy shop baby </br>
  810. What I like the most is the taste of summer </br>
  811. I wanna fall asleep underneath a palm tree </br>
  812. While the hot summer night breeze blows </br>
  813. We’re nineteen, easily falling in love </br>
  814. We’re cute together and cool too </br>
  815. I like you, it was love at first sight </br>
  816. I keep thinking of you </br>
  817. I wanna go my own way
  818. </div>
  819. </div>
  820.  
  821. <div class=navigation>
  822. <div class=button><a href=https://www.marasites.com/?name=Kagayama&page=example><img src=https://i.imgur.com/C91FqxQ.png class=home /></a>
  823. </div>
  824.  
  825. <div class=link1><a href=https://www.marasites.com/?name=Kagayama&page=example class=clubsite target=_blank>club site</a></div>
  826.  
  827. <div class=link2><a href=https://www.marasites.com/?name=Kagayama&page=example class=link2>link 2</a></div>
  828.  
  829. <div class=link3><a href=https://www.marasites.com/?name=Kagayama&page=example class=link3>link 3</a></div>
  830.  
  831. <div class=link4><a href=https://www.marasites.com/?name=Kagayama&page=example class=link4>link 4</a></div>
  832.  
  833. <div class=link5><a href=https://www.marasites.com/?name=Kagayama&page=example class=link5>link 5</a></div>
  834.  
  835. <div class=link6><a href=https://www.marasites.com/?name=Kagayama&page=example class=link6>link 6</a></div>
  836.  
  837. <div class=link7><a href=https://www.marasites.com/?name=Kagayama&page=example class=link7>link 7</a></div>
  838.  
  839. <div class=credits><a href=https://www.marapets.com/profile.php?id=5481177 class=credits title=©Kagayama target=_blank>credits</a></div>
  840. </div>
  841.  
  842. <div class=title>STAFF</div>
  843. <div class=boxbox>
  844. <div class=invisbox>
  845. <div class=staff1>
  846. <img src=https://images.marapets.com/avatars/nyuchan_mini.gif class=icon />
  847. <div class=info>
  848. <p class=name>Name</p>
  849. <p class=role>Role ♡ Nickname</p>
  850. <p class=dsc>short paragraph about staff here. no scroll. keep it short and concise.</p>
  851. </div>
  852. </div>
  853. <div class=staff2>
  854. <img src=https://images.marapets.com/avatars/popo_mini.gif class=icon />
  855. <div class=info2>
  856. <p class=name2>Name</p>
  857. <p class=role2>Role ♡ Nickname</p>
  858. <p class=dsc2>short paragraph about staff here. no scroll. keep it short and concise.</p>
  859. </div>
  860. </div>
  861. <div class=staff1>
  862. <img src=https://images.marapets.com/avatars/snooty_mini.gif class=icon />
  863. <div class=info>
  864. <p class=name>Name</p>
  865. <p class=role>Role ♡ Nickname</p>
  866. <p class=dsc>short paragraph about staff here. no scroll. keep it short and concise.</p>
  867. </div>
  868. </div>
  869. <div class=staff2>
  870. <img src=https://images.marapets.com/avatars/solaroo_mini.gif class=icon />
  871. <div class=info2>
  872. <p class=name2>Name</p>
  873. <p class=role2>Role ♡ Nickname</p>
  874. <p class=dsc2>short paragraph about staff here. no scroll. keep it short and concise.</p>
  875. </div>
  876. </div>
  877. <div class=staff1>
  878. <img src=https://images.marapets.com/avatars/toki-avie.gif class=icon />
  879. <div class=info>
  880. <p class=name>Name</p>
  881. <p class=role>Role ♡ Nickname</p>
  882. <p class=dsc>short paragraph about staff here. no scroll. keep it short and concise.</p>
  883. </div>
  884. </div>
  885. <div class=staff2>
  886. <img src=https://images.marapets.com/avatars/tundra_costume.gif class=icon />
  887. <div class=info2>
  888. <p class=name2>Name</p>
  889. <p class=role2>Role ♡ Nickname</p>
  890. <p class=dsc2>short paragraph about staff here. no scroll. keep it short and concise.</p>
  891. </div>
  892. </div>
  893. <div class=staff1>
  894. <img src=https://images.marapets.com/avatars/belle_mini.gif class=icon />
  895. <div class=info>
  896. <p class=name>Name</p>
  897. <p class=role>Role ♡ Nickname</p>
  898. <p class=dsc>short paragraph about staff here. no scroll. keep it short and concise.</p>
  899. </div>
  900. </div>
  901. </div>
  902. </div>
  903.  
  904. </div>
  905. </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!