Код:
<!--HTML-->
<div class="postcolor"> <div align="center">
<link href="http://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<style>
.gatorjournal1 { width: 550px; padding: 30px; background-image: url(http://falcon-eyes.ru/upload/iblock/8b8/8b8e715520d5bfb82e4cc68b4ce7c99e.jpg); box-shadow: 3px 2px 1px #9b9c9c;
border-top-right-radius:50px;border-top-left-radius:50px;border-bottom-right-radius:50px;border-bottom-left-radius:50px;}
.gatorjournal2 { font-family: 'courier'; opacity: .7;  font-size: 12px; line-height: 20px; color: #000000; text-align: justify; font-weight: 400; }
.gatorjournal2 b { color:#820000; }
.gatorjournal2 i { color: #093065; }
.gatorjournalspanb { font-family: 'Homemade Apple', cursive;  font-size: 25px; line-height: 25px; color: #820000; text-align: justify; font-weight: 400; }
.alywatermark { font-family: Arial; color:#820000; text-align: right; }
.alywatermark a { color: #820000; }
.alywatermark a:hover { color: #820000; }
</style>
<div class="gatorjournal1">
<div class="gatorjournal2">
<center> <font color="#820000"><font size="+2"<font face="Monotype Corsiva"> Занятые профессии </font></font></font><br>
 <font size="-1">При заполнении шаблона не забывайте указывать категорию</font></center>
</div>
</div>  </div>
Код:
<!--HTML-->
<div class="postcolor"> <link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic,900italic|Bree+Serif" rel="stylesheet" type="text/css"><style type="text/css">

/*  EAEEDF A8BBCC, 5372A1, 263E6E, 131732 */

.jgcontainer {
 margin: 20px auto; 
 height: 400px;
 width: 410px;
 background-image:url('http://falcon-eyes.ru/upload/iblock/8b8/8b8e715520d5bfb82e4cc68b4ce7c99e.jpg');
 font: normal normal normal 11px/105% 'Bree Serif', Calibri;
 text-align: justify;
 color: #000;
 overflow: hidden;
 border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;
}

.jgtabs {
 margin: 0px 0px 0px 30px; 
 position: relative;
 width: 350px; 
 height:  300px;
 top: 20px;
}

.jgtab {
 display: block; 
}


.jgtab label {
 display: block; 
 width: 15px;
 height: 15px;
 background: #131533;
 border: 1px solid #3f415e;
 margin: 0px 0px 10px;
 position: relative;
 top: 50px;
 left: 354px;
 z-index: 2;
 border-radius: 45%
}

.jgtab input[type=radio]:checked ~ label {
 background: white;
 z-index: 2;
}

.jgtab input[type=radio] {
 display: none; 
}

/* if you want tab transitions they go here */
.jgcontent {
 position: absolute;
 top: 230px;
 bottom: px;
 left: 0px;
 right: 0px;
 padding: 0px 3px;
 background: #cfcfcf;
 border: 20px solid #cfcfcf;
 overflow: auto;
 opacity: 0;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

/* if you want tab transitions they also go here */
.jgtab input[type=radio]:checked ~ label ~ .jgcontent {
 z-index: 1;
 left: 0px;
 top: 0px;
 opacity: 1;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

.jgtab input[type=radio]:checked ~ label ~ .jgcontainerheader {
 opacity: 1;
 left: -140px;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

.jgcontainerheader {
  width: 250px;
  height: 30px;
  margin: 0px;
  font: italic bold normal 25px/30px 'Playfair Display', 'Times New Roman';
  text-align: left;
  text-transform: lowercase;
  color: #3f415e;
  text-shadow: 1px 1px 0px black;
  position: absolute;
  top: 80px; 
  left: -170px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  z-index: 3;
  opacity: 0;
}

.jgcontainer h1 {
  margin: 4px 0px;
  padding: 3px;
  font: normal normal normal 15px/100% 'Bree Serif', 'Times New Roman';
  text-transform: uppercase;
  text-align: center;
  color: #6b6d8a;
  background-color: #F5DEB3;
}

.jgcontainer h1:nth-of-type(1) { margin-top: 0px; }

.jgcontainer ::-webkit-scrollbar { background: #EAEEDF; width: 3px; }
.jgcontainer ::-webkit-scrollbar-thumb { background: #A8BBCC; width: 3px }
.jgcontainer ::-webkit-scrollbar-corner { background: #fff; }

.jgcontainer a:link, .jgcontainer a:active, .jgcontainer a:visited, .jgcontainer a:hover {
  color: #5372A1;
  text-decoration: none;
  font-style: none;
  font-weight: normal;
  letter-spacing: 1px;
  transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
}

.jgcontainer a:hover { color: #e8e8ea!important; }

</style>

<div class="jgcontainer">

<div class="jgtabs">


<div class="jgtab">
<input type="radio" id="jgtab-1" name="jgtab-group-1" checked="">
<label for="jgtab-1"> <!-- Tab One !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Наука и образование </b></h1>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-2" name="jgtab-group-1">
<label for="jgtab-2"> <!-- Tab Two !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Радио- и телевещание</b></h1>
</div>
</div>


<div class="jgtab">
<input type="radio" id="jgtab-3" name="jgtab-group-1">
<label for="jgtab-3"> <!-- Tab Three !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Муниципальные организации</b></h1>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-4" name="jgtab-group-1">
<label for="jgtab-4"> <!-- Tab Four !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Закон и порядок</b></h1>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-5" name="jgtab-group-1">
<label for="jgtab-5"> <!-- Tab Five !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Шоу -бизнес и искусство </b></h1>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-6" name="jgtab-group-1">
<label for="jgtab-6"> <!-- Tab Six !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Сфера услуг</b></h1>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-7" name="jgtab-group-1">
<label for="jgtab-7"> <!-- Tab Seven !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">

<h1><b>Криминал и беззаконие </b></h1>

</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-8" name="jgtab-group-1">
<label for="jgtab-8"> <!-- Tab Eight !--> </label>
<div class="jgcontainerheader">профессии</div>
<div class="jgcontent">
<h1><b>Остальное</b></h1>


</div>
</div>


</div>

</div>  </div>
Код:
—<a href="ссылка на ваш профиль">место работы\должность </a>-  <i> имя фамилия персонажа</i><br>