Код:
<!--HTML--><link rel="stylesheet" type="text/css" href="http://accicodes.b1.jcink.com/uploads/accicodes/breeze.css">
<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<div class="breezecontainer">
<div class="breezetabs">
<div class="breezetab">
<label for="breezetab-1"><img src="50X50 SQUARE GIF/IMG HERE. IT WILL RESIZE HOWEVER" style="height: 50px">
</label>
<div class="breezecontent">
<div class="breezetd" style="border: 5px solid #c27879;"><style type="text/css"> /* MINI PROFILE BY DARREN CRISS AKA BECKY */
.minign2 { padding: 10px; width: 120px; background-color: #a32727; font-family: cuprum, sans-serif; font-size: 13px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; margin-bottom: 10px; }
.miniage02 { padding: 5px; width: 120px; font-family: Kaushan Script; font-size: 60px; text-align: center; color: #a32727; text-transform: uppercase; line-height: 100%; font-weight: 700; margin-bottom: 10px; }
.miniage20 { letter-spacing: 2px; padding: 10px; width: 120px; background-color: #a32727; font-family: 'cuprum'; font-size: 9px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 400; margin-bottom: 10px;}
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'><div class="minign2"> Love & Family</div><div class="miniage02">42</div><div class="miniage20"> баллы </div>
<div class="breezefof" style="top: 58.5%">SHINee</div>
<div class="breezefof" style="top: 66.5%">22</div>
<div class="breezefof" style="top: 74.5%">сын мэра</div>
<div class="breezefof" style="top: 82.5%">безработный</div>
<div class="breezefof" style="top: 90.5%">♥ Kim Jongin</div>
</div>
<div class="breezep"><img src="http://funkyimg.com/i/22NgA.gif" style="-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; height: 120px; border: 4px solid #9e4a47;"></div>
<div class="breezena"><font style="color: #6b7d7b">Lee</font> <font style=" color: #292626">Taemin</font></div>
<a href="link"><div class="breezefo" style="top: 66.5%">дневник</div></a>
<a href="link"><div class="breezefo" style="top: 74.5%">инстаграм</div></a>
<a href="link"><div class="breezefo" style="top: 82.5%">анкета</div></a>
<a href="link"><div class="breezefo" style="top: 90.5%">отношения</div></a>
</div>
</div>
<div class="breezel">Taemin - Soldier
</div>
</div>
<style type="text/css">.breezecontainer {
margin: 10px auto;
height: auto;
width: auto;
}
.breezetabs {
margin: 0px auto;
position: relative;
width: 350px;
height: 500px;
background-color: #9c4946;
border: 10px solid #e0c5d6;
box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
cursor: crosshair;
}
.breezetab {
float: left; /* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */
}
/* position your tab labels in here - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */
.breezetab label {
display: block; /* this lets you fix the label dimensions */
width: 285px;
height: 50px;
background: transparent;
border: 5px solid #fff;
margin: 10px;
position: relative;
left: 15px;
top: 10px;
z-index: 1;
cursor: crosshair;
}
.breezetab input[type=radio]:checked ~ label {
background: transparent;
z-index: 2;
}
.breezetab input[type=radio] {
display: none;
}
.breezecontent {
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
border: 1px solid #ccc;
height: 320px; width: 350px;
}
/* if you want tab transitions they also go here */
.breezetab input[type=radio]:checked ~ label ~ .breezecontent {
z-index: 1;
}
.breezetd {height: 280px; width: 140px; padding: 5px; position: absolute; top: 10px; left: 10px; font-family: verdana, arial, sans-serif; font-size: 10px; overflow: auto; color: #333; line-height: 11px; text-align: justify}
.breezetd h1 {font-family: fugaz one; color: #292626; font-size: 22px}
.breezetd h1::first-letter {color: #6b7d7b}
.breezetd h2 {font-family: fugaz one; color: #292626; font-size: 22px}
.breezetd h2::first-letter {color: #9e4a47}
.breezetd a {color: #523436; text-decoration: none; text-transform: uppercase; font=size: 8px; letter-spacing: 1px; font-weight: 700}
.breezetd::-webkit-scrollbar {width: 0px}
.breezep {height: 120px; width: 120px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 56.5%; top: 15px}
.breezena {font-family: Kaushan Script; width: 48%; height: 30px; text-align: center; font-size: 32px; position: absolute; left: 50%; top: 47%; line-height: 12px; text-transform: lowercase}
.breezefo {height: 20px; line-height: 20px; width: 47%; color: #fff; font-family: verdana, arial; text-align: center; text-transform: uppercase; background-color: #9e4a47; position: absolute; left: 50.5%; font-size: 9px; letter-spacing: 2px}
.breezefof {height: 20px; line-height: 20px; width: 140px; color: #fff; font-family: verdana, arial; text-align: center; text-transform: uppercase; background-color: #9e4a47; position: absolute; font-size: 9px; letter-spacing: 2px}
.breezefo a {color: #fff; text-decoration: none; background-color: #6b7d7b}
.breezefo:hover {background-color: #6b7d7b}
.breezefof a {color: #fff; text-decoration: none; background-color: #6b7d7b}
.breezefof:hover {background-color: #6b7d7b}
.breezel {width: 95%; height: auto; position: absolute; left: 2.5%; bottom: 6%; font-family: Kaushan Script; text-transform: lowercase; color: #fff; text-align: center; font-size: 25px}
.breezel a {color: #fff; text-decoration: none}</style>
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
