cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Paytone+One|Viga|Rubik+One|Concert+One' rel='stylesheet' type='text/css'>
<style>
.rnjhfulltemp {overflow:hidden; position:relative; width: 450px; height: 550px;}

.rnjhsidebox {height: 550px;
position: absolute;
left: 0px;
top: 0px;
background-size:cover;
z-index: 2;}

.rnthesmallbox {position: absolute;
left: 0px;
height: 80px;
line-height: 100%;
background-color: #FFF;
bottom: 0px;
width: 450px;}

.rnjhgif {width: 125px;
height: 125px;
background-size: cover;
border-radius: 100%;
margin-top: -92px;
border: 8px solid #FFF;
margin-left: 145px;
z-index: 10;
position:absolute;}

.rnjhgifbox {width:150px; height:110px; padding-top:20px;}

.rnjhbarhead {font-size: 36px;
letter-spacing: -1px;
color: #565656;
text-align: left;
padding-left: 20px;
font-family: 'Viga', sans-serif;
margin-top: -110px;
text-transform: uppercase;
}

.rnjhmem {font-size: 11px;
letter-spacing: -1px;
background-color: #b798af;
padding: 5px;
width: 180px;
color: #fff;
margin-top: 5px;}

.rnjhmem2 {font-size: 9px;
letter-spacing: 3px;
margin-top: 12px;
border-top: 10px solid #b798af;
margin-left: -20px;
padding-top: 1px;
text-transform: uppercase;}

.rnjhtexts {text-align: justify;
border: 1px solid #CDCDCD;
padding-right: 0px;
width: 378px;
height: 275px;
overflow: auto;
line-height: 100%;
color: #565656;
margin-top: 20px;
margin-left: 22px;}

.rnjhtexts2 {overflow: auto;
width: 335px;
height: 238px;
font-size: 8px;
margin-top: 20px;
margin-left: 20px;
text-align: justify;
padding-right: 8px;
font-family: 'Viga', sans-serif;
text-transform: uppercase;}

.rnjhtabby {float: left;}

.rnjhtabby label {position: absolute;
width: 40px;
height: 11px;
text-align: center;
font-size: 9px;
letter-spacing: 0px;
color: #FFF;
overflow:hidden;
padding: 8px 8px 5px 5px;
line-height:100%;
background-color: #b798af;
text-transform: uppercase;
font-family: 'Viga', sans-serif;}


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

.rnjhtabbybox {
position: absolute;
font-family: georgia;
font-size: 10px;
text-align: right;
transition-duration: 0.9s;
top: 33px;
left: -510px;
width: 425px;
overflow: hidden;
height: 320px;
box-shadow: 0px 5px 10px rgba(65, 65, 65, 0.1);
background: #FFF none repeat scroll 0% 0%;}

.rnjhtabby [type=radio] {display: none;}
[type=radio]:checked ~ label ~ .rnjhtabbybox {left: 0px;}


.rnjhsmallpic {position: absolute;
top: 344px;
width: 455px;
height: 130px;
background-size: cover;
left: 0px;}

.rnjhfc {position: absolute;
top: 17px;
right: 24px;
font-size: 9px;
letter-spacing: 0px;
background-color: rgba(65, 65, 65, 0.7);
padding: 2px;
width: 207px;
color: #FFF;
opacity: 0;
margin-top: 5px;
font-family: montserrat;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
transition-duration: 0.6s;
height: 56px;
line-height: 675%;}

.rnjhfc:hover { opacity: 1 }

.rninternalstaff {font-size: 30px;
font-family: montserrat;
text-transform: uppercase;
font-weight: bold;
margin-top: 50px;
text-align: center;
color: #565656;}

.rninfostaff {overflow: auto;
width: 126px;
height: 150px;
font-size: 8px;
margin-top: 20px;
margin-left: 30px;
text-align: justify;
padding-right: 15px;}


.rnjhfulltemp a:link {color:#c1aabb; text-decoration: none;} 
.rnjhfulltemp a:visited {color:#c1aabb; text-decoration: none;} 
.rnjhfulltemp a:active {color:#c1aabb; text-decoration: none;} 
.rnjhfulltemp a:hover {color:#e5dee3; text-decoration: none;}

.rnjhfulltemp b{color: #b798af;} .rnjhfulltemp i{color: #b8b6b7;}

.rnjhtexts2::-webkit-scrollbar {width: 8px;} 
.rnjhtexts2::-webkit-scrollbar-track {background: #f4f4f4;} 
.rnjhtexts2::-webkit-scrollbar-thumb {background: #d8ebe8;}

.rninfostaff::-webkit-scrollbar {width: 8px;} 
.rninfostaff::-webkit-scrollbar-track {background: #f4f4f4;} 
.rninfostaff::-webkit-scrollbar-thumb {background: #d8ebe8;}
</style>
<center>
<div style="height: 560px; padding: 10px;">
<div class="rnjhfulltemp">
<div class="rnjhsidebox">

<div class="rnthesmallbox">
<div class="rnjhgifbox">
<div class="rnjhgif" style="background-image:url(https://i.imgur.com/csAzMPP.gif);">
</div></div>

<div class="rnjhbarhead">reina<br>
<div class="rnjhmem2" style="padding-left: 21px; z-index: 1;">26 + intermediate + scorpio</div></div>
</div></div>

<div class="rnjhsmallpic" style="background-image: url(https://i.imgur.com/yV2geKP.png);"></div>

<div style="position: relative; top: 10px; left: 12px;">
<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-1" name="rnjhtabby-group-1" checked>
<label for="rnjhtabby-1">I</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<center><img src="https://i.imgur.com/TTCAcuI.png"></center><p>
welcome to my gallery! i've been coding since december 2014, but i have a long way to go in learning and applying the knowledge. while i don't have as much time as i'd like to sit and code, i'm hoping i can find the time in the near future to squeeze it into my hectic schedule. i thoroughly enjoy creating new things and stretching my limits.
<p>
i may not always be around, but if you ever need to reach me shoot me a pm!
</div></div>
</div></div>

<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-2" name="rnjhtabby-group-1">
<label for="rnjhtabby-2" style=" margin-left: 53px; background-color: #bca1b5;">II
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
skins
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=26554">red light</a> // in-between, cfs, pop modals<p></font>
<i>a wide skin with top user links and modals that pop from the same bar, red light is a simple skin in appearance with added features that allow it to keep up with the current trends in skinning. it does not come with a mini profile but does include a full set of cfs. 
<p>featured colors: red, black, white</i>
<p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=25645">stay for tea</a> // light, cfs, pastels<p></font>
<i>my first skin ever created and second posted, stay for tea features full cfs and side-by-side forums with a hover banner. the skin comes with an optional mini profile and a toggle side cbox.
<p>featured colors: pastel yellows, moss</i>
<p>


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

<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-3" name="rnjhtabby-group-1">
<label for="rnjhtabby-3" style="margin-left:106px; background-color: #c1aabb;">III
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
threading
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=26746">sugar cookie</a> // rapid fire, font icons, small<p></font>
<i>a small, rapid fire thread with an mp3 space and a single image. font icons tie into three slide out faux tabs.
<p>features: mp3, small image, rounded edges</i>
<p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=25968">slowly drifting</a> // simple, no scroll, single image<p></font>
<i>slowly drifting is a simple thread that continues as much as you write. it has a single image with one accent color and a small space for tags or notes at the bottom.
<p>features: single image, tag/note space, no scroll/endless template</i>
<p>
<font style="font-size: 10px;">
+ <a href="http://shine.jcink.net/index.php?showtopic=23282">if god is a dj</a> // simple, endless template, single image<p></font>
<i>a code made for shibicomo 2015, this template features a single image and a small quote space.
<p>features: single image, tag/note space, no scroll/endless template</i>
<p>
</div></div>
</div></div>



<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-4" name="rnjhtabby-group-1">
<label for="rnjhtabby-4" style="margin-left:159px; background-color: #c9b7c4;">IV
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
shipping/wanted
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.jcink.net/index.php?showtopic=23232">ice cream cake</a> // two styles, horizontal scroll<p></font>
<i>two styles of one shipper or wanted ad template, ice cream cake has a single image per character/space that hovers and a scrolling section for information.
<p>features: two styles (single or multiple), horizontal scroll (on multiple), image hovers</i>
<p>
</div></div>
</div></div>


<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-5" name="rnjhtabby-group-1">
<label for="rnjhtabby-5" style="margin-left:212px; background-color: #cebdca;">V
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
site necessities
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=26104">making me crazy</a> // application, three tabs<p></font>
<i>a site application that can double as a shipper. the template has one large image and a small, circular image as well as three tabs that slide in with each transition and hold a scroll space for endless information.
<p>features: tabs, three images, hover</i>
<p>
<font style="font-size: 10px;">
+ <a href="http://shine.jcink.net/index.php?showtopic=23283">would you stay for tea?</a> // board description, hover<p></font>
<i>a simple, old-school forum description with an opaque hover and sub forum links.
<p>features: hover, sub forum links</i>
<p>
<font style="font-size: 14px; color: #b798af;">
mini profiles
</font><p>
<font style="font-size: 10px;">
coming soon</font>
<p>
</div></div>
</div></div>



<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-6" name="rnjhtabby-group-1">
<label for="rnjhtabby-6" style="margin-left:265px; background-color: #d3c4cf;">VI
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
technology
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=26251">fish biscuit</a> // tinder phone app<p></font>
<i>a mobile version of the popular match-making app tinder. not extremely practical, but fun for developmental threads or couples threads.
<p>features: tinder images</i>
<p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=23673">still my #1</a> // instant messenger, simple hover<p></font>
<i>a simple hover pop-it with a small image. made for a short instant messenger text or a small note about a character
<p>features: small image, hover pop-it</i>
<p>
</div></div>
</div></div>



<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-7" name="rnjhtabby-group-1">
<label for="rnjhtabby-7" style="margin-left:318px; background-color: #d9d0d7;">VII
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
signatures
</font><p>
<font style="font-size: 10px;">
coming soon</font>
<p>
<font style="font-size: 14px; color: #b798af;">
misc. codes
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=23671">got a secret?</a> // netizenbuzz, gossip/news blog<p></font>
<i>a template created from the south korean fan site around the entertainment world, netizenbuzz. can be used to represent online gossip or news blogs.
<p>features: one image, netizenbuzz website graphics</i>
<p>
</div></div>
</div></div>



<div class="rnjhtabby">
<input type="radio" id="rnjhtabby-8" name="rnjhtabby-group-1">
<label for="rnjhtabby-8" style="margin-left:371px; background-color: #e5dee3;">VIII
</label>
<div class="rnjhtabbybox">
<div class="rnjhtexts">
<div class="rnjhtexts2">
<font style="font-size: 14px; color: #b798af;">
shibicomo
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=22586">shibicomo 2015</a> // 030/150<p></font>
<p>
<font style="font-size: 14px; color: #b798af;">
archived codes
</font><p>
<font style="font-size: 10px;">
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=23669">experience</a> // thread, simple, rapid fire<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=23658">mr. mr.</a> // dark, cfs, optional templates<br>
+ <a href="http://shine.jcink.net/index.php?showtopic=22409">hyde & seek</a> // shipper, hover, gradients<br>
+ <a href="http://shine.jcink.net/index.php?showtopic=22282">i fight for spira</a> // mini profile, hover<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=22277">aeon rising</a> // site necessities, application, hover<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=21570">oh crazy</a> // simple, scroll, single image<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=21560">08.05.25</a> // shipper, hover, scroll<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=21098">obsession</a> // general template, simple<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=20880">321, change it up</a> // thread, simple, hover<br>
+ <a href="http://shine.b1.jcink.com/index.php?showtopic=20878">the first</a> // site necessities, member groups, tabbed<br></font>
<p>
</div></div>
</div></div>





</div>

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

            
          
!
999px
Loading ..................

Console