JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div id="chalenge_banner">
<div class="container" style="position: relative; padding: 16px 0 11px 0; ">
    <img width="400" height="280" id="chal_pic" style="position:absolute; top:0; margin: 0;" src="http://auto38.net/attach/contest_photo.jpg" alt="" />
    <div class="txt" style="font-size: 1.2em; margin:0 0 0 425px;">
        <p style="float: left;max-width:280px; margin: 0 0 8px;">
            <span style="color: rgb(255, 0, 0);">Внимание!</span> С 1 по 15 октября 2012 года cайт <strong>auto38.net</strong> проводит конкурс на лучшую фотографию &laquo;Леди и авто&raquo;!</p>
        <div id="btn_box">
            <a class="btn" href="http://contest.auto38.i-dl.ru/konkurs">Подробнее о конкурсе</a>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
</div>
<div class="clear">&nbsp;</div>
   </div>

CSS

#chalenge_banner{
    min-width: 705px;
    width: 76%;
    float: left;
    margin: 0 0 20px 2%;
    overflow: hidden;
}
#chalenge_banner{
    margin: 0 0 20px 2%;
}
.ban_hr{
    min-width: 705px;
    width: 76%;
    float: left;
    overflow: hidden;
    margin: 0 0 20px 2%;
}
.ban_hr hr{margin: 0;s}
.container .txt, #chalenge_banner .container .txt{
    font-size: 1.2em;
    margin:0 0 0 425px;
}
#btn_box {
    float: left;
    margin: 3px 0 0 25px;
}
#chalenge_banner a.btn{
    display: block;
    width: 126px;
    padding: 5px 25px 6px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    background: url("http://auto38.net/tpl/_site/_img/button_bg.png") repeat-x scroll 0 0 #169AA0;
    border: 1px solid #4A8A8C;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    
}
#chalenge_banner a.btn:hover{
    background: #3ae6eb;
}
.banner >.adm{
    overflow: hidden;
}
.banner{
    overflow: hidden;
}

.item{
    float: left;
    width: 32%;
    overflow: hidden;
    word-wrap: break-word;
    margin: 0 0 0 2%;
}
.item:first-child{
    margin: 0;
}
.item .img{
    float: left;
    margin: 0 10px 0 0;
}
.item .txt{
    overflow: hidden;
}
.item .txt a, #html_banner .item .txt p, #html_banner .item .txt span{
    line-height: 1.2em;
}
.item .txt a{
    font-weight: bold;
}
.item .txt p{
    margin: 4px 0;
}
.item .txt span.link{
    color: #336600;
}
.banner > .adm{
    position: relative;
    z-index: 1;`
}

#content {
    margin: 0 0 0 2%;
    width: 61%;
    min-width: 560px;
    position: relative;
    float: left;
}

JavaScript

$(function () {
    scrollUp();

    function scrollUp() {
        $('#chal_pic').animate({top: '-=130'}, 8000, 'swing', function () { setTimeout(scrollDown, 1000); });
    }
    function scrollDown() {
        $('#chal_pic').animate({top: '+=130'}, 8000, function () { setTimeout(scrollUp, 1000); });
    }
});