portfoliopost
FDteam-portf
[html]
<!-- Стили фильтров -->
<style>
#port-filter2 {text-align: left;}
.post #line {border-bottom: 3px solid #a5a5a5; color: #c2c3c4;}
h4.tit {
font-family: 'Bebas Neue', Impact;
font-size: 24px;
text-transform: uppercase;
padding-top: 10px; margin: 0;
font-weight: normal;
}
#line h4 {margin: 0 0 0 56px;font-weight: normal;cursor: pointer;}
.dark #line:hover, .dark #line:active, .dark #line:focus,
#line:hover, #line:active, #line:focus {background-color: #26282b; color: #fff;}
#changeStyle {margin-top: 5px;}
.filter a {
padding: 5px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
display: inline-block;
background: #f4f4f4;
}
.filter a.active:hover {background: #2e3e4f; color: #e63737;}
.filter a.active {background: #f98561; color:#fff;}
.filter a:hover {
background: #2e3e4f;
color: #e63737;
}
.dark .filter a {background: #2f2f2f;}
.dark .filter a.active {background: #f98561; color: #fff;}
.dark .filter a.active:hover, .dark .filter a:hover {background: #151515;}
</style>
<!-- Фильтры -->
<div id="port-filter2"><div class="botbg"><div class="inner">
<div id="dir-block" style="margin-right: 2%">
<section class="wow fadeInDown" data-wow-duration="1s">
<h4 class="tit">Тип работ</h4>
<div id="changeStyle">
<a id="line" class="f-saled">
<div class="icon"><div id="my-ic" class="material-icons">lock</div></div>
<h4>Сделанные на заказ работы</h4>
<div class="filler"></div></a>
<a id="line" class="f-forsale">
<div class="icon"><div id="my-ic" class="fa-solid fa-sack-dollar"></div></div>
<h4>Размещено на продажу</h4>
<div class="filler"></div></a>
<a id="line" class="f-free">
<div class="icon"><div id="my-ic" class="fa-solid fa-gift"></div></div>
<h4>Бесплатные работы</h4>
<div class="filler"></div></a>
</div>
</section></div>
<div id="dir-block" style="margin-left: 2%">
<section class="wow fadeInDown" data-wow-duration="1s">
<div id="changeStyle2" class="filter">
<h4 class="tit">Общие категории</h4>
<a class="dis tip" title="Все, связанное с работами для сайтов/форумов, кроме готовых скриптов и мелкой графики">Вебдизайн</a>
<a class="graf tip" title="Все, связанное с графическими работами, НЕ включающее кодинг/скрипты">Графика</a>
<a class="code tip" title="Готовые разработки и работы по верстке/кодингу">Скрипты/коды</a>
<h4 class="tit">Дополнительные категории</h4>
<a class="fulldis tip" title="Полные работы по дизайну для сайтов или форумов">Дизайн форумов/сайтов</a>
<a class="layout tip" title="Макеты для дизайна форумов/сайтов или графические работы по созданию макетов">Макеты</a>
<a class="dis-code tip" title="Работы по верстке дизайнов или отдельных элементов дизайна">Верстка</a>
<a class="graf-s tip" title="Работы по дизайну и оформлению соцсетей/стримов">Соц-сети/стримы</a>
<a class="js tip" title="Готовые разработки и работы по верстке/кодингу">Скрипты/коды</a>
<a class="art tip" title="Небольшие графические работы для форумов, сайтов и ролевых игр">Ролевая графика/арт</a>
</div>
</section></div>
<section class="wow fadeInDown" data-wow-duration="1s">
<div id="changeStyle2" class="filter">
<br><center>
<a class="mob">Адаптивное</a>
<a class="frpg">Ролевые игры</a>
<a class="game">Компьютерные игры</a>
<a class="flat">Нейтральное</a>
</center>
</div>
</section>
<!-- Фильтры конец -->
</div></div></div>
<script type="text/javascript" src="/files/0007/e3/f7/50958.js"></script>
<link rel="stylesheet" type="text/css" href="/files/0007/e3/f7/67652.css?v=3">
[/html]
[html]
<style>/* posts design */
.texts {text-align: center;}
#p178198,
#p178360,
#p178361,
#p178362,
#p178363 {}
#p178198 .post-rating, #p178198 .post-vote, .gid6 #p178198 .post-links,
#p178360 .post-rating, #p178360 .post-vote, .gid6 #p178360 .post-links,
#p178361 .post-rating, #p178361 .post-vote, .gid6 #p178361 .post-links,
#p178362 .post-rating, #p178362 .post-vote, .gid6 #p178362 .post-links,
#p178363 .post-rating, #p178363 .post-vote, .gid6 #p178363 .post-links {display: none !important;}
#p178198.portfolio .container,
#p178360.portfolio .container,
#p178361.portfolio .container,
#p178362.portfolio .container {background-image: none; padding: 0;}
.topic #p178360.portfolio,
.topic #p178361.portfolio,
.topic #p178362.portfolio,
.topic #p178363.portfolio {background-image: none; padding: 0;}
/* blocks design */
.hideonsite {display: none;}
.isadmin .hideonsite {display: block;}
.p-out {
display: inline-block;
position: relative;
margin: 12px 20px 12px;
background-color: #ddd;
border: 1px solid #ccc;
width: 302px;
height: 202px;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.p-inner {
position: relative;
left: 10px;
top: 10px;
background-color: #fff;
border: 1px solid #ccc;
padding: 6px;
width: 290px;
height: 190px;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.p-out .icon {
position: absolute;
background-color: #fff;
width: 50px;
height: 50px;
z-index: 200;
top: 12px;
left: 12px;
transition: all 0.6s;
-webkit-transition: all 0.6s;
text-align: center;
}
.icon.fa-solid {
font-size: 42px;
margin-top: 4px;
}
.icon.material-icons {
font-size: 46px;
margin-top: 2px;
}
.p-out img {margin: 0 !important; padding: 0 !important; max-width: 100%; cursor: pointer !important;}
.p-out p {margin: 0 !important; padding: 0 !important;}
.p-out:hover {background-color: #fff; border: 1px solid #ccc;}
.p-out:hover .icon {background-color: #2d343a;}
.p-out:hover .p-inner {background-color: #2d343a;}
.p-descr {
position: absolute;
z-index: 99;
background: #2d343a;
padding: 0;
border: 0px solid transparent;
left: 17px;
bottom: -5px;
height: 0;
width: 0;
overflow: hidden;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.p-out:hover .p-descr {
height: auto;
width: auto;
padding: 5px;
overflow: visible;
}
.icon.fa-gift {color: #26af33;}
.icon.fa-sack-dollar {color: #00a1e4;}
.icon.material-icons, .portfolio .post-content .icon.material-icons p {color: #e63737;}
.dark .p-out {background-color: #383838; border: 1px solid #484848;}
.dark .p-inner {border: 1px solid #464646; background-color: #2f2f2f;}
.dark .p-out .icon {background-color: #2f2f2f;}
.dark .p-out:hover {background-color: #535353; border: 1px solid #797878;}
.dark .p-out:hover .p-inner {background-color: #151515; border: 1px solid #868686;}
.dark .p-out:hover .p-descr, .dark .port-items .p-out:hover .icon {background-color: #151515;}
@media screen and (max-width: 480px) {
#pun .p-out {margin: 12px 5px 12px; border: none; width: calc(100% - 10px); height: auto;}
#pun .p-out:hover {border: none;}
#pun .p-inner {left: 0; top: 0; width: calc(100% - 12px); height: auto;}
#pun .p-descr {left: 1px; bottom: 1px;}
#pun .p-out .icon {top: 2px; left: 1px;}
}
</style>[/html]
