ameuSHhen1Tn2ba
Member
[class=credit]
font-size: 10px;
text-align: center;
[/class]
[class=container]
position: relative;
height: 630px;
width: 500px;
overflow: hidden;
margin: auto;
background: #fef8eb;
[/class]
[class=introcontainer]
position: absolute;
height: 625px;
width: 500px;
overflow: hidden;
margin: auto;
[/class]
[class=aboutcontainer]
position: absolute;
height: 625px;
width: 500px;
overflow: hidden;
margin: auto;
[/class]
[class=rulescontainer]
position: absolute;
height: 625px;
width: 500px;
overflow: hidden;
margin: auto;
[/class]
[class=formcontainer]
position: absolute;
height: 625px;
width: 500px;
overflow: hidden;
margin: auto;
[/class]
[class=out]
animation: {post_id}scaleout 1s ease-in both;
[/class]
[class=in]
animation: {post_id}scalein 1s ease-in 0.75s both;
[/class]
[class=oct]
position: absolute;
height: 125px;
width: 125px;
overflow: hidden;
margin: auto;
background: #fae0a2;
background-size: cover;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
left: 25px;
top: 75px;
transform: rotate(20deg);
[/class]
[class=oct2]
position: absolute;
height: 125px;
width: 125px;
overflow: hidden;
margin: auto;
background: #dea25a ;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
left: 150px;
top: 120px;
transform: rotate(20deg);
[/class]
[class=oct3]
position: absolute;
height: 125px;
width: 125px;
overflow: hidden;
margin: auto;
background: url(https://i.pinimg.com/474x/7d/d2/e4/7dd2e4680e79b0995469075802ee899f.jpg) ;
background-size: cover;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
left: 45px;
top: 215px;
transform: rotate(20deg);
[/class]
[class=oct4]
position: absolute;
height: 125px;
width: 125px;
overflow: hidden;
margin: auto;
background: #fceb81 ;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
left: 170px;
top: 260px;
transform: rotate(20deg);
[/class]
[class=oct5]
position: absolute;
height: 125px;
width: 125px;
overflow: hidden;
margin: auto;
background: url(https://i.pinimg.com/474x/37/e7/b9/37e7b9595133d03a85e68eb3719d0a43.jpg) ;
background-size: cover;
background-position: center;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
left: 275px;
top: 165px;
transform: rotate(20deg);
[/class]
[class=line]
position: absolute;
overflow: hidden;
height: 350px;
width: 50px;
background: white;
left: 100px;
top: 10px;
[/class]
[class=line2]
position: absolute;
overflow: hidden;
height: 400px;
width: 50px;
background: white;
left: 160px;
top: 10px;
[/class]
[class=line3]
position: absolute;
overflow: hidden;
height: 450px;
width: 50px;
background: white;
left: 220px;
top: 10px;
[/class]
[class=line4]
position: absolute;
overflow: hidden;
height: 500px;
width: 50px;
background: white;
left: 280px;
top: 10px;
[/class]
[class=line5]
position: absolute;
overflow: hidden;
height: 550px;
width: 50px;
background: white;
left: 340px;
top: 10px;
[/class]
[class=title]
position: absolute;
overflow: hidden;
width: 250px;
line-height: 110px;
height: auto;
top: 10px;
left: 250px;
font-size: 140px;
color: #f9d889;
text-shadow: 3px 0px #cc9d59;
[/class]
[class=title2]
position: absolute;
overflow: hidden;
width: 250px;
line-height: 70px;
height: auto;
top: 300px;
left: 300px;
font-size: 75px;
color: #5f6e8b ;
text-shadow: 2px 0px #40495b;
[/class]
[class=title3]
position: absolute;
overflow: hidden;
width: auto;
line-height: 90px;
height: auto;
top: 400px;
left: 25px;
font-size: 95px;
color: #5f6e8b ;
text-shadow: 3px 0px #40495b;
padding: 10px;
[/class]
[class=tab]
position: absolute;
overflow: hidden;
background: #e5a55b;
width: 165px;
height: 50px;
top: 575px;
left: 0px;
border-right: 3px solid white;
color: white;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class=tab2]
position: absolute;
overflow: hidden;
background: #e5a55b;
width: 165px;
height: 50px;
top: 575px;
left: 168px;
border-right: 3px solid white;
color: white;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class=tab3]
position: absolute;
overflow: hidden;
background: #e5a55b;
width: 167px;
height: 50px;
top: 575px;
left: 336px;
color: white;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class=taba]
position: absolute;
overflow: hidden;
background: white;
width: 165px;
height: 50px;
top: 575px;
left: 0px;
border-right: 3px solid #e5a55b;
color: #e5a55b;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class=tabb]
position: absolute;
overflow: hidden;
background: white;
width: 165px;
height: 50px;
top: 575px;
left: 168px;
border-right: 3px solid #e5a55b;
color: #e5a55b;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class=tabc]
position: absolute;
overflow: hidden;
background: white;
width: 167px;
height: 50px;
top: 575px;
left: 336px;
color: #e5a55b;
font-size: 15px;
padding-top: 15px;
text-align: center;
[/class]
[class name=scroll]
position: relative;
box-sizing: border-box;
width: 110%;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
padding-right: 30px;
[/class]
[class=home]
position: absolute;
height: 50px;
width: 50px;
overflow: hidden;
margin: auto;
background: #fff;
color: #e5a55b;
background-size: cover;
left: 5px;
top: 5px;
font-size: 30px;
border-radius: 100px;
text-align: center;
[/class]
[class=aboutpic]
position: absolute;
overflow: hidden;
background: url(https://i.pinimg.com/564x/d1/4a/42/d14a42dfeeac62732c6dc83c56a18979.jpg);
background-transform: rotate(180deg);
background-size: cover;
width: 480px;
height: 200px;
top: 20px;
left: 10px;
[/class]
[class=abouttitle]
position: absolute;
overflow: hidden;
width: 435px;
height: 155px;
top: 35px;
left: 25px;
border: 5px solid white;
font-size: 90px;
color: white;
text-shadow: 3px 0px #40495b;
text-align: center;
text-transform: lowercase;
[/class]
[class=abouttext]
position: absolute;
overflow: hidden;
width: 465px;
height: 335px;
top: 225px;
left: 10px;
padding-left: 10px;
padding-top: 10px;
font-size: 12px
color: #000;
text-align: justify;
[/class]
[class=rulespic]
position: absolute;
overflow: hidden;
background: url(https://i.pinimg.com/474x/8c/71/c4/8c71c43ff50ef7fd8db1171bdec7cb7f.jpg);
background-size: cover;
background-position: right;
height: 550px;
width: 195px;
top: 20px;
left: 10px;
[/class]
[class=rulestitle]
position: absolute;
overflow: hidden;
height: 515px;
width: 155px;
top: 35px;
left: 25px;
border: 5px solid white;
font-size: 80px;
color: white;
text-shadow: 3px 0px #40495b;
text-align: center;
text-transform: lowercase;
line-height: 60px;
[/class]
[class=rulestext]
position: absolute;
overflow: hidden;
width: 280px;
height: 550px;
top: 10px;
left: 210px;
padding-left: 10px;
padding-top: 10px;
font-size: 12px
color: #000;
text-align: justify;
[/class]
[class=formpic]
position: absolute;
overflow: hidden;
background: url(https://i.pinimg.com/474x/f2/7a/8d/f27a8d8e10cd77e34f3ac6dd3cd9b289.jpg);
background-size: cover;
width: 230px;
height: 200px;
top: 20px;
left: 10px;
[/class]
[class=formtitle]
position: absolute;
overflow: hidden;
width: 195px;
height: 155px;
top: 35px;
left: 25px;
border: 5px solid white;
font-size: 90px;
color: white;
text-shadow: 3px 0px #40495b;
text-align: center;
text-transform: lowercase;
[/class]
[class=formtext]
position: absolute;
overflow: hidden;
width: 240px;
height: 335px;
top: 225px;
left: 10px;
padding-left: 10px;
padding-top: 10px;
font-size: 12px
color: #000;
text-align: justify;
[/class]
[class=indexpic]
position: absolute;
overflow: hidden;
background: url(https://i.pinimg.com/474x/ba/4d/3f/ba4d3fc4b25569edb670fe4dbaf1e9bf.jpg);
background-size: cover;
width: 230px;
height: 200px;
top: 20px;
left: 255px;
[/class]
[class=indextitle]
position: absolute;
overflow: hidden;
width: 195px;
height: 155px;
top: 35px;
left: 265px;
border: 5px solid white;
font-size: 90px;
color: white;
text-shadow: 3px 0px #40495b;
text-align: center;
text-transform: lowercase;
[/class]
[class=indextext]
position: absolute;
overflow: hidden;
width: 240px;
height: 335px;
top: 225px;
left: 255px;
padding-left: 10px;
padding-top: 10px;
font-size: 12px
color: #000;
text-align: justify;
[/class]
[animation=scaleout]
[keyframe=0]
transform: scale(1);
opacity: 1;
[/keyframe]
[keyframe=100]
transform: scale(0);
opacity: 1;
[/keyframe]
[/animation]
[animation=scalein]
[keyframe=0]
transform: scale(0);
opacity: 1;
[/keyframe]
[keyframe=100]
transform: scale(1);
opacity: 1;
[/keyframe]
[/animation]
[class=hidden]
display: none;
[/class]
[script class=tab on=mouseenter]
fadeIn 0500 taba
[/script]
[script class=taba on=mouseleave]
fadeOut 0500 taba
[/script]
[script class=taba on=click]
addClass out introcontainer
removeClass in introcontainer
addClass in aboutcontainer
addClass out rulescontainer
removeClass in rulescontainer
removeClass in formcontainer
addClass out formcontainer
show aboutcontainer
[/script]
[script class=tab2 on=mouseenter]
fadeIn 0500 tabb
[/script]
[script class=tabb on=mouseleave]
fadeOut 0500 tabb
[/script]
[script class=tabb on=click]
addClass out introcontainer
removeClass in introcontainer
removeClass in aboutcontainer
addClass out aboutcontainer
addClass in rulescontainer
removeClass in formcontainer
addClass out formcontainer
show rulescontainer
[/script]
[script class=tab3 on=mouseenter]
fadeIn 0500 tabc
[/script]
[script class=tabc on=mouseleave]
fadeOut 0500 tabc
[/script]
[script class=tabc on=click]
addClass out introcontainer
removeClass in introcontainer
removeClass in aboutcontainer
addClass out aboutcontainer
removeClass in rulescontainer
addClass out rulescontainer
addClass in formcontainer
show formcontainer
[/script]
[script class=home on=click]
addClass in introcontainer
removeClass in aboutcontainer
addClass out aboutcontainer
addClass out rulescontainer
removeClass in rulescontainer
removeClass in formcontainer
addClass out formcontainer
show introcontainer
[/script]
[div class=container]
[div class=introcontainer]
[div class=line][/div]
[div class=line2][/div]
[div class=line3][/div]
[div class=line4][/div]
[div class=line5][/div]
[div class=oct][/div]
[div class=oct2][/div]
[div class=oct3][/div]
[div class=oct4][/div]
[div class=oct5][/div]
[div class=title] Hello [/div]
[div class=title2] ...and [/div]
[div class=title3] Welcome [/div]
[/div]
[div class="aboutcontainer hidden"]
[div class=aboutpic][/div]
[div class=abouttitle]about[/div]
[div class=abouttext][div class=scroll]
Hello! Hi! Hey! And other greetings! I'm Han! It's nice to meet you if I haven't already and it's good to see you if I have! I saw all these fancy coding shops and freebie threads and I wanted to jump on the bandwagon. I want a good place to practice without too much pressure. I'd like to get faster at the whole thing because right now I'm very slow. Plus, sometimes I have a hard time with inspiration, so having other people give me their ideas is a bit of a cop out. I plan on taking requests and posting some freebies. I'll try and make them as user friendly as possible.
I've just recently started coding. I learned the very basics a long time ago, but I've only just started actually trying. I'd like to do experiments and use you guys as guinea pigs! Feel free to post anything here, comments, concerns, or fixes. Please, please, please if you are actually good at coding (and even if you're not) and you see a problem with anything, tell me! I love to be corrected, in a constructive way of course. I learn best from fixing mistakes. Anway, I hope you enjoy my codes! [/div][/div] [div class=home][/div] [/div] [div class="rulescontainer hidden"] [div class=rulespic][/div] [div class=rulestitle]
r
u
l
e
s[/div] [div class=rulestext][div class=scroll]
Type: (character sheet, in character post, placeholder, interest check, etc.)
Tabs: (yes or no. if yes, how many)
Color scheme: (preferably with hex codes)
Pictures/mood boards:
Theme:
Keywords:
Anything else?:
In Progress:
none
To Do:
none
[/div][/div] [div class=indexpic][/div] [div class=indextitle]index[/div] [div class=indextext][div class=scroll] Character Sheets:
tba
In Character:
tba
Interest Check:
tba
Placeholder:
tba
[/div][/div] [div class=home][/div] [/div] [div class=tab]about[/div] [div class=tab2]rules[/div] [div class=tab3]misc[/div] [div class="taba hidden"]about[/div] [div class="tabb hidden"]rules[/div] [div class="tabc hidden"]misc[/div] [/div] [div class=credit] coded by HanTheSunbeam[/div]
I've just recently started coding. I learned the very basics a long time ago, but I've only just started actually trying. I'd like to do experiments and use you guys as guinea pigs! Feel free to post anything here, comments, concerns, or fixes. Please, please, please if you are actually good at coding (and even if you're not) and you see a problem with anything, tell me! I love to be corrected, in a constructive way of course. I learn best from fixing mistakes. Anway, I hope you enjoy my codes! [/div][/div] [div class=home][/div] [/div] [div class="rulescontainer hidden"] [div class=rulespic][/div] [div class=rulestitle]
r
u
l
e
s[/div] [div class=rulestext][div class=scroll]
- Please be kind and respectful. I've put a lot of time into these codes, it's only fair I receive credit. Do not remove it.
- These will not be, for the most part, mobile friendly.
- If you'd like to dissect and change things, go ahead. Colors, pictures, fonts, and small layout details, go ahead and play with those all you'd like. Just don't change a couple elements and pass it off as your own. Don't use my code as a base to make your own.
- Right now, with quarantine and things, I have a lot more time on my hands, giving me more time to code. It still may take me awhile because I'm super slow, but I'll try my best. Please be patient with me.
- Tips, pointers, or new tricks are always welcome!
- If you have any questions, concerns, or compliments, I'd love to hear them. I'll try my best with questions, as I said, I'm fairly new to this so I might not be able to explain things.
- I'm only taking so many requests, maybe two at the max depending on the complexity and stuff like that. If I reject your request, I'll let you know why. Please don't take it personally if I don't get enough inspiration from your request.
- All requested codes will be free for anyone to use with credit!
Type: (character sheet, in character post, placeholder, interest check, etc.)
Tabs: (yes or no. if yes, how many)
Color scheme: (preferably with hex codes)
Pictures/mood boards:
Theme:
Keywords:
Anything else?:
In Progress:
none
To Do:
none
[/div][/div] [div class=indexpic][/div] [div class=indextitle]index[/div] [div class=indextext][div class=scroll] Character Sheets:
tba
In Character:
tba
Interest Check:
tba
Placeholder:
tba
[/div][/div] [div class=home][/div] [/div] [div class=tab]about[/div] [div class=tab2]rules[/div] [div class=tab3]misc[/div] [div class="taba hidden"]about[/div] [div class="tabb hidden"]rules[/div] [div class="tabc hidden"]misc[/div] [/div] [div class=credit] coded by HanTheSunbeam[/div]
Last edited:
