Jump to content
  • Another Site Top Box

       (1 review)

    This responsive top box comes with many links, many places to put your information, and space for image links - such that you might have for "for the month" winners or for your staff.


    Actual Template Responsive

    Your introduction here. Bucko piracy keelhaul chase scallywag snow ho plunder Chain Shot lugger. Yo-ho-ho hail-shot come about bring a spring upon her cable case shot to go on account wherry lateen sail Arr long boat. Heave down black spot six pounders rope's end bilge square-rigged deadlights ahoy sutler scourge of the seven seas. Lee plunder gun Pieces of Eight nipper furl splice the main brace matey topmast hearties. Boatswain trysail bounty hardtack black jack ye skysail belay draught salmagundi. Scuppers hardtack pink holystone gangplank six pounders reef Gold Road mutiny parley. No posts have been made in this forum.
    Your ooc news here
    your ic news here
    your recent posts here

    Title

    Name

    Title

    Name

    Template code

    <!-- THIS IS YOUR INFORMATION BOX WITH INFORMATION -->
    			
    			<div class="tborder flex">
    				
    				<!-- LEFT COLUMN WITH TABBED STUFF --> 
    				<div class="trow1 left">
    					<div class="tabbedholder">
    						<!-- THESE ARE THE TABS -->
    						<!-- INTRO -->
    						<input type="radio" name="kit-tabs" id="intro" checked="checked" />
    						<label for="intro">intro</label>
    						<!-- OOC NEWS -->
    						<input type="radio" name="kit-tabs" id="oocnews" />
    						<label for="oocnews">ooc news</label>
    						<!-- IC NEWS -->
    						<input type="radio" name="kit-tabs" id="icnews" />
    						<label for="icnews">ic news</label>
    						<!-- RECENT POSTS -->
    						<input type="radio" name="kit-tabs" id="recentposts" />
    						<label for="recentposts">recent posts</label>
    						<!-- END TABS -->
    						
    						<!-- YOUR CONTENT STARTS HERE -->
    						
    						<!-- INTRO STUFF -->
    						<div class="info intro">
    							<div>
    								Your introduction here. Bucko piracy keelhaul chase scallywag snow ho plunder Chain Shot lugger. Yo-ho-ho hail-shot come about bring a spring upon her cable case shot to go on account wherry lateen sail Arr long boat. Heave down black spot six pounders rope's end bilge square-rigged deadlights ahoy sutler scourge of the seven seas. Lee plunder gun Pieces of Eight nipper furl splice the main brace matey topmast hearties. Boatswain trysail bounty hardtack black jack ye skysail belay draught salmagundi. Scuppers hardtack pink holystone gangplank six pounders reef Gold Road mutiny parley. No posts have been made in this forum.
    							</div>
    						</div>
    						<!-- END INTRO -->
    						<!-- OOC NEWS STUFF -->
    						<div class="info oocnews">
    							Your ooc news here
    						</div>
    						<!-- END OOCS NEWS -->
    						<!-- IC NEWS STUFF -->
    						<div class="info icnews">
    							your ic news here
    						</div>
    						<!-- END IC NEWS -->
    						<!-- RECENT POSTS STUFF -->
    						<div class="info recentposts">
    							your recent posts here
    						</div>
    						<!-- END RECENT POSTS -->
    						
    						<!-- YOUR CONTENT ENDS HERE -->
    					</div>
    				</div>
    				<!-- END LEFT CONTENT -->
    				
    				<!-- START OF STAFF -->
    				<div class="trow1 middle">
    					<div class="staff1">
    						<h3>Title</h3>
    						<a href="#">Name</a>
    					</div>
    					<div class="staff2">
    						<h3>Title</h3>
    						<a href="#">Name</a>
    					</div>
    				</div>
    				<!-- END OF STAFF -->
    				
    				<!-- RELEASE THE LINKS OF WAR! -->
    				<div class="trow1 right">
    					<div class="links row1">
    						<a class="counts" href="#">
    							Link one
    						</a>
    						<a class="counts" href="#">
    							Link two
    						</a>
    						<a class="counts" href="#">
    							Link three
    						</a>
    						<a class="counts" href="#">
    							Link four
    						</a>
    					</div>
    					<div class="links row2">
    						<a class="counts" href="#">
    							Link 1
    						</a>
    						<a class="counts" href="#">
    							Link 2
    						</a>
    						<a class="counts" href="#">
    							Link 3
    						</a>
    						<a class="counts" href="#">
    							Link 4
    						</a>
    					</div>
    				</div>
    				<!-- END THE LINKS -->
    			</div>
    			
    			<!-- END THE INFORMATION BOX -->
    
    <style>.tborder.flex {
    	display: flex;
    	justify-content: space-between;
    	align-items: stretch;
    	margin: 5px 30px 15px 30px;
    	width: auto;
    }
    
    .tborder.flex > .trow1 {
    	padding: 0;
    }
    
    .trow1.left {
    	width: 50%;
    }
    
    .info.intro div::first-letter {
    	font-size: 2em;
    	float: left;
    	line-height: 120%; /* change this value to make it inline with the rest of the text */
    	margin-right: 2px;
    }
    
    .tborder.flex > .trow1.middle {
    	margin: 0 5px;
    	text-align: center;
    }
    
    /* this is the tabbed stuff */
    
    /* button styling */
    .tabbedholder input {
      display: none; /* hide the radio button */
    }
    
    .tabbedholder label {
      position: relative; /* so we can move the buttons to the right */
      display: inline-block;
      text-align: center;
    	padding: 5px;
    }
    
    .tabbedholder label:hover /* alert users that something happens when they click */ {
      cursor: pointer;
    }
    
    /* the 'active' tab should look different */
    .tabbedholder #intro:checked ~ label[for="intro"],
    .tabbedholder #oocnews:checked ~ label[for="oocnews"],
    .tabbedholder #icnews:checked ~ label[for="icnews"],
    .tabbedholder #recentposts:checked ~ label[for="recentposts"],
    .tabbedholder #subbed-threads:checked ~ label[for="subbed-threads"]{
      z-index: 1;
    	color: #efefef;
    }
    
    .info {
      position: relative;
      display: none;
    }
    
    .tabbedholder #intro:checked ~ .intro { display: block; }
    .tabbedholder #oocnews:checked ~ .oocnews { display: block; }
    .tabbedholder #icnews:checked ~ .icnews { display: block; }
    .tabbedholder #recentposts:checked ~ .recentposts { display: block; }
    .tabbedholder #subbed-threads:checked ~ .subbed-threads { display: block; }
    
    /* end the tabbed stuff */
    
    /* of the season stuff */
    
    .trow1.middle {
    	display: flex;
    	flex-direction: column;
    	align-items: stretch;
    	justify-content: center;
    }
    
    .trow1.middle h3 {
    	font-size: 2em;
    	margin: 5px 0;
    	padding: 1px;
    	color: #000;
    }
    
    .trow1.middle a {
    	color: #1a1a1a;
    }
    
    .staff1,
    .staff2 {
    	padding: 10px;
    	margin-bottom: 5px;
    	width: 200px;
    }
    
    /* staff one image */
    .staff1 {
    	background: url(https://via.placeholder.com/500x200);
    	background-position: center;
    	background-size: cover;
    }
    
    
    /* staff two image */
    .staff2 {
    	background: url(https://via.placeholder.com/500x200);
    	background-position: center;
    	background-size: cover;
    }
    
    /* links */
    
    .trow1.right {
    	display: flex;
    	flex-grow: 2;
    }
    
    .trow1.middle > div {
    	height: 49%;
    }
    
    .links {
    	display: flex;
    	flex-direction: column;
    	flex-basis: 49%;
    }
    
    .links a {
    	display: flex;
    	margin: 5px 0 0 0;
    	padding: 5px;
    	height: 100%;
    	justify-content: center;
    	align-items: center;
      background: #262626;
    }
    
    .links.row1 {
    	margin-right: 5px;
    }
    
    .trow1.right > div a:first-child {
    	margin-top: 0;
    }
    
    .trow1.right > div a:last-child {
    	margin-bottom: 5px;
    }
    
    /* recent posts */
    
    .recent-posts {
    	max-height: 155px;
    	overflow: auto;
    }
    
    /* stuff for mobile */
    @media only screen and (max-device-width: 480px) {
    	.tborder.flex {
    		flex-wrap: wrap;
    	}
    	
    	.tabbedholder label {
    		padding: 5px 10px;
    		font-size: 1.5em;
    	}
    	
    	.tborder.flex > .trow1.middle {
    		margin: 0 5px 0 0;
    	}
    	
    	.tborder.flex > .trow1.left {
    		flex-basis: 100%;
    		flex-grow: 2;
    		margin-bottom: 5px;
    	}
    	
    	.staff2 {
    		margin-bottom: 0;
    	}
      
      .trow1.middle > div {
        width: 100%;
      }
      
      .trow1.right > div a:last-child {
    	margin-bottom: 0;
    }
      
      
        }</style>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

    littleone

      

    Awesome

    Share this review


    Link to review

×
×
  • Create New...

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.