Example of our HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rogers Radio Player - KiSS 92.5</title> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/main.css" /> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/kiss.css" /> <link rel="stylesheet" type="text/css" media="print" href="_ui/css/print.css" /> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/ie.css" /> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/kiss-ie.css" /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/ie6.css" /> <link rel="stylesheet" type="text/css" media="all" href="_ui/css/kiss-ie6.css" /> <script type="text/javascript" src="_ui/js/DD_belatedPNG_0.0.8a-min.js"></script> <![endif]--> </head> <body class="kiss"> <div class="container"> <ol id="accessibility-nav"> <li><a href="#player">Skip to player</a></li> <li><a href="#navigation">Skip to navigation</a></li> <li><a href="#content">Skip to content</a></li> </ol> <!-- / accessibility-nav --> <hr /> <div id="top"> <ul> <li class="first"><a href="#">98.1 CHFI</a></li> <li><a href="#">680News</a></li> <li><a href="#">JACK FM</a></li> <li><a href="#">NEWSTALK 570</a></li> <li><a href="#">THE FAN 590</a></li> <li class="another"><a href="#" class="button">Listen to another station</a></li> </ul> <div class="preroll-overlay"></div> </div> <!-- / top --> <hr /> <div id="header"> <h1 class="site-name"><a href="#"><img src="_ui/images/kiss/logo.png" width="163" height="149" alt="KiSS 92.5 Hit Music" /></a></h1> <div id="player"> <div class="pic"> <img src="_media/images/kiss/gaga.jpg" width="125" height="125" alt="Lady Gaga" /> </div> <div class="info"> <div class="top"> <!--<p class="playing">Now playing</p> <div class="title"> <h2>A message from our sponsor</h2> <p class="author">Your show will start in 22 seconds</p> </div>--> <p class="playing">Playing Kiss 92.5 Live</p> <div class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </div> <!-- / buy --> <div class="title"> <h2>Gotta be somewhere</h2> <p class="author">Lady Gaga</p> </div> </div> <!-- / top --> <div class="share"> <h3>Share what you’re listening to:</h3> <ul> <li class="twitter"><a href="#" title="Twitter">t</a></li> <li class="facebook"><a href="#" title="Facebook">f</a></li> <li class="email"><a href="#email-friend" title="Email a friend">Email</a></li> </ul> <div id="email-friend" title="Email a friend"> <form action="#"> <div class="errors"> <p>Please enter a valid email address</p> </div> <fieldset> <div class="row"> <div class="label"> <label for="to">to:(email address)</label> <em>seperate multiple emails with a “,” </em> </div> <textarea id="to" cols="20" rows="5" class="error"></textarea> </div> <div class="row"> <div class="label"> <label for="from">from:(your email address)</label> </div> <input type="text" id="from" class="text error" /> </div> <div class="row"> <div class="label"> <label for="note">note:(optional)</label> <em><span id="remaining">###</span> characters remaining</em> </div> <textarea id="note" cols="20" rows="5"></textarea> </div> <p class="submit"> <input type="image" src="_ui/images/common/btn_send.png" value="value" /> <a href="#" class="cancel">Cancel »</a> </p> </fieldset> </form> </div> </div> <!-- / share --> </div> <!-- / playing --> <ul class="controls"> <li class="stop"><a href="#">Stop</a></li> <li class="mute"><a href="#">Mute</a></li> <li class="volume-down"><a href="#" title="Volume -">-</a></li> <li class="slider"> <div class="volume-slider"></div> </li> <li class="volume-up"><a href="#" title="Volume +">+</a></li> </ul> <!-- / controls --> </div> <!-- / player --> </div> <!-- / header --> <hr /> <div id="main"> <div id="content"> <ul id="navigation"> <li class="first"><a href="#recetly-played">Recently Played</a></li> <li><a href="#on-air">On Air</a></li> <li><a href="#on-demand">On Demand</a></li> <li><a href="#request-song">Request a song</a></li> <li><a href="#station-directory">Station directory</a></li> <li><a href="#live-chat">Live chat</a></li> </ul> <!-- / navigation --> <hr /> <div class="tab" id="recetly-played"> <ul class="recetly-played-header"> <li class="time">Time</li> <li class="song">Song</li> <li class="artist">Artist</li> <li class="buy">Buy</li> </ul> <div class="flexcroll scroll-area"> <ul class="recetly-played"> <li class="row"> <ul> <li class="time">2:26pm</li> <li class="song">Beautiful</li> <li class="artist">Akon feat. Colby O’Do</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:22pm</li> <li class="song">If I Had You</li> <li class="artist">Adam Lambert</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:18pm</li> <li class="song">Break Your Heart</li> <li class="artist">Taio Crux Feat. Ludacris</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:13pm</li> <li class="song">Can’t Be Tamed</li> <li class="artist">Miley Cyrus</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:09pm</li> <li class="song">Wavin’ Flag</li> <li class="artist">K’Nann</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:05pm</li> <li class="song">Cooler Than Me</li> <li class="artist">Mike Posner</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:02pm</li> <li class="song">Some Kind of Beautif</li> <li class="artist">Justin Blais</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">1:56pm</li> <li class="song">Airplanes</li> <li class="artist">B.o.B feat. Hayley Williams</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:09pm</li> <li class="song">Wavin’ Flag</li> <li class="artist">K’Nann</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:05pm</li> <li class="song">Cooler Than Me</li> <li class="artist">Mike Posner</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:05pm</li> <li class="song">Cooler Than Me</li> <li class="artist">Mike Posner</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">1:56pm</li> <li class="song">Airplanes</li> <li class="artist">B.o.B feat. Hayley Williams</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:09pm</li> <li class="song">Wavin’ Flag</li> <li class="artist">K’Nann</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:05pm</li> <li class="song">Cooler Than Me</li> <li class="artist">Mike Posner</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> <li class="row"> <ul> <li class="time">2:05pm</li> <li class="song">Cooler Than Me</li> <li class="artist">Mike Posner</li> <li class="buy"><a href="#" class="button">Buy</a> <ul> <li class="ur-music"><a href="#">urMusic<span></span></a></li> <li class="amazon"><a href="#">amazon<span></span></a></li> <li class="iTunes"><a href="#">iTunes<span></span></a></li> <li class="close"><a href="#">Close<span></span></a></li> </ul> </li> </ul> </li> </ul> </div> </div> <!-- / tab --> <div class="tab ui-tabs-hide" id="on-air"> <p class="listen"><a href="#">listen to Kiss 925</a></p> <ul class="on-air"> <li> <img src="_media/images/kiss/robie.jpg" width="90" height="91" alt="Robie" /> <p class="schedule">On AIR NOW</p> <h2><a href="#">Robbie D</a></h2> <p>9:00 am - 2:00pm</p> </li> <li> <img src="_media/images/kiss/roz-mocha.jpg" width="90" height="91" alt="The Roz & Mocha show" /> <p class="schedule">Up Next</p> <h2><a href="#">The Roz & Mocha show</a></h2> <p>5:30 am - 9:00 am</p> </li> </ul> </div> <!-- / tab --> <div class="tab ui-tabs-hide" id="on-demand"> <div class="flexcroll scroll-area"> <ul class="on-demand"> <li> <img src="_media/images/kiss/christmas.jpg" width="60" height="61" alt="" /> <h2><a href="#">Christmas Pop Hits</a></h2> <p>Listen to the best of Christmases past.</p> </li> <li> <img src="_media/images/kiss/play.jpg" width="60" height="61" alt="Play" /> <h2><a href="#">Kiss 925 Hip Hop</a></h2> <p>Listen to the best Hip Hop on Kiss.</p> </li> <li> <img src="_media/images/kiss/play.jpg" width="60" height="61" alt="Play" /> <h2><a href="#">Lorem ipsum dolor sit amet</a></h2> <p>Listen to the best Hip Hop on Kiss.</p> </li> <li> <img src="_media/images/kiss/christmas.jpg" width="60" height="61" alt="" /> <h2><a href="#">Christmas Pop Hits</a></h2> <p>Listen to the best of Christmases past.</p> </li> <li> <img src="_media/images/kiss/play.jpg" width="60" height="61" alt="Play" /> <h2><a href="#">Kiss 925 Hip Hop</a></h2> <p>Listen to the best Hip Hop on Kiss.</p> </li> <li> <img src="_media/images/kiss/play.jpg" width="60" height="61" alt="Play" /> <h2><a href="#">Lorem ipsum dolor sit amet</a></h2> <p>Listen to the best Hip Hop on Kiss.</p> </li> </ul> <p class="listen"><a href="#">back to Kiss 925 Live</a></p> </div> </div> <!-- / tab --> <div class="tab ui-tabs-hide" id="request-song"> <form action="#" class="request-song"> <h2>You can text us your request at 12345</h2> <p>Just tell us your name, song title and artist.</p> <h2 class="following">Or you can fill out the following...</h2> <ol> <li class="first-in-row"> <input type="text" value="Your Name" class="text" /> </li> <li> <input type="text" value="Your Email (optional)" class="text" /> </li> <li class="first-in-row"> <input type="text" value="Song Title" class="text song" /> </li> <li> <input type="text" value="Artist" class="text" /> </li> <li class="submit"> <input type="image" src="_ui/images/common/btn_send_request.png" alt="Send a Request" /> </li> </ol> </form> </div> <!-- / tab --> <div class="tab ui-tabs-hide" id="station-directory"> <div class="station-directory"> <ul class="header"> <li class="name">Station name</li> <li class="genre">Genre</li> <li class="location">Location</li> </ul> <div class="flexcroll scroll-area"> <h2>your favourite stations</h2> <div class="favourite"> <ul class="list"> <li class="instruction">Add a station to your favourites by clicking on the star icon.</li> </ul> </div> <div class="all"> <h2 class="all">all stations</h2> <ul class="list"> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">CHFI | 98.1FM</a></li> <li class="genre">Adult Contemporary</li> <li class="location">ON | Toronto</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">JackFM | 96.9FM</a></li> <li class="genre">Classic Hits</li> <li class="location">AB | Calgary</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">Rock 106 | 106FM</a></li> <li class="genre">Rock</li> <li class="location">AB | Lethbridge</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">680News | 680AM</a></li> <li class="genre">News/Talk </li> <li class="location">ON | Toronto</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">CHFI | 98.1FM</a></li> <li class="genre">Adult Contemporary</li> <li class="location">AB | Calgary</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">Jack FM | 96.9FM</a></li> <li class="genre">Classic Hits</li> <li class="location">AB | Lethbridge</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">JackFM | 96.9FM</a></li> <li class="genre">Classic Hits</li> <li class="location">AB | Calgary</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">Rock 106 | 106FM</a></li> <li class="genre">Rock</li> <li class="location">AB | Lethbridge</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">680News | 680AM</a></li> <li class="genre">News/Talk </li> <li class="location">ON | Toronto</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">CHFI | 98.1FM</a></li> <li class="genre">Adult Contemporary</li> <li class="location">AB | Calgary</li> </ul> </li> <li class="row"> <ul> <li class="name"><a href="#" class="fav">Favourite<span></span></a> <a href="#">Jack FM | 96.9FM</a></li> <li class="genre">Classic Hits</li> <li class="location">AB | Lethbridge</li> </ul> </li> </ul> </div> <!-- / all --> </div> </div> </div> <!-- / tab --> <div class="tab ui-tabs-hide" id="live-chat"> <div class="chat"> <h2>Make a comment</h2> <div class="flexcroll scroll-area"> <ul> <li class="first"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:12pm</a></p> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:13pm</a></p> </li> <li> <p>Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:16pm</a></p> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:12pm</a></p> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:13pm</a></p> </li> <li> <p>Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:16pm</a></p> </li> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at dolor justo. Nullam urna lacus.</p> <p class="user"><a href="#">Username | 5:12pm</a></p> </li> </ul> </div> </div> </div> <!-- / tab --> </div> <!-- / content --> <hr /> <div id="sidebar"> <div class="ad"> <img src="_media/images/common/ads/canada-trust.jpg" width="300" height="250" alt="Canada Trust" /> </div> <!-- / ad --> </div> <!-- / sidebar --> <div id="preroll-content"> <div class="content"> <img src="_media/images/common/preroll.jpg" width="320" height="240" alt="Preroll static image or video" /> </div> </div> <!-- / preroll-content --> </div> <!-- / main --> <hr /> <div id="footer"> <p class="help"><a href="#" class="button">Help</a></p> <div class="ad"> <img src="_media/images/common/ads/booth.jpg" width="726" height="88" alt="Booth Wireless Wave" /> </div> <!-- / ad --> </div> <!-- / footer --> </div> <!-- / container --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="_ui/js/jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript" src="_ui/js/flexcroll.js"></script> <script type="text/javascript" src="_ui/js/main.js"></script> </body> </html>