Разные штучки

Страница: 1

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

Поделиться12021-12-19 16:07:44

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Вкладка 1">Вкладка 1</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2" title="Вкладка 2">Вкладка 2</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3" title="Вкладка 3">Вкладка 3</label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4" title="Вкладка 4">Вкладка 4</label>

<section id="content-tab1">
<p>
Здесь размещаете любое содержание....
</p>
</section>
<section id="content-tab2">
<p>
Здесь размещаете любое содержание....
</p>
</section>
<section id="content-tab3">
<p>
Здесь размещаете любое содержание....
</p>
</section>
<section id="content-tab4">
<p>
Здесь размещаете любое содержание....
</p>
</section>
</div>

@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Прячем чекбоксы */
.tabs>input {
display: none;
position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
border: 0px solid #ddd;
border-width: 1px 1px 1px 1px;
background: #f1f1f1;
border-radius: 3px 3px 0 0;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.tabs>label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs>label[for*="1"]:before {
content: "\f19a";
}
.tabs>label[for*="2"]:before {
content: "\f17a";
}
.tabs>label[for*="3"]:before {
content: "\f13b";
}
.tabs>label[for*="4"]:before {
content: "\f13c";
}
/* Изменения стиля переключателей вкладок при наведении */

.tabs>label:hover {
color: #888;
cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
color: #555;
border-top: 1px solid #009933;
border-bottom: 1px solid #fff;
background: #fff;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
display: block;
}
/* Убираем текст с переключателей
* и оставляем иконки на малых экранах
*/

@media screen and (max-width: 680px) {
.tabs>label {
font-size: 0;
}
.tabs>label:before {
margin: 0;
font-size: 18px;
}
}
/* Изменяем внутренние отступы
* переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
.tabs>label {
padding: 15px;
}
}[/html]

Цитировать Сообщение 1

Поделиться22021-12-20 11:31:59

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div id="container" class="verttable">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">вкладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">вкладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">вкладка 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">вкладка 4</label>
<section id="content1">
<p>Описание</p>
</section>
<section id="content2">
<p>Описание</p>
</section>
<section id="content3">
<p>Сайт ZORNET - Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.
Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.
</p>
</section>
<section id="content4">
<p>Описание</p>
</section>
</div>
</div>

Цитировать Сообщение 2

Поделиться32021-12-20 13:02:06

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div id="guestbook" style="background: url('http://www.rphaven.com/'); background-size: cover; padding: 20px; height: 460px;">
<div class="findblock">
<div class="asitabs">
<div class="asitab"><input id="tab-1" checked="checked" name="tab-group-4" type="radio" /> <label for="tab-1">INTRO</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/RwGK0XC.png');" class="findimg">
<div class="findhov"><span style="font-size: 11px; margin-top: 2px;">rules<br /></span>
<p><strong>></strong> - Use common sense! The usual applies here - no OOC drama, discrimination of any kind, or general disrespectful / argumentative attitudes. IC is fine.</p>
<p><strong>></strong> - Smut is welcome here, as much as story building.</p>
<p><strong>></strong> - All characters are permitted - but a fleshed out profile is necessary to join. Furthermore, the profile needs to be Greek/Roman themed, or at least easily connected.<br /><strong>> - </strong><span> -</span></p>
</div>
</div>
<div class="findwords"><span>olympians rp.</span> <br />
<p>Welcome to the Olympians RP page! an up and coming roleplay group based on Greek antiquity - and the gods, goddesses and spirits of Mount Olympus! Characters are more than free to idle, join or what have you - but should be Greek/Roman/Antiquity themed, or at least easily relatable. Group is new, feel free to message the owner or any of the moderators for issues, info & questions! More to come soon! Group page is a work in progress, Please check over our <strong>rules</strong> tab in the hover beside! <--</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-2" name="tab-group-4" type="radio" /> <label style="margin-top: 15px;" for="tab-2">SETTING<br /></label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/FXO7XHf.png');" class="findimg">
<div class="findhov"><span>SETTING<br /></span>
<p>> - Open interpretation loosely based on imagery</p>
<p>> - Main Lounge - Zeus' Temple</p>
<p>> - Other areas TBA.</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>The setting.</span>
<p>Mount Olympus is the mythical home of the Gods of Greek Antiquity. The mountain was created after the Titanomachy, the epic battle between the young gods - the Olympians, and the older gods - the Titans. As a result of this battle, the Olympian victors created their new majestic home – Mount Olympus. It is shrouded from the average human eyes by clouds which constantly obscure its peaks.<br /><br />The main 'lounge' area is a sprawling temple built for Zeus, the likes of which is built ontop of a hotspring embedded in the mountain. Several various temples and marbled shrines dot the mountain, making up an etheral cloudy setting - snowy landscapes covering the valley inbetween.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-3" name="tab-group-4" type="radio" /> <label style="margin-top: 30px;" for="tab-3">ADMINS</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/r5eRfr3.png');" class="findimg">
<div class="findhov"><span>ADMINS<br /></span>
<p>> -<a href="http://profiles.rphaven.com/Dolos" target="_blank">Dolos</a></p>
<p>> - <a href="http://profiles.rphaven.com/Olympii" target="_blank">Olympii</a></p>
<p>> -Seeking</p>
<p>> -Seeking</p>
<p>> -Seeking</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>admins.</span>
<p>Don't hesitate to contact the <a href="http://profiles.rphaven.com/Dolos" target="_blank">owner</a> / one of the moderators at any time if you have issues or questions! Admin list hoverable to the left <-</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-4" name="tab-group-4" type="radio" /> <label style="margin-top: 45px;" for="tab-4">TITANS</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/BiwDZ9v.png');" class="findimg">
<div class="findhov"><span>ADMINS<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>Titans.</span>
<p>A list of Titans and their respective profile will be placed here.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-5" name="tab-group-4" type="radio" /> <label style="margin-top: 60px;" for="tab-5">GODS</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/5bWa5mC.png');" class="findimg">
<div class="findhov"><span>GODS<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>GODS.</span>
<p>A list of Gods and their respective profiles will be placed here.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-6" name="tab-group-4" type="radio" /> <label style="margin-top: 75px;" for="tab-6">DEMIGODS</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/SFcyC86.png');" class="findimg">
<div class="findhov"><span>DEMIGODS<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>DEMIGODS.</span>
<p>A list of demigods and their respective profile will be placed here.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-7" name="tab-group-4" type="radio" /> <label style="margin-top: 90px;" for="tab-7">HUMANS<br /></label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/KRYCkdQ.png');" class="findimg">
<div class="findhov"><span>HUMANS<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>HUMANS.</span>
<p>A list of humans and their respective profile will be placed here.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-9" name="tab-group-4" type="radio" /> <label style="margin-top: 105px;" for="tab-9">EVENTS*</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/r5eRfr3.png');" class="findimg">
<div class="findhov"><span>EVENT DATES<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p> </p>
</div>
</div>
<div class="findwords"><span>EVENTS.</span>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed convallis dapibus congue. suspendisse nec luctus nisl. mauris finibus tincidunt ultrices. vivamus vel luctus leo. fusce lobortis dapibus tortor in auctor. praesent id accumsan mauris. donec et enim justo. suspendisse sed pharetra magna, a mattis risus. proin tincidunt, dolor sit amet scelerisque pellentesque, tellus ante suscipit massa, sed facilisis nisi enim vitae mauris. nunc felis ligula, hendrerit a imperdiet sed, ultrices sit amet metus. cras in elementum odio, non gravida nulla. ut vel velit a arcu auctor fermentum. vestibulum aliquam elit ac vehicula blandit.</p>
<p>maecenas non sodales mauris. fusce facilisis laoreet eros, in porta dolor rutrum vitae. integer ac est cursus, semper enim in, lobortis mauris. cras eget neque condimentum, vestibulum ipsum non, iaculis tellus. donec molestie pharetra purus, viverra malesuada lectus commodo nec. praesent id sapien ut enim pellentesque pretium eget a dui. quisque lacinia ullamcorper ipsum sed feugiat. proin volutpat ultrices quam, vel finibus enim congue eget. proin eleifend leo nec neque molestie ultrices. nunc consequat ante eget condimentum elementum. nam ut mattis nunc. morbi placerat justo quam, sed ultrices libero rutrum vel. aenean congue mauris sit amet suscipit dignissim. ut accumsan elit porta molestie gravida.</p>
<p>aenean elementum velit leo, ornare pellentesque neque luctus vel. nulla facilisi. praesent vitae ligula ac lorem accumsan scelerisque eu pulvinar est. etiam a pellentesque magna. cras a dolor dapibus, egestas massa vitae, vulputate neque. donec varius sem vitae dapibus volutpat. aliquam facilisis eleifend urna eu sagittis. nam ligula arcu, laoreet nec nisi maximus, luctus dapibus metus. vivamus sit amet porttitor nulla. proin laoreet ornare nulla ac posuere. in feugiat est felis. lorem ipsum dolor sit amet, consectetur adipiscing elit. proin vel sem varius, tincidunt dui vel, sollicitudin ipsum. donec massa diam, tincidunt ac semper at, pulvinar quis augue.</p>
</div>
</div>
</div>
<div class="asitab"><input id="tab-10" name="tab-group-4" type="radio" /> <label style="margin-top: 120px;" for="tab-10">RESOURCES</label>
<div class="findcontent">
<div style="background-image: url('https://i.imgur.com/r5eRfr3.png');" class="findimg">
<div class="findhov"><span>TBA<br /></span>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
<p>> -</p>
</div>
</div>
<div class="findwords"><span>List of coding </span>
<p>List of resources for profile templates, pictures & general mythological Greek history for building profiles coming below. Check back soon! <br />August/19/2019</p>
</div>
</div>
</div>

</div>
</div>

Цитировать Сообщение 3

Поделиться42021-12-20 21:40:53

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div class="blackwatch">
<div class="bwdeco">
<div class="bwfp">
<div class="bwform">
<span>00647 - C. Cassidy</span></div>
<div class="bwfp1">
<span class="bwtp">TOP SECRET</span>
<img src="https://i.imgur.com/peqNOmU.png"/>
<strong>Filed by <em>Gabriel Reyes</em></strong>
</div>
<div class="bwfp2">
<div class="bwphotos">
<div class="bwphoto" style="background-image:url(https://i1.wp.com/www.gamerfocus.co/wp-content/uploads/2020/10/image-9.png?resize=740,520&ssl=1); width:170px;height:120px;top:0px;left:0px;"></div>
<div class="bwphoto" style="background-image:url(https://cdnb.artstation.com/p/assets/im … 1559045784); width:100px;height:150px;top:15px;right:0px;"></div>
<div class="bwphoto" style="background-image:url(https://steamuserimages-a.akamaihd.net/ugc/815624955523803147/C2A7994A8969DE1E7BF4F2FDB4993CF94E76294E/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=#000000&letterbox=true); width:180px;height:120px;top:165px;right:10px;"></div>
<div class="bwphoto" style="background-image:url(https://64.media.tumblr.com/be55bc05b91 … o2_500.png); width:80px;height:80px;top:110px;left:10px;transform:rotate(-5deg);"></div>
<div class="bwphoto" style="background-image:url(https://external-preview.redd.it/islQX2 … ba5e1de751); width:100px;height:80px;top:270px;right:20px;transform:rotate(5deg);"></div>
<div class="bwnota" style="bottom:5px;left:15px;width:100px;">Good reflexes, bad manners, could be a useful addition to Blackwatch (after a <u>very</u> needed training)</div>
</div>
</div>
</div>
<div class="bwbody">
<div class="bwbod">
<div class="bwbhead">
<img src="https://i.imgur.com/peqNOmU.png"/>
<span>
<strong>cole cassidy</strong>
<em>Filed under:<br/>deadlock, criminals, possible recruits</em>
</span>
</div>
<div class="bwbcontent">
<h>Known history</h>
<div class="bwbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id bibendum lacus. Ut feugiat leo faucibus, imperdiet tellus ac, accumsan magna. Aliquam quam velit, aliquam eu condimentum ut, efficitur eu orci. Nam non nisi non nunc pretium tincidunt ut in lacus. Praesent luctus purus id quam mollis, non tincidunt risus euismod. Sed aliquam mollis arcu vel mollis. Sed consequat lacinia tincidunt. Donec molestie lorem pretium augue hendrerit, ut rutrum sapien condimentum. Suspendisse tincidunt augue in bibendum fermentum. Fusce et blandit odio. Sed tristique at diam at efficitur.</div>
<h>The Deadlock Gang</h>
<div class="bwbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id bibendum lacus. Ut feugiat leo faucibus, imperdiet tellus ac, accumsan magna. Aliquam quam velit, aliquam eu condimentum ut, efficitur eu orci. Nam non nisi non nunc pretium tincidunt ut in lacus. Praesent luctus purus id quam mollis, non tincidunt risus euismod. Sed aliquam mollis arcu vel mollis. Sed consequat lacinia tincidunt. Donec molestie lorem pretium augue hendrerit, ut rutrum sapien condimentum. Suspendisse tincidunt augue in bibendum fermentum. Fusce et blandit odio. Sed tristique at diam at efficitur.</div>
<h>Dangerous connections</h>
<div class="bwbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id bibendum lacus. Ut feugiat leo faucibus, imperdiet tellus ac, accumsan magna. Aliquam quam velit, aliquam eu condimentum ut, efficitur eu orci. Nam non nisi non nunc pretium tincidunt ut in lacus. Praesent luctus purus id quam mollis, non tincidunt risus euismod. Sed aliquam mollis arcu vel mollis. Sed consequat lacinia tincidunt. Donec molestie lorem pretium augue hendrerit, ut rutrum sapien condimentum. Suspendisse tincidunt augue in bibendum fermentum. Fusce et blandit odio. Sed tristique at diam at efficitur.</div>
</div>
</div>
</div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>

Цитировать Сообщение 4

Поделиться52021-12-20 21:47:31

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div class="mando">
<input type="radio" id="mdcont1" name="mando" checked/>
<input type="radio" id="mdcont2" name="mando"/>
<input type="radio" id="mdcont3" name="mando"/>
<input type="radio" id="mdcont4" name="mando"/>
<input type="radio" id="mdcont5" name="mando"/>
<div class="mdheader" style="background-image:url(https://i.imgur.com/PFFl7Lx.gif);">
<div class="mdhtop">star wars based / other info here / i don't know, you name it</div>
<div class="mdhenv">
<div class="mdhleft">
<div class="mdhrombp"><em class="sf sf-sun-1-o"></em></div>
<div class="mdhrombg">
<strong>mandalorian</strong>
<span>this is the way</span>
</div>
</div>
<div class="mdhright">
<div class="mdhrenv">
<strong>Din Djarin</strong>
<span>I can bring you in warm… Or I can bring you in cold.</span>
</div>
</div>
</div>
</div>
<div class="mdbody">
<div class="mdsid">
<label for="mdcont1">
<em>01.</em><strong>name of tab</strong>
</label>
<label for="mdcont2">
<em>02.</em><strong>name of tab</strong>
</label>
<label for="mdcont3">
<em>03.</em><strong>name of tab</strong>
</label>
<label for="mdcont4">
<em>04.</em><strong>name of tab</strong>
</label>
<label for="mdcont5">
<em>05.</em><strong>name of tab</strong>
</label>
</div>
<div class="mdcont">
<div class="mdcont1">
Contenido 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices porta turpis nec rutrum. Nam venenatis dapibus orci a consequat. Nulla sollicitudin vestibulum faucibus. Donec lacus ipsum, molestie nec ligula vel, malesuada ultrices lectus. Quisque sed nunc in enim mattis scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit risus, lacinia sit amet congue id, ultrices sagittis lorem. Integer elementum sollicitudin nisi, sit amet commodo nibh pretium a. Phasellus ornare placerat tincidunt. Nulla porta enim pellentesque accumsan varius. Aliquam rutrum malesuada viverra. Maecenas tempor est vitae volutpat pharetra. Integer vehicula urna ut dui laoreet, vel dictum nisi auctor. Integer hendrerit nisl sed metus consequat, ut luctus augue pretium. Maecenas est erat, suscipit quis convallis eu, fermentum id elit. Aliquam malesuada porttitor sem, id mollis nibh viverra nec.
<br/><br/>
In sed commodo quam. Maecenas ut dui ac neque blandit lobortis ut quis risus. Vivamus ipsum tellus, efficitur eleifend mauris et, egestas feugiat arcu. Nullam efficitur vehicula lorem, eu pulvinar dui finibus at. Nulla nec mauris lacinia, consectetur mi nec, faucibus metus. Cras sapien odio, porta ac faucibus sit amet, condimentum a dui. Sed at convallis nunc. Curabitur vitae eleifend purus, sit amet aliquam sapien. Vestibulum efficitur viverra ultricies. Curabitur congue quam sed nulla ullamcorper, vel euismod arcu fringilla. Suspendisse potenti. Duis mollis mi at erat ornare, ac consectetur ligula pretium.
</div>
<div class="mdcont2">
Contenido 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices porta turpis nec rutrum. Nam venenatis dapibus orci a consequat. Nulla sollicitudin vestibulum faucibus. Donec lacus ipsum, molestie nec ligula vel, malesuada ultrices lectus. Quisque sed nunc in enim mattis scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit risus, lacinia sit amet congue id, ultrices sagittis lorem. Integer elementum sollicitudin nisi, sit amet commodo nibh pretium a. Phasellus ornare placerat tincidunt. Nulla porta enim pellentesque accumsan varius. Aliquam rutrum malesuada viverra. Maecenas tempor est vitae volutpat pharetra. Integer vehicula urna ut dui laoreet, vel dictum nisi auctor. Integer hendrerit nisl sed metus consequat, ut luctus augue pretium. Maecenas est erat, suscipit quis convallis eu, fermentum id elit. Aliquam malesuada porttitor sem, id mollis nibh viverra nec.
<br/><br/>
In sed commodo quam. Maecenas ut dui ac neque blandit lobortis ut quis risus. Vivamus ipsum tellus, efficitur eleifend mauris et, egestas feugiat arcu. Nullam efficitur vehicula lorem, eu pulvinar dui finibus at. Nulla nec mauris lacinia, consectetur mi nec, faucibus metus. Cras sapien odio, porta ac faucibus sit amet, condimentum a dui. Sed at convallis nunc. Curabitur vitae eleifend purus, sit amet aliquam sapien. Vestibulum efficitur viverra ultricies. Curabitur congue quam sed nulla ullamcorper, vel euismod arcu fringilla. Suspendisse potenti. Duis mollis mi at erat ornare, ac consectetur ligula pretium.
</div>
<div class="mdcont3">
Contenido 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices porta turpis nec rutrum. Nam venenatis dapibus orci a consequat. Nulla sollicitudin vestibulum faucibus. Donec lacus ipsum, molestie nec ligula vel, malesuada ultrices lectus. Quisque sed nunc in enim mattis scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit risus, lacinia sit amet congue id, ultrices sagittis lorem. Integer elementum sollicitudin nisi, sit amet commodo nibh pretium a. Phasellus ornare placerat tincidunt. Nulla porta enim pellentesque accumsan varius. Aliquam rutrum malesuada viverra. Maecenas tempor est vitae volutpat pharetra. Integer vehicula urna ut dui laoreet, vel dictum nisi auctor. Integer hendrerit nisl sed metus consequat, ut luctus augue pretium. Maecenas est erat, suscipit quis convallis eu, fermentum id elit. Aliquam malesuada porttitor sem, id mollis nibh viverra nec.
<br/><br/>
In sed commodo quam. Maecenas ut dui ac neque blandit lobortis ut quis risus. Vivamus ipsum tellus, efficitur eleifend mauris et, egestas feugiat arcu. Nullam efficitur vehicula lorem, eu pulvinar dui finibus at. Nulla nec mauris lacinia, consectetur mi nec, faucibus metus. Cras sapien odio, porta ac faucibus sit amet, condimentum a dui. Sed at convallis nunc. Curabitur vitae eleifend purus, sit amet aliquam sapien. Vestibulum efficitur viverra ultricies. Curabitur congue quam sed nulla ullamcorper, vel euismod arcu fringilla. Suspendisse potenti. Duis mollis mi at erat ornare, ac consectetur ligula pretium.
</div>
<div class="mdcont4">
Contenido 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices porta turpis nec rutrum. Nam venenatis dapibus orci a consequat. Nulla sollicitudin vestibulum faucibus. Donec lacus ipsum, molestie nec ligula vel, malesuada ultrices lectus. Quisque sed nunc in enim mattis scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit risus, lacinia sit amet congue id, ultrices sagittis lorem. Integer elementum sollicitudin nisi, sit amet commodo nibh pretium a. Phasellus ornare placerat tincidunt. Nulla porta enim pellentesque accumsan varius. Aliquam rutrum malesuada viverra. Maecenas tempor est vitae volutpat pharetra. Integer vehicula urna ut dui laoreet, vel dictum nisi auctor. Integer hendrerit nisl sed metus consequat, ut luctus augue pretium. Maecenas est erat, suscipit quis convallis eu, fermentum id elit. Aliquam malesuada porttitor sem, id mollis nibh viverra nec.
<br/><br/>
In sed commodo quam. Maecenas ut dui ac neque blandit lobortis ut quis risus. Vivamus ipsum tellus, efficitur eleifend mauris et, egestas feugiat arcu. Nullam efficitur vehicula lorem, eu pulvinar dui finibus at. Nulla nec mauris lacinia, consectetur mi nec, faucibus metus. Cras sapien odio, porta ac faucibus sit amet, condimentum a dui. Sed at convallis nunc. Curabitur vitae eleifend purus, sit amet aliquam sapien. Vestibulum efficitur viverra ultricies. Curabitur congue quam sed nulla ullamcorper, vel euismod arcu fringilla. Suspendisse potenti. Duis mollis mi at erat ornare, ac consectetur ligula pretium.
</div>
<div class="mdcont5">
Contenido 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices porta turpis nec rutrum. Nam venenatis dapibus orci a consequat. Nulla sollicitudin vestibulum faucibus. Donec lacus ipsum, molestie nec ligula vel, malesuada ultrices lectus. Quisque sed nunc in enim mattis scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elit risus, lacinia sit amet congue id, ultrices sagittis lorem. Integer elementum sollicitudin nisi, sit amet commodo nibh pretium a. Phasellus ornare placerat tincidunt. Nulla porta enim pellentesque accumsan varius. Aliquam rutrum malesuada viverra. Maecenas tempor est vitae volutpat pharetra. Integer vehicula urna ut dui laoreet, vel dictum nisi auctor. Integer hendrerit nisl sed metus consequat, ut luctus augue pretium. Maecenas est erat, suscipit quis convallis eu, fermentum id elit. Aliquam malesuada porttitor sem, id mollis nibh viverra nec.
<br/><br/>
In sed commodo quam. Maecenas ut dui ac neque blandit lobortis ut quis risus. Vivamus ipsum tellus, efficitur eleifend mauris et, egestas feugiat arcu. Nullam efficitur vehicula lorem, eu pulvinar dui finibus at. Nulla nec mauris lacinia, consectetur mi nec, faucibus metus. Cras sapien odio, porta ac faucibus sit amet, condimentum a dui. Sed at convallis nunc. Curabitur vitae eleifend purus, sit amet aliquam sapien. Vestibulum efficitur viverra ultricies. Curabitur congue quam sed nulla ullamcorper, vel euismod arcu fringilla. Suspendisse potenti. Duis mollis mi at erat ornare, ac consectetur ligula pretium.
</div>
</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>

Цитировать Сообщение 5

Поделиться62021-12-20 21:49:01

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div class="shopping">
<form>
<input name="shopping" id="resetshopping" type="reset"/>
<input name="shopping" id="mejoras" type="radio"/>
<input name="shopping" id="pociones" type="radio"/>
<input name="shopping" id="armaduras" type="radio"/>
<input name="shopping" id="miscelaneos" type="radio"/>
<div class="shhead">
<i class="cp cp-sale-o"></i>
<b>Nombre de la tienda</b>
</div>
<div class="shfilters">
<label for="resetshopping"><i class="cp cp-refresh"></i> Resetear</label>
<label for="mejoras"><i class="cp cp-puzzle"></i> Mejoras</label>
<label for="pociones"><i class="cp cp-vase"></i> Pociones</label>
<label for="armaduras"><i class="cp cp-iron-man"></i> Armaduras</label>
<label for="miscelaneos"><i class="cp cp-first-aid"></i> Misceláneos</label>
</div>
<div class="shitems">

<div class="shitem mejoras">
<div class="shitemicon"><i class="game-icon game-icon-psychic-waves"></i></div>
<div class="shitembody">
<div class="shtit"><i class="cp cp-puzzle"></i> Psychic Waves</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien. Nulla lectus risus, ultrices et nulla sit amet, consequat aliquet massa. Morbi id vehicula ipsum, at aliquet ipsum. Aenean tristique eros sit amet urna sagittis porta. Phasellus id condimentum velit.</div>
</div>
</div>


<div class="shitem pociones">
<div class="shitemicon"><i class="game-icon game-icon-potion-of-madness"></i></div>
<div class="shitembody">
<div class="shtit"><i class="cp cp-vase"></i> Potion of Madness</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien.</div>
</div>
</div>


<div class="shitem armaduras">
<div class="shitemicon"><i class="game-icon game-icon-cape-armor"></i></div>
<div class="shitembody">
<div class="shtit"><i class="cp cp-iron-man"></i> Cape Armor</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien.</div>
</div>
</div>


<div class="shitem miscelaneos">
<div class="shitemicon"><i class="game-icon game-icon-powder"></i></div>
<div class="shitembody">
<div class="shtit"><i class="cp cp-first-aid"></i> Powder</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien.</div>
</div>
</div>


<div class="shitem miscelaneos pociones">
<div class="shitemicon"><i class="game-icon game-icon-health-potion"></i></div>
<div class="shitembody">
<div class="shtit"><i class="cp cp-vase"></i> <i class="cp cp-first-aid"></i> Health Potion</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien.</div>
</div>
</div>

</div>
</form>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.shopping { --bckg1: #f0f0f0; --bckg2: #f3f3f3; --bckg3: #f6f6f6; --bckg4: #f9f9f9; --bckg4: #fafafa; --border1:1px solid #ddd; --border1-c:#ddd; --border2:1px solid #ccc; --accent1:#EC6EAD; --accent2:#3494E6; --gbckg1:linear-gradient(180deg, var(--accent1), var(--accent2)); --gbckg2:linear-gradient(90deg, var(--accent1), var(--accent2)); --text:#999; --text2:#333; --title:#fff; --shadow: drop-shadow(1px 1px white) drop-shadow(-1px -1px white) drop-shadow(0px 1px white) drop-shadow(0px -1px white) drop-shadow(1px 0px white) drop-shadow(-1px 0px white); } .shopping input#mejoras:checked ~ .shitems .shitem:not(.mejoras) {display:none;} .shopping input#pociones:checked ~ .shitems .shitem:not(.pociones) {display:none;} .shopping input#armaduras:checked ~ .shitems .shitem:not(.armaduras) {display:none;} .shopping input#miscelaneos:checked ~ .shitems .shitem:not(.miscelaneos) {display:none;} .shopping input#mejoras:checked ~ .shfilters label[for="mejoras"] i, .shopping input#pociones:checked ~ .shfilters label[for="pociones"] i, .shopping input#armaduras:checked ~ .shfilters label[for="armaduras"] i, .shopping input#miscelaneos:checked ~ .shfilters label[for="miscelaneos"] i { background-image:var(--gbckg1);color:transparent; }</style><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/><link href="https://dl.dropbox.com/s/thpzqkqhf1pzqnx/game-icons.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet"/><link href="//dl.dropbox.com/s/89pu189jpmr8kzm/shopping.css" rel="stylesheet"/>[/html]

Цитировать Сообщение 6

Поделиться72021-12-20 21:51:30

Имя Персонажа
Сообщений: 51
Уважение: +0
Какой-то супер-длинный статус супер длинный супер-
Автор: Zombie
Последний визит:
2024-10-23 16:01:35

[html]<div class="shop">
<input type="radio" name="shop" id="shop1" checked/>
<input type="radio" name="shop" id="shop2"/>
<input type="radio" name="shop" id="shop3"/>
<label for="shop1">Pociones</label>
<label for="shop2">Armas</label>
<label for="shop3">Mejoras</label>
<div class="txt txt1">
<div class="item">
<p>Curación total. Recupera todos los hp y cura los estados. Es extremadamente rara y difícil de elaborar. Una compra por personaje.</p>
<div>
<img src="https://i.imgur.com/LzoVwCj.png"/>
<m>80 $</m>
</div>
</div>
<div class="item agotado">
<p>Muerte súbita. Causa un dolor agudo en numerosas partes del cuerpo antes de causar la muerte. Si el objetivo tiene más de 50HP, no surte efecto alguno. Dos compras por personaje.</p>
<div>
<img src="https://i.imgur.com/KP8bad6.png"/>
<m>AGOTADO</m>
</div>
</div>
<div class="item oferta">
<p>Antídoto. Cura el estado de envenenamiento. No causa efecto si el paciente no está envenenado. No previene el efecto.</p>
<div>
<img src="https://i.imgur.com/ygG5hZq.png"/>
<m><x>60</x> 20 $</m>
</div>
</div>
<div class="item">
<p>Antiquemaduras. Cura el estado de quemadura. No causa efecto si el paciente no está quemado. No previene el efecto.</p>
<div>
<img src="https://i.imgur.com/5k5yR2r.png"/>
<m>50 $</m>
</div>
</div>
<div class="item">
<p>Liberación. Cura el estado de aturdido. No causa efecto si el paciente no está aturdido. No previene el efecto.</p>
<div>
<img src="https://i.imgur.com/TwyAgiy.png"/>
<m>90 $</m>
</div>
</div>
<div class="item">
<p>Absorción. Cura el estado de ahogamiento. No causa efecto si el paciente no está ahogándose. No previene el efecto.</p>
<div>
<img src="https://i.imgur.com/IPWv33R.png"/>
<m>70 $</m>
</div>
</div>
</div>
<div class="txt txt2">
<div class="item">
<p>Whisper. Se dice que es de una calidad formidable, forjada en los Far Realms. Tiene una gemela, pero no se ha encontrado. +2AT, una mano.</p>
<div>
<img src="https://i.imgur.com/cwPjkDz.png"/>
<m>140 $</m>
</div>
</div>
<div class="item">
<p>Mythcarver. Espada qu se cree perteneció al dios de la forja. Posiblemente sólo sean leyendas. +2AT, una mano.</p>
<div>
<img src="https://i.imgur.com/r422nHb.png"/>
<m>180 $</m>
</div>
</div>
<div class="item agotado">
<p>Bloodaxe. Perteneció a un gran héroe de Tal'Dorei. Se dice que es temperamental. Funciona mejor en manos de bárbaros. +3AT, dos manos.</p>
<div>
<img src="https://i.imgur.com/usyl971.png"/>
<m>AGOTADO</m>
</div>
</div>
<div class="item oferta">
<p>Skingorger. Gran y pesada espada que cuenta con un encantamiento de ácido. +2AT, +2E cuando el encantamiento está activo, dos manos.</p>
<div>
<img src="https://i.imgur.com/gIAKaNp.png"/>
<m><x>270</x> 250 $</m>
</div>
</div>
<div class="item">
<p>Magician's Judge. Se forjó en la Era Arcana para combatir contra los magos más poderosos. Está equipada con el hechizo de Esfumar, a usarse una vez cada descanso largo. +3AT, dos manos.</p>
<div>
<img src="https://i.imgur.com/hXQvBZU.png"/>
<m>290 $</m>
</div>
</div>
</div>
<div class="txt txt3">
<div class="item">
<p>Mejora de constitución. Sube un punto a tu nivel de constitución. Tres compras por personaje.</p>
<div>
<img src="https://i.imgur.com/grPdAEr.png"/>
<m>200 $</m>
</div>
</div>
<div class="item">
<p>Resistencia mortal. Te da una oportunidad más para resistir la muerte tras caer inconsciente. Una compra por personaje.</p>
<div>
<img src="https://i.imgur.com/3tEAXHG.png"/>
<m>400 $</m>
</div>
</div>
<div class="item">
<p>Mejora de tiros de salvación. Te da un +1 en cualquier tiro de salvación de tu elección. Tienes que elegir una habilidad concreta al adquirirlo. Cuatro compras por personaje.</p>
<div>
<img src="https://i.imgur.com/ZhieOH2.png"/>
<m>300 $</m>
</div>
</div>
<div class="item">
<p>Resistencia a envenenamiento. Te hace inmune a todos los venenos conocidos. Una compra por personaje.</p>
<div>
<img src="https://i.imgur.com/CG1557n.png"/>
<m>350 $</m>
</div>
</div>
<div class="item">
<p>Resistencia a daño radiante. Te hace inmune a ataques de tipo radiante. Una compra por personaje.</p>
<div>
<img src="https://i.imgur.com/j8Kwveu.png"/>
<m>280 $</m>
</div>
</div>
<div class="item">
<p>Doble tirada. Te da ventaja en una tirada, por lo que tiras dos dados y te quedas con el mejor resultado. Consumible, un solo uso.</p>
<div>
<img src="https://i.imgur.com/F97NIKp.png"/>
<m>80 $</m>
</div>
</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.shop{--bckg1:#141414;--bckg2:#181818;--border:#000;--txt: #ccc;--accent1: #56683d;--accent2: #46562f;--accent3: #384525; --accent4: #6b7e50;--oferta: #807d29;--agotado:#454a3c;--agotado-img:grayscale(1) brightness(0.4);}</style><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:900&display=swap" rel="stylesheet"/><link href="https://dl.dropbox.com/s/p0bj683ard7x087/shop.css" rel="stylesheet"/>[/html]