widget
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>widget - Free CSS Template by spyka Webmaster</title> <style type='text/css'> body { background: #FFF url('widget-images/body-single.png') repeat-x scroll top left; margin:0; padding:0; font-family: Verdana, Geneva, sans-serif; font-size: 13px; color: #666; } body.homepage { background: #FFF url('widget-images/body.png') repeat-x scroll top left; } body.noheader { background: #FFF url('widget-images/body-noheader.png') repeat-x scroll top left; } * { margin:0; padding:0; } /** element defaults **/ table { width: 100%; text-align: left; } th, td { padding: 10px 10px; } th { color: #fff; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; text-shadow:-1px -1px #CE5709; background: #F87B27 url('widget-images/frontpage-link.png') repeat-x scroll top left; } td { border-bottom: 1px solid #ccc; } code, blockquote { display: block; border-left: 5px solid #222; padding: 10px; margin-bottom: 20px; } code { background-color: #222; color:#ccc; border: none; } blockquote { border-left: 5px solid #222; } blockquote p { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; margin: 0; color: #333; height: 1%; } p { line-height: 1.9em; margin-bottom: 20px; font-size: 12px; } a { color: #F97B27; } a:hover { color: #E5620A; } a:focus { outline: none; } fieldset { display: block; border: none; border-top: 1px solid #ccc; } fieldset legend { font-weight: bold; font-size: 13px; padding-right: 10px; color: #333; } fieldset form { padding-top: 15px; } fieldset p label { float: left; width: 150px; } form input, form select, form textarea { padding: 5px; color: #333333; border: 1px solid #ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } form input.formbutton { color: #ffffff; font-weight: bold; padding: 6px 8px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; text-shadow:-1px -1px #CE5709; background: #F87B27 url('widget-images/frontpage-link.png') repeat-x scroll top left; border: none; width: auto; overflow: visible; } fieldset form input.formbutton { margin-left: 150px; } form.searchform p { margin: 5px 0; } span.required { color: #ff0000; } h1 { color: #000; font-size: 35px; font-family: Arial, Helvetica, sans-serif; padding: 0; background: none; border-bottom: none; text-transform: none; line-height: 1.0em; padding: 0 0 5px; } #body h1 { color: #D5570A; } h1 strong { font-weight: normal; } h2 { color: #000; font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif; font-size: 30px; letter-spacing: -0.25px; font-weight: bold; padding: 0 0 5px; margin: 0; } #body h2 { font-weight: normal; } h3 { color: #555; font-size: 18px; font-weight: normal; margin-bottom: 10px; font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif; } h4 { padding-bottom: 10px; font-size: 15px; color: #EE7524; } h5 { padding-bottom: 10px; font-size: 13px; color: #999; } ul, ol { margin: 0 0 35px 35px; } li { padding-bottom: 5px; } li ol, li ul { font-size: 1.0em; margin-bottom: 0; padding-top: 5px; } ul.styledlist { list-style: none; margin-left: 20px; } ul.styledlist li { background: #fff url('widget-images/list-item.gif') no-repeat scroll left center; padding-left: 15px; padding-bottom: 0; margin-bottom: 5px; } #container { width: 960px; margin: 0 auto; padding: 0px; } #header { padding: 0px 15px; margin: 0 auto; height: 111px; } #header h1 { padding: 0; } #header h1 a { color: #eee; padding-top: 40px; font-size: 40px; font-weight: normal; font-family: Lucida,"Lucida Sans",Geneva,Arial,sans-serif; text-decoration: none; letter-spacing: -3px; float: left; text-shadow: 1px 1px #111; } #header h1 a strong { color: #F87B27; } #header h2 { color: #999; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0; margin-left: 5px; margin-top: 50px; padding-bottom: 0; padding-left: 4px; } #nav { height: 50px; width: 960px; position: relative; z-index: 999; } #nav ul { list-style: none; padding: 0; margin: 0; height: 50px; } #nav ul ul { padding-top: 0; } #nav ul li { display: block; float: left; } #nav ul li a { display: block; color: #999; display: block; border-top: 3px solid #333; font-size: 14px; font-weight: bold; float: left; letter-spacing: 0.5px; font-family: Arial, Helvetica, sans-serif; padding: 17px 15px 17px; text-decoration: none; } #nav ul li a.has_submenu { background: transparent url('widget-images/submenu-item.gif') no-repeat scroll right center; padding-right: 30px; } #nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu { background-image: url('widget-images/submenu-item-hover.gif'); } #nav ul ul li a { float: none; width: 170px; } #nav ul li.selected li a { text-decoration: none; } #nav ul li.selected a, #nav ul li.selected a:hover, #nav ul li.selected li.selected a { color: #fff; border-top: 3px solid #F87B27; } #nav ul ul li.selected a, #nav ul ul li.selected a:hover { text-decoration: underline; } #nav ul li a:hover, #nav ul li.sfHover a, #nav ul ul a { color: #fff; background-color: #F87B27; border-top: 3px solid #F87B27; } #nav ul li li a:hover, #nav ul li.sfHover li a:hover { border-top: 3px solid #fff; background-color: #FBA770; } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 200px; /* left offset of submenus need to match (see below) */ margin-top: 10px; padding-top: 0; } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 49px; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /* front page slider styles */ div#jFlowSlide { margin:0 auto; } div#slides-static { padding: 40px 55px 0; width: 850px; } div.slides-container { height: 271px; overflow: hidden; width: 960px; padding-top: 40px; } div.slides-container div#jFlowSlide { height: 315px; } div.slides-container div.jFlowSlideContainer img { margin:auto; } div.slides-container div.jFlowSlideContainer div { } div.slides-container div.jFlowSlideContainer div.slide-image { float:left; width: 370px; padding-top: 0px; } span.jFlowPrev, span.jFlowNext { background-image:url('widget-images/slide-prev.gif'); background-repeat:no-repeat; display:block; height:41px; width:24px; float:left; margin:0; cursor:pointer; } span.jFlowPrev span, span.jFlowNext span { display:none; } span.jFlowNext { background-image:url('widget-images/slide-next.gif'); float:right; } div.slides-container div.controls { position:relative; top:-220px; width:960px; margin:0 auto; } div.slides-container p { padding-top: 10px; color: #eee; } div.slides-container a { color: #eee; } div.slides-container h2, div#sub-header h2 { font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif; color: #fff; text-shadow: 1px 1px #21441D; font-weight: normal; } div.slide-text { padding-top: 10px; } p.frontpage-button a { padding: 17px 20px; color: #fff; font-size: 14px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; text-shadow:-1px -1px #CE5709; background: #F87B27 url('widget-images/frontpage-link.png') repeat-x scroll top left; border: 1px solid #000; } p.frontpage-button a:hover { background: #E5620A none; color: #fff; } .hidden { display:none; } div#sub-header { height: 101px; } div#sub-header h2 { padding-top: 27px; } #body { background: none; margin:0 auto; padding: 20px 0 0; width: 960px; } #content { float: left; width: 635px; } .box { margin: 0; padding: 0 5px; background-color: #fff; } .sidebar { width: 280px; padding: 25px 0 0; float: right; } .sidebar ul { margin: 0; padding: 0; list-style: none; } .sidebar ul li { margin-bottom: 20px; line-height: 1.9em; } .sidebar li ul { padding: 10px; } .sidebar li ul li { display: block; border-top: none; padding: 6px 2px; margin: 0; line-height: 1.5em; font-size: 13px; border: none; } .sidebar li ul li a { font-weight: normal; color: #666; } .sidebar li ul li a:hover { color: #F87B27; } .sidebar li ul.blocklist { padding: 0; } .sidebar li ul.blocklist li { padding: 0; display: inline; } .sidebar li ul.blocklist li a { display: block; border-bottom:1px solid #e0e0e0; padding: 8px 10px; text-decoration: none; font-weight: bold; text-transform: uppercase; font-family: Lucida,"Lucida Sans",Geneva,Arial,sans-serif; font-size: 12px; } .sidebar li ul.blocklist li a:hover { color: #F87B27; } .sidebar h4 { color: #333; font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif; font-size: 16px; text-transform:uppercase; margin: 0; line-height: 1.9em; padding: 0px 0px 15px 5px; font-weight: bold; background: transparent url('widget-images/h4.png') no-repeat scroll left bottom; } .sidebar h4 strong { color: #F87B27; } .clear { clear: both; } #footer { margin:0 auto; background: #000 url('widget-images/footer.jpg') repeat-x scroll bottom left; padding: 30px 5px 0; } .footer-content { width: 960px; margin: 0 auto; display: block; padding-bottom: 30px; } #footer a { color: #999; text-decoration: underline; } #footer h4 { color: #ccc; font-size: 18px; font-weight: normal; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif; } #footer p { text-align: left; color: #999; font-size: 12px; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #footer form { margin: 0; padding: 0; } #footer form input#searchbutton { margin: 0; border-bottom: none; overflow:visible; width:auto; } #footer form input#searchquery { background-color: #333; color: #fff; font-family: Arial, Helvetica, sans-serif; border: none; padding: 6px 3px; } #footer ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #222; } #footer ul li { padding: 0; } #footer ul li a { display: inline-block; /* for IE 6, 7 */ } #footer ul li a { text-decoration: none; display: block; font-size: 11px; padding: 7px 10px; border-bottom: 1px solid #222; } #footer ul li a:hover { background-color: #111; } .footer-box { width: 220px; margin-right: 26px; float: left; } .end-footer-box { margin-right: 0; } #footer-links { background-color: #000; color: #ccc; padding: 5px; } div#footer-links p { text-align: right; padding: 0; margin: 0 auto; font-size: 10px; width: 960px; display: block; } #footer-links a { color: #eee; font-weight: bold; text-decoration: underline; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/slider.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript" src="js/custom.js"></script> <!-- widget, a free CSS web template by spyka Webmaster (www.spyka.net) Download: http://www.spyka.net/web-templates/widget/ License: Creative Commons Attribution //--> </head> <body> <div id="container"> <div id="header"> <h1><a href="/">Widget<strong>Website</strong></a></h1> <h2>Your website slogan here</h2> <div class="clear"></div> </div> <div id="nav"> <ul class="sf-menu dropdown"> <li><a href="index.html">Home</a></li> <li class="selected"><a class="has_submenu" href="examples.html">Examples</a> <ul> <li><a href="page.html">Static Text Page</a></li> <li><a href="noslides.html">Static Frontpage</a></li> <li><a href="#">Another link</a></li> </ul> </li> <li><a class="has_submenu" href="#">Products</a> <ul> <li><a href="#">Product One</a></li> <li><a href="#">Product Two</a></li> <li><a href="#">Product Three</a></li> </ul> </li> <li><a href="#">Solutions</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="sub-header"> <h2>A handful of HTML code examples</h2> </div> <div id="body"> <div id="content"> <div class="box"> <h2>Examples</h2> <h1>Heading H1</h1> <h2>Heading H2</h2> <h3>Heading H3</h3> <h4>Heading H4</h4> <h5>Heading H5</h5> <p> </p> <h3>Lists</h3> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> <p> </p> <h3>Code and blockquote</h3> <code><? echo('Hello world'); ?></code> <blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></blockquote> <p> </p> <h3>Table</h3> <table> <tbody><tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>1</td> <td>John Smith</td> <td>28</td> </tr> <tr> <td>2</td> <td>Fred James</td> <td>49</td> </tr> <tr> <td>3</td> <td>Rachel Johnson</td> <td>19</td> </tr> </tbody></table> <p> </p> <h3>Form</h3> <fieldset> <legend>Form legend</legend> <form action="#" method="get"> <p><label for="name">Name:</label> <input name="name" id="name" value="" type="text" /><br /></p> <p><label for="email">Email:</label> <input name="email" id="email" value="" type="text" /><br /></p> <p><label for="message">Message:</label> <textarea cols="60" rows="11" name="message" id="message"></textarea><br /></p> <p><input name="send" class="formbutton" value="Send" type="submit" /></p> </form> </fieldset> </div> </div> <div class="sidebar"> <ul> <li> <h4><span>Our <strong>Pages</strong></span></h4> <ul class="blocklist"> <li><a href="index.html">Home</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="#">Products</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li> <h4><span>About <strong>Us</strong></span></h4> <ul> <li> <p style="margin: 0;">Aenean nec massa a tortor auctor sodales sed a dolor. Duis vitae lorem sem. Proin at velit vel arcu pretium luctus.</p> </li> </ul> </li> <li> <h4 class="h4"><span>Cool <strong>Sites</strong></span></h4> <ul> <li><a href="http://www.themeforest.net/?ref=spykawg" title="premium templates"><strong>ThemeForest</strong></a> - premium HTML templates, WordPress themes and PHP scripts</li> <li><a href="http://www.dreamhost.com/r.cgi?259541" title="web hosting"><strong>Web hosting</strong></a> - 50 dollars off when you use promocode <strong>awesome50</strong></li> <li><a href="http://www.4templates.com/?aff=spykawg" title="4templates"><strong>4templates</strong></a> - brilliant premium templates</li> </ul> </li> </ul> </div> <div class="clear"></div> </div> </div> <div id="footer"> <div class="footer-content"> <div class="footer-box"> <h4>About our site</h4> <p> Morbi fermentum, nunc id pellentesque blandit, lectus velit pellentesque nisl, a condimentum est velit sed nisi. Sed libero velit, eleifend nec porttitor a, porta quis leo. In hac habitasse platea dictumst. </p> </div> <div class="footer-box"> <h4>Categories</h4> <ul> <li><a href="#">Lorem ipsum dolor sit amet.</a></li> <li><a href="#">Quisque consequat nunc a felis.</a></li> <li><a href="#">Suspendisse consequat magna at.</a></li> <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li> <li><a href="#">Sed in mauris non nibh.</a></li> </ul> </div> <div class="footer-box"> <h4>Network sites</h4> <ul> <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li> <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li> <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li> <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li> <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li> </ul> </div> <div class="footer-box end-footer-box"> <h4>Search our site</h4> <form action="#" method="get"> <p> <input type="text" id="searchquery" size="18" name="searchterm" /> <input type="submit" id="searchbutton" value="Search" class="formbutton" /> </p> </form> </div> <div class="clear"></div> </div> <div id="footer-links"> <!-- A link to http://www.spyka.net must remain. To remove link see http://www.spyka.net/licensing --> <p>© YourSite 2010. Website design by <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p> </div> </div> </body> </html>