Single post in sempiternal [free to use templates]
Forum Index > Pokémon > Pokémon Art > sempiternal [free to use templates] >
journey start - about me
ngl, i really don't want to know how long i spent on this three tabs (four if you count the bag), more for those with less content / less to say, i can't recommend tossing too much information in the tabs unless you know what you're going to be tinkering with in the css in case it decides to implode on itselfcode
[sc=bkg][sc=imgbkg][/sc]
[sc=tabs][sc=tabbed_interface horizontal][ul]
[li][img]https://i.imgur.com/JZzbtSR.png[/img][/li]
[li][img]https://i.imgur.com/0C30tj9.png[/img][/li]
[li][img]https://i.imgur.com/si8XHGI.png[/img][/li]
[li][img]https://i.imgur.com/sdismRk.png[/img][/li][/ul][
][sc=tab-active][sc=fontshad]PROF. BIRCH is in trouble!
Release a POKEMON and rescue him![/sc][/sc][
][sc=tab]left pokeball[/sc][
][sc=tab]middle pokeball[/sc][
][sc=tab]right pokeball[/sc][
][/sc][/sc][sc=credit][url=https://pfq.link/~LDxq]credit[/url][/sc][/sc]
[style]
.imgbkg {
content: url('https://i.imgur.com/1Bx1mo0.png');
width: 100%;
}
.bkg {
background: #385830;
padding-top: 3%;
}
.fontshad {
text-shadow: 1px 1px 0 #D0D0C8,
1px 0px 0 #D0D0C8,
0px 1px 0 #D0D0C8;
}
.tabs {
font-size: 10pt;
.tabbed_interface {
border-collapse: separate;
box-shadow: none;
>ul {
background: transparent;
>li {
background: transparent !important;
border: none !important;
min-width: fit-content !important;
max-width: fit-content !important;
height: fit-content !important;
position: fixed !important;
padding: 0px !important;
}
>li:nth-child(1) {
margin-top: -67%;
margin-left: 35%;
width: fit
}
>li:nth-child(2) {
margin-top: -50%;
margin-left: 25%;
}
>li:nth-child(3) {
margin-top: -43%;
margin-left: 45%;
}
>li:nth-child(4) {
margin-top: -48%;
margin-left: 67%;
}
>li:nth-child(2):hover {
content: url('https://i.imgur.com/raKG6i1.gif');
}
>li:nth-child(3):hover {
content: url('https://i.imgur.com/raKG6i1.gif');
}
>li:nth-child(4):hover {
content: url('https://i.imgur.com/raKG6i1.gif');
}
}
.tab, .tab-active {
font-family: "VT323";
background: #F8F8F8;
font-size: 13pt;
box-shadow: none;
border: 2px solid #706880;
height: fit-content;
width: 80%;
color: #606060;
padding: 3%;
margin: auto;
margin-bottom: 0%;
margin-top: -25%;
border-radius: 3px;
}
}
a, a:visited {
color: #606060;
transition:all 100ms ease-in-out;
}
a:hover {
color: @accent3;
letter-spacing: 1px;
transition:all 100ms ease-in-out;
}
.tooltip_content {
border: 1px solid #606060;
background: #F8F8F8;
min-width: fit-content;
color: #606060;
font-size: 13pt;
padding: 5px;
}
.bbcode_tooltip {
border-bottom: 1px dashed #606060;
}
.panel {
background: none;
color: #606060;
border: 0px;
box-shadow: none;
>h3 {
background: #F8F8F8;
color: #606060;
border: 1px solid #606060;
border-radius: 0px;
padding: 3px;
margin: 0 auto;
min-width: 85%;
width: fit-content;
max-width: 85%;
text-align: center;
font-size: 13pt;
}
>div {
color: #606060;
border-radius: 0px;
border: 1px dashed #606060;
margin: 0.5% 6.3% auto;
margin-bottom: 1.5%;
padding: 5px;
font-size: 13pt;
}
}
.expbar {
background: #F8F8F8;
border-radius: 0px;
width: 70%;
border: 1px solid #606060;
color: #606060;
text-shadow: 1px 1px #F8F8F8,
-1px -1px #F8F8F8,
1px -1px #F8F8F8,
-1px 1px #F8F8F8;
>div {
background: #606060;
border-right: 0px solid #F8F8F8;
}
}
table {
margin: 0px auto;
border: 0px;
border-collapse: separate;
}
table th{
text-align: center;
vertical-align: middle;
padding: 7px;
border: none;
background: #606060;
color: #F8F8F8;
border-radius: 0px;
}
table td {
text-align: center;
vertical-align: middle;
padding: 5px;
border: 1px solid #606060;
background: #F8F8F8;
color: #606060;
border-radius: 0px;
}
.party > div {
background: none;
width: fit-content;
height: fit-content;
border: 1px solid #606060;
display: inline-block;
color: #606060;
border: 1px solid #606060;
box-shadow: none;
padding: 2%;
.extra {display: none;}
.expbar {display: none;}
.name {display: none}
.taste {display: none}
.action {display: none}
> div.tooltip_content {
background: #F8F8F8;
color: #606060;
min-width: fit-content;
min-height: fit-content;
border: solid 1px #606060;
}
.bbcode_tooltip {
border-bottom: 1px solid #606060;
}
}
.party > div > .pkmn:before {
border: solid #606060;
background-color: #D0D0C8;
}
}
/* latin */
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/vt323/v12/pxiKyp0ihIEF2isfFJXUdVNF.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.credit {
font-size: 10pt;
padding-right: 1%;
padding-bottom: 1%;
text-align: right;
color: #E7FFE0;
> a, a:visited {
color: #88D870;
}
}
[/style]
