У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается

urie!twentyonewentz

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » urie!twentyonewentz » какие-то коды » ваав


ваав

Сообщений 1 страница 13 из 13

1

авв
орор

0

2

хоп

0

3

идеальные вкладки
Код:
<--HTML-->
<section class="tabs">
	<input id="tab_1" type="radio" name="tab" checked="checked" />
	<input id="tab_2" type="radio" name="tab" />
	<input id="tab_3" type="radio" name="tab" />
	
	<label for="tab_1" id="tab_l1">Tab One</label>
	<label for="tab_2" id="tab_l2">Tab Two</label>
	<label for="tab_3" id="tab_l3">Tab Three</label>
	<div style="clear:both"></div>

	<div class="tabs_cont">
    <div id="tab_c1">Content of first tab</div>
    <div id="tab_c2">Content of first second</div>
    <div id="tab_c3">Content of third tab</div>
	</div>
</section>
<style>
.tabs {
	position: relative;
	margin: 0 auto;
	width: 800px;
}
.tabs label {
	color: #555;
	cursor: pointer;
	display: block;
	float: left;
	width: 150px;
	height: 45px;
	line-height: 45px;
	position: relative;
	top: 2px;
	text-align: center;
}

.tabs input {
	position: absolute;
	left: -9999px;
}

#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
	background: #fff;
	border-color: #fff;
	top: 0;
	z-index: 3;
}

.tabs_cont {
	background: #fff;
	position: relative;
	z-index: 2;
	height: 230px;
}
.tabs_cont > div {
	position: absolute;
	left: -9999px;
	top: 0;
	opacity: 0;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
	position: static;
	left: 0;
	opacity: 1;
}
</style>

0

4

Код:
<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
<style type="text/css">
 @-webkit-keyframes scarlettimg { 0% {background-color: #A50D0F;} 15% {background-color: #A50D95;} 30% {background-color: #200DA5;} 45% {background-color: #0DA0A5;} 60% {background-color: #30A50D;} 75% {background-color: #A5950D;} 95% {background-color: #A5480D;} } 
@-moz-keyframes scarlettimg {  0% {background-color: #A50D0F;} 15% {background-color: #A50D95;} 30% {background-color: #200DA5;} 45% {background-color: #0DA0A5;} 60% {background-color: #30A50D;} 75% {background-color: #A5950D;} 95% {background-color: #A5480D;} } 
@keyframes scarlettimg {  0% {background-color: #A50D0F;} 15% {background-color: #A50D95;} 30% {background-color: #200DA5;} 45% {background-color: #0DA0A5;} 60% {background-color: #30A50D;} 75% {background-color: #A5950D;} 95% {background-color: #A5480D;} } 


 @-webkit-keyframes scarlettimg1  { 30% {background-color: #A50D0F;} 45% {background-color: #A50D95;} 60% {background-color: #200DA5;} 75% {background-color: #0DA0A5;} 95% {background-color: #30A50D;} 5% {background-color: #A5950D;} 15% {background-color: #A5480D;} } 
@-moz-keyframes scarlettimg1 { 30% {background-color: #A50D0F;} 45% {background-color: #A50D95;} 60% {background-color: #200DA5;} 75% {background-color: #0DA0A5;} 95% {background-color: #30A50D;} 5% {background-color: #A5950D;} 15% {background-color: #A5480D;} } 
@keyframes scarlettimg1 { 30% {background-color: #A50D0F;} 45% {background-color: #A50D95;} 60% {background-color: #200DA5;} 75% {background-color: #0DA0A5;} 95% {background-color: #30A50D;} 5% {background-color: #A5950D;} 15% {background-color: #A5480D;} } 


 @-webkit-keyframes scarlettimg2  { 60% {background-color: #A50D0F;} 75% {background-color: #A50D95;} 95% {background-color: #200DA5;} 5% {background-color: #0DA0A5;} 15% {background-color: #30A50D;} 30% {background-color: #A5950D;} 45% {background-color: #A5480D;} } 
@-moz-keyframes scarlettimg2 { 60% {background-color: #A50D0F;} 75% {background-color: #A50D95;} 95% {background-color: #200DA5;} 5% {background-color: #0DA0A5;} 15% {background-color: #30A50D;} 30% {background-color: #A5950D;} 45% {background-color: #A5480D;} } 
@keyframes scarlettimg2 { 60% {background-color: #A50D0F;} 75% {background-color: #A50D95;} 95% {background-color: #200DA5;} 5% {background-color: #0DA0A5;} 15% {background-color: #30A50D;} 30% {background-color: #A5950D;} 45% {background-color: #A5480D;} } 


 @-webkit-keyframes scarlettimg3 { 95% {background-color: #A50D0F;} 5% {background-color: #A50D95;} 15% {background-color: #200DA5;} 30% {background-color: #0DA0A5;} 45% {background-color: #30A50D;} 60% {background-color: #A5950D;} 75% {background-color: #A5480D;} } 
@-moz-keyframes scarlettimg3   { 95% {background-color: #A50D0F;} 5% {background-color: #A50D95;} 15% {background-color: #200DA5;} 30% {background-color: #0DA0A5;} 45% {background-color: #30A50D;} 60% {background-color: #A5950D;} 75% {background-color: #A5480D;} } 
@keyframes scarlettimg3 { 95% {background-color: #A50D0F;} 5% {background-color: #A50D95;} 15% {background-color: #200DA5;} 30% {background-color: #0DA0A5;} 45% {background-color: #30A50D;} 60% {background-color: #A5950D;} 75% {background-color: #A5480D;} } 


 @-webkit-keyframes scarlettimg4 { 0% {background-color: #882424;}  15% {background-color: #c53131;}    30% {background-color: #a51010;} 45% {background-color: #e81b1b;} 60% {background-color: #f72b2b;}    75% {background-color: #c53131;}  90% {background-color: #882424;} } 
@-moz-keyframes scarlettimg4  { 0% {background-color: #882424;}  15% {background-color: #c53131;}    30% {background-color: #a51010;} 45% {background-color: #e81b1b;} 60% {background-color: #f72b2b;}    75% {background-color: #c53131;}  90% {background-color: #882424;} } 
@keyframes scarlettimg4 { 0% {background-color: #882424;}  15% {background-color: #c53131;}    30% {background-color: #a51010;} 45% {background-color: #e81b1b;} 60% {background-color: #f72b2b;}    75% {background-color: #c53131;}  90% {background-color: #882424;} } 


#scarlettbase {height: 145px; width: 250px; margin: 0 auto; position: relative; background-position: top center; background-blend-mode: multiply; background-color: #FFE289; -webkit-animation-name: scarlettimg; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -moz-animation-name: scarlettimg; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; animation-name: scarlettimg; animation-duration: 15s; animation-iteration-count: infinite;}

#scarlettbase1 {height: 145px; width: 250px; margin: 0 auto; position: relative; background-position: top center; background-blend-mode: multiply; background-color: #FFE289; -webkit-animation-name: scarlettimg1; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -moz-animation-name: scarlettimg1; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; animation-name: scarlettimg1; animation-duration: 15s; animation-iteration-count: infinite;}

#scarlettbase2 {height: 145px; width: 250px; margin: 0 auto; position: relative; background-position: top center; background-blend-mode: multiply; background-color: #FFE289; -webkit-animation-name: scarlettimg2; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -moz-animation-name: scarlettimg2; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; animation-name: scarlettimg2; animation-duration: 15s; animation-iteration-count: infinite;}

#scarlettbase3 {height: 145px; width: 250px; margin: 0 auto; position: relative; background-position: top center; background-blend-mode: multiply; background-color: #FFE289; -webkit-animation-name: scarlettimg3; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -moz-animation-name: scarlettimg3; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; animation-name: scarlettimg3; animation-duration: 15s; animation-iteration-count: infinite;}

#scarlettbase4 {height: 145px; width: 250px; margin: 0 auto; position: relative; background-position: top center; background-blend-mode: multiply; background-color: #FFE289; -webkit-animation-name: scarlettimg4; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -moz-animation-name: scarlettimg4; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; animation-name: scarlettimg4; animation-duration: 15s; animation-iteration-count: infinite;}


 .porgyandbess {opacity: 1; font-family: lobster; font-size: 34px; color: #fff; line-height: 70%; text-align: center; transition:all 0.8s ease in-out; -o-transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out; -webkit-transition:all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out;}

 #scarlettbase:hover .porgyandbess,  #scarlettbase1:hover .porgyandbess,  #scarlettbase2:hover .porgyandbess,  #scarlettbase3:hover .porgyandbess, #scarlettbase4:hover .porgyandbess {opacity: 0; transition:all 0.8s ease in-out 0.8s; -o-transition:all 0.8s ease-in-out 0.8s; -moz-transition:all 0.8s ease-in-out 0.8s; -webkit-transition:all 0.8s ease-in-out 0.8s; -ms-transition:all 0.8s ease-in-out 0.8s;} 
 

.yourdaddysrich {opacity: 0; width: 200px; height: 30px; margin-left: 25px; margin-top: -50px; background-color: rgba(255,255,255,0.85); transition:all 0.8s ease in-out; -o-transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out; -webkit-transition:all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out;} 

#scarlettbase:hover .yourdaddysrich, #scarlettbase1:hover .yourdaddysrich, #scarlettbase2:hover .yourdaddysrich, #scarlettbase3:hover .yourdaddysrich, #scarlettbase4:hover .yourdaddysrich {opacity: 1; transition:all 0.8s ease in-out 1.8s; -o-transition:all 0.8s ease-in-out 1.8s; -moz-transition:all 0.8s ease-in-out 1.8s; -webkit-transition:all 0.8s ease-in-out 1.8s; -ms-transition:all 0.8s ease-in-out 1.8s;}
 
 </style> 


<table style=" width: 85%;margin-left: 50px;"><tbody>
<tr>

<td><div id="scarlettbase4" style="background-image:url(https://funkyimg.com/i/31cKD.gif);"><div class="porgyandbess"><br><div style="font-family: bebas neue; letter-spacing: -1px; margin-top: 25px; ">I don't wanna wake it up </div>the devil in me</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;">
 <div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"><a style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Tyler Whitmore, 31 || wizard</a></div></div></div></div></td>

<td><div id="scarlettbase2" style="background-image:url(https://funkyimg.com/i/31cJj.gif);"><div class="porgyandbess"><br><div style="font-family: bebas neue; letter-spacing: -1px;  margin-top: 25px;">You said I should</div>eat my feelings</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;"> <div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"><a style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Edliv "Liv" Parker, 22  || young witch, student</a></div></div></div></div></td>
 

</tr><tr>



<td><div id="scarlettbase3" style="background-image:url(https://funkyimg.com/i/31cJr.gif);"><div class="porgyandbess"><br><div style="font-family: bebas neue; letter-spacing: -1px;  margin-top: 25px;">But I scream too loud if</div>i speak my mind</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;">
<div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"<a style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Hannah "Mo" Montgomery, 18, student</a></div></div></div></div></td>

 <td><div id="scarlettbase1" style="background-image:url(https://funkyimg.com/i/31cJ9.gif);"><div class="porgyandbess"><br>
<div style="font-family: bebas neue; letter-spacing: 2px;  margin-top: 25px;">shine too bright</div> i burnt the candle</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;"> <div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"><a style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Arthur Parker, 19 || young wizard, student</a></div></div></div></div></td>




</tr><tr>

<td> <div id="scarlettbase" style="background-image:url(https://funkyimg.com/i/31cJ5.gif);"><div class="porgyandbess"><br>
<div style="font-family: bebas neue; letter-spacing:2px;  margin-top: 25px;">Gotta wake up</div>come back to life</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;"> <div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"><a  style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Theodore "Theo" King, 23 || student</a></div></div></div></div></td> 


<td> <div id="scarlettbase4" style="background-image:url(https://funkyimg.com/i/31cKQ.gif);">
<div class="porgyandbess"><br><div style="font-family: bebas neue; letter-spacing:-1px; margin-top: 25px;"> Now I gotta wake it up </div>the devil in me</div><div class="yourdaddysrich"><div style="width: 200px; height: 1px;  position: relative;  top: 10px; text-align: center;"> <div style="height: 20px; font-family: calibri; font-size: 9px; color: #7a6c79; text-transform: uppercase; line-height: 100%; margin: 5px;"><a  style="font-family: calibri; font-size: 9px; color: #7a6c69; text-transform: uppercase; text-align: center; line-height: 100%; font-weight: bold; margin: 5px;">Emerode De'Rouge, 26 || witch<br>Cassandra Jenkin (real age 43)
 </a></div></div></div></div></td>



</tr>
</tbody></table>

0

5

саша и новые соо

0

6

.

Код:
<!--HTML-->
<style> #insta13:checked ~ .tabs_cont #inst13,#twi13:checked ~ .tabs_cont #twit13,#tindr13:checked ~ .tabs_cont #tind13,#face13:checked ~ .tabs_cont #facebk13,#tmblr13:checked ~ .tabs_cont #tumb13 {left: 0;opacity: 1;margin: -91px 0px 0px 0px}</style>
<script type="text/javascript" src="http://tinder.clan.su/ls/stranitca.js"></script>


<div  id="fon">

<a href="javascript:sh('social13')" class="uno">
<a href="javascript:sh('coffe13')" class="dos"></a>
<a href="javascript:sh('city13')" class="tres"></a>
<a href="javascript:sh('awards13')" class="cuatro"></a>


</a><div id="social13"  class="socsite" style="display: none;"><a href="javascript:sh('social13')" class="exit"></a><zag></zag><slova></slova>


<!-- Соц. сети --> 

<div class="soc">

<section class="tabs">   
	<input id="insta13" type="radio" name="tab" />
	<input id="twi13" type="radio" name="tab" />
	<input id="tindr13" type="radio" name="tab" />
	<input id="face13" type="radio" name="tab" />
	<input id="tmblr13" type="radio" name="tab" />
	<input id="tab_613" type="radio" name="tab" checked="checked" />
	
	<label for="insta13" id="ins13">Tab One</label>
	<label for="twi13" id="twitt13">Tab Two</label>
	<label for="tindr13" id="tin13">Tab Three</label>
	<label for="face13" id="faceb13">Tab Three</label>
	<label for="tmblr13" id="tum13">Tab Three</label>
	<div style="clear:both"></div>

	<div class="tabs_cont">
   <div id="inst13" class="instagram">
 <z1> попал в таблицу 3 раза</z1>
<vz2>оставил 200 реклам</vz2>
<z3>накопил 10.000$</z3>
<z4>получил 5000 лайков</z4>
<z5>не менял персонажа/внешность 6 месяцев</z5>
<ngrg></ngrg></div>

    <div id="twit13" class="twitter">
<z1> 3 месяца на форуме</z1>
<z2>завершил 1 эпизод</z2>
<vz3> закрыл 5 точек-локаций </vz3>
<z4> завел твинка</z4>
<z5>10000 сообщений в профиле</z5>
<ngrg></ngrg></div>

    <div id="tind13"class="tinder">
<z1>24 часа онлайна подряд</z1>
<z2>накопил 200 чашек</z2>
<vz3>участие в 5 конкурсах</vz3>
<z4>поставил 10000 лайков</z4>
<z5>ответил на пост в течение суток</z5>
<ngrg></ngrg></div>


  <div id="facebk13" class="facebook">
<z1>написал 10 постов</z1>
<z2>перевел другу 1000$</z2>
<vz3>5000 сообщений</vz3>
<z4>закрыл 3 эпизода</z4>
<z5>провел на форуме 20 дней (по часам онлайна)</z5>
<ngrg></ngrg></div>


  <div id="tumb13" class="tumblr">
<z1>поставил 5000 лайков</z1>
<z2>оставил 100 реклам</z2>
<vz3>выиграл в конкурсе</vz3>
<z4>получил 10000 лайков</z4>
<z5>написал 20 игровых постов</z5>
<ngrg></ngrg></div></div>
</section>
         
</div>

</div><div id="coffe13" class="coffe" style="display: none;"><a href="javascript:sh('coffe13')" class="exit"></a><zag></zag>
<slova>заходи на форум  <ww>каждый день.</ww> получай <ww>призы</ww> в конце месяца.</slova>
<!-- Кофе --> 



<div class="carousel-container">
    <ul class="carousel my-carousel">
<input class="carousel__activator" type="radio" id="m113" name="activator13" checked="checked" />
<input class="carousel__activator" type="radio" id="m213" name="activator13" />
<input class="carousel__activator" type="radio" id="m313" name="activator13" />
  
     
<li class="carousel__slide">      <!-- ПЕРВЫЙ МЕСЯЦ -->
<div class="nomermesycta1">Месяц #1</div><div class="mo1">
<table><tbody><tr><td><d>1</d></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div>

<!-- ВТОРОЙ МЕСЯЦ -->
<div class="nomermesycta2">Месяц #2</div><div class="mo2">
<table><tbody><tr><td><n>1</n></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div> </li>

 <li class="carousel__slide">
<!-- МЕСЯЦ ТРИ -->
<div class="nomermesycta1">Месяц #3</div><div class="mo1">
<table><tbody><tr><td><n>1</n></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div>

<!-- МЕСЯЦ ЧЕТЫРЕ -->
<div class="nomermesycta2">Месяц #4</div><div class="mo2">
<table><tbody><tr><td><n>1</n></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div> </li>


<li class="carousel__slide"> 
<!-- МЕСЯЦ 5 -->
<div class="nomermesycta1">Месяц #5</div><div class="mo1">
<table><tbody><tr><td><n>1</n></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div>

<!-- МЕСЯЦ 6 -->
<div class="nomermesycta2">Месяц #6</div><div class="mo2">
<table><tbody><tr><td><n>1</n></td><td><n>2</n></td><td><n>3</n></td><td><n>4</n></td><td><n>5</n></td><td><n>6</n></td><td><n>7</n></td></tr>
<tr><td><n>8</n></td><td><n>9</n></td><td><n>10</n></td><td><n>11</n></td><td><n>12</n></td><td><n>13</n></td><td><n>14</n></td></tr>
<tr><td><n>15</n></td><td><n>16</n></td><td><n>17</n></td><td><n>18</n></td><td><n>19</n></td><td><n>20</n></td><td><n>21</n></td></tr>
<tr><td><n>22</n></td><td><n>23</n></td><td><n>24</n></td><td><n>25</n></td><td><n>26</n></td><td><n>27</n></td><td><n>28</n></td></tr>
<tr><td><n>29</n></td><td><n>30</n></td><td><n>31</n></td></tr></tbody></table></div> 

 </li>



<div class="carousel__indicators">
<label class="carousel__indicator" for="m113"></label>
<label class="carousel__indicator" for="m213"></label>
<label class="carousel__indicator" for="m313"></label></div>
    </ul>
</div>
       
      











</div><div id="city13" class="city" style="display: none;"><a href="javascript:sh('city13')" class="exit"></a><zag></zag>

<!-- Город --> 

<div class="boroverh">

<div class="boro"><div class="pokaz fon1"><div class="vnut">
<zg><rvn>The Bushwick Starr</rvn></zg>
<fl1>поставить 1000 лайков</fl1>
<pl2>выиграть билет в театр</pl2>
<fl3>создать тему флуда</fl3>
</div> </div><img src="http://tinder.clan.su/ls/b1/1.png" alt="img"></div>

<div class="boro"><div class="pokaz fon1"><div class="vnut">
<zg><rvn>Kings Plaza Mall</rvn></zg>
<fl1>30 реклам</fl1>
<pl2>отправиться за покупками</pl2>
<fl3>попасть в активисты</fl3>
</div> </div><img src="http://tinder.clan.su/ls/b1/2.png" alt="img"></div>
</div>



<div class="boroniz squares">  

<div class="photo" data-title="Brooklyn Museum: Chalk Gyms"><img src="http://tinder.clan.su/ls/b2/7m.png"></div>
<div class="photo" data-title="Фитнес-центр: Chalk Gyms"><img src="http://tinder.clan.su/ls/b2/6m.png"></div>
<div class="photo" data-title="Бар-клуб: Friends and Lovers"><img src="http://tinder.clan.su/ls/b2/5m.png"></div>
<div class="photo" data-title="Grimaldi's Pizzeria"><img src="http://tinder.clan.su/ls/b2/4m.png"></div>
<div class="photo" data-title="The New York Botanical Garden"><img src="http://tinder.clan.su/ls/b2/3m.png"></div>
<div class="photo" data-title="ТЦ: Kings Plaza Mall"><img src="http://tinder.clan.su/ls/b2/2m.png"></div>
<div class="photo" data-title="Театр: The Bushwick Starr"><img src="http://tinder.clan.su/ls/b2/1m.png"></div>

</div>



</div><div id="awards13" class="awards" style="display: none;"><a href="javascript:sh('awards13')" class="exit"></a><zag></zag>

<!-- Очивки --> 

<div class="aw"><table><tbody><tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr>
<tr><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td><td><img src="http://forumstatic.ru/files/001a/af/df/51799.png" title="ты супер"></td></tr></tbody></table>
    </div>


</div> <!--закрывашка очивок--> 
</div> <!--закрывашка всего кода --> 





<style>
 /* фон и карусель для календаря */
#fon{ background-image: url(http://tinder.clan.su/ls/fon.png); width: 663px; height: 404px;}
 @import url("https://fonts.googleapis.com/css?family=Roboto:900");
.carousel {height: 242px; width: 593px; overflow: hidden; text-align: center;position: relative; padding: 0;list-style: none;}
.carousel__controls,.carousel__activator {display: none;}
.carousel__activator:nth-of-type(1):checked ~ .carousel__track {transform: translateX(0%);}
.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__activator:nth-of-type(2):checked ~ .carousel__track {transform: translateX(-100%);}
.carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__activator:nth-of-type(3):checked ~ .carousel__track {transform: translateX(-200%);}
.carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__activator:nth-of-type(4):checked ~ .carousel__track {transform: translateX(-300%);}
.carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__activator:nth-of-type(5):checked ~ .carousel__track {transform: translateX(-400%);}
.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__activator:nth-of-type(6):checked ~ .carousel__track {transform: translateX(-500%);}
.carousel__activator:nth-of-type(6):checked ~ .carousel__slide:nth-of-type(6) {transition: opacity 0.5s, transform 0.5s;top: 0;left: 0;right: 0;opacity: 1;transform: scale(1);}
.carousel__activator:nth-of-type(6):checked ~ .carousel__controls:nth-of-type(6) {display: block;opacity: 1;}
.carousel__activator:nth-of-type(6):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(6) {opacity: 1;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 2px 0px #767d89;background: #ffffffcc;background: linear-gradient(to top right, #f8f7f7, #d4c0f6, #8fc2e9);}
.carousel__control {top: 50%;display: block;z-index: 3;}
.carousel__control--backward {cursor: pointer;position: absolute;margin: -116px 0px 0px 228px;width: 67px;height: 27px;transition: 0.6s ease;}
.carousel__control--forward {right: 10px;cursor: pointer; position: absolute;margin: -116px 218px 0px 0px;width: 67px;height: 27px;transition: 0.6s ease;}
.carousel__track {position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 0;margin: 0;transition: transform 0.5s ease 0s;}
.carousel__track .carousel__slide {display: block;top: 0;left: 0;right: 0;opacity: 1;}
.carousel__track .carousel__slide:nth-of-type(1) {transform: translateX(0%);}
.carousel__track .carousel__slide:nth-of-type(2) {transform: translateX(100%);}
.carousel__track .carousel__slide:nth-of-type(3) {transform: translateX(200%);}
.carousel__track .carousel__slide:nth-of-type(4) {transform: translateX(300%);}
.carousel__track .carousel__slide:nth-of-type(5) {transform: translateX(400%);}
.carousel__track .carousel__slide:nth-of-type(6) {transform: translateX(500%);}
.carousel--scale .carousel__slide {transform: scale(0);}
.carousel__slide {height: 100%;	position: absolute;overflow-y: auto;opacity: 0;}
box-sizing: border-box;}
.carousel-container {display: inline-block;}
.my-carousel {    margin: 141px 0px 0px 34px;}
.carousel__slide {overflow: hidden;}
.carousel--thumb .carousel__indicator {height: 30px;width: 30px;}
li.carousel__slide {width: 593px; position: absolute;  height: 229px; }
.carousel__indicators {position: absolute;top: 11px; text-align: center;width: 159px;height: 29px;margin: 0px 0px 0px 219px}
.carousel__indicator:hover {opacity: 0.75;}
.carousel__indicator {height: 15px; width: 15px; border-radius: 100%; display: inline-block;z-index: 2;background: #ffffffd1;cursor: pointer;margin: 0 2.5px 0 2.5px; line-height: 1.2;box-shadow: -1px -1px 4px 0px #ffffff, inset 0px 0px 3px 0px #767d89;}
.boroverh img.logogo {margin: 12px 0px 0px 108px;}
 /*  месяца и кофе */
.mo1 td, .mo2 td {border-style: none !important; padding: 3px 0px 2px 0px !important;}
.mo1 {height: 197px;width: 270px;position: absolute; margin: 3px 0px 0px 3px;}
.mo2 {height: 197px;width: 270px;position: absolute;margin: 3px 0px 0px 327px;}
.mo1 n, .mo2 n {width: 32px; height: 32px; background-repeat: no-repeat; background-size: 99%;display: block; font-size: 17px; line-height: 2; color: white; opacity: 0.5; background-image: url(http://tinder.clan.su/ls/cup.png); text-align: center; background-position: center;}
.mo1 d, .mo2 d {width: 32px; height: 32px; background-repeat: no-repeat; background-size: 99%;display: block; font-size: 17px; line-height: 2; color: white; background-image: url(http://tinder.clan.su/ls/cup.png); text-align: center; background-position: center;}
.nomermesycta1 {position: initial; width: 140px; height: 20px; margin: 9px 0px 16px 4px; font-family: tahoma; text-transform: uppercase; font-size: 15px; color: #f4f4f4; font-weight: 900; text-align: left;}
.nomermesycta2 {position: absolute; width: 140px; height: 20px; margin: -36px 0px 0px 451px; font-family: tahoma; text-transform: uppercase; font-size: 15px; color: #f4f4f4; font-weight: 900; text-align: end;}

 /* общие настройки */
.uno {width: 95px;height: 95px;margin: 110px 0px 0px 203px;position: absolute;opacity: 0;cursor: pointer;}
.dos {width: 95px;height: 95px;margin: 110px 0px 0px 361px;position: absolute;opacity: 0;cursor: pointer;}
.tres {width: 95px;height: 95px;margin: 236px 0px 0px 203px;position: absolute;opacity: 0;cursor: pointer;}
.cuatro  {width: 95px;height: 95px;margin: 236px 0px 0px 361px;position: absolute;opacity: 0;cursor: pointer;}
.exit {    position: absolute; cursor: pointer; width: 55px; height: 38px; font-size: 0px; margin: 46px 0px 0px 17px}
.coffe {position: absolute;background-image: url(http://tinder.clan.su/ls/coffe.png); height: 404px; width: 663px;}
.socsite {position: absolute;background-image: url(http://tinder.clan.su/ls/socsite.png); height: 404px; width: 663px;margin: 0 auto}
.awards {position: absolute;background-image: url(http://tinder.clan.su/ls/awards.png);height: 404px; width: 663px;}
.city {position: absolute;background-image: url(http://tinder.clan.su/ls/city.png);height: 404px; width: 663px;}

 /*  таблицы в подарках */
.awards td {border: none; border-style: none !important; text-align: center;}
.awards table {width: 88%;}
.awards .aw {overflow-y: scroll; height: 261px;margin: 98px 0px 0px 79px;width: 76%;}
.awards .aw::-webkit-scrollbar-thumb {width: 8px; background: linear-gradient(to top left, #684d97, #e2dcf1);}
.awards .aw::-webkit-scrollbar-thumb {border-radius: 2px; border: 1px solid #896fab; box-shadow: inset 0 0 2px #f7f4ec;}
.awards .aw::-webkit-scrollbar {width: 5px; height: 9px;}

 /* соц сети */
.tabs {position: relative;margin: 0 auto;}
.tabs label {color: #555;  cursor: pointer; display: block; width: 192px;height: 47px;line-height: 45px;position: relative; top: 23px;font-size: 0px;text-align: center}
.tabs input {position: absolute;left: -9999px;}
.tabs_cont {position: relative; z-index: 2;height: 260px;margin: -141px 0px 0px 214px;}
.tabs_cont > div {position: absolute;	left: -9999px;top: 0;	opacity: 0;}
.soc {width: 589px; height: 262px; margin: 125px 0px 0px 34px; position: absolute;overflow: hidden}
.instagram {background-image: url(http://tinder.clan.su/ls/instagram.png); width: 378px; height: 259px;}
.twitter {background-image: url(http://tinder.clan.su/ls/twitter.png); width: 378px; height: 259px;}
.tinder {background-image: url(http://tinder.clan.su/ls/ttinder.png); width: 378px; height: 259px;}
.facebook {background-image: url(http://tinder.clan.su/ls/facebook.png); width: 378px; height: 259px;}
.tumblr {background-image: url(http://tinder.clan.su/ls/tumblr.png); width: 378px; height: 259px;}

 /* город */
.boroverh {margin: 82px 0px 0px 44px;   position: absolute}
.boro{    width: 262px; height: 209px; position: relative; margin: 0px 16px 0px 0px; display: inline-block;}
.boro img{width: 100%;height: 100%;}
.boro .pokaz{    background-repeat: no-repeat;display: none;	position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 15% 3%;box-sizing: border-box;}
 .boro:hover .pokaz {  display: block; cursor: pointer;}
.boro .fon1 {  background-image: url(http://tinder.clan.su/ls/zadanie1.png);}.boro .fon2 {  background-image: url(http://tinder.clan.su/ls/zadanie2.png);}
.boroniz {position: absolute}
.socsite zag, .coffe zag, .city zag, .awards zag {position: absolute;width: 150px;height: 20px; display: inline-block;left: 255px;text-align: center;font-family: Arial Rounded MT Bold; text-transform: uppercase;font-size: 15px; color: #f4f4f4;}
.socsite zag {top: 52px;text-shadow: 0px 1px 2px #68936b} .socsite zag:before {content: "social network";} 
.coffe zag {top: 56px;text-shadow: 0px 1px 2px #675ba9} .coffe zag:before {content: "coffee break";}
.city zag {top: 58px;text-shadow: 0px 1px 2px #6b8d8d} .city zag:before {content: "new york guide";}
.awards zag {top: 58px;text-shadow: 0px 1px 2px #6a5198} .awards zag:before {content: "your archive";}
.coffe slova { position: absolute; width: 190px; height: 27px; display: inline-block; left: 236px; top: 93px; text-align: center; letter-spacing: 1.4px; line-height: 16px; font-weight: 700; font-family: 'Roboto', sans-serif; font-size: 9px; color: #f4f4f4; text-shadow: 0px 1px 2px #675ba9;  }
.coffe slova ww { background: #9e99e7; padding: 1px 2px 2px 2px; }
.socsite slova { position: absolute; width: 357px; height: 31px; display: inline-block; left: 103px; top: 75px; text-align: inherit; letter-spacing: 1.2px; line-height: 13px; font-weight: 600; font-family: 'Roboto', sans-serif; font-size: 9px; color: #f4f4f4; text-shadow: 0px 1px 2px #68936b; }
.socsite slova:before {content: "выполненные задания каждой соцсети разблокируют денежный приз и приятные бонусы только для тебя!";} 

.soc z1, .soc z2, .soc z3, .soc z4, .soc z5, .soc vz1, .soc vz2, .soc vz3, .soc vz4,.soc vz5 {position: absolute; height: 16px;display: inline-block; text-align: inherit; padding: 4px; letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif; font-size: 11px; color: #f4f4f4;text-shadow: 0px 1px 2px #544d71;} 
.soc z1,.soc z2, .soc z3,.soc z4,.soc vz1,.soc vz2,.soc vz3, .soc vz4 {width: 141px} .soc z5, .soc vz5 { width: 322px;left: 41px;top: 117px;} 
.soc z1,.soc vz1 {left: 41px;top: 56px;}.soc z2, .soc vz2 {left: 221px;top: 56px;}.soc z3,.soc vz3 {left: 41px;top: 87px;}.soc z4, .soc vz4 {left: 221px;top: 87px;}
.soc vz1:before, .soc vz2:before,.soc vz3:before,.soc vz4:before,.soc vz5:before { content: url(http://tinder.clan.su/ls/galka.png); margin: 1px 0px 0px -27px; position: absolute;}


.instagram ngrg:before {content: "2 любых товара из магазина бесплатно"; position: absolute;height: 28px; width: 200px;top: 204px;left: 153px;display: inline-block;text-align: inherit;padding: 4px;letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif;font-size: 11px;color: #f4f4f4;} .twitter ngrg:before {content: " единоразовый иммунитет от чистки"; position: absolute;height: 28px; width: 200px;top: 204px;left: 153px;display: inline-block;text-align: inherit;padding: 4px;letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif;font-size: 11px;color: #f4f4f4;}.tinder ngrg:before {content: " спасти твинк от дубля"; position: absolute;height: 28px; width: 200px;top: 204px;left: 153px;display: inline-block;text-align: inherit;padding: 4px;letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif;font-size: 11px;color: #f4f4f4;}.facebook ngrg:before {content: " твинк вне правил"; position: absolute;height: 28px; width: 200px;top: 204px;left: 153px;display: inline-block;text-align: inherit;padding: 4px;letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif;font-size: 11px;color: #f4f4f4;} .tumblr ngrg:before {content: " пропуск любых трех заданий в локации"; position: absolute;height: 28px; width: 200px;top: 204px;left: 153px;display: inline-block;text-align: inherit;padding: 4px;letter-spacing: 0.4px;line-height: 15px;font-family: 'Roboto', sans-serif;font-size: 11px;color: #f4f4f4;}
.instagram ngrg:after, .twitter ngrg:after, .tinder ngrg:after, .facebook ngrg:after, .tumblr ngrg:after {content: "1000$";  position: absolute; margin: 205px 0px 0px 70px; font-family: Futura PT Book; font-size: 25px; color: #fff;}

.boroniz::-webkit-scrollbar { width: 1px; height: 1px;}
.boroniz::-webkit-scrollbar-button { width: 1px;height: 1px;}
.boroniz { position: absolute; display: block; width: calc(98px + 1px); margin: 296px 0px 0px 167px; max-height: 619px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; transform: rotate(-90deg) translateY(-250px); transform-origin: right top; }.boroniz > div { display: block; transform: rotate(90deg); transform-origin: right top;}
.squares { padding: 98px 0 0 0;}
.squares > div { width: 98px; height: 96px; margin: 5px 0;}

 .photo {display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */}
.photo:hover::after { content: attr(data-title); position: absolute; margin: 28px -93px; width: 65px; z-index: 1; background-image: linear-gradient(to right, #b3b3b3 0%, #e7e7e7 50%, #b3b3b3 100%); font-family: roboto; font-weight: 600; text-transform: uppercase; border-color: #b3bcd7; color: #787878; text-shadow: 1px 0px #ffffff; box-shadow: inset #edededad 0px 0px 20px; font-size: 9px; padding: 5px 8px; border: 1px solid #fff; }

.vnut zg { position: absolute; width: 148px; height: 41px; display: inline-block; left: 77px; top: 7px; text-align: center; padding: 4px; text-transform: uppercase; font-weight: 600; font-family: 'Roboto', sans-serif; font-size: 14px; color: #f4f4f4; text-shadow: 0px 1px 2px #131813b5; line-height: 41px;}
.vnut zg rvn {line-height: normal;display: inline-block;vertical-align: middle;}

.vnut pl1, .vnut fl1, .vnut pb1, .vnut fb1, .vnut pl2, .vnut fl2, .vnut pb2, .vnut fb2, .vnut pl3, .vnut fl3, .vnut pb3, .vnut fb3, .vnut pl4, .vnut fl4, .vnut pb4, .vnut fb4 {opacity: 0.5;}
.vnut pl1, .vnut fl1, .vnut pb1, .vnut fb1, .vnut pl2, .vnut fl2, .vnut pb2, .vnut fb2, .vnut pl3, .vnut fl3, .vnut pb3, .vnut fb3, .vnut pl4, .vnut fl4, .vnut pb4, .vnut fb4, .vnut vpl1, .vnut vfl1, .vnut vpb1, .vnut vfb1, .vnut vpl2, .vnut vfl2, .vnut vpb2, .vnut vfb2, .vnut vpl3, .vnut vfl3, .vnut vpb3, .vnut vfb3, .vnut vpl4, .vnut vfl4, .vnut vpb4, .vnut vfb4 {position: absolute; display: inline-block;text-align: inherit;text-transform: uppercase;font-family: 'Roboto', sans-serif;font-size: 10px;color: #f4f4f4;text-shadow: 0px 1px 2px #13181342; left: 57px;}

.vnut pl1, .vnut fl1, .vnut pl2, .vnut fl2, .vnut pl3, .vnut fl3, .vnut pl4, .vnut fl4, .vnut vpl1, .vnut vfl1, .vnut vpl2, .vnut vfl2, .vnut vpl3, .vnut vfl3, .vnut vpl4, .vnut vfl4 {width: 187px;height: 11px; padding: 7px 3px 7px 3px;line-height: 12px;} 
.vnut pb1, .vnut fb1, .vnut pb2, .vnut fb2, .vnut pb3, .vnut fb3, .vnut pb4, .vnut fb4, .vnut vpb1, .vnut vfb1, .vnut vpb2, .vnut vfb2, .vnut vpb3, .vnut vfb3, .vnut vpb4, .vnut vfb4 {width: 190px;height: 21px; padding: 2px; line-height: 11px;}

.vnut pl1, .vnut fl1, .vnut pb1, .vnut fb1, .vnut vpl1, .vnut vfl1, .vnut vpb1, .vnut vfb1 {top: 89px}
.vnut pl2, .vnut fl2, .vnut pb2, .vnut fb2, .vnut vpl2, .vnut vfl2, .vnut vpb2, .vnut vfb2 {top: 115px}
.vnut pl3, .vnut fl3, .vnut pb3, .vnut fb3, .vnut vpl3, .vnut vfl3, .vnut vpb3, .vnut vfb3 {top: 142px}
.vnut pl4, .vnut fl4, .vnut pb4, .vnut fb4, .vnut vpl4, .vnut vfl4, .vnut vpb4, .vnut vfb4 {top: 168px}

.vnut pl1, .vnut pb1, .vnut vpl1, .vnut vpb1, .vnut pl2, .vnut pb2, .vnut vpl2, .vnut vpb2, .vnut pl3, .vnut pb3, .vnut vpl3, .vnut vpb3, .vnut pl4, .vnut pb4, .vnut vpl4, .vnut vpb4  {background-image: url(http://tinder.clan.su/ls/igra.png)}
.vnut fl1, .vnut fb1, .vnut vfl1, .vnut vfb1, .vnut fl2, .vnut fb2, .vnut vfl2, .vnut vfb2, .vnut fl3, .vnut fb3, .vnut vfl3, .vnut vfb3, .vnut fl4, .vnut fb4, .vnut vfl4, .vnut vfb4 {background-image: url(http://tinder.clan.su/ls/forum.png)}



</style>

0

7

Код:
<--HTML--><style> 
 #p363 span {  margin: 0px auto;}#p363 .post-author { display: none;}#p363 .post-body, #p363 .post-links, #p363 .post-links ul { margin: 0 auto;} 
.putevod {  background-image: url(http://forumstatic.ru/files/001a/af/df/44906.png);   width: 932px;   height: 562px;}

</style>

<div class="putevod">
<section class="putevodmenu">
	<input id="pmenur" type="radio" name="tab" checked="checked" /><input id="pmenuk" type="radio" name="tab" /><input id="pmenus" type="radio" name="tab" /><input id="pmenup" type="radio" name="tab" />
	<label for="pmenur" id="pmenur1">развлечения</label><label for="pmenuk" id="pmenuk1">кафе и бары</label><label for="pmenus" id="pmenus1">шоппинг</label><label for="pmenup" id="pmenup1">профессии</label>
	<div style="clear:both"></div>

	<div class="putevodmenu_cont">
    <div id="pmenur2">вкладка 1</div>
    <div id="pmenuk2">вкладка 2</div>
    <div id="pmenus2">Content of third tab</div>
    <div id="pmenup2">





<h2>CSS Tab</h2>
<div class="warpper">
  <input class="radio" id="one" name="group" type="radio" checked>
  <input class="radio" id="two" name="group" type="radio">
  <input class="radio" id="three" name="group" type="radio">
  <div class="tabs">
  <label class="tab" id="one-tab" for="one">CSS</label>
  <label class="tab" id="two-tab" for="two">Skills</label>
  <label class="tab" id="three-tab" for="three">Prerequisites</label>
    </div>
  <div class="panels">
  <div class="panel" id="one-panel">
    <div class="panel-title">Why Learn CSS?</div>
    <p>Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!</p>
  </div>
  <div class="panel" id="two-panel">
    <div class="panel-title">Take-Away Skills</div>
    <p>You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need!</p>
  </div>
  <div class="panel" id="three-panel">
    <div class="panel-title">Note on Prerequisites</div>
    <p>We recommend that you complete Learn HTML before learning CSS.</p>
  </div>
  </div>
</div>








</div>
	</div>
</section>


</div>


<style>
.putevodmenu { position: relative; margin: 0px 0px 0px 60px; width: 820px; padding: 9px 0px 0px 0px;}
.putevodmenu label {     color: #6b7175; cursor: pointer; display: block; float: left; width: 156px; height: 45px; line-height: 45px; position: relative; font-family: Futura PT Demi; text-transform: uppercase; top: 9px; padding: 0px 0px 0px 25px; text-align: inherit; }
label#pmenur1 {  margin: 0px 0px 0px 89px;}
.putevodmenu input {position: absolute;left: -9999px;}
#pmenur:checked  ~ #pmenur1,#pmenuk:checked  ~ #pmenuk1,#pmenus:checked  ~ #pmenus1,#pmenup:checked  ~ #pmenup1 {z-index: 3;}
.putevodmenu_cont {	position: relative;	z-index: 2;	height: 485px;}
.putevodmenu_cont > div {position: absolute;	left: -9999px;	top: 0;	opacity: 0;	-moz-transition: opacity .5s ease-in-out;-webkit-transition: opacity .5s ease-in-out;	transition: opacity .5s ease-in-out;}
#pmenur:checked ~ .putevodmenu_cont #pmenur2,#pmenuk:checked ~ .putevodmenu_cont #pmenuk2,#pmenus:checked ~ .putevodmenu_cont #pmenus2,#pmenup:checked ~ .putevodmenu_cont #pmenup2 {	position: static;	left: 0;	opacity: 1;}
.entertaiment { position: relative; margin: 0 auto; width: 800px; } .entertaiment label { color: #555; cursor: pointer; display: block; float: left; width: 150px; height: 45px; line-height: 45px; position: relative; top: 2px; text-align: center; } .entertaiment input { position: absolute; left: -9999px; } #enter1:checked  ~ #enter11, #enter2:checked  ~ #enter22, #enter3:checked  ~ #enter33 { background: #fff; border-color: #fff; top: 0; z-index: 5; } .entertaiment_cont { background: #fff; position: relative; z-index: 4; height: 230px; } .entertaiment_cont > div { position: absolute; left: -9999px; top: 0; opacity: 0; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } #enter1:checked ~ .entertaiment_cont #enter111, #enter2:checked ~ .entertaiment_cont #enter222, #enter3:checked ~ .entertaiment_cont #enter333 { position: static; left: 0; opacity: 1; }



@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');
.warpper{ display:flex; flex-direction: column; align-items: center;}
.tab{  cursor: pointer; padding:10px 20px;  margin:0px 2px; background:#000; display:inline-block; color:#fff; border-radius:3px 3px 0px 0px; box-shadow: 0 0.5rem 0.8rem #00000080;}
.panels{ background:#fffffff6; box-shadow: 0 2rem 2rem #00000080; min-height:200px; width:100%; max-width:500px; border-radius:3px; overflow:hidden; padding:20px;  }
.panel{ display:none;  animation: fadein .8s;}
@keyframes fadein { from { opacity:0;} to { opacity:1;}}
.panel-title{  font-size:1.5em;  font-weight:bold}
.radio{  display:none;}
#one:checked ~ .panels #one-panel,#two:checked ~ .panels #two-panel,#three:checked ~ .panels #three-panel{  display:block}
#one:checked ~ .tabs #one-tab,#two:checked ~ .tabs #two-tab,#three:checked ~ .tabs #three-tab{ background:#fffffff6; color:#000; border-top: 3px solid #000;}
</style>
 

0

8

куча вкладок
Код:
<--HTML--><style> #p364 span {  margin: 0px auto;}#p364 .post-author { display: none;}#p364 .post-body, #p364 .post-links, #p364 .post-links ul { margin: 0 auto;} 

.putevodmenu { width: 809px; height: 562px; margin: 0px 0px 0px 59px; padding: 5px 0px 0px 5px;}
.putevodmenu > label { position: relative; display: inline-block; padding: 26.5px 45px 4px 20px; border: 1px solid transparent; border-bottom: 0; margin: 0px 0px 0px 20px; width: 90px; cursor: pointer; font-weight: 600; font-family: Futura PT Demi; text-transform: uppercase; color: #6b7175; font-size: 11px; }
.putevodmenu ssl { display: inline-block; position: absolute;margin: -17px 0px 0px 129px;font-family: Futura PT Demi; color: #6b7175; font-size: 11px; text-transform: uppercase;}
.putevodmenu > input[type="radio"] { position: absolute; left: -200vw;}
.putevodmenu .putev { display: none;}
.putevodmenu > input:first-child:checked ~ .pmenu > .putev:first-child,.putevodmenu > input:nth-child(3):checked ~ .pmenu > .putev:nth-child(2),.putevodmenu > input:nth-child(5):checked ~ .pmenu > .putev:nth-child(3),.putevodmenu > input:nth-child(7):checked ~ .pmenu > .putev:nth-child(4),.putevodmenu > input:nth-child(9):checked ~ .pmenu > .putev:nth-child(5),.putevodmenu > input:nth-child(11):checked ~ .pmenu > .putev:nth-child(6) { display: block;}
.putev {  padding: 30px 0;  border-top: 1px solid #ccc;}
.putevodmenu entert { width: 368px; height: 41px; display: inline-block; position: absolute; margin: 18px 0px 0px 444px !important; text-align: center; color: #ffffff; text-shadow: 1px 1px 1px #859f9b; font-size: 17px; text-transform: uppercase; font-family: Proxima Nova Semibold; line-height: 33px; padding: 0px 0px 0px 25px; background-repeat: no-repeat; letter-spacing: 0.9px; }
.putevodmenu uznay {display: inline-block; position: absolute; margin: 379px 0px 0px 514px !important; text-align: center; color: #ffffff; text-shadow: 1px 1px 1px #5c798a; font-size: 13px; text-transform: uppercase; font-family: Proxima Nova Semibold; letter-spacing: 0.9px;}
.levo { width: 440px; height: 400px;position: absolute;}
.levo u {text-transform: uppercase;background: #a899ca;padding: 3px;text-decoration: none;line-height: 21px;color: #f2f2f2;text-shadow: 1px 1px 1px #8370b0;}
.levo text {border-bottom-style: inset;display: inline-block;margin: 2px 0px 0px 0px;padding: 0px 0px 5px 0px; font-family: Proxima Nova Semibold;font-size: 11px;color: #f8f8f8;text-shadow: 1px 1px 1px #8899a4;border-width: 1.5px}
.pravo {width: 350px;height: 415px;position: absolute;margin: 50px 0px 0px 454px;}

.list {position: relative; margin: 17px 0px 0px -4px;width: 800px;padding: 5px;}
.list label { color: #555; cursor: pointer; display: block; float: left; width: 25px; height: 25px; margin: 1px 0px 0px 5px; line-height: 25px; position: relative; top: 2px; text-align: center;font-family: Proxima Nova Semibold; color: #ffffff;text-shadow: 1px 1px 1px #5c798a;font-size: 11px;}
.list input {position: absolute;left: -9999px;}
#lists_1:checked  ~ #lists_l1,#lists_2:checked  ~ #lists_l2,#lists_3:checked  ~ #lists_l3 {z-index: 5;}
.list_cont {position: relative;z-index: 2;height: 405px;}
.list_cont > div {position: absolute;left: -9999px;top: 0;opacity: 0;-moz-transition: opacity .5s ease-in-out;-webkit-transition: opacity .5s ease-in-out;transition: opacity .5s ease-in-out;}
#lists_1:checked ~ .list_cont #lists_c1,#lists_2:checked ~ .list_cont #lists_c2,#lists_3:checked ~ .list_cont #lists_c3 {position: static;left: 0;opacity: 1;}
label#lists_l1 {margin: 1px 0px 0px 362px;}
.putevodmenu podlogka3 {background-image: url(http://forumstatic.ru/files/001a/af/df/71612.png);width: 164px;height: 25px;position: absolute;display: inline-block;margin: 3px 0px 0px 286px !important;}
.putevodmenu podlogka2 {background-image: url(http://forumstatic.ru/files/001a/af/df/47887.png);width: 164px;height: 25px;position: absolute;display: inline-block;margin: 3px 0px 0px -132px !important;z-index: 0;}

.putevod {  background-image: url(http://forumstatic.ru/files/001a/af/df/84597.png);   width: 932px;   height: 562px;}


.etoput{ display:flex; flex-direction: column; align-items: center;}
.vklad { cursor: pointer; display: inline-block; float: left; width: 25px; height: 25px; margin: 0px 0px 0px 5px; line-height: 25px; position: relative; top: 3px; text-align: center; font-family: Proxima Nova Semibold; color: #ffffff; text-shadow: 1px 1px 1px #5c798a; font-size: 11px;    z-index: 2;  }
.vklads {margin: 400px 0px 0px 356px;}
.poleput {margin: 17px 0px 0px -4px;width: 800px;padding: 5px;height: 400px;}
.poput{ display:none;  animation: fadein .8s;}
@keyframes fadein { from { opacity:0;} to { opacity:1;}}
.radio{  display:none;}
#one1:checked ~ .poleput #one-poput,#two1:checked ~ .poleput #two-poput{  display:block}
#one1:checked ~ .vklads #one-vklad,#two1:checked ~ .vklads #two-vklad{ background:#fffffff6; color:#000; border-top: 3px solid #000;}

.dva-content zag { margin: 5px 0px 5px 0px; background-image: url(http://forumstatic.ru/files/001a/af/df/79891.png); width: 198px; height: 23px; display: inherit; text-align: center; font-family: Proxima Nova Semibold; color: #f1f1f1; text-shadow: 1px 1px 1px #846cb1; text-transform: uppercase; font-size: 13px; line-height: 24px; }
.dva-content vazg { background-image: url(http://forumstatic.ru/files/001a/af/df/69759.png); width: 198px; height: 23px; display: inherit; text-align: center; font-family: Proxima Nova Semibold; color: #f1f1f1; text-shadow: 1px 1px 1px #b6965b; text-transform: uppercase; font-size: 13px; margin: 5px 0px 5px 0px; line-height: 24px; }
.dva-content univ { background-image: url(http://forumstatic.ru/files/001a/af/df/92462.png); width: 198px; height: 23px; display: inherit; text-align: center; font-family: Proxima Nova Semibold; color: #f1f1f1; text-shadow: 1px 1px 1px #846cb1; text-transform: uppercase; font-size: 13px; margin: 5px 0px 5px 0px; line-height: 24px; }





.dva-wrap {    position: relative; width: 810px; margin: 25px 0px 0px -5px;height: 400px;}
input[type="radio"][name="dvas"] { position: absolute; z-index: -1;}
input[type="radio"][name="dvas"]:checked + .dva-label-content label {color: white;}
input[type="radio"][name="dvas"]:checked + .dva-label-content .dva-content {display: block;}
.dva-wrap label { cursor: pointer; color: rgba(255, 255, 255, 0.8); background-color: #00bcd4; display: inline-flex; height: 35px; transition: color 0.2s ease; background-image: url(http://forumstatic.ru/files/001a/af/df/60246.png); margin: 0px 0px 0px 500px; width: 311px; font-size: 0px; background-repeat: no-repeat; }
.dva-label-content {width: 100%;}
.dva-label-content .dva-content {    position: absolute; line-height: 130%; display: none; width: 447px; height: 425px; padding: 3px 0px 0px 5px;top: -7px;    font-family: Proxima Nova Semibold; font-size: 11px; color: #f8f8f8; text-shadow: 1px 1px 1px #8899a4;}
</style>




<div class="putevod">
<div class="putevodmenu">
<!-- Tab 1 -->
<input type="radio" name="putevodmenu" id="tab1" aria-controls="pmenur" checked><label for="tab1" style="margin: 0px 0px 0px 87px;">Развлечения</label>
<input type="radio" name="putevodmenu" id="tab2" aria-controls="pmenuk"><label for="tab2">Кафе и бары</label>
<input type="radio" name="putevodmenu" id="tab3" aria-controls="pmenus"><label for="tab3">Шоппинг</label>
<input type="radio" name="putevodmenu" id="tab4" aria-controls="pmenup"><label for="tab4">Полезно знать</label>
  <div class="pmenu">
    <section id="pmenur" class="putev"><ssl>tinder.rusff.me/entertaiment</ssl>
<entert style="background-image: url(http://forumstatic.ru/files/001a/af/df/36819.png)">entertainment</entert>     
<section class="list"><input id="lists_1" type="radio" name="tab" checked="checked" /><input id="lists_2" type="radio" name="tab" /><input id="lists_3" type="radio" name="tab" /><div class="list_cont"><div id="lists_c1">
<div class="levo">
<text><u>Здание Центрального вокзала</u> (Grand Central Terminal) – памятник эре великих железнодорожных путешествий и когда-то самый большой вокзал в мире. Правда, сегодня уехать с помпой отсюда можно только в пригороды Нью-Йорка.</text><text>
Рядом с вокзалом вздымается <u>Крайслер-билдинг</u> (Chrysler Building) – самый красивый небоскреб Нью-Йорка в стиле ар-деко. Отделка фойе из агадирского мрамора из Марокко, янтаря и мексиканского оникса вне конкуренции. Здание задумывалось, как самое высокое в мире. Автомобильный король Уолтер Крайслер предусмотрел даже секретный шпиль, чтобы в последний момент сделать небоскреб уж наверняка самым высоким. Однако вскоре неподалеку появился <u>Эмпайр-стейт-билдинг</u> (Empire State Building) – самый известный небоскреб Нью-Йорка высотой в 103 этажа.</text><text>Не спеши бежать на смотровую площадку Эмпайр-стейт-билдинг, ведь есть вариант лучше – <u>Top of the Rock</u> в Рокфеллеровском центре. Панорама оттуда не испорчена сеткой-рабицей, нет многочасовых очередей, а билеты стоят гораздо дешевле ($ 32) и продаются на определенное время. К тому же с Top of the Rock открывается великий вид на шпиль, собственно, Empire State Building и зеленое полотно Центрального парка. Можешь купить билет-комбо за $ 47 и попасть на обзорную площадку аж два раза: на рассвете и закате. Кроме того, в <u>Рокфеллеровском центре</u> (Rockefeller Center) с октября по апрель работает каток, а к Рождеству устанавливают главную елку Нью-Йорка.</text><text style="border:none">Загляни в <u>Нью-Йоркскую публичную библиотеку</u> (The New York Public Library). Здесь можно бродить по величественным залам и представлять, как за длинными столами с медными лампами работали Лев Троцкий, Норман Мейлер, Том Вулф и десятки других известных людей.</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/82492.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/58323.png" style="float: right;"></div>

</div><div id="lists_c2">

<div class="levo"><text>Мимо Уолл-Стрит можно было бы легко проскочить, если бы не церквушка в неоготическом стиле. <u>Церковь Троицы</u> (Trinity Church) на протяжении двух десятилетий до 1890 года оставалось самым высоким зданием не только Нью-Йорка, но и всех Штатов, а шпиль церкви с сияющим крестом был маяком для входящих в гавань судов.</text><text>Если хочешь пересечь Ист-Ривер пешком, нет лучшего способа сделать это, чем прогуляться по <u>Бруклинскому мосту</u> (Brooklyn Bridge). В 1883 году первый мост через Ист-Ривер был достроен, и все рекорды для подвесных мостов были беcпощадно побиты.</text><text><u>Музей города Нью-Йорка</u> (Museum of the City of New York). Еще один музей возле Центрального парка, который мы советуем посетить всем и работает по принципу «плати сколько хочешь». Помимо крутого старого здания, в музее очень хорошая экспозиция, часть из которой интерактивная. Здесь ты найдешь залы, подробно и нескучно рассказывающие историю развития Нью-Йорка от города бобровых шкур до нашего времени. Отдельно можно долго залипать на экспозицию, которая подробно объясняет правила застройки и зонирования в городе. Музей также организует бесплатные туры, которые проводят кураторы, просто приходи к этому времени и присоединяйся к группе.</text><text style="border:none"><u>Union Square Park.</u> Центральное место встреч нью-йоркцев – здесь тусуются фрики, уличные танцоры и музыканты. Сделай короткую передышку: выпей кофе, поиграй в шахматы с местными, понаблюдай за городскими сумасшедшими. В выходные приходи сюда на фермерский рынок, а в ноябре и декабре на большую рождественскую ярмарку.</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/36922.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/33975.png" style="float: right;"></div></div><div id="lists_c3">

<div class="levo"><text><u>Метрополитен-музей</u> (Metropolitan Museum of Art) – гигантский музей с самым большим художественным собранием в Западном полушарии. Находится в той же лиге, что и Эрмитаж с Лувром. Метрополитен растянулся на четыре квартала, а чтобы его осмотреть, нужно ходить неделю, как на работу. Правда, посещать его сюда можно хоть каждый день: «рекомендованная» цена билета – $ 25, но если денег совсем нет, то можно и не платить. В грандиозной коллекции музея более трех миллионов произведений искусства.</text><text>Если считаешь, что современное американское искусство – это только поп-арт, добавь в свой список <u>Музей американского искусства Уитни.</u> Музей пользуется особой любовью богемной нью-йоркской тусовки. Здесь хранятся произведения исключительно американских деятелей искусства от 20-х годов прошлого века до современности. Разглядывание работ Энди Уорхола, Эдварда Хоппера, Кита Хэринга поможет лучше понять Америку и сам Нью-Йорк. Из магазинчика при музее тяжело не уйти с психоделическим плакатом или большой сумкой с уорхоловскими принтами.</text><text><u>Barclays Center.</u> Огромная арена, где играют в баскетбол (Brooklyn Nets) и хоккей (New York Islanders), а также устраивают концерты звезды первой величины, такие, как Black Keys и Jay Z. Последний считается покровителем арены и часто сам является на матчи.<br>Если ты фанатеешь по бейсболу, не пропусти самый дорогой бейсбольный стадион в истории и второй по стоимости стадион в мире. <u>Стадион «Янки»</u> (Yankee Stadium) – одно из главных нью-йоркских святилищ.</text><text style="border:none">Поездка на пароме на <u>Стейтен-Айленд</u> (Staten Island), пожалуй, одно из лучших бесплатных развлечений Нью-Йорка. Выходи на нос трехэтажной оранжевой махины и наслаждайся отличными видами на Бруклинский мост, мост Верразано, Нижний Манхэттен и статую Свободы.</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/46012.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/24968.png" style="float: right;"></div></div><uznay>узнай о нью-йорке больше</uznay></div>
<podlogka3></podlogka3><label for="lists_1" id="lists_l1">1</label><label for="lists_2" id="lists_l2">2</label><label for="lists_3" id="lists_l3">3</label><div style="clear:both"></div>
</section>
</section>
<section id="pmenuk" class="putev"><ssl>tinder.rusff.me/cafebar</ssl><entert style="background-image: url(http://forumstatic.ru/files/001a/af/df/27496.png)">cafes and bars</entert>


<div class="etoput">
  <input class="radio" id="one1" name="group" type="radio" checked>
  <input class="radio" id="two1" name="group" type="radio"> <div class="poleput">  <div class="poput" id="one-poput">
<div class="levo">
<text><u>Joe’s Pizza.</u> Крошечная пиццерия с неприглядным интерьером в Гринвич-Виллидж. Когда речь заходит об эталонной нью-йоркской пицце, местные сразу вспоминают это заведение. Ресторанчик засветился в сериале «Друзья», а Человек-паук работал здесь разносчиком пиццы.<br>Бейгл – бублик, без которого представить Нью-Йорк так же тяжело, как Францию – без багетов. Да, бейглы продаются на каждом угле, но вряд ли найдешь вкуснее тех, что пекут в <u>Murrayʼs.</u> Попробуй классический со щедро намазанным слоем мягкого сыра и пластинками лосося. Если тебя уже не остановить, то выбирай бейглы с вялеными томатами, с салатом из копченой белой рыбы или с омлетом и кошерной колбасой.</text><text><u>Каt’z Delicatessen.</u> Гибрид советской столовой и американского дайнера от еврейских основателей. Самое знаменитое блюдо – огромный сэндвич с копченым мясом и огурчиками обойдется в $ 19.95. Уже четыре американских президента и герои фильма «Когда Гарри встретил Салли» посетили это культовое место, теперь твоя очередь.<br>Если пробьет на еду в три часа ночи, а в кармане останется только три доллара, загляни в <u>Mamouns Falafel.</u> Здесь тебе приготовят лучший в городе фалафель, за который так легко продать душу.</text><text style="border:none"><u>Artichoke Basille’s Pizza.</u> Сетка пиццерий по всему городу и культовое место всех тусовщиков открыто до 5 утра. Огромный кусок божественной пиццы с артишоками обойдется в $5, но даже его стоит делить пополам, чтоб не лопнуть.<br>За каноническими нью-йоркскими хот-догами отправляйся на Coney Island в <u>Nathan’s Famous.</u> Сто лет назад прямо здесь придумали этот вездесущий фаст-фуд. Цены по понятным причинам завышенные: ритуальный хот-дог в исторической точке под старой вывеской на Surf Ave обойдется в $5.</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/49452.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/50682.png" style="float: right;"></div>  </div>


  <div class="poput" id="two-poput">
<div class="levo">
<text><u>McSorley's Old Ale House.</u> Самый старый бар Нью-Йорка, открытый в 1854 году. Здесь за все время побывали практически все исторически важные американские персонажи, которых ты только можешь вспомнить. Бар слышал все: от речей Линкольна до пьяных откровений Джона Леннона.<br><u>Cafe Wha?.</u> Олдовый клуб для записных снобов. Ты никогда не знаешь, кого из селебрити застанешь за соседним столиком в эту пятницу, но твое эго здорово потешит осознание того, что когда-то на сцене Cafe Wha? Выступали еще никому не известные Джими Хендрикс, Бил Кросби и Боб Дилан. «Домашний» бэнд Cafe Wha? упоительно исполнит трибьют на Стиви Уандера, Майкла Джексона или Боба Марли, только успевай промокать платочек. На сцене запросто и без предупреждения появляются звезды любой величины, так что держи айфон в боевой готовности.</text><text><u>The Pony Bar.</u> Это мекка для пивных бро, которые любят сплетаться бородами над бокальчик местного IPA. На восточном побережье все игроки в untappd стремятся именно сюда. Двадцать кранов, пиво на которых постоянно ротируется. Выбирай, что нравится, или попроси совета у барменов – они прокачанные и подберут тебе идеальный напиток по твоим запросам. На сидячее место особенно рассчитывать не стоит, если ты пришел ближе к вечеру, но постоять вокруг бочек и потереться плечами с соседями тоже будет круто.</text><text style="border:none"><u>Death + Company.</u> В тусклом баре с деревянной стойкой сбивают знаменитые убойные коктейли. Если нет свободного места, оставь номер телефона и тебе перезвонят через минут тридцать. После четырех утра здесь можно проснуться другим человеком.<br>Будешь рядом – загляни в <u>Tin Kettle,</u> где предлагают свое фирменное пиво, неплохие бургеры и очень приятный по цене happy hour (хорошие места в Нью-Йорке, где пиво по $3, можно сосчитать по пальцам).</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/62286.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/53801.png" style="float: right;"></div> </div>

<uznay>узнай о нью-йорке больше</uznay><div class="vklads"><label class="vklad" id="one-vklad" for="one1">1</label> <label class="vklad" id="two-vklad" for="two1">2</label></div> <podlogka2></podlogka2>

  </div> <!--  концовка poleput   -->
</div>   <!--  концовка etoput   -->




    </section>
    <section id="pmenus" class="putev"><ssl>tinder.rusff.me/shopping</ssl><entert style="background-image: url(http://forumstatic.ru/files/001a/af/df/74130.png)">shopping</entert>
<div class="poleput"><div class="levo"><text><u>Chelsea Market</u> – крупнейший городской рынок Нью-Йорка недалеко от High Line Park. На территории бывшей фабрики печенья Oreo легко потеряться в лабиринте закусочных, магазинов и кафе. Отличное место, чтобы перекусить вызывающими зависимость тако в Los Tacos No. 1, попробовать лучшие морепродукты Нью-Йорка в The Lobster Place и выпить хорошего кофе в Ninth Street Espresso.<br><u>Other Music.</u> Один из редких музыкальных магазинов Нью-Йорка, где можно найти музыку независимых лейблов и немэйнстримовый качественный андеграунд на виниле и CD. До сих пор здесь продают современный детроитский хаус и редкий афробит.</text><text><u>Barnes & Noble.</u> Крупнейшая сетка книжных магазинов в Штатах. В гигантском четырехэтажном здании магазина возле Union Square легко потеряться. В качестве незаезженного сувенира можно купить книжку с крутыми фотографиями «Humans of New York».<br><u>Hell’s Kitchen Flea Market.</u> Любимая «блошка» манхэттенцев. Приходи сюда в выходные, чтобы собрать винтажный лук. Столько всего такого ненужного и такого интересного!<br><u>Union Square Greenmarket.</u> Фермерский рынок, где можно купить фрукты и овощи прямо с грядки. За прилавками стоят сами фермеры, пекари, рыбаки и цветоводы. Приходи сюда за медом, соленьями, домашним сыром и теплым хлебом, джемами и вареньем, вином и яблочным сидром. Все органическое и экологически чистое, а еще на ярмарке работает центр по приему использованных батареек и мусора.</text><text style="border:none"><u>Midtown Comics.</u> Если фанатеешь от комиксов, ты в правильном месте. Найдешь здесь и редкие экземпляры «Супермена», и одну из крупнейших в мире коллекций манги. Цены разные: от нескольких десятков до тысяч долларов.</text></div><div class="pravo"><img src="http://forumstatic.ru/files/001a/af/df/44707.png" style="float: left;padding: 0px 0px 10px 0px;"><img src="http://forumstatic.ru/files/001a/af/df/25565.png" style="float: right;"></div><uznay>узнай о нью-йорке больше</uznay></div>


    </section>


 <section id="pmenup" class="putev"><ssl>tinder.rusff.me/information</ssl><entert style="background-image: url(http://forumstatic.ru/files/001a/af/df/51381.png)">information</entert><uznay style="margin: 401px 0px 0px 509px !important;">выбери категорию из списка</uznay>
    

<div class="dva-wrap">
  
    <input type="radio" name="dvas" id="dva1" checked>
    <div class="dva-label-content" id="dvab1-content">
<label for="dva1" style="background-position: -8px -4px;margin: 42px 0px 0px 500px;"> 1</label>
      <div class="dva-content"><img src="http://forumstatic.ru/files/001a/af/df/46616.png">
 После окончания средней школы в возрасте 18 лет будущий специалист должен получить степень бакалавра в университете. Дисциплина особого значения не играет, но лучше, если это будут естественные науки. От выбранной врачебной специальности зависит то, какой экзамен надо будет сдать после прохождения обучения. Параллельно с получением степени бакалавра студент дополнительно проходит программу обучения на подготовительных медицинских курсах (Pre-Med).
<zag>Заголовок</zag>
<vazg>Важное</vazg>
<univ>Название универа</univ>
</div>
    </div>
     
    <input type="radio" name="dvas" id="dva2">
    <div class="dva-label-content" id="dva2-content">
<label for="dva2" style="background-position: -8px -50px;">2</label>
      <div class="dva-content">2222222222</div>
    </div>
    
    <input type="radio" name="dvas" id="dva3">
    <div class="dva-label-content" id="dvab3-content">
<label for="dva3" style="background-position: -8px -96px;"> 3</label>
      <div class="dva-content">333333333</div>
    </div>
  
     <input type="radio" name="dvas" id="dva4">
     <div class="dva-label-content" id="dva4-content">
<label for="dva4" style="background-position: -8px -142px;"> 4</label>
      <div class="dva-content">44444444444</div>
    </div>
   
     <input type="radio" name="dvas" id="dva5">
     <div class="dva-label-content" id="dva5-content">
<label for="dva5" style="background-position: -8px -188px;">5</label>
      <div class="dva-content">5555555555555</div>
    </div>
  
     <input type="radio" name="dvas" id="dva6">
     <div class="dva-label-content" id="dva6-content">
<label for="dva6" style="background-position: -8px -234px;">6</label>
      <div class="dva-content">666666666666666</div>
    </div>

     <input type="radio" name="dvas" id="dva7">
     <div class="dva-label-content" id="dva7-content">
<label for="dva7" style="background-position: -8px -280px;">7</label>
      <div class="dva-content">77777777777777777</div>
    </div>



</div>







    </section>
  </div>
  
</div>







</div>

0

9

Код:
<!--HTML--><style>.phone1 {width: 300px;padding: 15px;  background-color: #3A2D2D; border: 2px solid #655959;border-radius: 20px;}
.setphone1 {width: 300px; padding: 15px;background-color: #3A2D2D;border: 2px solid #655959;border-radius: 20px;}
.setphone2 {    margin-top: 3px;   width: 30px;    height: 2px;    background-color: #696969;border-radius: 20px;margin-left: 45px;}
.setphone3 {   height: 20px; background-color: #FFFFFF;color: black;   font-size: 9px;    font-family: Helvetica;}
.setphone4 {    width: 298px;    border: 1px solid #eee;}
.setphone5 {margin-bottom: 18px;    margin-top: 5px;    width: 30px;   height: 30px;border-radius: 100%;    border: 1px solid #cecece;}
.setphone6 {    position: relative;    top: -52px;    width: 10px;  height: 10px;  border: 1px solid #cecece;  border-radius: 3px;   margin-bottom: -37px;}
.setphone7 {   padding-top: 5px;   padding-bottom: 5px;    background-color: #fafafa;   font-family: calibri; }
.setpole {width: 290px; height: 400px; background-color: white; overflow-x: hidden; overflow-y: auto;}
.setpole::-webkit-scrollbar {width: 4px;}
.setpole::-webkit-scrollbar-track {background: #3C2516;}
.setpole::-webkit-scrollbar-corner {background: #EDEEF0;}
.setpole::-webkit-scrollbar-thumb {border-top: 0px;border-bottom: 0px;background-color: rgb(142, 163, 202);}
wan {position: absolute;display: block;margin: 6px 13px;}
two {position: absolute;display: block;margin: 6px 138px;}
tri {position: absolute;display: block;margin: 6px 0px 0px 261px;}

.lavviphone1 {width: 300px;padding: 15px;      background-color: #eae9e2;    border: 2px solid #dadad1;border-radius: 20px;}
.lavviphone2 {    margin-top: 3px;   width: 30px;    height: 2px;    background-color: #696969;border-radius: 20px;margin-left: 45px;}
.lavviphone3 {   height: 20px; background-color: #FFFFFF;color: black;   font-size: 9px;    font-family: Helvetica;}
.lavviphone4 {    width: 298px;    border: 1px solid #eee;}
.lavviphone5 {margin-bottom: 18px;    margin-top: 5px;    width: 30px;   height: 30px;border-radius: 100%;    border: 1px solid #a7a6a1;}
.lavviphone6 {    position: relative;    top: -52px;    width: 10px;  height: 10px;  border: 1px solid #a7a6a1;  border-radius: 3px;   margin-bottom: -37px;}
.lavviphone7 {   padding-top: 5px;   padding-bottom: 5px;    background-color: #fafafa;   font-family: calibri; }
.lavvipole {width: 290px; height: 400px; background-color: white; overflow-x: hidden; overflow-y: auto;}
.lavvipole::-webkit-scrollbar {width: 4px;}
.lavvipole::-webkit-scrollbar-track {background: #3C2516;}
.lavvipole::-webkit-scrollbar-corner {background: #EDEEF0;}
.lavvipole::-webkit-scrollbar-thumb {border-top: 0px;border-bottom: 0px;background-color: rgb(215, 209, 220);}


.base-container {width: 100%;}
.friend-text-div {display: flex;margin-left: 0.5rem;}
.friend-text-div > img {height: 2rem; align-self: flex-end;}
.friend-text-container {width: 14rem;display: flex; flex-direction: column;}
.friend-text { background: #262626; border-radius: 0.5rem; color: #fff; height: fit-content; width: fit-content; padding: 0.5rem 1rem; margin: 0.12rem 0.5rem;text-align: left;}
.my-text-div {display: flex; justify-content: flex-end;}
.my-text-container { display: flex; flex-direction: column;align-items: flex-end;width: 15rem;}
.my-text {background: linear-gradient(180deg,rgba(139, 47, 184, 1) 0%,rgba(103, 88, 205, 1) 51%,rgba(89, 116, 219, 1) 92%)no-repeat center;background-attachment: fixed; color: #fff;border-radius: 0.5rem 0.2rem 0.2rem 0.5rem;height: fit-content;width: fit-content;padding: 0.5rem 1rem;margin: 0.12rem 0.5rem;    text-align: end;}
.my-text-container > div:first-child {border-radius: 0.5rem 1rem 0.2rem 0.5rem;}
.my-text-container > div:last-child {border-radius: 0.5rem 0.2rem 1rem 0.5rem;}
.friend-text-container > div:first-child { border-radius: 1rem 0.5rem 0.2rem 0.5rem;}
.friend-text-container > div:last-child {border-radius: 0.5rem 0.2rem 0.5rem 1rem;}
</style>
Код:
<!--HTML--><center><div class="setphone1"><table cellspacing="0" cellpadding="0"><tbody><tr><td width="80"></td><td><div class="setphone2"></div></td></tr></tbody></table><div class="setphone3">
<wan><i class="fa fa-circle" aria-hidden="true"></i><i class="fa fa-circle" aria-hidden="true"></i><i class="fa fa-circle-o" aria-hidden="true"></i><i class="fa fa-circle-o" aria-hidden="true" style="margin: 0px 5px 0px 0px;"></i>BELL<i class="fa fa-wifi" aria-hidden="true" style="font-size: 10px;margin: 0px 0px 4px 4px;"></i></wan>
<two>11:39 AM</two>
<tri>38% <i class="fa fa-battery-three-quarters" aria-hidden="true" style="margin: 0px 0px 0px 2px;"></i></tri>
</div><div class="setphone4"><div class="setphone7"><center>
<div class="setpole">


<div class="base-container">
<div class="friend-text-div"><img src="https://i.imgur.com/B5qokfC.jpg" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Привет</div>
<div class="friend-text">Не ожидала, что у простого гитариста столько подписчиков 😅</div>
 </div></div>

  <div class="my-text-div"> <div class="my-text-container">
<div class="my-text">Как Отто? Сделал тебе предложение, и ты хочешь пригласить меня в качестве вашего шафера к вам на свадьбу?</div>
<div class="my-text">👏</div>
<div class="my-text">Кстати, как прошел день? Извини, что не ответил раньше, был немного занят</div>
<div class="my-text">Чем сейчас занимаешься?</div>
</div> </div>

<div class="friend-text-div"><img src="https://i.imgur.com/B5qokfC.jpg" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Не страшно, день прошел тяжело, голова отказалась со мной дружить после всего выпитого вчера, а у тебя? 🙆</div>
<div class="friend-text">я весь день валялась и ленилась ☀️ а чем был занят ты?</div>
 </div></div>
</div>

</div></center></div></div><br><div class="setphone5"></div> <br><div class="setphone6"></div></div></center>


<br><br><br><br><br>
<center><div class="lavviphone1"><table cellspacing="0" cellpadding="0"><tbody><tr><td width="80"></td><td><div class="lavviphone2"></div></td></tr></tbody></table><div class="lavviphone3">
<wan><i class="fa fa-circle" aria-hidden="true"></i><i class="fa fa-circle" aria-hidden="true"></i><i class="fa fa-circle-o" aria-hidden="true"></i><i class="fa fa-circle-o" aria-hidden="true" style="margin: 0px 5px 0px 0px;"></i>BELL<i class="fa fa-wifi" aria-hidden="true" style="font-size: 10px;margin: 0px 0px 4px 4px;"></i></wan>
<two>15:25 AM</two>
<tri>92% <i class="fa fa-battery-full" aria-hidden="true" style="margin: 0px 0px 0px 2px;"></i></tri></div>
<div class="lavviphone4"><div class="lavviphone7"><center>

<div class="lavvipole"><div class="base-container">
<div class="my-text-div"><div class="my-text-container">
<div class="my-text">Привет</div>
 <div class="my-text">Не ожидала, что у простого гитариста столько подписчиков 😅</div>
</div></div>

 <div class="friend-text-div"><img src="https://i.imgur.com/Zw0UjDel.jpg?1" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Как Отто? Сделал тебе предложение, и ты хочешь пригласить меня в качестве вашего шафера к вам на свадьбу?</div>
<div class="friend-text">👏 </div>
<div class="friend-text">Кстати, как прошел день? Извини, что не ответил раньше, был немного занят</div>
<div class="friend-text">Чем сейчас занимаешься?</div>
 </div></div>

<div class="my-text-div"><div class="my-text-container">
<div class="my-text">Не страшно, день прошел тяжело, голова отказалась со мной дружить после всего выпитого вчера, а у тебя? 🙆 </div>
<div class="my-text">я весь день валялась и ленилась ☀️ а чем был занят ты? </div>
</div></div>

 <div class="friend-text-div"><img src="https://i.imgur.com/Zw0UjDel.jpg?1" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Та же ерунда с головой. Говорят, чтоб голова не болела нужен свежий воздух. Знаю одну крышу, куда могут пустить, там воздух отменный 🌌 Как насчёт сегодня/сейчас полечиться?</div>
 </div></div>

<div class="my-text-div"><div class="my-text-container">
<div class="my-text">Ох, не уверена, что готова лечиться сегодня, особенно так поздно, все-таки завтра на работу 💀. Но если ты будешь в районе X, пиши, можем как нибудь вместе пообедать. По крайней мере, все будни я точно там буду 👩🏼‍💻)</div> 
</div></div>

 <div class="friend-text-div"><img src="https://i.imgur.com/Zw0UjDel.jpg?1" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Окей, пожалуй напишу отто, может он будет по сговорчивей 😅 </div>
<div class="friend-text"> а вообще уже действительно поздно, кому то пора спать!</div>
 </div></div>

<div class="my-text-div"><div class="my-text-container">
<div class="my-text">Сладких снов, просто неизвестный гитарист 😴🎸))</div> 
</div></div>
 
 <div class="friend-text-div"><img src="https://i.imgur.com/Zw0UjDel.jpg?1" style="border-radius: 100px;"><div class="friend-text-container">
<div class="friend-text">Спокойной ночи 🌙 </div> 
 </div></div>

</div></div>
</center></div></div><br><div class="lavviphone5"></div> <br><div class="lavviphone6"></div></div></center>

0

10

Код:
<!--HTML--><!--выделить код-->
<script type="text/javascript" src="http://forumstatic.ru/files/0015/c4/3f/26102.js"></script>
<script>eval(select_text.toString().replace(/\}$/,'try{document.execCommand("copy")}catch(e){}}'))</script>
<script type="text/javascript">select_text.linkText = 'выделить [копируется сразу]' //текст ссылки</script>
<!— конец —>

<div class="guestbook">
  <div class="guestbooktop">
 
  <div class="guestbookbottom">

<div class="guestcode"><strong class="legend"><a href="javascript://" onclick="select_text($(this).parent().next().find('pre').get(0));return!1">Выделить код</a></strong><div class="blockcode"><div class="scrollbox"><pre>имя Фамилия внешности на англ. / &lt;a href="ссылка_на_профиль"&gt;ник&lt;/a&gt;</pre></div></div>
  </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Nunito:wght@400;600;700;800&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.guestbook {
  background:#e0dfd8;
  width: 550px;
  border: 20px solid #e0dfd8;
  margin: auto;
  position: relative
}

.guestbooktop {
  background: url(http://forumstatic.ru/files/001a/da/fe/77879.jpg) no-repeat left -30px, url(http://forumstatic.ru/files/001a/da/fe/30614.jpg);
  background-size: 150%;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 25px), 0% 100%);
  width: 100%;
  height: 100%
}

.guestcover {
  background: rgba(0,0,0,.25);
  height: 100%;
  color: #d3d2d2;
  text-shadow: 1px 1px 1px #000;
  padding: 20px 20px 50px 20px;
  text-align: justify
}

.guestcover span {
  display: block;
  text-align: center;
  font: normal 30px tinos;
  text-transform: uppercase;
  letter-spacing: 5px;
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 0
  
}

.guestcover .info {
  font: 500 7px nunito;
  background: rgba(0,0,0,.5);
  padding: 5px 10px;
  margin: 10px 0;
  border: 0;
  letter-spacing: 2px
}

.guestcover div {
  font: 500 11px/18px nunito;
  padding-right: 5px;
}

.faces_names {
  margin-top: 15px;
  display: flex;
  justify-content: space-between
}

.guestblock {
  font: 800 13px nunito;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  width: 270px;
}

.guestblock > div {
  overflow-y: auto;
  max-height: 150px
}

.guestblock span {
  font: 600 10px nunito;
  text-transform: none;
  letter-spacing: 0px;
  display: block;
  margin: 5px
}

.guestblock span:first-child {
  margin-top: 10px
}

.guestrules {
  margin: 16px 5px 0 5px;
  font: 600 10px/16px nunito;
  border-top: 1px solid rgba(0,0,0,.2);
  padding-top: 16px
}

.guestbookbottom {
  background: url(http://forumstatic.ru/files/001a/da/fe/77879.jpg) no-repeat left -100px;
  background-size: cover;
  clip-path: polygon(0% 25px, 100% 0%, 100% 100%, 0% 100%);
  width: 100%;
  height: 100px;
  margin-top: 15px
}

.guestcode {
  top: 30px;
  position: relative;
  width: calc(100% - 30px);
  margin: auto
}

.guestbookbottom .blockcode {background: rgba(0,0,0,.8);
padding: 35px 0 10px 0;
color: #d3d2d2;
text-align: center;
}

.guestbookbottom strong.legend {
color: #e7e7e7;
 background: #4E5A67;
  font-family: nunito;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  padding: 3px 0px;
  margin-top: 5px !important;
  margin-left: 5px;
  position: absolute;
  display: block;
  width: calc(100% - 10px);
  text-align: center
}

.guestbookbottom .legend a {color: #e7e7e7}
.guestbookbottom .legend a:hover {color: #888}

.guestbookbottom .scrollbox{width: auto !important;}

.guestbookbottom pre {font-family: montserrat !important;
font-size: 9px;
}
</style> </div>

0

11

Код:
<!--HTML--><style>div#p496 .post-author { display: none;}
.calend { width: 927px; height: 600px; margin: 0px 0px 0px -253px; }
#december {background-image: url(http://forumstatic.ru/files/001a/a3/aa/73721.png);}
.pole1, .pole2, .pole3, .pole4{ display: block; position: absolute; }
.pole3 { color: #fff; margin: 164px 0px 0px 471px; width: 433px; padding: 5px; font-size: 10px; }
.pole2 { width: 561px; height: 138px; margin: -1px 0px 0px 349px; color: white; font-size: 9px; padding: 5px; }
.pole1 { width: 323px; height: 163px; margin: 34px 0px 0px 6px; padding: 3px; overflow: auto; }
.sinii { color: #fff; font-size: 9px; width: 272px; height: auto; margin: 5px 5px 0px 3px; line-height: 10px; background: #fefcea; background: linear-gradient(to top, #677a8d, #4a5b6d); padding: 5px 5px 5px 35px; border: 1px solid #7e9ac1; }
.sinii img { background: #48506d; padding: 3px; position: absolute; margin: 0px 0px 0px -30px; border: 1px solid #7e88a0; }
.jeltii { color: #fff; font-size: 9px; width: 272px; height: auto; margin: 5px 5px 0px 3px; line-height: 10px; background: #afa230; background: linear-gradient(to top, #b9a45e, #9a7c40); padding: 5px 35px 5px 5px; border: 1px solid #bfaa82; text-align: end; }
.jeltii img { background: #f1d27d; padding: 3px; position: absolute; margin: 0px 0px 0px 278px; display: block; border: 1px solid #ffffff; }
.pole4 { text-align: center; color: #fff; margin: 212px 0px 0px 9px; width: 550px; padding: 5px; font-size: 18px; font-variant: small-caps; text-shadow: 1px 1px 3px #dcd7ba, -1px -1px 3px #c5c18e; }

.pole1::-webkit-scrollbar {width: 3px}
.pole1::-webkit-scrollbar-track {    background: linear-gradient(84deg, #a3ccff, #626573)}
.pole1::-webkit-scrollbar-thumb { background: linear-gradient(160deg, #cfd4e2, #7d98c5)!important;box-shadow: none; border: none;}
</style>

<div id="december" class="calend">
<div class="pole1">
<div class="sinii"><img src="https://vk.com/emoji/e/f09f8e81.png"> Обязательными к выполнению являются всего 5 заданий на твой выбор из предложенного на неделю списка. Так ты можешь сам для себя определить, что бы тебе хотелось делать на текущей неделе и без проблем закрыть необходимое кол-во заданий.</div>
<div class="jeltii"><img src="https://vk.com/emoji/e/f09f8e81.png">У тебя есть возможность пропустить задание (максимум 2 задания в неделю), заплатив за это в Банке форумной валютой. О пропуске задания нужно также указать в шаблоне с выполненными тобой заданиями. Заметь, что второй пропуск будет стоить дороже.</div>
<div class="sinii"><img src="https://vk.com/emoji/e/f09f8e81.png">Ты приступил к выполнению месяца позднее? Не беда, ты все еще можешь закрыть предыдущие недели без проблем.</div>
<div class="jeltii"><img src="https://vk.com/emoji/e/f09f8e81.png">Можно выполнить задания всего месяца хоть за день, при этом ты получишь приятный бонус текущего месяца: $200, если пройдешь все за неделю, $150 - за две и $100 - за три. На предыдущие месяцы это не распространяется.</div>

<div class="sinii"><img src="https://vk.com/emoji/e/f09f8e81.png">Если к концу текущего месяца у тебя останутся не пройденные задания, месяц считается не закрытым.</div>
<div class="jeltii"><img src="https://vk.com/emoji/e/f09f8e81.png">С наступлением нового месяца ты можешь взяться за прохождение предыдущего, не засчитанного месяца, заплатив в банке денежную неустойку. Это правило не распространяется на предыдущие месяцы, которых ты не открывал. Например, если в марте ты проходишь текущий месяц и параллельно открыл ранее не открытый тобой февраль, то неустойку платить не нужно.</div>
<div class="sinii"><img src="https://vk.com/emoji/e/f09f8e81.png">Одновременно можно проходить не больше <i>двух месяцев</i>. То есть, к примеру, если у тебя был открыт январь, и ты открыл, но не успел пройти параллельно с ним февраль, то текущий месяц – март ты не сможешь проходить, пока не закроешь хотя бы один из предыдущих месяцев. Это стоит учесть.</div>
<div class="jeltii"><img src="https://vk.com/emoji/e/f09f8e81.png">Задания месяца можно выполнять не по порядку, но нельзя смешивать задания разных недель. То есть ты можешь выполнить, например, третью неделю, а потом первую, но нельзя выполнить два задания первой недели и три – третьей, если хочешь, чтобы мы засчитали тебе неделю как положено.</div>

</div>


<div class="pole2"><img src="https://vk.com/emoji/e/f09f8e81.png" style="-webkit-transform: rotate(341deg); transform: rotate(341deg); margin: 6px 0px 0px 14px;">
<tekkst>Представляем тебе наш праздничный календарь.<br><br>
Он будет обновляться раз в месяц, что весьма логично. При этом каждый месяц разделен на четыре тематические недели, связанные с определенным праздником. Ты можешь увидеть, что мы празднуем на текущей неделе, кликнув по выделенной дате. Таким образом справа перед тобой появится список заданий, рассчитанный ровно на одну неделю и состоящий из 8 заданий.<br><br>
Для того, чтобы поучаствовать в праздничном месяце, тебе нужно заполнить первый шаблон в данной теме, тем самым открыв месяц на своей личной странице; затем тебе придется выполнить задания всех четырех недель, собрав при этом воспоминания – соответствующие наградки за каждую пройденную неделю, которые будут храниться во все том же разделе на твоей личной странице и могут использоваться в качестве иконок в профиль. Пройдя все четыре недели, ты закроешь праздничный месяц и получишь главный приз месяца.</tekkst></div>
<div class="pole3">Шаблон заполняется и отправляется только тогда, когда все задания недели уже выполнены и мы можем проставить воспоминание на твою личную страничку.</div>
<div class="pole4">декабрь</div></div>



<section class="weeks">
	<input id="week_1" type="radio" name="week" />
	<input id="week_2" type="radio" name="week" />
	<input id="week_3" type="radio" name="week" />
        <input id="week_4" type="radio" name="week" />
       
<label for="week_1" id="week_l1" style="margin: -65px 0px 0px 64px;">week One</label>
<label for="week_2" id="week_l2" style="margin: -1px 0px 0px -190px;">week Two</label>
<label for="week_3" id="week_l3" style="margin: 61px 0px 0px -127px;">week Three</label>
<label for="week_4" id="week_l4" style="margin: 125px 0px 0px 0px;">week 4</label>
	<div style="clear:both"></div>

	<div class="weeks_cont">
    <div id="week_c1">Content of first week</div>
    <div id="week_c2">Content of first week</div>
    <div id="week_c3">Content of third week</div>
    <div id="week_c4">Content of 4 week</div>
   
	</div>
</section>
<style>
section.weeks {  display: block; position: absolute; margin: -271px 0px 0px 0px;}
.week {position: relative;margin: 0 auto;width: 800px;}
.weeks label {cursor: pointer; display: block; position: absolute; width: 64px; height: 64px; font-size: 0px;}

.weeks input {position: absolute;left: -9999px;}

#week_1:checked  ~ #week_l1,
#week_2:checked  ~ #week_l2,
#week_3:checked  ~ #week_l3,
#week_4:checked  ~ #week_l4 {
	top: 0;
	z-index: 3;
}

.weeks_cont { position: relative; z-index: 2; height: 380px; width: 343px; margin: -114px 0px 0px 326px;}

.weeks_cont > div {
	position: absolute;
	left: -9999px;
	top: 0;
	opacity: 0;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
#week_1:checked ~ .weeks_cont #week_c1,
#week_2:checked ~ .weeks_cont #week_c2,
#week_3:checked ~ .weeks_cont #week_c3,
#week_4:checked ~ .weeks_cont #week_c4 {
	position: static;
height: 380px;
    width: 343px;
    background-image: url(http://forumstatic.ru/files/001a/a3/aa/88158.png);
	left: 0;
	opacity: 1;
}
</style>




0

12

Код:
<!--HTML--><style>.news-text .label-caption{font-size:12px;color:#444;line-height:15px;padding:0 0 10px;text-align:left;font-style:italic}.news-text h1{font-size:1.866rem;font-weight:600;line-height:1.3;margin-top:0;margin-bottom:0}.news-text h2{font-size:1.4rem;margin-top:30px;margin-bottom:-5px;font-weight:600}.news-text h3{font-size:1.2rem;margin-top:20px;margin-bottom:3px;font-weight:600}.news-text p{margin:10px 0 10px}.news-text a{color:#006dbb;border-bottom:1px dotted #006dbb}.news-text .aside{font-size:1rem;font-style:italic;font-weight:700}</style><div itemscope itemtype="http://schema.org/BlogPosting"><link itemprop="mainEntityOfPage"itemscope href="https://smi2.ru/newdata/adpreview?ad=9727314&bl=91030&ct=adpreview&fulltext=search"><div itemprop="publisher"itemscope itemtype="https://schema.org/Organization"><div itemprop="logo"itemscope itemtype="https://schema.org/ImageObject"><img style="display:none"alt="СМИ2"itemprop="image url"src="//static.smi2.net/static/adpreview_v2/region/img/icon-touch-smi2-ru.png"><meta itemprop="width"content="76"><meta itemprop="height"content="76"></div><meta itemprop="telephone"content="+7 495 626-43-91"><meta itemprop="address"content="ул. Покровка, д. 18/18, стр. 1, г. Москва, 101000"><meta itemprop="name"content="Редакция СМИ2"></div><meta itemprop="datePublished"content="2020-12-29"><meta itemprop="dateModified"content="2020-12-29"><div itemprop="headline"class="news-title"><h1>Эксперты подвели итоги года в&nbsp;рекламе и&nbsp;медиа</h1></div><div itemprop="author"itemscope itemtype="http://schema.org/Person"><div itemprop="name"class="news-title-caption"style="display:none">редакция СМИ2</div></div><div class="under-title-block"><div class="under-title-cell">29 декабря 2020</div></div><div itemprop="articleBody"><span itemprop="image"itemscope itemtype="https://schema.org/ImageObject"><img itemprop="image url"alt="Эксперты подвели итоги года в рекламе и медиа"style="width:100%;margin:5px 0"src="//static.smi2.net/static/adpreview-assets/img/53164/0.jpg"><meta itemprop="width"content="800"><meta itemprop="height"content="420"></span><p class="first"><nobr>Топ-менеджеры</nobr> крупнейших рекламодателей, агентств и&nbsp;медиаплощадок отвечают на&nbsp;несколько вопросов о&nbsp;том, какие события стали ключевыми в&nbsp;уходящем году, как изменились процессы внутри компаний и&nbsp;что они ожидают от&nbsp;грядущего года</p><p>Несмотря на&nbsp;то, что 2020 год выдался непростым и&nbsp;прогнозировать <nobr>что-то</nobr> в&nbsp;текущей ситуации стало практически невозможно, AdIndex попросил участников рекламной и&nbsp;медиаиндустрии подвести черту под событиями этого года и&nbsp;осторожно заглянуть в&nbsp;будущее. С&nbsp;чем мы&nbsp;вступаем в&nbsp;<nobr>2021-й</nobr>, как тенденции на&nbsp;рынке будут нарастать, что происходит с&nbsp;рекламными бюджетами, как быстро трансформироваться в&nbsp;новых условиях и&nbsp;какие тренды лягут в&nbsp;основу рекламных стратегий в&nbsp;2021&nbsp;&mdash; читайте в&nbsp;большом проекте &laquo;Итоги года&raquo;.</p><p>Для более глубокого анализа проект был разбит на&nbsp;несколько частей: <a href="https://adindex.ru/specprojects/talks/advertising2020/"target="_blank">&laquo;Индустрия&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/programmatic_2020/"target="_blank">&laquo;Программатик&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/digital2020/"target="_blank">Digital</a>, <a href="https://adindex.ru/specprojects/talks/leadgeneration2020/"target="_blank">&laquo;Лидогенерация&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/media2020/"target="_blank">&laquo;Медиа&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/videoadvertising2020/"target="_blank">&laquo;Видеореклама&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/tv2020/"target="_blank">&laquo;ТВ&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/mediabuying2020/"target="_blank">&laquo;Медиабаинг&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/ooh2020/"target="_blank">&laquo;Наружная реклама&raquo;</a>.</p><p>Проект был впервые опубликован в&nbsp;<nobr>43-м</nobr> номере журнала AdIndex Print Edition, полную версию можно прочитать на&nbsp;сайте AdIndex.ru.</p><p><i>AdIndex&nbsp;&mdash; информационное отраслевое издание о&nbsp;рынке рекламы и&nbsp;маркетинга в&nbsp;России. Новости, интервью с&nbsp;ведущими специалистами, отраслевые рейтинги, статьи, информация о&nbsp;событиях рекламного бизнеса. Уже более 10 лет AdIndex также предоставляет заказчикам рекламных услуг ориентиры для выбора оптимального подрядчика в&nbsp;сфере ATL, BTL, Digital. AdIndex&nbsp;&mdash; это новостной ресурс AdIndex.ru, журнал AdIndex Print Edition, карты AdIndex Maps, исследовательский центр AdIndex Analytics, закрытая база данных с&nbsp;уникальной индустриальной информацией Data Center, отраслевые конференции, премии AdIndex Awards и&nbsp;образовательный проект ВОЛНА.</i></p></div></div> 

0

13

Код:
<!--HTML--><style>.news-text .label-caption{font-size:12px;color:#444;line-height:15px;padding:0 0 10px;text-align:left;font-style:italic}.news-text h1{font-size:1.866rem;font-weight:600;line-height:1.3;margin-top:0;margin-bottom:0}.news-text h2{font-size:1.4rem;margin-top:30px;margin-bottom:-5px;font-weight:600}.news-text h3{font-size:1.2rem;margin-top:20px;margin-bottom:3px;font-weight:600}.news-text p{margin:10px 0 10px}.news-text a{color:#006dbb;border-bottom:1px dotted #006dbb}.news-text .aside{font-size:1rem;font-style:italic;font-weight:700}</style><div itemscope itemtype="http://schema.org/BlogPosting"><link itemprop="mainEntityOfPage"itemscope href="https://smi2.ru/newdata/adpreview?ad=9727314&bl=91030&ct=adpreview&fulltext=search"><div itemprop="publisher"itemscope itemtype="https://schema.org/Organization"><div itemprop="logo"itemscope itemtype="https://schema.org/ImageObject"><img style="display:none"alt="СМИ2"itemprop="image url"src="//static.smi2.net/static/adpreview_v2/region/img/icon-touch-smi2-ru.png"><meta itemprop="width"content="76"><meta itemprop="height"content="76"></div><meta itemprop="telephone"content="+7 495 626-43-91"><meta itemprop="address"content="ул. Покровка, д. 18/18, стр. 1, г. Москва, 101000"><meta itemprop="name"content="Редакция СМИ2"></div><meta itemprop="datePublished"content="2020-12-29"><meta itemprop="dateModified"content="2020-12-29"><div itemprop="headline"class="news-title"><h1>Эксперты подвели итоги года в&nbsp;рекламе и&nbsp;медиа</h1></div><div itemprop="author"itemscope itemtype="http://schema.org/Person"><div itemprop="name"class="news-title-caption"style="display:none">редакция СМИ2</div></div><div class="under-title-block"><div class="under-title-cell">29 декабря 2020</div></div><div itemprop="articleBody"><span itemprop="image"itemscope itemtype="https://schema.org/ImageObject"><img itemprop="image url"alt="Эксперты подвели итоги года в рекламе и медиа"style="width:100%;margin:5px 0"src="//static.smi2.net/static/adpreview-assets/img/53164/0.jpg"><meta itemprop="width"content="800"><meta itemprop="height"content="420"></span><p class="first"><nobr>Топ-менеджеры</nobr> крупнейших рекламодателей, агентств и&nbsp;медиаплощадок отвечают на&nbsp;несколько вопросов о&nbsp;том, какие события стали ключевыми в&nbsp;уходящем году, как изменились процессы внутри компаний и&nbsp;что они ожидают от&nbsp;грядущего года</p><p>Несмотря на&nbsp;то, что 2020 год выдался непростым и&nbsp;прогнозировать <nobr>что-то</nobr> в&nbsp;текущей ситуации стало практически невозможно, AdIndex попросил участников рекламной и&nbsp;медиаиндустрии подвести черту под событиями этого года и&nbsp;осторожно заглянуть в&nbsp;будущее. С&nbsp;чем мы&nbsp;вступаем в&nbsp;<nobr>2021-й</nobr>, как тенденции на&nbsp;рынке будут нарастать, что происходит с&nbsp;рекламными бюджетами, как быстро трансформироваться в&nbsp;новых условиях и&nbsp;какие тренды лягут в&nbsp;основу рекламных стратегий в&nbsp;2021&nbsp;&mdash; читайте в&nbsp;большом проекте &laquo;Итоги года&raquo;.</p><p>Для более глубокого анализа проект был разбит на&nbsp;несколько частей: <a href="https://adindex.ru/specprojects/talks/advertising2020/"target="_blank">&laquo;Индустрия&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/programmatic_2020/"target="_blank">&laquo;Программатик&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/digital2020/"target="_blank">Digital</a>, <a href="https://adindex.ru/specprojects/talks/leadgeneration2020/"target="_blank">&laquo;Лидогенерация&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/media2020/"target="_blank">&laquo;Медиа&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/videoadvertising2020/"target="_blank">&laquo;Видеореклама&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/tv2020/"target="_blank">&laquo;ТВ&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/mediabuying2020/"target="_blank">&laquo;Медиабаинг&raquo;</a>, <a href="https://adindex.ru/specprojects/talks/ooh2020/"target="_blank">&laquo;Наружная реклама&raquo;</a>.</p><p>Проект был впервые опубликован в&nbsp;<nobr>43-м</nobr> номере журнала AdIndex Print Edition, полную версию можно прочитать на&nbsp;сайте AdIndex.ru.</p><p><i>AdIndex&nbsp;&mdash; информационное отраслевое издание о&nbsp;рынке рекламы и&nbsp;маркетинга в&nbsp;России. Новости, интервью с&nbsp;ведущими специалистами, отраслевые рейтинги, статьи, информация о&nbsp;событиях рекламного бизнеса. Уже более 10 лет AdIndex также предоставляет заказчикам рекламных услуг ориентиры для выбора оптимального подрядчика в&nbsp;сфере ATL, BTL, Digital. AdIndex&nbsp;&mdash; это новостной ресурс AdIndex.ru, журнал AdIndex Print Edition, карты AdIndex Maps, исследовательский центр AdIndex Analytics, закрытая база данных с&nbsp;уникальной индустриальной информацией Data Center, отраслевые конференции, премии AdIndex Awards и&nbsp;образовательный проект ВОЛНА.</i></p></div></div>

0


Вы здесь » urie!twentyonewentz » какие-то коды » ваав


Рейтинг форумов | Создать форум бесплатно