JSFiddle - React, Tailwind, and code Playground

by stan07

HTML

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>макет студии</title>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jQuery-1.8.1.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/click-carousel.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<!--[if lt IE 9]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->  
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
</script>
<![endif]--><!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css">
<![endif]-->
<body>
    <div id="wrapper"> 
      <!--start status_bar-->
      <section id="status_bar">
        <header>
          <h1 class="logo"><a href="#"><img src="images/logo.png" alt="#"></a></h1>
        </header>
        <nav id="top_menu">
               <ul>
                <li><a class="first" href="#">главная</a></li>
                <li class="divider">&nbsp;</li>
                <li><a class="act" href="#">работы</a></li>
                <li class="divider">&nbsp;</li>
                <li><a href="#">услуги</a></li>
                <li class="divider">&nbsp;</li>
                <li><a href="#">о компании</a></li>
                <li class="divider">&nbsp;</li>
                <li><a class="last" href="#">контакты</a></li>
              </ul>
        </nav>
      </section>
      <!--end status_bar--> 
      
      <!--start header-->
      <section id="header">
          <article>
            <hgroup>
                <h1>Добро пожаловать на BMG.TJ</h1>
                <h2>Что мы умеем ?</h2>
            </hgroup>
            <ul>
                <li>Создавать сайты,</li>
               <li>интернет реклама,</li>
               <li>продвижение сайта,</li>
               <li>видео съемка,</li>
               <li>сценарии,</li>
               <li>профессиональные фотосесии,</li>
               <li>рекламные компании.</li>
 ...

CSS

@import url(reset.css);
/*start General*/
header, nav, section, article, aside, footer {
    display:block;
}
body {
    background:url(../images/body-bg.jpg) repeat;
    font-family:Verdana, Geneva, sans-serif;
}
a {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
#wrapper {
    width:1000px;
    margin:auto;
}
/*end General*/

/*start status_bar*/
#status_bar {
    position:relative;
    overflow:hidden;
    height:87px;
}
#status_bar h1 {
    padding:30px 0 0 25px;
    float:left;
}
#top_menu {
    float:right;
}
#top_menu li {
    float:left;
}
#top_menu li.divider {
    background:url(../images/top-menu-li-divider.png) no-repeat;
    width:3px;
    height:52px;
}
#top_menu a {
    font-size:16px;
    color:#f7cbcb;
    padding:0 30px;
    line-height:52px;
    background:url(../images/top-menu-li.png) repeat-x;
    height:52px;
    display:block;
    text-shadow: 1px 1px 1px #610200;
}
#top_menu a.first {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:0 0 0 10px;
}
#top_menu a.last {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:0 0 10px 0;
}
#top_menu a:hover, #top_menu a.act {
    background:url(../images/top-menu-li-hover.png) repeat-x;
}
/*end status_bar*/

/*start header*/

#header {
    overflow:hidden;
    position:relative;
    background:url(../images/header_bg.png) no-repeat 0 6px;
    height:279px;
    margin:0 -4px;
}
#header article {
    text-shadow: 1px 1px 1px #610200;
    float:left;
    color:#fff;
    margin-top:37px;
    margin-left:32px;
}
#header h1 {
    font-size:23px;
    height:38px;
}
#header h2 {
    font-size:23px;
    height:38px;
}
#header li {
    background:url(../images/header_li-arrow.png) no-repeat 0 8px;
    padding-left:12px;
    line-height:20px;
    font-size:13px;
    font-style:italic;
}
/*Coin Slider*/
.coin-slider {
    overflow: hidden;
    zoom: 1;
    position: relative;
}
.cs-buttons a {
    margin-left: 5px;
   ...

JavaScript

$(document).ready(function() { 
//coin-slider
if (jQuery.browser.msie == true)
jQuery("#coin-slider").coinslider({    
    spw: 5,
    sph: 5,
    width:481,
    height:195
})
else
jQuery("#coin-slider").coinslider({    
    spw: 8,
    sph: 8,
    width:481,
    height:195
});

//click-carusel
$(function(){
    $("#container").clickCarousel({margin: 10});    
});

}); //Конец ready