Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
- <html>
- <head>
- <link href="https://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
- <style>
- /* !!! EVERYTHING CONTAINED IN < style > < / style >
- ARE FOR EDITING THE THEME/COLORS OF EVERYTHING. !!! */
- /* !!! everything with 3 exclamation points are tool tips
- to help you edit the layout !!! */
- div.container {
- width: 665px;
- height: 800px;
- /* !!! USE THIS TO CHANGE THE BACKGROUND COLOR !!
- !!!!!! THEN REPLACE THE CHUNK BELOW !!!!!!:
- http://colorzilla.com/gradient-editor/#c6e5d9+0,f4ead5+64 */
- background: #c6e5d9;
- background: -moz-linear-gradient(top, #c6e5d9 0%, #f4ead5 36%);
- background: -webkit-linear-gradient(top, #c6e5d9 0%,#f4ead5 36%);
- background: linear-gradient(to bottom, #c6e5d9 0%,#f4ead5 36%);
- filter: progid:DXImageTransform.Microsoft.gradient(
- startColorstr='#c6e5d9', endColorstr='#f4ead5',GradientType=0 );
- }
- /* !!! CUSTOMIZE CLUB TITLE COLORS !!! */
- div.headingbox {
- text-align: center;
- height: 100px;
- float:left;
- width: 665px;
- font-family: 'Staatliches', cursive;
- color: #FFFFFF;
- font-size: 50px;
- text-shadow: 0px 2px 2px #E94E77;
- -webkit-transition: font-size .3s, text-shadow .5s;
- transition: font-size .3s, text-shadow .5s;
- line-height: 120px;
- }
- div.headingbox:hover {
- font-size: 60px;
- text-shadow: 0px 0px 6px #E94E77;
- }
- div.subheadingbox {
- height: 100px;
- text-align: center;
- float:left;
- width: 665px;
- font-family: 'Reenie Beanie', cursive;
- line-height: 0px;
- margin-top: -10px;
- color: #D68189;
- font-size: 20px;
- text-shadow: 0px 2px 0px #F4EAD5;
- -webkit-animation: fade 16s infinite;
- animation: fade 16s infinite;
- opacity:0;
- }
- @keyframes fade {
- 0% {
- opacity:0;
- }
- 20% {
- opacity:1;
- }
- 70% {
- opacity:1;
- }
- 100% {
- opacity:0;
- }
- }
- @-moz-keyframes fade {
- 0% {
- opacity:0;
- }
- 20% {
- opacity:1;
- }
- 70% {
- opacity:1;
- }
- 100% {
- opacity:0;
- }
- }
- /* !!! CUSTOMIZE MOVING HEADER TEXT COLORS !!! */
- div.movingtxt {
- width: 617px;
- height: 25px;
- padding: 10px 10px 0px 10px;
- background-color: #FBFBE3;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
- )
- ;
- margin-left: 10px;
- float:left;
- margin-top: -60px;
- overflow: hidden;
- }
- marquee {
- font-size: 14px;
- line-height: 14px;
- color: #E94E77;
- text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
- letter-spacing: 1px;
- font-family: 'Josefin Sans', sans-serif;
- -webkit-animation: switch 14s infinite;
- animation: switch 14s infinite;
- }
- @keyframes switch {
- 0% {
- color: #E94E77;
- text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
- }
- 50% {
- color: #C6A49A;
- text-shadow: 0px 0px 2px #FBCFCF, 0px 0px 4px #FBCFCF, 0px 0px 6px #FBCFCF;
- }
- 100% {
- color: #E94E77;
- text-shadow: 0px 0px 2px #F4EAD5, 0px 0px 4px #F4EAD5, 0px 0px 6px #F4EAD5;
- }
- }
- @-moz-keyframes switch {
- 0% {
- opacity:0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- opacity:0;
- }
- }
- @-webkit-keyframes switch {
- 0% {
- opacity:0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- opacity:0;
- }
- }
- div.pets1 {
- width: 150px;
- height: 135px;
- overflow: hidden;
- float:left;
- margin-top:-183px;
- margin-left: 60px;
- }
- div.pets2 {
- width: 150px;
- height: 135px;
- overflow: hidden;
- float:left;
- margin-top:-152px;
- margin-left: 450px;
- }
- div.mainpic {
- width: 150px;
- height: 150px;
- overflow: hidden;
- margin-left: 10px;
- background-color: #000000;
- position: relative;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/3nldOv0.png
- )
- ;
- }
- img.box {
- width: 150px;
- height: 150px;
- display: block;
- position: relative;
- }
- div.hoverpic {
- width: 150px;
- height: 150px;
- overflow: hidden;
- margin-left: 15px;
- margin-top: -155px;
- text-align:center;
- letter-spacing: 1px;
- opacity:0;
- position: absolute;
- background-color: rgba(0, 0, 0, 0.19);
- -webkit-transition: opacity .3s;
- transition: opacity .3s;
- }
- div.hoverpic:hover {
- opacity:1;
- }
- p.date {
- font-family: 'Shadows Into Light', cursive;
- color: #FFFFFF;
- font-size: 15px;
- line-height: 15px;
- }
- p.shortac {
- font-family: 'Comfortaa', cursive;
- color: #FFFFFF;
- font-size: 13px;
- }
- /* !!! DON'T TOUCH : THIS IS DECORATION/CUPCAKES !!! */
- div.decoration {
- width: 160px;
- height: 400px;
- float:left;
- margin-left: 10px;
- }
- .line1 {
- width: 5px;
- height: 10px;
- padding: 290px 0px 0px 0px;
- background-color: #C6A49A;
- margin-left: 34px;
- float:left;
- margin-top: -30px;
- -webkit-transition: margin-top .3s;
- transition: margin-top .3s;
- }
- .line1:hover {
- margin-top:0px;
- }
- .cc1 {
- width: 33px;
- height: 40px;
- margin-left: -14px;
- -webkit-filter: drop-shadow(0px 0px 2px #D68189);
- filter: urlwww.marapets.com);
- -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
- filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
- }
- .cc2 {
- width: 38px;
- height: 40px;
- margin-left: -14px;
- -webkit-filter: drop-shadow(0px 0px 2px #D68189);
- filter: urlwww.marapets.com);
- -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
- filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#D68189');
- }
- .line2 {
- width: 5px;
- height: 10px;
- padding: 250px 0px 0px 0px;
- background-color: #C6E5D9;
- margin-left: 37px;
- float:left;
- margin-top: -30px;
- -webkit-transition: margin-top .3s;
- transition: margin-top .3s;
- }
- .line2:hover {
- margin-top:0px;
- }
- .line3 {
- width: 5px;
- height: 10px;
- padding: 270px 0px 0px 0px;
- background-color: #D68189;
- margin-left: 40px;
- float:left;
- margin-top: -30px;
- -webkit-transition: margin-top .3s;
- transition: margin-top .3s;
- }
- .line3:hover {
- margin-top:0px;
- }
- div.welcomebox {
- width: 150px;
- height: 150px;
- float:left;
- overflow: hidden;
- margin-top: 15px;
- margin-left: -160px;
- background-color: #FBFBE3;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
- )
- ;
- }
- div.textbox {
- width: 152px;
- height: 140px;
- overflow-y: scroll;
- overflow-x: hidden;
- text-align: justify;
- font-size: 12px;
- color: #C6A49A;
- padding: 0px 13px 0px 0px;
- font-family: 'Josefin Sans', sans-serif;
- border-width: 5px 15px 5px 5px;
- border-style: solid;
- border-color: #FBFBE3;
- -webkit-transition: color .23s;
- transition: color .23s;
- }
- div.textbox:hover {
- color: #E94E77;
- }
- /* !!! NAVIGATION !!! */
- div.navigation {
- height: 50px;
- width: 452px;
- padding: 5px;
- float:left;
- overflow:hidden;
- margin-top: -160px;
- margin-left: 15px;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/3nldOv0.png
- )
- ;
- background-color: transparent;
- }
- div.button {
- width:50px;
- height:50px;
- margin-left: 15px;
- float:left;
- }
- img.home {
- width: 40px;
- height: 40px;
- margin-top: 5px;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- img.home:hover {
- transform: scale(1.3,1.3);
- }
- /* !!! LINK 1 : CLUB SITE !!! */
- div.link1 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 16px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link1:hover {
- background-color: #E94E77;
- }
- a.clubsite {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.clubsite:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 2 !!! */
- div.link2 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link2:hover {
- background-color: #E94E77;
- }
- a.link2 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link2:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 3 !!! */
- div.link3 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link3:hover {
- background-color: #E94E77;
- }
- a.link3 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link3:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 4 !!! */
- div.link4 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link4:hover {
- background-color: #E94E77;
- }
- a.link4 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link4:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 5 !!! */
- div.link5 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 16px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link5:hover {
- background-color: #E94E77;
- }
- a.link5 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link5:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 6 !!! */
- div.link6 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link6:hover {
- background-color: #E94E77;
- }
- a.link6 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link6:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! LINK 7 !!! */
- div.link7 {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.link7:hover {
- background-color: #E94E77;
- }
- a.link7 {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.link7:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! DO NOT TOUCH !!! */
- /* !!! CREDITS !!! */
- div.credits {
- width: 75px;
- height: 12px;
- padding: 3px;
- background-color: #F4EAD5;
- color: #E94E77;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- text-align: center;
- margin-top: 3px;
- float:left;
- letter-spacing: 0px;
- line-height:15px;
- margin-left: 8px;
- border: 1px solid #E94E77;
- -webkit-transition: background-color .3s, letter-spacing .3s, color .3s;
- transition: background-color .3s, letter-spacing .3s, color .3s;
- }
- div.credits:hover {
- background-color: #E94E77;
- }
- a.credits {
- text-decoration: none;
- color: #E94E77;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- a.credits:hover {
- color: #F4EAD5;
- letter-spacing: 2px;
- }
- /* !!! RULES heading !!! */
- .hrules {
- font-family: 'Staatliches', cursive;
- color: #FFFFFF;
- font-size: 35px;
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- margin-left: 15px;
- width: 180px;
- height: 35px;
- float:left;
- margin-top: -75px;
- -webkit-transition: all .3s;
- transition: all .3s;
- letter-spacing: 1px;
- }
- .hrules:hover {
- letter-spacing: 4px;
- }
- /* !!! RULES text !!! */
- .rules {
- font-family: 'Josefin Sans', sans-serif;
- width: 170px;
- overflow:hidden;
- height: 200px;
- margin-top: -34px;
- margin-left: 15px;
- float:left;
- background-color: #FBFBE3;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/3nldOv0.png
- )
- ;
- }
- .rulescroll {
- width: 182px;
- height: 190px;
- border-width: 5px 15px 5px 2px;
- border-style: solid;
- border-color: #FBFBE3;
- padding: 0px 20px 0px 0px;
- text-align: justify;
- overflow-y:scroll;
- overflow-x:hidden;
- }
- .rule {
- font-size: 11px;
- line-height: 12px;
- color: #C6A49A;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- .rule:hover {
- color: #E94E77;
- }
- /* !!! ANNOUNCEMENTS BUBBLE !!! */
- .bubble {
- width: 250px;
- height: 300px;
- border: 10px solid #FFFFFF;
- border-radius: 20%;
- float:left;
- overflow:hidden;
- background-color: #FFFFFF;
- margin-left: 15px;
- box-shadow: 0px 0px 4px #C6A49A, 3px 0px 0px #D68189;
- margin-top: -75px;
- }
- .invisb {
- overflow-x: hidden; /* Hide horizontal scrollbar */
- overflow-y: scroll; /* Add vertical scrollbar */
- width:250px;
- height: 230px;
- margin-top:20px;
- padding: 8px;
- border: 5px solid #FFFFFF;
- }
- /* !!! COPY .abox and .abox:hover !!! */
- /* !!! THEN LOOK FOR THE NEXT INSTRUCTION !!! */
- .abox {
- overflow:hidden;
- width:212px;
- height: auto;
- padding: 5px;
- border-width: 0px 0px 1px 0px;
- border-style: solid;
- border-color: #D68189;
- font-family: 'Josefin Sans', sans-serif;
- font-size: 11px;
- line-height: 12px;
- color: #C6A49A;
- -webkit-transition: all .3s;
- transition: all .3s;
- }
- .abox:hover {
- color: #E94E77;
- }
- .triangle {
- height:0px;
- width: 0px;
- float:left;
- margin-left: 370px;
- border-left: 20px solid transparent;
- border-right:20px solid transparent;
- border-top:20px solid #FFFFFF;
- -webkit-filter: drop-shadow(3px 0px 0px #D68189);
- filter: urlwww.marapets.com);
- -ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=0, Color='#D68189');
- filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=0, Color='#D68189');
- }
- div.announcement {
- width:250px; height: 28px;
- Border-bottom: 5px solid #E94E77;
- Border-top: 0px solid transparent;
- Border-left: 0px solid transparent;
- Border-right: 0px solid transparent;
- float:left;
- padding: 0px 0px 0px 2px;
- overflow:hidden;
- margin-left: 390px;
- margin-top: -150px;
- font-family: 'Staatliches', cursive;
- color: #FFFFFF;
- font-size: 24px;
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- -webkit-transition: all .2s;
- transition: all .2s;
- }
- div.announcement:hover {
- letter-spacing:1px;
- }
- p.heart {
- margin-top: -35px;
- margin-left: 198px;
- -webkit-animation: heart 5s infinite;
- animation: heart 5s infinite;
- }
- @keyframes heart {
- 0% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- 50% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
- }
- 100% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- }
- @-moz-keyframes heart {
- 0% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- 50% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
- }
- 100% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- }
- @-webkit-keyframes heart {
- 0% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- 50% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77, 0px 0px 4px #E94E77, 0px 0px 6px #E94E77;
- }
- 100% {
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- }
- }
- /*!!!!!!!!!!!!!!!!*/
- /*!!! !!!*/
- /*!!! EVENTS !!!*/
- /*!!! !!!*/
- /*!!!!!!!!!!!!!!!!*/
- .hevents {
- font-family: 'Staatliches', cursive;
- color: #FFFFFF;
- font-size: 35px;
- text-shadow: 0px 0px 1px #E94E77, 0px 0px 2px #E94E77;
- margin-left: 185px;
- width: 180px;
- height: 35px;
- float:left;
- margin-top: -210px;
- -webkit-transition: all .3s;
- transition: all .3s;
- letter-spacing: 1px;
- }
- .hevents:hover {
- letter-spacing: 4px;
- }
- div.events {
- width: 170px;
- height: 150px;
- float:left;
- overflow: hidden;
- margin-top: -167px;
- margin-left: 185px;
- background-color: #FBFBE3;
- Border: 5px solid transparent;
- border-image-repeat:round;
- border-image-slice: 20;
- Border-image-source: url(https://i.imgur.com/SRAmYcJ.png
- )
- ;
- }
- div.evis {
- width: 165px;
- height: 130px;
- padding: 5px 10px 5px 5px;
- text-align: justify;
- border: 5px solid #FBFBE3;
- overflow-x: hidden;
- overflow-y: scroll;
- }
- h1 {
- font-family: 'Prompt', sans-serif;
- color: #E94E77;
- font-size: 18px;
- margin-top: -10px;
- }
- p.ed {
- font-family: 'Josefin Sans', sans-serif;
- color: #D68189;
- font-size: 12px;
- line-height:12px;
- margin-top: -10px;
- }
- h2 {
- font-family: 'Prompt', sans-serif;
- color: #E94E77;
- font-size: 15px;
- margin-top: -10px;
- }
- /*!!!!!!!!!!!!!!!!!*/
- /*!!! !!!*/
- /*!!! RANKS !!!*/
- /*!!! !!!*/
- /*!!!!!!!!!!!!!!!!!*/
- div.rankbox {
- float:left;
- width: 232px;
- height: 80px;
- background-color: #E94E77;
- padding: 5px;
- border: 5px solid #E94E77;
- overflow:hidden;
- margin-left: 390px;
- margin-top:-110px;
- }
- div.rank {
- width: 240px;
- height: 70px;
- padding: 5px 10px 5px 5px;
- overflow-x:hidden;
- overflow-y:scroll;
- font-family: 'M PLUS 1p', sans-serif;
- text-align: justify;
- line-height: 12px;
- font-size: 12px;
- }
- span.bold {
- font-weight:bold;
- color: #EBF7F8;
- }
- span.dsc {
- color:#FFFFFF;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="headingbox">
- CUPCAKE
- </div>
- <div class="subheadingbox">
- CRAZE
- </div>
- <div class="movingtxt">
- <marquee>
- welcome to cupcake craze!
- </marquee>
- </div>
- <div class="pets1">
- <img class="pet1" src="https://i.imgur.com/xZxH8YF.png"></div>
- <div class="pets2">
- <img class="pet1" src="https://i.imgur.com/oVlIRQX.gif"></div>
- <div class="mainpic">
- <img src="https://66.media.tumblr.com/00a00df53538bb60251c8bb5865585d1/tumblr_om9cxjP3YT1w5vv5po1_400.gif" class="box"></div>
- <div class="hoverpic">
- <p class="date">
- 1/15/2019
- </p>
- <p class="shortac">
- new layout!
- </p>
- </div>
- <div class="decoration">
- <div class="line1"><img src="https://i.imgur.com/vLng10I.png" class="cc1"></div>
- <div class="line2"><img src="https://i.imgur.com/9BegT1g.png" class="cc2"></div>
- <div class="line3"><img src="https://i.imgur.com/vLng10I.png" class="cc1"></div>
- </div>
- <div class="welcomebox">
- <div class="textbox">
- welcome statement goes here.
- </div>
- </div>
- <div class="navigation">
- <div class="button"><a href="https://www.marasites.com/?name=Razz&page=home"><img src="https://i.imgur.com/C91FqxQ.png" class="home"></a>
- </div>
- <div class="link1"><a href="http://www.marasites.com/?name=Razz" class="clubsite" target="_blank">club site</a></div>
- <div class="link2"><a href="https://www.marasites.com/?name=Kagayama&page=example2" class="link2">staff</a></div>
- <div class="link3"><a href="https://www.marasites.com/?name=Kagayama&page=example" class="link3">link 3</a></div>
- <div class="link4"><a href="https://www.marasites.com/?name=Kagayama&page=example" class="link4">link 4</a></div>
- <div class="link5"><a href="https://www.marasites.com/?name=Kagayama&page=example" class="link5">link 5</a></div>
- <div class="link6"><a href="https://www.marasites.com/?name=Kagayama&page=example" class="link6">link 6</a></div>
- <div class="link7"><a href="https://www.marasites.com/?name=Kagayama&page=example" class="link7">link 7</a></div>
- <div class="credits"><a href="https://www.marapets.com/profile.php?id=5481177" class="credits" title="??Kagayama" target="_blank">credits</a></div>
- </div>
- <div class="hrules">RULES</div>
- <div class="rules">
- <div class="rulescroll">
- <p class="rule">1. add a new for every new line or rule.</p>
- <p class="rule">2. or use to make a new line in the same rule/same number. </p>
- <p class="rule">3. hovering over a rule makes it turn hot pink</p>
- <p class="rule">4. keep the credits intact</p>
- <p class="rule">5. this box has an invisible scroll</p>
- <p class="rule">6. i hope you like the layout.</p>
- <p class="rule">7. you can just copy and paste this line in the code</p>
- <p class="rule">8. like this:</p>
- <p class="rule">9. i hope you like the layout.</p>
- <p class="rule">9. i hope you like the layout.</p>
- </div>
- </div>
- <div class="bubble">
- <div class="invisb">
- <div class="abox">1/16/19: will adjust height to fit the amount of text.
- </div>
- <div class="abox">1/16/19: this is for news updates
- </div>
- </div>
- </div>
- <div class="triangle"></div>
- <div class="announcement"> NEWS UPDATES
- <p class="heart">???</p>
- </div>
- <div class="hevents">EVENTS</div>
- <div class="events">
- <div class="evis">
- <h1>Event Name</h1>
- <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>
- <h2>Rules</h2>
- <p class="ed">1. blah blah this is an example.</p>
- <p class="ed">2. blah blah this is also an example.</p>
- <p class="ed">3. rules go here blah blah.</p>
- <h2>Prizes</h2>
- <p class="ed">list the prizes here. remember to start a new line.
- like this.</p>
- </div>
- </div>
- <div class="rankbox">
- <div class="rank">
- <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>
- <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>
- <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>
- <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>
- <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>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment