[html]
<style type="">
details {
padding:1px;
background-color: #def;
border: 1px solid #bdbdbd;
text-shadow: rgba(0, 0, 0, 0.196078) 1px 2px 4px;
}
summary {
padding:5px;
outline: 0;
cursor: pointer;
background: linear-gradient(#beeeee,#628297 );
}
summary:hover {background: linear-gradient(#beeeee,#62b297 );}
summary:active {background: linear-gradient(#628297,#beeeee);}
div {display: inline-block; padding: 10px;}
</style>
<details><summary>Дышу</summary>
<div><img src="http://demyansk.ru/upload/blogs/c22bd2a6d1cde083a7e2b53a2216aa6e.jpg" alt="" style="width: 380px;">
</div>
<div>
И день за днём из жизни длинной<br>
Вычёркивает календарь,<br>
За мигом миг встают картины<br>
- Недопрожитого... (а жаль).<br>
<br>
Строкой - за строчкою нетленной<br>
Спешу... (пока ещё дыша),<br>
Не жизнью - маленькой вселенной<br>
Ложатся строки не спеша...<br>
<br>
- Не свят, лукавлю и грешу,<br>
Потомкам - тапочки оставлю,<br>
И строчки те, что ныне правлю,<br>
- Пусть не поэт... (но допишу)<br><br>
</div>
</details>
<details><summary>Пишу</summary>
<style type="text/css">
.accordion {
font-family:Arial, Helvetica, sans-serif;
margin:1px auto;
font-size:14px;
border:1px solid #542437;
border-radius:10px;
width:400px;
padding:10px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:16px;
line-height:16px;
background:#D95B43;
border:1px solid #542437;
color:#542437;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
cursor:pointer;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h4 {
color:#542437;
padding:0;
margin:5px 0;
font-size:16px;
}
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label,
.vertical [type=checkbox]:checked ~ label {border-bottom:0;}
.vertical ul li label:hover {border:1px solid #542437;}
.vertical ul li .content {
height:0px;
border-top:0;
transition: all .5s ease-out;
}
.vertical [type=checkbox]:checked ~ label ~ .content {
height:auto;
border:1px solid #542437;
}
</style>
<div class="accordion vertical"><h4>Ящики Пандоры</h4>
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">Ящик первый</label>
<div class="content">
<h4>Пример реализации иных рыночных отношений</h4>
<p>И вот я создал "благо"...<br>
Могу его отдать, продать, подарить, арендовать, обменять, зарыть, уничтожить. Я - "вправе". В нормальной "системе" только я могу создать "эквивалент", позволяющий другим обрести это "благо". <br>
С момента создания "блага" у него уже есть 2 "цены реализации":</p>
<p>1. моя...<br>
2. рыночная... (биржевая) <br>Если моя "цена" оказалась ниже рыночной - разница плюсуется в мой "вирту-баланс". Если выше - минусуется. Но лишь при положительном балансе я могу напечатать "онлайн-фантики". (деньги) <br>
Остальное - дело техники. И никаких банков. <br>
(- Берите, люди, пользуйтесь...)))</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2">Ящик второй</label>
<div class="content">
<h4>Totally another one right here</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3">Ящик третий</label>
<div class="content">
<h4>I think I can go on forever</h4>
<p></p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-4" name="checkbox-accordion" />
<label for="checkbox-4">Ящик вёрстки</label>
<div class="content">
<h4>SVG</h4>
<p><a rel="nofollow" href="https://codepen.io/warsan/pen/VzwLqE" target="_blank">Наливай!</a></p>
<div></div>
<p></p>
</div>
</li>
</ul>
</div></details>
[/html] |