Код:
<!--HTML-->
<div id="blinkapp2">
<div class="blink ">
<style>
.pod1 {
position: absolute;
width: 276px; /*ширина полки*/
height: 62px; /*высота полки*/
overflow-x: auto;
overflow-y: none;
white-space: nowrap;
margin-left: 96px!important; /*меняем положение где будут находится подарки по горизонтали*/
margin-top: 342px!important; /*меняем положение где будут находится подарки по вертикали*/
padding: 0px 3px;
}
</style>
<div class="pod1">
<img title="текст всплывающего окошка" src="ссылка на подарок" style="opacity: 1;">
<img title="текст всплывающего окошка" src="ссылка на подарок" style="opacity: 1;">
<img title="текст всплывающего окошка" src="ссылка на подарок" style="opacity: 1;">
<img title="текст всплывающего окошка" src="ссылка на подарок" style="opacity: 1;">
<img title="текст всплывающего окошка" src="ссылка на подарок" style="opacity: 1;">
</div></div>
</div></div>
</div>
<style type='text/css'>
.escredit {
float:right;
margin-top:5px;
font-size:12px;
margin-right:-10px;
}
.escredit a {
color:#!important;
}
.blinkcontain {
width:532px;
padding:20px;
height:735px;
margin:auto;
border-radius: 25px;
background-image:url('http://funkyimg.com/i/2h9nd.png')!important;
}
#blinkapp {
width:500px;
padding:15px;
margin:auto;
margin-top:10px;
height:162px;
background:#;
background-image:url('')!important;
background-size:1050px;
background-positioN:-1px -1px;
overflow:hidden;
border-radius: 25px;
padding: 15px 10px 12px 10px;
background: #fdf2d8;
-webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176, 56), 0px 0px 3px 0px #f7b038;
-moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176, 56, 0.6), 0px 0px 3px 0px #f7b038;
box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px #f7b038;
border: none;
}
#blinkapp2 {
width:500px;
padding:15px;
margin:auto;
margin-top:30px;
height:472px;
background-size:1050px;
background-positioN:-1px -1px;
border-radius: 100px;
text-shadow: #ffffff 1px 1px;
padding: 15px 10px 12px 10px;
background: #fdf2d8;
-webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176, 56), 0px 0px 3px 0px #f7b038;
-moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176, 56, 0.6), 0px 0px 3px 0px #f7b038;
box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px #f7b038;
border: none;
}
.blink {
width:450px;
padding:15px;
margin:auto;
margin-top:10px;
height:452px;
overflow:auto;
color:#000000!important;
}
#blinkapp img {
float:right;
width:150px;
height:150px;
border:1px solid;
padding:5px;
padding-right:55px;
box-shadow:1px 1px 5px rgba(247,176,56, 0.6);
}
#blinkapp input {
display:none;
}
#blinkapp label {
font-family:typicons;
font-size:25px;
display:block;
float:right;
background:#f7b038;
width:30px;
padding:10px;
height:30px;
text-align:center;
line-height:30px;
margin-right:-206px;
cursor:pointer;
}
#app1+label {
float:right;
margin-top:6px;
background:;
}
#app2+label {
margin-top:56px;
background:;
}
#app3+label {
margin-top:106px;
}
#blinkapp input:checked+label {
background:rgba(251,223,175 ,0.6);
}
#app1:checked ~ .blinkname {
font-family:arial black;
text-transform:uppercase;
font-size:19px;
line-height:13px;
margin-top:65px;
width:272px;
letter-spacing:-.8px;
text-align:right;
}
#app3:checked ~ .taginfo {
margin-top:-180px;}
#app3:checked ~ .blinkalias {
margin-top:0px;
font-size:19px;}
.blinkname {
font-family:arial black;
text-transform:uppercase;
font-size:15px;
line-height:13px;
margin-top:-114px;
width:272px;
letter-spacing:-.8px;
text-align:right;
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
}
.blinknamesmall {
border-top:1px solid #f7b038;
width:272px;
margin-top:5px;
padding-top:5px;
font-size:9px;
line-height:11px;
color:#ccc;
letter-spacing:2px;
font-family:cousine;
letter-spacing:0px;
text-align:right;
height:90px;
}
.taginfo {
float:left;
width:272px;
height:158px;
padding:1px;
}
.taginfo ul {
padding:4px;
margin:4px;
height:140px;
list-style:none;
border-radius: 15px;
background: #fdf2d8;
-webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176, 56), 0px 0px 3px 0px #f7b038;
-moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176, 56, 0.6), 0px 0px 3px 0px #f7b038;
box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px #f7b038;
border: none;
}
.taginfo li {
display:inline-block;
color:#8a1d00;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border-bottom:1px solid #f7b038;
padding:3px;
height:11px;
line-height:18px;
width:240px;
margin-bottom:-10px;
}
.taginfo li:nth-child(even) {
float:right;
width:100px;
border-bottom:0px;
height:10px;
line-height:10px;
font-size:8px;
text-align:right;
letter-spacing:0px;
border-top:4px solid #f7b038;
}
.blinkalias {
font-family:arial black;
text-transform:uppercase;
font-size:15px;
line-height:133px;
margin-top:114px;
width:272px;
height:100px;
text-shadow: .4px .4px 0px #000, -.4px -.4px #000, .4px -.4px #000, -.4px .4px #000;
letter-spacing:-.5px;
text-align:right;
-webkit-transition:.3s;
}
.blinkaliassmall {
border-top:1px solid #f7b038;
width:272px;
margin-top:-55px;
padding-top:5px;
font-size:9px;
line-height:11px;
color:#666;
letter-spacing:2px;
font-family:;
text-align:right;
height:90px;
color:#8a1d00;
letter-spacing:2px;
font-family:cousine;
letter-spacing:0px;
}
.writing-section {
position:relative;
z-index:2;
float:left;
overflow:auto;
border:17px solid transparent;
width:449px;
height:169px;
margin-top:7px;
font-size:10.5px!important;
text-transform:uppercase;
color:#aaa;
margin-left:-1px;
letter-spacing:-.4px!important;
text-align:justify;
line-height:13px!important;
-webkit-columns: 165px;
-moz-columns: 165px;
-ms-columns: 165px;
-o-columns: 165px;
columns: 165px;
-webkit-column-gap: 17px;
-moz-column-gap:17px;
-ms-column-gap:17px;
-o-column-gap:17px;
column-gap:17px;
-webkit-transition:.6s;
-moz-transition:.6s;
-ms-transition:.6s;
-o-transition:.6s;
}
.blinkbottom input {
display:none;
}
.blinkbottom {
height:217px;
border:1px solid #666;
background-image:url('')!important;
padding-left:8px;
background-size:1050px;
background-positioN:-1px -1px;
border:1px solid #444;
margin-top:5px;
overflow:hidden;
}
#bottomblink+label {
height:20px!important;
line-height:20px!important;
color:#999;
width:194px;
position:absolute;
background:#222;
margin-top:93px!important;
margin-bottom:-167px;
float:right;
color:transparent;
margin-left:395px!important;
background:rgba(0,0,0,0.4);
font-family:arial black;
text-transform:uppercase;
color:#999;
cursor:pointer;
text-aligN:center;
padding:5px;
font-size:15px;
letter-spacing:-.6px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
#bottomblink+label::before {
content:"view app";
}
.writing-section2 {
positioN:relative;
z-index:0;
opacity:0;
float:left;
background:rgba(0,0,0,0.8);
overflow:auto;
border:17px solid transparent;
width:449px;
height:169px;
margin-top:-203px;
font-size:10.5px!important;
text-transform:uppercase;
color:#aaa;
margin-left:-50px;
letter-spacing:-.4px!important;
text-align:justify;
line-height:13px!important;
-webkit-columns: 165px;
-moz-columns: 165px;
-ms-columns: 165px;
-o-columns: 165px;
columns: 165px;
-webkit-column-gap: 17px;
-moz-column-gap:17px;
-ms-column-gap:17px;
-o-column-gap:17px;
column-gap:17px;
-webkit-transition:.6s;
-moz-transition:.6s;
-ms-transition:.6s;
-o-transition:.6s;
}
.blinkname {
text-shadow: .4px .4px 0px #000, -.4px -.4px #000, .4px -.4px #000, -.4px .4px #000;
}
.outerbottomblink {
border:1px solid;
padding:25px;
width:320px;
margin-left:159px;
margin-top:5px;
text-align:justify;
font-size:9px;
letter-spacing:-.2px;
text-transform:uppercase;
line-height:11px;
overflow:hidden;
}
.outerbottomblink input {
display:none;
}
.outerbottomblink label {
position:absolute;
margin-left:-162px;
text-transform:uppercase;
letter-spacing:.5px;
font-size:10px;
border-bottom:1px solid #8a1d00;
width:100px;
cursor:pointer;
}
.outerbottomblink input:checked+label {
border-bottom:1px solid;
}
.outerbottomblink input:checked+label::after {
border-bottom:1px dashed;
}
.outerbottomblink label::after {
content:"";
display:block;
position:absolute;
border-bottom:1px dashed #8a1d00;
width:51px;
margin-left:92px;
margin-top:18px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
.outerbottomblink label::before {
content:"//:";
color:#999!important;
letter-spacing:-1px;
margin-right:5px;
}
#blinktab2+label {
margin-top:40px;
}
#blinktab1:checked ~ .bottomblinkwrite {
color:#999;
z-index:2;
opacity:1;
}
#blinktab2:checked ~ .bottomblinkwrite2 {
color:#999;
z-index:2;
opacity:1;
}
</style>

