Noms' Public HTML or Whatever

[Dusky]

I've been experimenting the HELL out of HTML and CSS, and I figured I might as well put some of the stuff I really like up here. I guess I'll take requests when I have time, too, but it won't be prompt. ^^;


Anyway, here's the latest!



.anomaly {
position:relative;
}
.anomaly .signature {
height:250px;
width:250px;
background-image:url("http://www.clipartkid.com/images/577/decorative-text-box-text-box-clipart-viewing-mOiPNZ-clipart.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
background-color:#FFF5EE;
border-radius:50%;
padding:50px;
position:relative;
}
.anomaly .signature .text{
max-height:150px;
width:150px;
overflow:hidden;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
opacity:0;
}
.anomaly .signature .text:hover {
overflow:auto;
}
.anomaly .signature input {
display:none;
}
.anomaly .signature label {
display:inline-block;
border:2px solid #555555;
border-radius:50%;
font-family:IM Fell English;
background:#FFF5EE;
color:#555555;
text-align:center;
font-weight:bold;
margin:5px 0px;
padding:5px;
width:3em;
height:3em;
line-height:2em;
overflow:hidden;
position:relative;
left:205px;
top:-50px;
float:left;
clear:both;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature input:checked + label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature input:checked + label {
border:2px inset #FFF5EE;
background:#555555;
color:#FFF5EE;
width:3em;
height:3em;
line-height:2em;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature #remindtest:checked ~ #remindtesttext,
.anomaly .signature #newstest:checked ~ #newstesttext,
.anomaly .signature #rptest:checked ~ #rptesttext,
.anomaly .signature #cooltest:checked ~ #cooltesttext {
opacity:1;
transitionpacity 1s ease;
}


1 Reminders 2 News 3 Roleplaying 4 Cool Beans

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


AAAAAAAAAAAAAAAAA


BBBBBBBBBBBBB


CCCCCCCCCCCCCCC

Spoiler

<p>
&nbsp;
</p>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet">
<style type="text/css">
.anomaly {
position:relative;
}
.anomaly .signature {
height:250px;
width:250px;
background-image:url("http://www.clipartkid.com/images/577/decorative-text-box-text-box-clipart-viewing-mOiPNZ-clipart.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
background-color:#FFF5EE;
border-radius:50%;
padding:50px;
position:relative;
}
.anomaly .signature .text{
max-height:150px;
width:150px;
overflow:hidden;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
opacity:0;
}
.anomaly .signature .text:hover {
overflow:auto;
}
.anomaly .signature input {
display:none;
}
.anomaly .signature label {
display:inline-block;
border:2px solid #555555;
border-radius:50%;
font-family:IM Fell English;
background:#FFF5EE;
color:#555555;
text-align:center;
font-weight:bold;
margin:5px 0px;
padding:5px;
width:3em;
height:3em;
line-height:2em;
overflow:hidden;
position:relative;
left:205px;
top:-50px;
float:left;
clear:both;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature input:checked + label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature input:checked + label {
border:2px inset #FFF5EE;
background:#555555;
color:#FFF5EE;
width:3em;
height:3em;
line-height:2em;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .signature #remind:checked ~ #remindtext,
.anomaly .signature #news:checked ~ #newstext,
.anomaly .signature #rp:checked ~ #rptext,
.anomaly .signature #cool:checked ~ #cooltext {
opacity:1;
transitionpacity 1s ease;
}</style>
<div class="anomaly">
<div class="signature">
<input checked="checked" id="remind" name="sig" type="radio"><label for="remind">1 Reminders</label> <input id="news" name="sig" type="radio"><label for="news">2 News</label> <input id="rp" name="sig" type="radio"><label for="rp">3 Roleplaying</label> <input id="cool" name="sig" type="radio"><label for="cool">4 Cool Beans</label>
<div class="text" id="remindtext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="text" id="newstext">
AAAAAAAAAAAAAAAAA
</div>

<div class="text" id="rptext">
BBBBBBBBBBBBB
</div>

<div class="text" id="cooltext">
CCCCCCCCCCCCCCC
</div>
</div>
</div>

GOD this one was a bitch to get right.

 

[Dusky]

I'm cRYING radio buttons don't seem to check properly in signatures D:

 

[JustAlexandra]

I'm so impressed and jealous D: 

 

[Entarriance]

CU te bubblES LOOKAT HOW AESTHETIC THAT IS


you did good creativity thread mom

 

[IctoraPost]

Coooool...

 

[Dusky]

Well, it may not work as a signature, but it does work as a profile! Incoming!

[*]
.anomaly {
clear:both;
overflow:hidden;
}
.anomaly .profile {
background-image:url("http://www.clipartkid.com/images/577/decorative-text-box-text-box-clipart-viewing-mOiPNZ-clipart.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
background-color:#FFF5EE;
border-radius:50%;
position:relative;
}
.anomaly .profile .text{
overflow:hidden;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
display:none;
}
.anomaly .profile .text:hover {
overflow-y:scroll;
padding-right:10px;
}
.anomaly .profile .text a {
font-weight:bold;
}
.anomaly .profile table {
text-align:left;
width:100%;
margin:10px 0px;
}
.anomaly .profile th {
text-align:center;
}
.anomaly .profile th, .anomaly .profile td {
border-collapse:collapse;
padding:0px 3px;
}
.anomaly .profile input {
display:none;
}
.anomaly .profile label {
display:inline-block;
border:2px solid #555555;
border-radius:50%;
font-family:IM Fell English;
background:#FFF5EE;
color:#555555;
text-align:center;
font-weight:bold;
margin:5px 0px;
padding:5px;
width:3em;
height:3em;
line-height:2em;
overflow:hidden;
position:relative;
top:-50px;
float:left;
clear:both;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile input:checked + label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile input:checked + label {
border:2px inset #FFF5EE;
background:#555555;
color:#FFF5EE;
width:3em;
height:3em;
line-height:2em;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile #about:checked ~ #abouttext,
.anomaly .profile #news:checked ~ #newstext,
.anomaly .profile #rp:checked ~ #rptext,
.anomaly .profile #cool:checked ~ #cooltext,
.anomaly .profile #grave:checked ~ #gravetext {
display:block;
}
@media (min-width:1275px) {
.anomaly .profile {
height:700px;
width:700px;
padding:145px;
}
.anomaly .profile .text {
max-height:400px;
width:400px;
}
.anomaly .profile label {
left:560px;
}
}
@media (max-width:1274px) and (min-width:1025px) {
.anomaly .profile {
height:500px;
width:500px;
padding:105px;
}
.anomaly .profile .text {
max-height:290px;
width:290px;
}
.anomaly .profile label {
left:400px;
}
}
@media (max-width:1024px) and (min-width:550px) {
.anomaly .profile {
height:300px;
width:300px;
padding:65px;
}
.anomaly .profile .text {
max-height:170px;
width:170px;
}
.anomaly .profile label {
left:240px;
}
.anomaly .profile #grave {
display:none;
}
}
@media (max-width:549px) {
.anomaly .profile {
background-image:none;
background-color:transparent;
border-radius:0px;
}
.anomaly .profile label {
display:none;
}
.anomaly .profile .text {
width:100%;
height:auto;
display:block;
text-align:justify;
position:static;
top:0%;
transform:translateY(0%);
margin-bottom:10px;
}
.anomaly .profile .text:hover {
overflow-y:auto;
padding-right:0px;
}
.anomaly .profile #gravetext {
display:none;
}
}


1 About Me 2 News 3 Roleplaying 4 Cool Beans 5 Graveyard


Greetings! I am your friendly neighborhood succubus, and I enjoy devouring the lifeforce of unsuspecting men! Before the update I had a rather lovely About section, but it was lost in the move. C'est la vie; now I'm back with this one, which is even more badass! I'm in my early twenties and recently went back to school to finish my bachelor's degree in Writing. Also recently, I got hired on at Publix Greenwise as a Bakery Clerk, but really I run the cafe there (it's very bizarre). My cup overfloweth. I'm studying at Florida Atlantic University and so far I'm enjoying it! My interests are numerous but above all I write stuff. I write the site's newsletter, in fact! It comes out on the 1st of each month. I put a lot of work into it, so you should check it out! If that's not enough incentive, here's a detail; in the newsletter, we feature users from all different parts of the site in order to celebrate how talented and diverse our userbase is. We feature writing and art from Creativity, user-generated tutorials, a Roleplay of the Month, a Member of the Month, and more! It could be you! You can suggest content for me to feature in the Newsletter using this super short form!


Below is a non-exhaustive list of conversation starters, or things you can bring up to me that will likely set my mouth running for hours on end.

• 
  
  The time I spent a month in the wilderness with no toilets or anything.
  
• The time I ran a roleplay called Super Super Happy Love Time Heart ChessMATE.
  
• The web-serial I write, As We Knew It.
  
• The setting for abovementioned web-serial, the Crying Lakes Continent.
  
• Poetry, especially spoken word.
  
• Harry Potter.
  
• Game of Thrones.
  
• Interactive fiction.
  
• Stardew Valley.
  

You have been warned.


Between school and work I've been going a little crazy. I know I'm slow; please be patient with me.



Joining RPs? ONLY if I contact you. PLEASE do not message me to ask me to join your RP.


Time Zone: EST


Usually Available: Late morning, late evening.


Roleplays


The Fallen World


Eternity Beckons


Necromancer Quest


Tinker Quest


Damsels and Dragons


Clockwork Heart


『 B L A N K 』 


The Black Tontine



Me


Ask Me Anything  - ¶ -  Featured Poet in February 2015 Newsletter - ¶ - Poetry  - ¶ - As We Knew It: A Webserial  - ¶ - BYOC: Writer's Weekly  - ¶ - Noms' Public HTML or Whatever


Resources


Between the Words: A Poetry Tutorial  - ¶ - Inkarnate Map Maker  - ¶ - Color Palettes  - ¶ - So You Want To Write... (RP Tutorials)  - ¶ - Newsletter Content Nomination Form  - ¶ - Writing Games



These are roleplays that are no longer active and/or that I am no longer a part of.





Mind Games




Sign Up || RP || OOC






Date(s):


JUL 2012


Character(s):


Rhea and Jonah Orland




Genre(s):


Realistic || Horror || Mystery || Paranormal








Insylum




Hosted Project






Date(s):


JUL 2014

JAN 2016



Character(s):


Rhea Orland




Genre(s):


Realistic || Horror || Intrigue








Arcana Majora: Guardians




Overview || Mechanics || Sign Up || OOC || RP






Date(s):


JUL 2014

FEB 2015



Character(s):


Mridula




Genre(s):


Fantasy || Intrigue || Adventure








The Once and Future King




Sign Up || RP || Setting || OOC || Lore






Date(s):


AUG 2014


Character(s):


Elaine of Corbenic




Genre(s):


Fantasy || Period || Arthurian || Drama








The Exodus of Fables




OOC || RP || Overview || Sign Up






Date(s):


AUG 2014


Character(s):


Gwendolyn Darling




Genre(s):


Urban Fantasy || Fairy Tale Retelling








Super Super Happy Love Time Heart ChessMATE




OOC || Sign Ups || Overview || RP || NPCs






Date(s):


FEB 2015


Character(s):


Asphodel Crimson




Genre(s):


Modern || School || Humor/Parody








The Genesis Syndicate




RP || OOC || Sign Up || Overview






Date(s):


NOV 2015


Character(s):


Esther Sewik




Genre(s):


Sci-Fi || Superpowers || Action








Atlantis: The Broken Continent




Overview || RP || OOC || Sign Up || Lore






Date(s):


DEC 2015


Character(s):


Nick Columbus
Maude Puckett




Genre(s):


Realistic || Adventure || Mystery || Action || Puzzles







Blood and Plunder




Hosted Project




Date(s):


JAN 2016




Genre(s):


Fantasy || Adventure || Skypirates || Dice || Crucible







House of Opportunity




OOC|| RP || Sign Ups || Overview || Setting || Mechanics || Yōkai






Date(s):


FEB 2016


Character(s):


n/a




Genre(s):


Fantasy || Fandom || Spirited Away || Slice of Life








Harvest Moon: Sleepy Hills




IC || Q&A || OOC || Overview || Sign Ups






Date(s):


APR 2016


Character(s):


Canaan




Genre(s):


Fandom || Harvest Moon || Mystery || Slice of Life








AEGIS: Training Facility 108




Hosted Project






Date(s):


JUN 2016


Character(s):


Hannah Scoggan




Genre(s):


Modern || Superpowers || Sci-Fi || Action || Intrigue















Try changing your browser size around.... it should be super size adaptive, with three different size configurations and a mobile version that's mostly just plain text.

 

[IctoraPost]

Ooh, very nice... buttons 2, 3 and 4 don't work, though.

 

[Dusky]

Geeehhh, thanks for telling me! I'm not sure what happened there... *dives in to find out*

 

[Dusky]

Huh.... I can't figure out what's up. I swear it worked when I posted it...

Spoiler

<p>
Well, it may not work as a signature, but it does work as a profile! Incoming!
</p>

<p>
&nbsp;
</p>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet">
<style type="text/css">
.anomaly {
clear:both;
overflow:hidden;
}
.anomaly .profile {
background-image:url("http://www.clipartkid.com/images/577/decorative-text-box-text-box-clipart-viewing-mOiPNZ-clipart.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
background-color:#FFF5EE;
border-radius:50%;
position:relative;
}
.anomaly .profile .text{
overflow:hidden;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
display:none;
}
.anomaly .profile .text:hover {
overflow-y:scroll;
padding-right:10px;
}
.anomaly .profile .text a {
font-weight:bold;
}
.anomaly .profile table {
text-align:left;
width:100%;
margin:10px 0px;
}
.anomaly .profile th {
text-align:center;
}
.anomaly .profile th, .anomaly .profile td {
border-collapse:collapse;
padding:0px 3px;
}
.anomaly .profile input {
display:none;
}
.anomaly .profile label {
display:inline-block;
border:2px solid #555555;
border-radius:50%;
font-family:IM Fell English;
background:#FFF5EE;
color:#555555;
text-align:center;
font-weight:bold;
margin:5px 0px;
padding:5px;
width:3em;
height:3em;
line-height:2em;
overflow:hidden;
position:relative;
top:-50px;
float:left;
clear:both;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile input:checked + label:hover {
width:100px;
height:100px;
line-height:90px;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile input:checked + label {
border:2px inset #FFF5EE;
background:#555555;
color:#FFF5EE;
width:3em;
height:3em;
line-height:2em;
transition:width 1s ease, height 1s ease, line-height 1s ease;
}
.anomaly .profile #about:checked ~ #abouttext,
.anomaly .profile #news:checked ~ #newstext,
.anomaly .profile #rp:checked ~ #rptext,
.anomaly .profile #cool:checked ~ #cooltext,
.anomaly .profile #grave:checked ~ #gravetext {
display:block;
}
@media (min-width:1275px) {
.anomaly .profile {
height:700px;
width:700px;
padding:145px;
}
.anomaly .profile .text {
max-height:400px;
width:400px;
}
.anomaly .profile label {
left:560px;
}
}
@media (max-width:1274px) and (min-width:1025px) {
.anomaly .profile {
height:500px;
width:500px;
padding:105px;
}
.anomaly .profile .text {
max-height:290px;
width:290px;
}
.anomaly .profile label {
left:400px;
}
}
@media (max-width:1024px) and (min-width:550px) {
.anomaly .profile {
height:300px;
width:300px;
padding:65px;
}
.anomaly .profile .text {
max-height:170px;
width:170px;
}
.anomaly .profile label {
left:240px;
}
.anomaly .profile #grave {
display:none;
}
}
@media (max-width:549px) {
.anomaly .profile {
background-image:none;
background-color:transparent;
border-radius:0px;
}
.anomaly .profile label {
display:none;
}
.anomaly .profile .text {
width:100%;
height:auto;
display:block;
text-align:justify;
position:static;
top:0%;
transform:translateY(0%);
margin-bottom:10px;
}
.anomaly .profile .text:hover {
overflow-y:auto;
padding-right:0px;
}
.anomaly .profile #gravetext {
display:none;
}
}</style>
<div class="anomaly">
<div class="profile">
<input checked="checked" id="about" name="prof" type="radio"><label for="about">1 About Me</label> <input id="news" name="prof" type="radio"><label for="news">2 News</label> <input id="rp" name="prof" type="radio"><label for="rp">3 Roleplaying</label> <input id="cool" name="prof" type="radio"><label for="cool">4 Cool Beans</label> <input id="grave" name="prof" type="radio"><label for="grave">5 Graveyard</label>
<div class="text" id="abouttext">
<p>
Greetings! I am your friendly neighborhood succubus, and I enjoy devouring the lifeforce of unsuspecting men! Before the update I had a rather lovely About section, but it was lost in the move. C&#39;est la vie; now I&#39;m back with this one, which is even more badass! I&#39;m in my early twenties and recently went back to school to finish my bachelor&#39;s degree in Writing. Also recently, I got hired on at Publix Greenwise as a Bakery Clerk, but really I run the cafe there (it&#39;s very bizarre). My cup overfloweth. I&#39;m studying at Florida Atlantic University and so far I&#39;m enjoying it! My interests are numerous but above all I write stuff. I write the site&#39;s newsletter, in fact! It comes out on the 1st of each month. I put a lot of work into it, so you should check it out! If that&#39;s not enough incentive, here&#39;s a detail; in the newsletter, we feature users from all different parts of the site in order to celebrate how talented and diverse our userbase is. We feature writing and art from Creativity, user-generated tutorials, a Roleplay of the Month, a Member of the Month, and more! <em>It could be you!</em> You can suggest content for me to feature in the Newsletter using <a href="https://goo.gl/forms/6KT7KVYOumsPhLir2" rel="external nofollow" target="_blank">this super short form</a>!
</p>

<p>
&nbsp;
</p>

<p>
Below is a non-exhaustive list of conversation starters, or things you can bring up to me that will likely set my mouth running for hours on end.
</p>

<ul style="text-align:left;">
<li>
The time I spent a month in the wilderness with no toilets or anything.
</li>
<li>
The time I ran a roleplay called Super Super Happy Love Time Heart ChessMATE.
</li>
<li>
The web-serial I write, <a href="http://asweknewit.wordpress.com" rel="external nofollow" target="_blank">As We Knew It</a>.
</li>
<li>
The setting for abovementioned web-serial, the Crying Lakes Continent.
</li>
<li>
Poetry, especially spoken word.
</li>
<li>
Harry Potter.
</li>
<li>
Game of Thrones.
</li>
<li>
Interactive fiction.
</li>
<li>
Stardew Valley.
</li>
</ul>

<p style="text-shadow:1px 1px 3px black">
<strong>You have been warned.</strong>
</p>
</div>

<div class="text" id="newstext">
Between school and work I&#39;ve been going a little crazy. I know I&#39;m slow; please be patient with me.
</div>

<div class="text" id="rptext">
<p>
<b>Joining RPs?</b> ONLY if I contact you. PLEASE do not message me to ask me to join your RP.
</p>

<p>
<b>Time Zone:</b> EST
</p>

<p>
<strong>Usually Available:</strong> Late morning, late evening.
</p>

<p>
&nbsp;
</p>

<p>
Roleplays
</p>

<p>
<a href="https://www.rpnation.com/rp/693-the-fallen-world/" rel="">The Fallen World</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/358-eternity-beckons/" rel="">Eternity Beckons</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/712-necromancer-quest/" rel="">Necromancer Quest</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/260-tinker-quest/" rel="">Tinker Quest</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/616-damsels-and-dragons/" rel="">Damsels and Dragons</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/990-clockwork-heart/" rel="">Clockwork Heart</a>
</p>

<p>
<a href="https://www.rpnation.com/rp/171-『-b-l-a-n-k-』/" rel="">『 B L A N K 』</a>&nbsp;
</p>

<p>
<a href="https://www.rpnation.com/topic/275211-the-black-tontine/" rel="">The Black Tontine</a>
</p>
</div>

<div class="text" id="cooltext">
<p>
Me
</p>

<p>
<a href="https://www.rpnation.com/topic/209343-i-mostly-just-flail-until-things-happen-ask-me-anything/" rel="">Ask Me Anything</a>&nbsp; - &para; -&nbsp; Featured Poet in <a href="https://www.rpnation.com/topic/85558-february-newsletter/" rel="">February 2015 Newsletter</a> - &para; - <a href="https://www.rpnation.com/topic/179840-thoughts/" rel="">Poetry</a>&nbsp; - &para; - <a href="https://asweknewitstory.wordpress.com/" rel="external nofollow" target="_blank">As We Knew It: A Webserial</a>&nbsp; - &para; - <a href="https://www.rpnation.com/topic/161161-byoc-bring-your-own-coffee-now-with-more-coffee/#comment-4395849" rel="">BYOC: Writer&#39;s Weekly</a>&nbsp; - &para; - <a href="https://www.rpnation.com/topic/272614-noms-public-html-or-whatever/" rel="">Noms&#39; Public HTML or Whatever</a><span style="display: none;"> </span>
</p>

<p>
&nbsp;
</p>

<p>
Resources
</p>

<p>
<a href="https://www.rpnation.com/tutorials/writing/between-the-words-a-poetry-tutorial-r43/" rel="">Between the Words: A Poetry Tutorial</a>&nbsp; - &para; -<a href="http://inkarnate.com/" rel="external nofollow"> Inkarnate Map Maker</a>&nbsp; - &para; - <a href="http://colorpalettes.net/" rel="external nofollow">Color Palettes</a>&nbsp; - &para; - <a href="https://www.rpnation.com/tutorials/writing/so-you-want-to-write-r31/" rel="">So You Want To Write... (RP Tutorials)</a>&nbsp; - &para; -<a href="http://inkarnate.com/" rel="external nofollow"> </a><a href="https://docs.google.com/forms/d/1DCwo6op9TiF5mMd_VJCYt9DqLrl_yP2O7PIe1bonQKw/viewform?edit_requested=true" rel="external nofollow">Newsletter Content Nomination Form</a>&nbsp; - &para; - <a href="https://www.rpnation.com/topic/230941-writing-games-join-anytime/" rel="">Writing Games</a>
</p>
</div>

<div class="text" id="gravetext">
<p>
These are roleplays that are no longer active and/or that I am no longer a part of.
</p>

<table>
<thead>
<tr>
<th colspan="4">
Mind Games
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/2563-mind-games-signup/" rel="">Sign Up</a> || <a href="https://www.rpnation.com/topic/2618-mind-games" rel="">RP</a> || <a href="https://www.rpnation.com/topic/2665-mind-games-info/" rel="">OOC</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
JUL 2012
</td>
<td>
Character(s):
</td>
<td>
Rhea and Jonah Orland
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Realistic || Horror || Mystery || Paranormal
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Insylum
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/rp/696-insylum/" rel="">Hosted Project</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/55564-insylum/#comment-1669258" rel="">JUL 2014</a>
<p>
JAN 2016
</p>
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/254508-rhea-orland/" rel="">Rhea Orland</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Realistic || Horror || Intrigue
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Arcana Majora: Guardians
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/87783-destiny-court-guardians-of-the-arcana/#comment-2622015" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/89058-destiny-court-guardians-of-the-arcana-mechanics/#comment-2649477" rel="">Mechanics</a> || <a href="https://www.rpnation.com/topic/87781-destiny-court-guardians-of-the-arcana/#comment-2622013" rel="">Sign Up</a> || <a href="https://www.rpnation.com/topic/87782-destiny-court-guardians-of-the-arcana/#comment-2622014" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/87780-destiny-court-guardians-of-the-arcana/#comment-2622012" rel="">RP</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/33394-destiny-court-guardians-of-the-arcana/" rel="">JUL 2014</a>
<p>
FEB 2015
</p>
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/87781-destiny-court-guardians-of-the-arcana/#comment-2622013" rel="">Mridula</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Fantasy || Intrigue || Adventure
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
The Once and Future King
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/54879-the-once-and-future-king/#comment-1736581" rel="">Sign Up</a> || <a href="https://www.rpnation.com/topic/54878-the-once-and-future-king/#comment-1736579" rel="">RP</a> || <a href="https://www.rpnation.com/topic/78792-the-once-and-future-king-settingslocations/#comment-2409404" rel="">Setting</a> || <a href="https://www.rpnation.com/topic/54880-the-once-and-future-king/#comment-1736582" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/78790-the-once-and-future-king-lore/#comment-2409389" rel="">Lore</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
AUG 2014
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/54879-the-once-and-future-king/?do=findComment&amp;comment=1816446" rel="">Elaine of Corbenic</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Fantasy || Period || Arthurian || Drama
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
The Exodus of Fables
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/57523-out-of-character-the-exodus-of-fables/#comment-1861477" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/57554-former-ic-thread-the-exodus-of-fables/#comment-1862178" rel="">RP</a> || <a href="https://www.rpnation.com/topic/57505-introduction-the-exodus-of-fables/#comment-1860783" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/57526-character-sheet-application-the-exodus-of-fables/#comment-1861568" rel="">Sign Up</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
AUG 2014
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/58366-gwendolyn-darling-the-exodus-of-fables/#comment-1889680" rel="">Gwendolyn Darling</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Urban Fantasy || Fairy Tale Retelling
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Super Super Happy Love Time Heart ChessMATE
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/86339-super-super-happy-love-time-heart-chessmate/#comment-2587880" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/86338-super-super-happy-love-time-heart-chessmate/#comment-2587879" rel="">Sign Ups</a> || <a href="https://www.rpnation.com/topic/86340-super-super-happy-love-time-heart-chessmate/#comment-2587881" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/86337-super-super-happy-love-time-heart-chessmate/#comment-2587878" rel="">RP</a> || <a href="https://www.rpnation.com/topic/93070-super-super-happy-love-time-heart-chessmate-neutral-characters/#comment-2732356" rel="">NPCs</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
FEB 2015
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/86338-super-super-happy-love-time-heart-chessmate/?do=findComment&amp;comment=2587912" rel="">Asphodel Crimson</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Modern || School || Humor/Parody
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
The Genesis Syndicate
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/161844-the-genesis-syndicate/"" rel="">RP</a> || <a href="https://www.rpnation.com/topic/161846-the-genesis-syndicate/" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/161845-the-genesis-syndicate/" rel="">Sign Up</a> || <a href="https://www.rpnation.com/topic/161847-the-genesis-syndicate/" rel="">Overview</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
NOV 2015
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/161845-the-genesis-syndicate/?do=findComment&amp;comment=4437548" rel="">Esther Sewik</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Sci-Fi || Superpowers || Action
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Atlantis: The Broken Continent
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/106980-atlantis-the-broken-continent/" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/106977-atlantis-the-broken-continent/" rel="">RP</a> || <a href="https://www.rpnation.com/topic/106979-atlantis-the-broken-continent/" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/106978-atlantis-the-broken-continent/" rel="">Sign Up</a> || <a href="https://www.rpnation.com/topic/106985-atlantis-the-broken-continent-lore/" rel="">Lore</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
DEC 2015
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/106978-atlantis-the-broken-continent/?do=findComment&amp;comment=4596382" rel="">Nick Columbus</a><br>
<a href="https://www.rpnation.com/topic/106978-atlantis-the-broken-continent/?do=findComment&amp;comment=4640858" rel="">Maude Puckett</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Realistic || Adventure || Mystery || Action || Puzzles
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Blood and Plunder
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/rp/350-blood-plunder/" rel="">Hosted Project</a>
</th>
</tr>
<tr>
<td>
Date(s):
</td>
<td>
JAN 2016
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Fantasy || Adventure || Skypirates || Dice || Crucible
</td>
</tr>
</thead>
</table>

<table>
<thead>
<tr>
<th colspan="4">
House of Opportunity
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/187736-house-of-opportunity-ooc/#comment-5073866" rel="">OOC</a>|| <a href="https://www.rpnation.com/topic/187734-house-of-opportunity/#comment-5073864" rel="">RP</a> || <a href="https://www.rpnation.com/topic/187735-house-of-opportunity-sign-up/#comment-5073865" rel="">Sign Ups</a> || <a href="https://www.rpnation.com/topic/187737-house-of-opportunity/#comment-5073867" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/187889-house-of-opportunity-settingslocations/#comment-5077321" rel="">Setting</a> || <a href="https://www.rpnation.com/topic/187740-house-of-opportunity-mechanics/#comment-5073934" rel="">Mechanics</a> || <a href="https://www.rpnation.com/topic/187738-house-of-opportunity-lore/#comment-5073896" rel="">Yōkai</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
FEB 2016
</td>
<td>
Character(s):
</td>
<td>
n/a
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Fantasy || Fandom || Spirited Away || Slice of Life
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
Harvest Moon: Sleepy Hills
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/topic/203028-harvest-moon-sleepy-hills/" rel="">IC</a> || <a href="https://www.rpnation.com/topic/203033-harvest-moon-sleepy-hills-qa/" rel="">Q&amp;A</a> || <a href="https://www.rpnation.com/topic/203030-sleepy-hills-saloon/" rel="">OOC</a> || <a href="https://www.rpnation.com/topic/203031-harvest-moon-sleepy-hills/" rel="">Overview</a> || <a href="https://www.rpnation.com/topic/203029-sleepy-hills-citizen-registry/" rel="">Sign Ups</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
APR 2016
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/203029-sleepy-hills-citizen-registry/?do=findComment&amp;comment=5480259" rel="">Canaan</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Fandom || Harvest Moon || Mystery || Slice of Life
</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th colspan="4">
AEGIS: Training Facility 108
</th>
</tr>
<tr>
<th colspan="4">
<a href="https://www.rpnation.com/rp/177-aegis-training-facility-108/" rel="">Hosted Project</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Date(s):
</td>
<td>
JUN 2016
</td>
<td>
Character(s):
</td>
<td>
<a href="https://www.rpnation.com/topic/248743-scoggan-h/" rel="">Hannah Scoggan</a>
</td>
</tr>
<tr>
<td>
Genre(s):
</td>
<td colspan="3">
Modern || Superpowers || Sci-Fi || Action || Intrigue
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<p>
&nbsp;
</p>

<p>
&nbsp;
</p>

<p>
&nbsp;
</p>

<p>
Try changing your browser size around.... it should be super size adaptive, with three different size configurations and a mobile version that&#39;s mostly just plain text.
</p>

Any ideas?

 

[IctoraPost]

Whoa, that's a lot of lines of code. You should put that in a spoiler.


Also, this happened when I loaded it up.

Spoiler

...probably not intented. The tabs work here, though. I'll investigate further.

 

[IctoraPost]

Found the problem, I think. You used the same id for your "news", "rp" and "cool" sections as the first one you did - the one at the top of the page, about signatures. That's what's interfering with your tabs.


A few tips: You don't need to repeat yourself between input and input:checked. Everything is inherited. You don't need to repeat the transition property between the label and the label:hover, either. Lastly, putting user-select: none; on your labels will stop that annoying highlighted text when you click them.


Hope this proves helpful.

 

[Dusky]

Oh! Ahhh, that makes so much sense! Thank you. c:


I only specified input:checked when I was making changes to it, actually. I'll double check for repeated variables, though.


Thanks for the tip about the transition property. c:

 

[ewolf20]

i'm so happy right now. 

 

[ewolf20]

Also, how did you learn all that?

 

[Dusky]

Also, how did you learn all that?

I just experimented! I knew what I wanted to do so I looked up ways to make it happen.


But I definitely had to learn some basics first, so I wouldn't break everything trying to do advanced codes without knowing what I'm actually doing.


I used codecademy.com to get started!