Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
  • Everybody Wants to be Famous

       (0 reviews)

    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!


    Actual Template Not Responsive

    test
    test
    test
    test
    test

    Template code

    <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>


    User Feedback

    Create an account or sign in to leave a review

    You need to be a member in order to leave a review

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    There are no reviews to display.




×

Important Information

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.