Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=all>
<title>TV Fitness Pros</title>
​
</head>
​
<body>
<div id="topbar"> <!-- BEGIN Header Bar -->
<div id="logo">
            
    <p><span id="tv">TV <font color="black">Fitness Pros</font></span></p>
    <p><span id="subhead">A PROFESSIONAL FITNESS STUDIO</span></p>
            
    </div>
            
<div class="break"></div>
    
<div id="mainmenu">         
            
    <ul>
        <li><a href="http://tvfitnesspros.com/index.html">Home</a></li>
        <li><a href="http://tvfitnesspros.com/Services.html">Services</a></li>
        <li><a href="http://tvfitnesspros.com/Fitness.html">Fitness Professionals</a></li>
        <li><a href="http://tvfitnesspros.com/Inquiries.html">Contact</a></li>
    </ul>           
    </div>
        
</div>  <!-- END Header Bar -->
​
<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
        
            <!-- Column 1 start -->
            
            
            <br /> <br />
            
            <div id="slider"> <!-- BEGIN photo slider-->
    
            <figure>
            <img src="images/trainer1.jpg" />
            
            <img src="images/trainer5.jpg" />
            
            <img src="images/trainer3.jpg" />
            
            <img src="images/trainer4.jpg" />
            
            <img src="images/trainer1.jpg" />
            </figure>
​
            </div> <!-- END photo slider-->
            
        
            
            <br /><br />
            
        <!-- Begin Boxes Under Slider-->
        <!-- See CSS notes for margins on boxes based on box_text input-->
        
        <div class="box">
        <div class="box_title">Training Tips</div>
        <img class="barbell-1" src="images\barbell.jpg">
        <div class="break"></div>       
        <iframe width="247" height="247" src="https://www.youtube.com/embed/u_iG_DWLdN8?showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>          
        
        <div class="box">
        <div class="box_title">Corporate Training</div>
        <img class="barbell-2" src="images\barbell.jpg">
        <div class="break"></div>       
        <img class="middle_image" src="images/treadmill.jpg" width="247" height="227">
        </div>
        
        <div class="box">
        <div class="box_title">One on One</div>
        <img class="barbell-3" src="images\barbell.jpg">
        <div class="break"></div>
        <img class="middle_image" src="images/1on1.jpg" width="247" height="227">
        </div>
        
        
        <div id="wrapper">
        <div id="box1"><div class="box_title">About Us</div>
        <p class="paragraph">I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me and you can start adding your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p></div>
        
        <div id="box2"><div class="box_title">Contact Us</div>
        <p class="paragraph2">500 Terry Francois St. San Francisco, CA 94158</p>
        <p class="paragraph3">info@mysite.com</p>
        <p class="paragraph3">Tel: 123-456-7890</p>
        <p class="paragraph3">Fax: 123-456-7890</p>
        
        </div>
        </div>
        </div>
    
                
            
            
        </div>
        <!-- Column 1 end -->
        
        <!-- Column 2 start -->
                
        <div class="col2">
        
            <br />
            <p> <h5 class="font1">Welcome to Personal Trainer!</h5></p> <br />
​
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me and you can start adding your own content and make changes to the font.</p>
​
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company.</p><br />
 
<p>Tip: Use this area to describe one of your services. You can change the title to the service you provide and use this text area to describe your service. Feel free to change the image.</p>
            <!-- Column 2 end -->
        </div>
    </div>
</div>
            
            
</body>
</html>
​
 
html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        }
        
    /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    display: block;
        }
​
body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#000;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
    font-family:arial, helvetica, sans-serif;
    line-height: 1;
    color:white;
}
​
ol, ul {
    
        list-style: none;
        }
        
blockquote, q {
    
        quotes: none;
        }
        
blockquote:before, blockquote:after,
    q:before, q:after {
    
        content: '';
        content: none;
        }
        
table {
    
        border-collapse: collapse;
        border-spacing: 0;
        }
  
    
.break {
    
        clear:both;
        }
​
.fixedwidth  {
    
            width:100%;
            margin:0 auto;
            
            }
        
#topbar {
    
         width:100%;
         height:200px;
         background-color:#F3D000;
         
        }
        
#logo {
    
        position:inline;
        float:left;
        padding:32px 0 0 180px;
    }
    
#tv {
    
        color:white;
        font-size:4.8em;
        font-family:Georgia, serif;
        
        
    }
    
#subhead {
    
        font-family:Verdana, Geneva, sans-serif;
        font-style:italic;
        font-size;2.5em;
        float:right;
        
        }
        
#mainmenu {
    
        width:100%;
        background-color:#000000;
        margin:25px 0 10px 0;
        height:39px;
        
        
    }
    
#mainmenu ul {
        
        padding: 0;
        margin: 0;
        list-style:none;
        background-color:black;
        text-align: center;
                
        }
        
#mainmenu li {
    
        
        line-height:40px;
        height:40px;
        width:180px;
        font-size:1em;
        float:left;
        margin:0 10px 0 150px;
        color:white;
            
        }
        
#mainmenu a {
        
        text-decoration:none;
        color:white;
        display:block;
        transition: .3s background-color;
        
    }
    
#mainmenu a:hover {
    
        color:black;
        background-color: #F3D000;
    }
    
.font1 {
    
    color:#F3D000;
    font-weight:bold;
    font-size:1.5em;
    
    }
    
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
/* 2 Column (left menu) settings */
​
.leftmenu {
    background:#000;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;          /* right column width */
    background:#000;    /* left column background colour */
}
.leftmenu .col1 {
    width:71%;          /* right column content width */
    left:102%;          /* 100% plus left column left padding */
    background:#000;
}
.leftmenu .col2 {
    width:21%;          /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
    background:#000;
}
​
@keyframes slidy {
    
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    
    }
​
​
#slider { 
    
    overflow: hidden;
    width: 55%;
    max-width: 800px;
    margin: 0 auto;
    border-top: 4px solid #F3D000;
    border-bottom: 4px solid #F3D000;
    padding-top:10px;
    padding-bottom:10px;
​
    }
​
#slider figure img {
​
    width: 20%;
    float: left;
​
    }
    
#slider figure { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slidy infinite; 
  
    }
    
    
.box {
     
     margin: 5px;
     display: inline-block;
     overflow: hidden;
     
   
}
​
​
​
.barbell-1 {    /* Each barbell has to have left margin aligned based on length and size of preceeding text */
​
    display:inline-block;
    float:left;
    margin: 0 0 0 48%;
}
​
.barbell-2 {  /* Each barbell has to have left margin aligned based on length and size of preceeding text */
​
    display:inline-block;
    float:left;
    margin: 0 0 0 33%;
}
​
.barbell-3 {  /* Each barbell has to have left margin aligned based on length and size of preceeding text */
​
    display:inline-block;
    float:left;
    margin: 0 0 0 51%;
}
​
.box_title {
​
    color:#FFFFFF;
    font-size:1.3em;
    float:left;
    margin:0;
    
​
}
​
​
iframe {
​
    display:inline-block;
    width:100%;
    margin: 0;
    float:left;
    border-top: 4px solid #F3D000;
    
}
​
.middle_image {
​
    border-top: 4px solid #F3D000;
    display:inline-block;
    width:100%;
    margin: 0;
    float:left;
    padding-top:20px;
​
}
​
#wrapper {
​
width:100%;
​
}
​
#box1 {
width:57%;
height:auto;
float:left;
margin-right:3%;
​
​
}
​
#box2 {
width:30%;
height:auto;
float:right;
margin-right:10%;
​
}
​
.paragraph {
​
float:left;
border-top:4px solid #F3D000;
padding-top:10px;
​
​
}
​
.paragraph2 {
​
float:left;
border-top:4px solid #F3D000;
margin:0;
padding-top:10px;
​
​
}
​
.paragraph3 {
​
float:left;
margin:0;
line-height:150%;
​
}
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
meglerpro
0viewers