магазин

hide-autor
[html]

<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="https://i.imgur.com/jbMYZds.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>

<input id="tab4" type="radio" name="tabs">
<label for="tab4">сертификаты</label>

<input id="tab5" type="radio" name="tabs" checked>
<label for="tab5">плашки</label>

<div class="magaz1">1 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div>

<div class="magaz1">3 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div>

<div class="magaz1">5 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div></div></td>

<div class="magaz1">2 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div>

<div class="magaz1">4 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div>

<div class="magaz1">6 категория</div>
<div class="magaz2"><img src="https://forumstatic.ru/files/001b/ad/91/16023.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://i.imgur.com/VHCLZwr.png" title="съешь кусок пиццы, которой уже пару дней"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/440268.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/950406.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/890787.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"><br> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/859174.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/653008.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/466010.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/81958.png" title="приготовь торт, который посвятишь своему бывшему/бывшей"> <img src="https://forumupload.ru/uploads/001b/b3/c9/2/579165.png" title="приготовь торт, который посвятишь своему бывшему/бывшей">
</div></div>

</td></tr></table>
</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>
<section id="content-tab4">
<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.

</p>
</section>

<section id="content-tab5">
<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.

</p>
</section>

</div>
</div>
</div>
<div class="clearer"></div>

#spiritworkroom {width: 840px;
height: 416px;
background: #767996;
margin: auto;
border-radius: 10px;}

.spiritfirst { float: left;
margin: 9px;
width: 186px;
height: 391px;
overflow: hidden;
position: relative;
border: 3px solid #f1f1f1;
border-radius: 11px;
}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: nizhe;
font-weight: 900;
width: 190px;
color: #767996;
text-shadow: 1px 1px 0px rgb(239, 224, 173);
font-size: 25px;
letter-spacing: 2px;
height: 73px;
margin: -150px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: linear-gradient(to bottom, rgb(239, 224, 173), rgba(0,0,0,0));
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}

.spiritfirsttitle subtitle {box-shadow: 0 0 -2px 0 rgba(118, 121, 150, 50%);
font-family: playfair display;
font-weight: normal;
color: #efe0ad;
text-shadow: 1px 1px 0px rgb(118, 121, 150);
font-size: 10px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top: 0px;
margin-right: 20px}
.spiritfirsttitle:before { background: linear-gradient(to bottom, rgba(0,0,0,0), rgb(239, 224, 173));
content: "";
display: block;
position: absolute;
width: 100%;
height: 30px;
top: -30px;
margin-left: -10px;
}
.spiritfirsttext {
z-index: 8;
position: relative;
background: rgb(118, 121, 150 / 70%);
width: 190px;
margin: 35px 0 0 0px;
font-family: cuprum;
font-size: 12px;
text-align: justify;
padding: 1px 0px;
color: #f1f1f1;
}
.spiritfirsttext about {margin: 5px 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,0), rgb(239, 224, 173));
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: 11px;
font-family: pt sans;
color: #f7eaba;
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;
background: #fefefe;
width: 617px;
margin: 10px;
height: 396px;
margin-top: 9px;
border-radius: 10px;
position: absolute;
margin-left: 211px;
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 5px;
height: 342px;
overflow-y: auto;
margin: 5px;
font-family: arial;
font-size: 12px;
text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
font: 400 12px/17px cuprum;
color: #787b98;
-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: 8px 0px;
text-align: center;
color: #727592;
background: #f1f1f1;
width: 156px;
border-radius: 7px 7px 0px 0px;
left: 4px;
top: 0px;
font: 500 12px/17px cuprum;
position: relative;
font-family: nizhe !important;
font-size: 17px;
text-transform: lowercase;
letter-spacing: 3px;
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 150px;
height: 3px;
background: #eddfade5;
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: #9799b7;}
.tabs>label:hover {
color: #9799b7;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
color: #767996;
background: #eddfad6c;
}
.tabs>input:checked+label:after { content: "";
display: block;
position: absolute;
width: 148px;
height: 3px;
background: #eddfad;
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, #tab4:checked~#content-tab4, #tab5:checked~#content-tab5 {
display: block;
}

.punbb .post-content p {
margin: 0;
padding: 0 0 1em 0;
line-height: 130%;
}

.punbb img {
margin-top: 0px;
border-radius: 0% !important;
}
</style>[/html]

тестирование 2

Меню навигации

Пользовательские ссылки

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

магазин

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

Поделиться12022-08-05 08:51:28