cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

wyeAJ

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  
  </head>
<body>


<section class="tabs">
	            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		        <label for="tab-1" class="tab-label-1">Welcome</label>
		
	            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		        <label for="tab-2" class="tab-label-2">Payment</label>
		
	            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
		        <label for="tab-3" class="tab-label-3">Shipping</label>
			
	            <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
		        <label for="tab-4" class="tab-label-4">Int'l Shipping</label>

	            <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
		        <label for="tab-5" class="tab-label-5">Customer Service</label>

	            <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" />
		        <label for="tab-6" class="tab-label-6">Returns</label>

	            <input id="tab-7" type="radio" name="radio-set" class="tab-selector-7" />
		        <label for="tab-7" class="tab-label-7">Exchanges</label>
            
			    <div class="clear-shadow"></div>
				
		        <div class="content">
			        <div class="content-1">
						<p>Trends Auto has been specializing in aftermarket car, truck, van & SUV auto accessories for over twenty years.<br><br><b>It is our goal to provide our customers with the best service and pricing available on the internet.</b></p>
				    </div>
			        <div class="content-2">
						<p><table style="font-family: sans-serif;"><tr><td><b><center>We accept the following forms of payment:</b><br>-PayPal<br>-Visa<br>-MasterCard<br>-Discover<br>-American Express</center></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><img src="http://www.styleend.com/ProdImage/paypal%20icon_S.jpg"></td></tr></table></p>
				    </div>
			        <div class="content-3">
						<p>Handling time is based on the availability of the item.  Your item will ship in 1-30 business days.<br>Please view the handling time stated for each item under the shipping and payments.<br><b>Tracking information will be posted to your sale as soon as it is available.</b><br><br><b>TO VIEW YOUR TRACKING NUMBER:</b><br>1) Log into your eBay account<br>2) Navigate to the My Account tab on the upper right side of your screen<br>3) Click on your eBay won/purchased items<br>4) Your tracking number can be viewed from this summary screen<br><br>If for some reason, your tracking number has not been posted to your sale after your stated handling time, feel free to email or contact us to find out where your item is.  Also, please note that if you order more than one item, the items may ship from different locations and arrive at different times.<br><br>We ship to street addresses <b>ONLY</b> (Sorry no P.O. boxes) within the 48 states and District of Columbia.</p>
				    </div>
				    <div class="content-4">
						 <p>TO OUR INTERNATIONAL CUSTOMERS<br></p>
               

				    </div>
				    <div class="content-5">
						 <p>Stuff To Put Here for Tab Five</p>
               

				    </div>
				    <div class="content-6">
						 <p>Stuff To Put Here for Tab Six</p>
               

				    </div>
				    <div class="content-7">
						 <p>Stuff To Put Here for Tab Seven</p>
               

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

</body></html>
            
          
!
            
              .tabs {
    position: relative;
	margin: 40px auto;
	width: 1120px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs input#tab-2{
	left: 155px;
}
.tabs input#tab-3{
	left: 315px;
}
.tabs input#tab-4{
	left: 475px;
}
.tabs input#tab-5{
	left: 635px;
}
.tabs input#tab-6{
	left: 795px;
}
.tabs input#tab-7{
	left: 955px;
}

.tabs label {
	background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-INACTIVE.jpg);
        font-family: sans-serif;
	font-size: 12px;
	line-height: 40px;
	height: 41px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 120px;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
        text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;

}

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

.tabs input:hover + label {
	background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-ACTIVE.jpg);
        width: 120px;
        color:#C0C0C0;
}

.tabs label:first-of-type {
    z-index: 5;
}

.tab-label-2 {
    z-index: 5;
}

.tab-label-3 {
    z-index: 5;
}

.tab-label-4 {
    z-index: 4;
}

.tab-label-5 {
    z-index: 3;
}

.tab-label-6 {
    z-index: 2;
}

.tab-label-7 {
    z-index: 1;
}

.tabs input:checked + label {
    background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-ACTIVE.jpg);
	z-index: 6;
}

.clear-shadow {
	clear: both;
}

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    width: 100%;

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7 {
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
	color: #398080;
}
.content table {
      margin: 0 auto;
  }
.content div p {
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	color: #444;
        width: 70%;
	font-family: sans-serif;
        margin-left: 25%;
        margin-right: 25%;
        min-width: 70%;
        -moz-margin-start: auto;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console