Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style type="text/css">.carriedtabs { width: 550px; height: 500px; position: relative; }
.carriedtabs { position: relative; width: 550px; height: 500px; }
.carriedtw { width: 550px; height: 500px; position: relative; z-index: 1 }
.carriedtab { width: 550px; height: 50px;top: -50px; }
.carriedtab label { width: 110px;display: block; position: absolute; top: -50px; opacity: 1; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(grayscale.svg); filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; }
.carriedtab label:hover {opacity: 1; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: none; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; cursor: crosshair }
.carriedtab [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.carriedtab [type=radio]:checked ~ label { z-index: 6; opacity: 1; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: none; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; }
.carriedtab [type=radio]:checked ~ label ~ .carriedc { z-index: 6; opacity: 1; top: 0px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); -ms-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); transform: rotate(0deg) scale(1) skew(0deg) translateY(0px); }
.carriedtab [type=radio]:checked ~ label ~ .carriedhname, .carriedtab [type=radio]:checked ~ label ~ .carriedhinfo { z-index: 6; opacity: 1; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
.ctab1 { color: #004a2a; height:50px; width:100px; font-family:Playfair Display SC;font-size: 12px; }
.ctab2 { color: #004a2a;height:50px; width:100px; font-family:Playfair Display SC;font-size: 12px; }
.carriedc { width:530px; padding: 10px;height: 430px;position: absolute;font-family:Neucha; top: -50px; overflow:auto; opacity: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg) scale(0) skew(0deg) translateX(0px); -moz-transform: rotate(0deg) scale(0) skew(0deg) translateX(0px); -ms-transform: rotate(0deg) scale(0) skew(0deg) translateX(0px); -o-transform: rotate(0deg) scale(0) skew(0deg) translateX(0px); transform: rotate(0deg) scale(0) skew(0deg) translateX(0px); }
</style><center><div class="orgtbody"><div class="orgthead">occupation</div><div style="height: 20px;"></div>
<center><div class="orgcontent">Все профессии нужны, все профессии важны. Ничего страшного, если вы хотите стать учителем, а эта должность уже занята - у нас большой город со множеством школ, в которых преподает еще больше учителей. Аналогично с полицейскими участками и пожарными частями. Так что не пугайтесь и смело занимайте ту профессию, которую хотите. И помните - в Лондоне найдется место каждому!
</div>
<div style="height: 20px;"></div></div><div style="height: 20px;"></div>
<center>
<div style="width:550px; height:550px; border:10px double #c7c4cd; ">
<div style="height:50px;"></div>
<div class="carriedtabs">
<div class="carriedtw">
<div class="carriedtab"><input type="radio" id="tab3-1" name="tab3-group-1" checked><label for="tab3-1" style="color: #004a2a; margin-left: 0px; background-color: #dbdbdb;">
<div class="ctab1">госслужба и охрана порядка</div>
</label>
<div class="carriedc">
<table><td></td><td></td></table>
</div>
</div>
<div class="carriedtab"><input type="radio" id="tab3-2" name="tab3-group-1"><label for="tab3-2" style="color: #004a2a; margin-left: 110px;background-color: #a1a1a1; ">
<div class="ctab2">социальная сфера и обслуживание</div>
</label>
<div class="carriedc">
<table><td></td><td></td></table>
</div>
</div>
<div class="carriedtab"><input type="radio" id="tab3-3" name="tab3-group-1"><label for="tab3-3" style="color: #004a2a; margin-left: 220px; background-color: #dbdbdb;">
<div class="ctab1">искусство и развлечения</div>
</label>
<div class="carriedc">
<table><td></td><td></td></table>
</div>
</div>
<div class="carriedtab"><input type="radio" id="tab3-4" name="tab3-group-1"><label for="tab3-4" style="color: #004a2a; margin-left: 330px;background-color: #a1a1a1; ">
<div class="ctab2">бизнес и финансы</div>
</label>
<div class="carriedc">
<table><td></td><td></td></table>
</div>
</div>
<div class="carriedtab"><input type="radio" id="tab3-5" name="tab3-group-1"><label for="tab3-5" style="color: #004a2a; margin-left: 440px; background-color: #dbdbdb;">
<div class="ctab1">другое</div>
</label>
<div class="carriedc">
<table><td></td><td></td></table>
</div>
</div>
</div>
</div>
</center>
Код:
место работы/учебы - <a href="ссылка на ваш профиль"><i>ваш ник на латинице</i></a><br>
