<!--HTML-->
<div style="color:#430709; border:#7f3943;"><div class="blinkcontain"><div id="blinkapp"><img src="ваша картинка">
<input type="radio" id="app1" name="app" checked>
<label for="app1"></label>
<input type="radio" id="app2" name="app">
<label for="app2"></label>
<input type="radio" id="app3" name="app">
<label for="app3"></label>
<div class="blinkname">имя на английском языке</div><div class="blinknamesmall"></div>
<div class="taginfo"><ul><li><b> имя на русском языке</b></li><li>имя</li><li><b>текст</b></li><li>дата рождения,возраст</li><li><b>текст</b></li><li>место рождения</li><li><b>текст</b></li><li>профессия</li><li><b>текст</b></li><li>ориентация</li></ul></div>
<div class="blinkalias">связь<div class="blinkaliassmall"></div></div></div>

<div id="blinkapp2">
<div class="blink ">
биография </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/2Nhdg.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:#7f3943;
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 #7f3943;
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 #7f3943;
}
.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 #7f3943;
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>