![Penny](https://images.rpginitiative.com/uploads/monthly_2018_07/404fadae6fd02e3b6942d549d642adcc.thumb.png.50b2f3521af1a3e0825414bb5c8f07da.png)
By Penny
A simple-colored tabbed moodboard/lyrics/request/whatever-you-want-to-show-off code! It currently has 5 tabs, but more can be added easily!
<center><style> .devvietemp {position: relative; width: 498px; overflow: hidden; height: 350px; background: #fafafa; border: 1px solid #dfdfdf;} .devvietab {float: left;} .devvietab label {display: block; padding: 2px; height: 8px; width: 8px; background: #dfdfdf; position: absolute; border-bottom: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf; font-family: monospace; font-size: 8px; line-height: 1; top: 5px;} .devvietab [type=radio] {display: none} .devviecontent {-webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; overflow: hidden; position: absolute; top: 500px; bottom: 0px; left: 23px; right: 0px; height: 300px; width: 450px; border: 1px solid #dfdfdf;} [type=radio]:checked ~ label {width: 20px;} [type=radio]:checked ~ label ~ .devviecontent {z-index: 5; top: 24px; left: 23px;} .devvieside1 {position: absolute; border: 1px solid #dfdfdf; height: 250px; width: 120px; padding: 10px; top: 14px; left: 14px; background: #fefefe; overflow: auto; font-family: monospace; font-size: 10px; text-align: left;} .devvieside2 {position: absolute; height: 270px; width: 270px; top: 14px; left: 164px; border: 1px solid #dfdfdf;} </style> <div class="devvietemp"> <div class="devvietab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1" style="z-index: 8"></label> <div class="devviecontent"> <div class="devvieside1">test</div> <div class="devvieside2"><a href="https://rpginitiative.com/profile/2592-penny/"><img src="https://placehold.it/270" style="height: 100%; width: 100%;"></a></div> </div> </div> <div class="devvietab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2" style="z-index: 8; top: 18px;"></label> <div class="devviecontent"> <div class="devvieside1">test</div> <div class="devvieside2"><img src="https://placehold.it/270" style="height: 100%; width: 100%;"></div> </div> </div> <div class="devvietab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3" style="z-index: 8; top: 31px;"></label> <div class="devviecontent"> <div class="devvieside1">test</div> <div class="devvieside2"><img src="https://placehold.it/270" style="height: 100%; width: 100%;"></div> </div> </div> <div class="devvietab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4" style="z-index: 8; top: 44px;"></label> <div class="devviecontent"> <div class="devvieside1">test</div> <div class="devvieside2"><img src="https://placehold.it/270" style="height: 100%; width: 100%;"></div> </div> </div> <div class="devvietab"> <input type="radio" id="tab-5" name="tab-group-1"> <label for="tab-5" style="z-index: 8; top: 57px;"></label> <div class="devviecontent"> <div class="devvieside1">test</div> <div class="devvieside2"><img src="https://placehold.it/270" style="height: 100%; width: 100%;"></div> </div> </div> </div></center>
By Penny
By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.