M-21

cc

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