Открытка

Открытка к Новому году для HTMLForum

by iKNG

HTML

<div class="main">
    <img src="http://4put.ru/pictures/max/793/2436699.jpg" class="title" />
 <div class="elka">
    <div class="starwrap">
    <div class="star"></div>
    </div>
    <div class="one"> </div>
    <div class="two"> </div>
    <div class="three"> </div>
</div>
    <div class="wrap"><div class="wrap2">
        <div class="video">
            <div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div>
            <div class="videoimg"><img src="http://4put.ru/pictures/max/793/2436694.jpg" /></div>
            <div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div>
        </div>
        <div class="video">
            <div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div>
            <div class="videoimg"><img src="http://4put.ru/pictures/max/793/2436691.jpg" /></div>
            <div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div>
        </div>
        <div class="video">
            <div class="videoelem"> </div><div class="videoelem"> </div><div class="videoelem"> </div><div...

CSS

.main {
    margin: 0 auto;
    width: 1000px;
    height: 1000px;
    background: #F2F2F2;
    position: relative;
}
.wrap {
    overflow: hidden;
    width: 1000px;
    height: 375px;
    white-space: nowrap;
    position: absolute;
    bottom: 100px;
    margin-top: 15px;
}
.wrap2 { 
    -webkit-animation: scroll 10s infinite linear;
    animation: scroll 10s infinite linear;
}
.title {
    display: block;
    width: 441px;
    margin: 0px auto;
    padding-top: 10px;
}
.video {
    border-top: 10px solid black;
    border-bottom: 10px solid black;
    background-color: black;
    display: inline-block;
    margin-right: -4px;
}
.videoelem {
    display: inline-block;
    margin-left: 15px;
    width: 25px;
    height: 25px;
    background-color: white;
}
.videoimg {
    width: 390px;
    padding: 0 5px;
}
@-webkit-keyframes scroll {
	0% { margin-left: 0; }
 	100% { margin-left: -2772px; }
}

@keyframes scroll {
	0% { margin-left: 0; }
 	100% { margin-left: -2772px; }
}
.snow {
    white-space: no-wrap;
    transform: rotate(180deg);
    overflow: hidden;
    width: 1000px;
    height: 40px;
}
.snow .snowelem {
    background-color: #FFFFFF;
    box-shadow: inset 0 0 10px 0 #cde9ff;
    float: left;
    position: relative;
    bottom: 40px;
    margin: 0 -3px;
}
.elka {
    position: absolute;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    margin-top: 50px;
}
.starwrap {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 10px;
}
.star {
   margin: 25px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  50px solid transparent;
   border-bottom: 35px  solid red;
   border-left:   50px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
.star:before {
   border-bottom: 40px solid red;
   border-left: 15px solid transparent;
   border-right: 15px solid...