Благодарим за выбор нашего сервиса!
Тестовое сообщение
Страница: 1
Сообщений 1 страница 5 из 5
Поделиться22020-10-26 14:53:05
[html]<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
<div class="spiritfirsttitle">от вещего духа
<subtitle>однако, дратути</subtitle></div>
<div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
<about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
</div>
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">информация</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">вопросник</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">портфолио</label>
<section id="content-tab1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.
Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
</p>
</section>
<section id="content-tab2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.
Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</p>
</section>
<section id="content-tab3">
<p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</p>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');
#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}
.spiritfirst {float: left;
margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}
.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}
.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
text-align: center;
display: block;
width: 190px;
font-size: 9px;
font-family: pt sans;
color: #999;
opacity: 0;
transform: translate(0,400px);
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
transform: translate(0,0px)}
.spiritsecond {background: #fefefe;
width: 389px;
margin: 10px;
height: 500px;
margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
position: absolute;
margin-left: 211px
}
.tabs {
padding: 0px;
margin: 0 auto;
}
.tabs>section {
display: none;
padding: 10px;
height: 440px;
overflow-y: auto;
margin: 5px;
font-family: arial;
font-size: 11px;
text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
transform: translate(-400px,0);
transform-origin: 50% 0%;
}
to {
transform: translate(0px,0);
}
}
.tabs>input {
display: none;
position: absolute;
}
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
width: 131px;
border: solid rgba(0,0,0,.2);
border-width: 0px 0px 1px 0px;
left: 3px;
top: 0px;
position: relative;
font-family: pt sans;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: lighter;
box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}
.tabs>input:checked+label {
color: #555;
background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]
Поделиться32020-10-26 14:56:35
[html]<!--HTML--><div class="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="https://i.imgur.com/e1ex769.jpg"></div>
<div class="spiritfirsttitle">ПАРКИНСОНЫ
<subtitle> </subtitle></div>
<div class="spiritfirsttext"><subtitle></subtitle>
<about>Паркинсоны - чистокровная семья магической Британии, входящая в список "Священные 28".</about></div>
</div>
<div class="spiritsecond">
<div class="rod_vn">fortitudo in unitate - сила в единстве</div>
<br>
<div style="width: 120px; height: 135px; background-image: url(https://forumstatic.ru/files/0019/be/96/84834.gif); float: left; margin: 0px 6px 14px 10px; border: 0px solid #f9f9f9; "></div><b>Глава рода</b>: <a href="https://firstmagicwar.rusff.me/profile.php?id=236">Nathaniel Parkinson</a><br><br>
<b>Родовое поместье</b>: поместье «Magnum Stone», Сент-Агнес, графство Корнуолл, Англия.<br><br>
<b>Род деятельности</b>: в силу своего семейного нейтралитета, современные Паркинсоны в основном ведут личный и семейный бизнес, специализирующийся на артефакторике, антиквариате и прочего рода древностях. Однако не чужды им и более приземлённые профессии.<br><br>
<b>Лояльность</b>: нейтралитет с выраженным упором на семейное благо.
<div class="rod_v"><hr>Медный дикий гусь, испускающий стоп пламени, на чёрном поле. Цвет символизирует историю Паркинсонов, как владельцев ныне утерянных медных рудников в Корнуолле, сам же гусь — символ бдительности в постоянно изменяющемся мире, что готов защищать всё, что ему дорого. Под крылом гуся укрыто яйцо, что подчёркивает особую важность семьи и потомства. Традиционная окантовка чернёного щита сохраняется вот уже многие века, как и девиз.</div>
<details>
<summary>ИЗ СПРАВОЧНИКА</summary>
Первые упоминания о роде Паркинсонов датируются XV веком, когда они только начали закрепляться среди деятелей магической Англии, как семейство, что с завидным упорством вгрызается в любую породу, укрепляя своё влияние. Родовое поместье, получившее имя «Magnum Stone» — как раз отсылка к этим трудным, но памятным Паркинсонам годам.<br>
Корни семьи уходят за море — считается, что первые Паркинсоны пришли из края холмов, озёр и виски — Шотландии, со временем осев на юге Туманного Альбиона и переняв культуру своего нового дома. Впрочем, история рода покрыта тайной, и никто из ныне живущих Паркинсонов не может ни опровергнуть эту теорию, ни подтвердить.<br>
Особый всплеск своего развития семья получила к началу XVIII века, когда в Корнуолле стали активно добываться полезные ресурсы — для деятельных Паркинсонов это было отличной возможностью в буквальном смысле добывать деньги из земли. Так, основным доходом семьи стала добыча меди.<br>
А всего через несколько десятков лет Персей Паркинсон вошёл в историю магической Британии, как третий Министр Магии (с 1726 по 1733 годы), что запомнился рядом антимаггловских законов. Пожалуй, то был неплохой урок для потомков, избравших политику тотального нейтралитета без открытой поддержки кого-либо, кроме как себя. Эдакая третья сторона, что одновременно с вами и нет. Надо сказать, что до последнего времени она была очень даже эффективной, позволявшей Паркинсонам умело лавировать среди всех событий, что происходили в магическом и нет обществах. И только в последние годы она дала крупную трещину, что всё расползается, и непонятно ещё, чем это закончится.<br>
Потеряв в начале XX века медные рудники и львиную долю сбережений, Паркинсоны начали тонуть с каждым годом всё более. Но, лившись своих богатств, они не лишились гордости и того, что делало их Паркинсонами (не без капли бёрковской крови) — как встарь они вгрызались во всё, что могло удержать их на плаву. Общественности точно неизвестно, каким именно образом им удалось восстановить былые влияние и средства — нынешний глава рода не распространяется об этом, ибо то — частично его позор, о котором знает всего несколько особо близких ему людей, и одновременно гордость за то, что он практически в одиночку смог поднять свою семью. Словом, Паркинсоны выстояли и здесь, вновь вернувшись в общество равных себе и прочно взявшись за сферу строительного бизнеса — именно он по сей день является основным источником доходов семьи. Артефакторика, контрабанда, древности и даже недавно купленная половина печально известной команды «Паддлмир Юнайтед» — это так, уже баловство.<br><br>
Как таковых, выраженных традиций у Паркинсонов не имеется. Они лишь, как порода волшебников из «Священных», отличаются особой преданностью кровным узам. Если стоит выбор «Паркинсон или друг», с огромной долей вероятности будет выбран первый, ибо семья — прежде всего. Помимо этого, нынешним поколениям Паркинсонов, особенно последним двум, присуща стальная хватка в ведении бизнеса — что глава рода, что старший сын — «вгрызаются» и своего не упускают. Умение вести бизнес — это то самое семейное, чему обучаются с детства. Политика насаждения чего-либо силой внутри семьи у Паркинсонов так и не зародилась. Они не карают, не изгоняют, не выжигают с семейного гобелена, что даже между собой порицают в других родах. Каждый волен выбирать свой путь сам, но с оглядкой на традиции, статус, собственное положение в обществе и… последствия. Последние особенно важны в любом деле — тем более, в вопросах сохранения чистокровности и своего места в «Священных». Паркинсоны не сторонники фанатичной преданности чистоте крови, но для них это, несомненно, важно.<br>
Большинство Паркинсонов выпускники Слизерина, лишь редкие из них попадали в Райвенкло. Иного факультета на сегодняшний день в их летописях не отмечено.
</details>
<br>
<details>
<summary>РОДОСЛОВНАЯ</summary>
❖ Персей Паркинсон (1656-1754) — 3-ий Министр Магии;<br>
❖ Базел Паркинсон (1842-1937)<br>
❖ Эдвард Паркинсон (1880-1937) — невыразимец;<br>
❖ Элеонора (Бёрк) Паркинсон (род. 1894) — светская дама;<br>
❖ Натаниэль Паркинсон (род. 16.03.1919) — глава рода, бизнесмен и судья Визенгамота;<br>
❖ Виктория (Лефевр) Паркинсон (1919-1963) — светская дама;<br>
❖ Альберт Паркинсон (род. 1948) — артефактолог, наследник;<br>
❖ Марьям Паркинсон (род. 1950) — светская дама;<br>
❖ Феликс Паркинсон (род. 1952) — управляющий в E.L.M;<br>
❖ Пэнси Паркинсон(род. 12.01.80) - дочь Альберта;<br>
❖ Николас Паркинсон (род. 1920) — представитель побочной ветви, бизнесмен;<br>
❖ Алан Паркинсон (ро. 1953) — представитель побочной ветви, репортёр.<br>
</details>
<div class="cle_r">СОСТОЯТ В РОДСТВЕ С БЁРКАМИ И ЛЕФЕВРАМИ</div>
</div>
</div>
</div>
<style>
/*за основу взят код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');
.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 162px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 162px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
text-align: center;
display: block;
width: 162px;
font-size: 9px;
font-family: pt sans;
color: #999;
opacity: 0;
transform: translate(0,400px);
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
transform: translate(0,0px)}
.spiritsecond {
font-family: PT Sans;
font-size: 11px;
height: 484px;
width: 490px;
float: right;
padding: 9px;
top: 45px;
overflow-y: auto;
background: rgb(252, 252, 255);
box-shadow: 0 0 0px 1px #cfc7bb, 0 0 0 1px rgba(255,255,255,.2) inset, 0 0 10px 0 rgba(147,134,115,.5) inset, 0 0 5px 0 rgba(147,134,115,.7);
}
.spiritworkroom {width: 685px;
height: 520px;
margin: 0px;
}
.spiritfirst {float: left;
width: 162px;
height: 490px;
box-shadow: 0 0 0px 1px rgba(166,149,62,0.8);
overflow: hidden;
position: relative;
border: 5px solid #5f241d;}
.spiritfirstpic {margin:auto;
width: 162px;
height: 490px;}
</style>[/html]
Поделиться42020-10-26 14:58:04
[html]<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->
<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001a/ae/03/64471.jpg)">
<div class="prusheen-inner">
<div class="prusheen-text">
<span>Shadowsong</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ipsum purus, ut facilisis eros blandit eu. Quisque fringilla iaculis pulvinar. Vivamus odio turpis, rhoncus eget nulla rhoncus, tempus ultrices dui. Maecenas aliquam rhoncus leo, ac mollis est egestas id. In vel elementum nulla. Quisque pharetra dapibus purus, non eleifend elit mollis id. Aliquam vel ligula nec nisl porta efficitur. Mauris vitae aliquet ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras imperdiet eu neque in finibus. Ut sed ligula urna. Sed euismod nibh neque, vitae porta odio imperdiet sagittis.
Cras facilisis dui sodales orci fermentum, vitae volutpat leo faucibus. In non dolor eros. Sed facilisis, metus at egestas rhoncus, lorem ex hendrerit libero, quis pretium risus orci eget velit. Etiam euismod, lacus et venenatis facilisis, purus purus efficitur dui, a placerat ante dui id est.
</div></div>
</div>
</div>
<style>
/* css черти чего от вещего духа*/
.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}
.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute;
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text > div {
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}
.prusheen-text > span {
display: block;
text-align: center;
font: 40px rouge script; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}
.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}
.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>[/html]
Поделиться52020-10-26 14:58:45
[html]<!--вещий дух-->
<div class="spiritbox">
<div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
<div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
<div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');
.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}
.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}
.spirit_pic img {
max-height: 130px;}
.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}
.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}
.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}
.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
margin: 7px 7px;
height: 74px
}
.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}
.spirit_txt div::-webkit-scrollbar-thumb {
background-color:#333;
width:6px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}
.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}
.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>[/html]
Страница: 1
