WELCOME TO THE STILL OF THE NIGHT
We are a soft Marvel site set in New York City. Our focus is exploring our Marvel characters in a real life setting versus going to war and trying to take out the bad guy. Our focus is the MCU and Marvel 616. Original characters are absolutely welcome! We are pretty laid back and easy going so come take a look around or say hi/ask questions in our chatbox or Discord! Register first and last name only.
NEW YORK CITY
PRE INFINITY WAR
07/02 Site Wide Event #1 is up!!
07/02 HAPPY TWO MONTHS!
06/18 Challenge #1 is now over.
06/05 Challenge #1 is up!
06/03 Celebrating One Month!
05/03 Now Open!
WANTED SPOTLIGHT

 
Add Reply
New Topic
New Poll

 app
mak
Offline
10 POINTS EARNED
2 POSTS MADE
NAMEHERE
  • FULL NAME first middle last
  • AGE in letters
  • OCCUPATION whatever
  • MEMBERGROUP goes here
  • BIRTHDAY dd month
  • OTHER add/remove as much as you want this will scroll
  • MORE INFO goes here etc

heading one

heading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
SHIPPER HERE
  • PLAYED BY someone
  • AGE in letters
  • CONTACT whatever
  • TIMEZONE goes here
  • OTHER CHARACTERS list them or something idk
BY MITZI
mak
Offline
10 POINTS EARNED
2 POSTS MADE
CSS

CODE
/*- - - - - - - - - - - - - - - - - - - -
SHIPPER APP CODES
- - - - - - - - - - - - - - - - - - - - -*/
/** REPLACE #MEMBERGROUP AND HEXCODE **/
 #Avengers .tab label, #Avengers img, #Avengers .name { background: #CD2626; border: solid 1px #CD2626; }
 #Avengers .info b, #Avengers h1, #Avengers h2 { color: #CD2626; }

 #Brotherhood .tab label, #Brotherhood img, #Brotherhood .name { background: #FF6103; border: solid 1px #FF6103; }
 #Brotherhood .info b, #Brotherhood h1, #Brotherhood h2 { color: #FF6103; }

 #Enhanced .tab label, #Enhanced img, #Enhanced .name { background: #4CBB17; border: solid 1px #4CBB17; }
 #Enhanced .info b, #Enhanced h1, #Enhanced h2 { color: #4CBB17; }

 #Gods .tab label, #Gods img, #Gods .name { background: #CC7F32; border: solid 1px #CC7F32; }
 #Gods .info b, #Gods h1, #Gods h2 { color: #CC7F32; }

 #Guardians .tab label, #Guardians img, #Guardians .name { background: #CD96CD; border: solid 1px #CD96CD; }
 #Guardians .info b, #Guardians h1, #Guardians h2 { color: #CD96CD; }

 #Humans .tab label, #Humans img, #Humans .name { background: #9370DB; border: solid 1px #9370DB; }
 #Humans .info b, #Humans h1, #Humans h2 { color: #9370DB; }

 #Inhumans .tab label, #Inhumans img, #Inhumans .name { background: #00CDCD; border: solid 1px #00CDCD; }
 #Inhumans .info b, #Inhumans h1, #Inhumans h2 { color: #00CDCD; }

 #Mutants .tab label, #Mutants img, #Mutants .name { background: #2A8E82; border: solid 1px #2A8E82; }
 #Mutants .info b, #Mutants h1, #Mutants h2 { color: #2A8E82; }

 #SHIELD .tab label, #SHIELD img, #SHIELD .name { background: #6996AD; border: solid 1px #6996AD; }
 #SHIELD .info b, #SHIELD h1, #SHIELD h2 { color: #6996AD; }

 #Villains .tab label, #Villains img, #Villains .name { background: #CD4F39; border: solid 1px #CD4F39; }
 #Villains .info b, #Villains h1, #Villains h2 { color: #CD4F39; }

 #XMen .tab label, #XMen img, #XMen .name { background: #FFC125; border: solid 1px #FFC125; }
 #XMen .info b, #XMen h1, #XMen h2 { color: #FFC125; }




.hopalong {
  width: 400px; padding: 20px; text-align: left;
  background: #fff; border: solid 10px #ccc; letter-spacing: 0;
}

.hopalong h1 {
  font: bold 20px karla; text-transform: uppercase;
  margin: 5px 0; border-bottom: solid 1px #ccc;
}

.hopalong h2 {
  text-align: right; text-transform: uppercase;
  font: bold 11px/12px karla; padding: 10px;
}

.hopalong img {
  width: 90px; height: 90px; padding: 15px; margin-bottom: 5px;
  border: solid 1px #DADADA; background: #fff!important;;
}

.hopalong .name {
  width: 100px; padding: 10px; color: #fff;
  height: 28px; overflow: hidden!important; letter-spacing: 1px;
  font: bold italic 15px/14px karla; text-align: right;
  text-transform: uppercase; margin-bottom: -1px;
}

.tabs {
  position: relative;  
  width: 400px;
  height: 305px;
}

.tab {
  float: none; margin: 5px 0;
}

.tab label {
  color: rgba(255,255,255,.8); width: 100px; padding: 8px 10px;
  font: bold 8px karla; text-align: right;
  text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
  left: 0px; top: 5px; display: block; transition: .1s;
}

.tab label i {
  text-shadow: none!important; float: right;
  padding-left: 20px; font-size: 11px; margin-top: -2px;
}

.tab [type=radio] {
  display: none;  
}

.content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 140px;
  right: 0px;
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  opacity: 0;
}

[type=radio]:checked ~ label {
  text-shadow: -2px -1px 5px rgba(0,0,0,.3);
  z-index: 2; color: rgba(255,255,255,1); font-style: italic;
 
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1; opacity: 1;
}
.hopalong .info {
  height: 260px; overflow: auto; padding-right: 5px;
}

.hopalong .info ul {
  list-style: none; color: #222;
  font: 10px/12px helvetica; padding: 0;
  margin: -2px 0 0 0;
}

.hopalong .info li {
  padding: 8px;  margin: -1px;
  border-top: solid 1px #ccc;
}

.hopalong .info ul b {
  font: bold 12px karla; display: block;
}

.hopalong .body {
  font: 10px/12px helvetica; text-align: justify;
  height: 260px; overflow: auto; padding-right: 5px;
color: #181818;
}



HTML
CODE
[dohtml]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">

<center><div class="hopalong" id="Membergroup"><div class="tabs">

<div class="name">NAMEHERE</div>

<img src="http://placehold.it/70" height="70" width="70">

<div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1"><i class="fa fa-file" aria-hidden="true"></i> INFO</label><div class="content"><div class="info"><ul>
 
<li><b>FULL NAME</b>
first last</li>
   
<li><b>CODE NAME</b>
here</li>

<li><b>AGE</b>
in numbers</li>
   
<li><b>OCCUPATION</b>
whatever</li>
   
<li><b>MEMBER GROUP</b>
Avengers, Brotherhood, Enhanced, Gods, Guardians, Humans, Inhumans, Mutants, SHIELD, Villains, XMen</li>

<li><b>SEXUALITY</b>
here</li>

<li><b>RELATIONSHIP STATUS</b>
here</li>
   
<li><b>FACE CLAIM</b>
here</li>
   
<li><b>WANT AD?</b>
If this is for a want ad please tag the ad creator when you have completed your shipper</li>

</ul></div></div></div>

<div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2"><i class="fa fa-align-right" aria-hidden="true"></i>APPLICATION</label><div class="content"><div class="body">

<h1>History</h1>
Can use the <*h2>title<*/h2> format to break up areas of the history if desired. May also use bullet points.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h1>Powers</h1>
Can use the <*h2>title<*/h2> format to break up areas of the history if desired. May also use bullet points.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



</div></div></div>

<div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3"><i class="fa fa-comments" aria-hidden="true"></i>SHIPPER</label><div class="content"><div class="body">

<h1>Personality</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h1>Platonic</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h1>Romantic</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<h1>Other</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div></div>

<div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4"><i class="fa fa-user" aria-hidden="true"></i> OOC</label><div class="content"><div class="info"><ul>
 
<li><b>PLAYED BY</b>
someone</li>
   
<li><b>PRONOUNS</b>
here</li>
   
<li><b>CONTACT</b>
whatever</li>
   
<li><b>TIMEZONE</b>
goes here</li>
   
<li><b>OTHER CHARACTERS</b>
list them</li>

<li><b>TRIGGERS</b>
list them</li>

<li><b>MATURE CONTENT</b>
list them</li>
     
</ul></div></div></div>

</div></div><a href="http://shine.jcink.net/index.php?showuser=8549"><span style="font: bold 8px/20px calibri; opacity: .5; text-align:center;">BY MITZI</span></a>
</center>[/dohtml]
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
Fast Reply
New Topic
New Poll



 


 


RPG-D RPG Initiative
SKINNED BY Vanessa of CANDYLAND COUTURE AND CAUTION Affiliate Table by Kuroya of CTTW

welcome, Guest

change account
CHAT PLOT ENJOY!