[html]<div style="width:330px;margin:auto;height:480px;background-image:url(https://i.imgur.com/Tpq9UYI.jpg);padding:10px;"><div style="height:50px;line-height:40px;font-family:libre baskerville;font-size:30px;letter-spacing:1px;color:rgba(0,0,0,0.5);text-transform:uppercase;text-align:center;font-weight:bold;">name</div><div style="height:25px;background:#f6f6f6;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.3);font-family:calibri;font-size:11px;line-height:25px;text-align:center;text-transform:uppercase;letter-spacing:1px;color:#6e6e6e;">too young to know that i'll be fine</div><div style="height:343px;background:rgba(255,255,255,0.75);border:1px solid #f6f6f6;margin-top:5px;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.3);padding:15px;width:298px;"><div style="height:inherit;width:inherit;overflow:hidden;"><div style="height:inherit;width:inherit;overflow:auto;padding-right:50px;"><div style="width:inherit;font-family:verdana;color:rgba(0,0,0,0.8);font-size:11px;line-height:15px;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est nec sem mollis porttitor. Nam at auctor orci, nec ultrices augue. Nunc consectetur nec ante et gravida. Nullam faucibus neque maximus nisi eleifend dignissim. Nunc at dolor elementum nisl hendrerit laoreet. Duis sollicitudin ex leo, eget congue ligula aliquam eget. Praesent eget imperdiet augue, at gravida lectus. Donec malesuada turpis porttitor purus efficitur lobortis. Proin viverra, nibh ac auctor vestibulum, eros lectus sodales dui, et varius erat est sed quam. Praesent convallis sit amet mauris congue pellentesque. Pellentesque viverra sem velit, auctor porta odio fringilla ut. Praesent id sem nec ligula consectetur euismod vel non nibh. Duis vitae tristique metus, et consequat ipsum. Sed est sapien, suscipit sit amet mi eleifend, viverra condimentum sem. Proin posuere arcu purus, quis mollis arcu placerat et. Donec id iaculis metus.<br><br>Aliquam quis odio scelerisque, auctor nisl in, finibus mauris. Curabitur eget lectus id massa sodales rhoncus quis id dui. Quisque nec velit non metus luctus ornare. Donec ut lacinia eros, sit amet condimentum erat. Aliquam erat volutpat. Nam pharetra, erat vitae dictum malesuada, felis arcu tristique ante, eu dictum arcu nibh a massa. Sed luctus diam vitae arcu facilisis pharetra. Curabitur felis ipsum, auctor sed purus et, aliquam semper urna. Nunc id urna sed nulla finibus scelerisque in ac eros. Donec sodales purus venenatis volutpat lacinia. Cras pellentesque pulvinar dui id sollicitudin. Maecenas dapibus diam non tempus maximus. Praesent vulputate odio vitae facilisis imperdiet.</div></div></div></div><div style="height:20px;line-height:20px;margin-top:5px;background:#f6f6f6;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.3);font-family:calibri;font-size:10px;text-align:center;color:#6e6e6e;text-transform:uppercase;letter-spacing:1px;">template by <a style="font-size:inherit;font-family:inherit;color:#5D4D66;" class="norewrite" target="_blank" href="http://pixel-perfect.boards.net/user/581" rel="norewrite">punki</a> of <a style="font-size:inherit;font-family:inherit;color:#5D4D66;" class="norewrite" href="http://pixel-perfect.boards.net/" target="_blank" rel="norewrite">pixel perfect</a> - hidden scrollbar</div></div>[/html]
[html]<div class="postcolor"> old shadowplay gallery code<br><br><div class="jqcg0">
<div class="jqcgline1"></div>
<div class="jqcgline2"></div>
<div class="jqcgline3"></div>
<label for="toggle-1"><div class="jqcgcon1"><i class="fa ion-md-color-wand" title="last updated 4/25/2019"></i></div></label>
<div class="jqcg1"></div><div class="jqcg1a">There's a lady who's sure All that glitters is gold</div>
<input type="checkbox" id="toggle-1"><div id="jqcg2"></div><div id="jqcg4">
<input type="radio" id="jqcg41" name="tabgroup" checked="">
<label for="jqcg41"><i class="fa ion-md-create" title="rp things"></i></label>
<input type="radio" id="jqcg42" name="tabgroup">
<label for="jqcg42"><i class="fa ion-md-color-wand" title="skin related"></i></label>
<input type="radio" id="jqcg43" name="tabgroup">
<label for="jqcg43"><i class="fa ion-md-moon" title="miscellaney"></i></label>
<input type="radio" id="jqcg44" name="tabgroup">
<label for="jqcg44"><i class="fa ion-md-trophy" title="challenges"></i></label>
<input type="radio" id="jqcg45" name="tabgroup">
<label for="jqcg45"><i class="fa ion-md-filing" title="retired"></i></label>
<div class="cont1"><div class="jqcg3">
<div class="jqcg5"><span>threads</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16214">you're my wonderwall</a><span>2 imgs, no scroll, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16216">we all fall down</a><span>1 img, no scroll, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16967">you are stellar</a><span>scroll, 1 img, 1 accent, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=126358">envy is thin</a><span>hover, scroll, 1 img, 1 accent</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=132332">nothing more to say</a><span>scroll, 1 accent</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12528">i've been branded</a><span>1 img, animation, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=140546">blowing in the breeze</a><span>2 imgs, 2 accents, <b>REVAMPED</b></span></div>
<div class="jqcg5"><span>shippers/wants</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16966">lie to me once again</a><span>tabbed, 1 accent color, 1 img, set #4</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17259">you know you want me</a><span>no scroll, 1 img</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=126411">hail to the queen</a><span>horizontal scroll, 1 img, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12558">you're welcome</a><span>one charrie, with reply, <b>REVAMPED</b></span></div>
<div class="jqcg5"><span>trackers/comms</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16215">hit me up</a><span>cell phone, 2 versions, 1 img, <b>REVAMPED</b></span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12559">i want you to show me the way</a><span>single/multi character tracker, <b>REVAMPED</b></span></div>
</div></div>
<div class="cont2"><div class="jqcg3">
<div class="jqcg5"><span>applications</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17262">crash into me</a><span>toggle, freeform, 2 img</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=122775">over the moon</a><span>tabbed shipper, freeform, 1 img</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19930">if you can only see</a><span>tabbed shipper, freeform, 1 img, set #4</span></div>
<div class="jqcg5"><span>other site templates</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17009">got me looking like</a><span>face claim, light, set #3</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19931">because i said so</a><span>rules, set #4</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19931">just wanted to say</a><span>app responses, site announcement, set #4</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19944">more than skin deep</a><span>face claim, set #4</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19950">from inside my mind</a><span>member directory, set #4</span></div>
<div class="jqcg5"><span>skins</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14443">turquoise dreams</a><span>light, teals, whites & grays, html templates</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=18930">pumpkin spice</a><span>dark, orange, blacks & grays, html templates</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19775">transparent sky</a><span>in between, dark, light, oranges, html templates</span></div>
<div class="jqcg5"><span>skin related</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14356">mythology drops</a><span>hover mini profile</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=127507">criss crossed</a><span>hover mini profile</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=138472">three parts mini</a><span>hover mini profile</span></div>
</div></div>
<div class="cont3"><div class="jqcg3">
<div class="jqcg5"><span>tutorials</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16766">css variables</a><span>Intermediate/Advanced DoHTML + Css</span></div>
<div class="jqcg5"><span>signatures</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17242">dropping by</a><span>hover, 7 links</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17243">crossing paths</a><span>hover, 7 links</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17287">sliding in</a><span>hover, 6 links</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=120838">hovering just</a><span>hover, 7 links</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12530&view=findpost&p=139777">drawing lines</a><span>hover, 6 links</span></div>
<div class="jqcg5"><span>100 challenges</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17439"> Sins & Virtues mixed</a><span>incomplete, ended Jan 14, 2019</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=18957"> Top Songs of The 90's mixed</a><span>incomplete, ended Mar 10, 2019</span></div>
</div></div>
<div class="cont4"><div class="jqcg3">
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12118&view=findpost&p=79224">330 - Follow a Tutorial Template</a><span>third place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12229&view=findpost&p=79015">331 - Static Shipper Challenge:</a><span>second place (<a href="/index.php?showtopic=13859">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12439&view=findpost&p=79230">333 - 5 Class Thread Template</a><span>third place (<a href="/index.php?showtopic=13806">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12839&view=findpost&p=86012">336 - Chronological Seasons Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=13097&view=findpost&p=91160">338 - No Sharp Edges Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=13744&view=findpost&p=94006">342 - Hogwarts Pride Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?act=ST&f=292&t=14562&hl=&view=findpost&p=100077">Skin Inspired Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?act=ST&f=292&t=14564&hl=&view=findpost&p=100098">Starry Hues Thread Template</a><span>first place (<a href="/index.php?showtopic=15255">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14497&view=findpost&p=100691">346 - Back to School Themed Template</a><span>first place (<a href="/index.php?showtopic=15818">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14533&view=findpost&p=100698">347 - Double Trouble Gif Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14585&view=findpost&p=107372">348 - spring vs autumn template</a><span>first place (<a href="/index.php?showtopic=16120">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14909&view=findpost&p=103333">349 - Autumn Palette Inspired Template</a><span>third place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14954&view=findpost&p=103363">351 - Color Sea Cellphone Template</a><span>second place </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=15550&view=findpost&p=107376">356 - flower power thread template</a><span>tied for second </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=15924&view=findpost&p=112838">359 - Neon Accents Request Template</a><span>completed </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16211&view=findpost&p=112369">361 - Your Astrological Sign Inspired Thread Template</a><span>completed </span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16636&view=findpost&p=114898">364 - Weather Accent Gif Thread Template</a><span>first place (<a href="/index.php?showtopic=17793">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16671&view=findpost&p=114896">366 - Assign you fonts Shipper Template</a><span>first place (<a href="/index.php?showtopic=17735">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16921&view=findpost&p=116841">368 - Culinary Color Thread Template</a><span>second place</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17512&view=findpost&p=120815">369 - Claim a Letter Shipper Template</a><span>third place (<a href="https://k.nickpic.host/BU3T3M.png">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17513&view=findpost&p=122039">370 - Wanderlust Template</a><span>second place (<a href="https://k.nickpic.host/BQ4qYO.png">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=17930&view=findpost&p=123011">373 - wheel of fate signature template</a><span>second place</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=18387&view=findpost&p=126417">376 - Horizontal vs Vertical Tabs App Template </a><span>second place</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=18646&view=findpost&p=130960">378 - color view thread template</a><span>third place</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19351&view=findpost&p=135738">382 - random number of images mini profile</a><span>in progress (<a href="https://k.nickpic.host/bbN3qY.png">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=19685&view=findpost&p=135721">384 - my font combination challenge</a><span>first place (<a href="https://k.nickpic.host/bxnOrc.png">award</a>)</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=20055&view=findpost&p=138391">388 - nothing fancy shipper template</a><span>in progress</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=20422&view=findpost&p=138199">390 - random color mini-profile</a><span>in progress</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=20556&view=findpost&p=139744">391 - pastel colored template</a><span>in progress</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=20606&view=findpost&p=139759">392 - my least favorite template</a><span>in progress</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="link">challenge title</a><span>in progress</span></div>
</div></div>
<div class="cont5"><div class="jqcg3">
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12526">you have new messages</a><span>cellphone, no image, iphone</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12555">teenage wasteland</a><span>thread, 1 img, scroll</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12529">come at me, bro</a><span>static shipper, 2 imgs</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12565">bear my soul</a><span>tabbed app, dark, 1 accent color, set #1</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14654">cut me from the light</a><span>shipper, single charrie, toggle, 1 img</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14655">baba o'riley</a><span>thread, no image, scroll</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14360">stairway to heaven</a><span>thread, 1 img, scroll</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=14357">washed in black</a><span>thread, 1 img, scroll</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12554">cold november rain</a><span>thread, no scroll, no image</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12560">mirror, mirror</a><span>face claim, dark, 1 accent color, set #1</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12561">law of the land</a><span>rules, dark, 1 accent color, set #1</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12562">f.y.i.</a><span>basic template, dark, 1 accent color, set #1</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=12564">in regards to</a><span>app responses, dark, 1 accent color, set #1</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16773">autumn light</a><span>tabbed app, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16218">autumn leaves</a><span>member directory, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16767">autumn's start</a><span>rules, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16768">autumn calls</a><span>general template, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16769">autumn's kiss</a><span>app responses, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16770">autumn's mask</a><span>face claim, light, set #2</span></div>
<div class="jqcglink"><i class="fa ion-md-pulse"></i> <a href="/index.php?showtopic=16965">take me as i am</a><span>tabbed shipper app, set #3</span></div>
</div></div>
</div></div>
<style>
.jqcg0 {
margin: auto; width: 480px; height: 480px; border: 10px solid var(--color3); outline: 1px solid var(--color1);
background: url(https://k.nickpic.host/bs7DED.png); position: relative; overflow: hidden;
--color1: #dfdfdf;
--color2: #0f1a11;
--color3: #fafafa;
--color4: #866045;
}
<a href='index.php?showuser=21512' rel='nofollow' alt='profile link' class='user-tagged mgroup-3'>Font</a>-face {
font-family: 'themify';
src: url("https://files.jcink.net/uploads/queskin5/themify.eot");
src: url("https://files.jcink.net/uploads/queskin5/themify.eot?#iefix") format('embedded-opentype'),
url("https://files.jcink.net/uploads/queskin5/themify.woff") format('woff'),
url("https://files.jcink.net/uploads/queskin5/themify.ttf") format('truetype'),
url("uploads/queskin5/typicons.svg#typicons") format('svg');
font-weight: normal;
font-style: normal;
}
.jqcgline1 {
background: var(--color4); width: 15px; height: 365px; position: absolute; right: 100px; top: 0px; opacity: .5;
}
.jqcgline2 {
background: var(--color4); width: 480px; height: 15px; position: absolute; right: 0px; bottom: 100px; opacity: .5;
}
.jqcgline3 {
background: var(--color4); width: 15px; height: 100px; position: absolute; right: 100px; bottom: 0px; opacity: .5;
}
.jqcgcon1 {
position: absolute; bottom: 15px; right: 25px; font-size: 70px; color: var(--color4); opacity: .5; transform: rotate(90deg);
}
.jqcg1 {
background: var(--color4); opacity: .5; width: 330px; height: 75px; position: absolute; bottom: 15px; left: 20px;
box-sizing: border-box; border: 10px solid transparent;
}
.jqcg1a {
position: absolute; bottom: 15px; left: 10px; font: 900 italic 23px/110% Montserrat; width: 350px; box-sizing: border-box;
text-transform: lowercase; border: 10px solid transparent; text-align: center; color: var(--color2);
}
.jqcg0 input[type=checkbox] {display: none;}
.jqcg0 label {cursor: crosshair;}
.jqcg0 input[type=checkbox]:checked ~ #jqcg2 {opacity: .7; transition: 1s ease-in-out;}
.jqcg0 input[type=checkbox]:checked ~ #jqcg4 {opacity: 1; transition: 1s ease-in-out;}
#jqcg2 {
height: 300px; width: 300px; margin: auto; position: absolute; top: 30px; left: 25px;
background: var(--color2); opacity: 0; transition: 1s ease-in-out; padding: 10px;
}
#jqcg4 {
height: 310px; width: 310px; margin: auto; position: absolute; top: 30px; left: 30px;
opacity: 0; transition: 1s ease-in-out;
}
#jqcg4 input {
display: none;
}
#jqcg4 label {
display: block; font-size: 30px; color: var(--color1); position: relative; top: 0px;
left: 375px; text-align: center; padding: 5px; border: 1px solid; border-radius: 50%;
width: 30px; height: 30px; margin: 20px 0px;
}
#jqcg4 .cont1, #jqcg4 .cont2, #jqcg4 .cont3, #jqcg4 .cont4, #jqcg4 .cont5 {
height: 300px; width: 290px; position: absolute; top: 10px; left: 5px; background: none;
border: 15px solid transparent; box-sizing: border-box; opacity: 0; transition: .5s ease-in-out;
}
#jqcg4 input:checked+label {
color: var(--color4);
}
#jqcg4 #jqcg41:checked+label ~ .cont1, #jqcg4 #jqcg42:checked+label ~ .cont2,
#jqcg4 #jqcg43:checked+label ~ .cont3, #jqcg4 #jqcg44:checked+label ~ .cont4,
#jqcg4 #jqcg45:checked+label ~ .cont5 {
opacity: 1; z-index: 5; transition: .5s ease-in-out;
}
.jqcg3 {
height: 270px; width: 275px; font: 11.6px/130% Work Sans; overflow: auto; text-align: justify;
padding-right: 20px; box-sizing: border-box; color: var(--color1);
}
.jqcg5 {
font: 900 italic 18px/120% Montserrat; text-align: left; text-transform: uppercase; padding: 20px 10px 5px 5px;
margin: 15px 0px;
}
.jqcg5 span {
background: var(--color4); padding: 5px; color: var(--color2);
}
.jqcglink a {
color: var(--color1); text-decoration: none; font: italic 16px/150% Oswald; text-transform: lowercase;
}
.jqcglink i {
color: var(--color4); font-size: 16px;
}
.jqcglink span {
display: block; text-align: right; color: var(--color3); border-top: 1px solid var(--color4);
text-transform: uppercase; font: 10px/130% Work Sans;
}
.jqcglink span a {
font: 10px/130% Work Sans; text-transform: uppercase;
}
.jqcg3::-webkit-scrollbar { width: 5px; }
.jqcg3::-webkit-scrollbar-track { background: var(--color4); border: 2px solid var(--color2); }
.jqcg3::-webkit-scrollbar-thumb { background: var(--color4); }
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Work+Sans" rel="stylesheet">
<link href="https://unpkg.com/ionicons@4.4.1/dist/css/ionicons.min.css" rel="stylesheet">
</div>
[/html]
[html] <div class="vine0"><div class="vine1a"></div><div class="vine1b"></div>
<div id="vine2">
<div class="corner top left"></div><div class="corner top right"></div>
<div class="vine2a">because we're all <span>square</span></div>
<div class="vine2b">tag @ <a href="link">montgomery tate</a></div>
<div class="corner bottom left"></div><div class="corner bottom right"></div>
</div>
<div class="vine3">This is plain, <b>bold,</b> and <i>italic</i> text.<p>
I love cheese, especially halloumi fromage. <b>Pepper jack hard cheese the big cheese st. agur blue cheese danish fontina boursin mascarpone squirty cheese.</b> Pepper jack bavarian bergkase stilton mascarpone melted cheese lancashire danish fontina feta. <i>Cottage cheese paneer cottage cheese everyone loves halloumi cheesy feet.</i></p><p>Parmesan cheddar cheese and biscuits. Swiss croque monsieur blue castello boursin goat jarlsberg croque monsieur red leicester. <b>Fondue cauliflower cheese cheeseburger when the cheese comes out everybody's happy croque monsieur fondue boursin bocconcini.</b> Pepper jack melted cheese parmesan stinking bishop manchego.</p><p>Monterey jack rubber cheese caerphilly. Who moved my cheese swiss jarlsberg cheese triangles cheddar cottage cheese cottage cheese jarlsberg. <i>Goat smelly cheese fromage frais ricotta st. agur blue cheese cottage cheese smelly cheese smelly cheese.</i> St. agur blue cheese when the cheese comes out everybody's happy when the cheese comes out everybody's happy rubber cheese.</p><p>Cheese on toast st. agur blue cheese boursin. <b>Port-salut edam monterey jack everyone loves cheese strings chalk and cheese mozzarella stilton. Jarlsberg cheesecake everyone loves boursin manchego boursin cream cheese bocconcini.</b> Cheese and biscuits monterey jack camembert de normandie cheesecake.</p><p>Cauliflower cheese lancashire dolcelatte. <i>Fromage frais port-salut cheese on toast cut the cheese bocconcini stilton camembert de normandie pepper jack.</i> Ricotta mascarpone the big cheese goat blue castello who moved my cheese danish fontina monterey jack. Blue castello.</p></div>
</div>
<style>
.vine0 { background-image: url(https://cdnw.nickpic.host/sYFGVN.png); margin: auto; overflow: hidden; width: 400px; height: 500px; position: relative; --one: #A19A8A; --two: #3C3C3C; --three: #676359; --four: #747C69; --five: #866D54; }
.vine0 a { text-decoration: none; color: var(--five); }
.vine1a { background: var(--two); width: 400px; height: 500px; opacity: .95; position: absolute; top: 0px; left: 0px; clip-path: polygon(0 0, 0% 100%, 100% 100%); }
.vine1b { background: var(--two); width: 401px; height: 501px; opacity: .95; position: absolute; top: 0px; right: 0px; clip-path: polygon(0 0, 0% 100%, 100% 100%); transition: 1s ease-in-out; }
.vine0:hover .vine1b { clip-path: polygon(0 0, 100% 0, 100% 100%); transition: 1s ease-in-out 1s; }
#vine2 { position: absolute; top: 200px; left: 100px; height: 110px; width: 200px; color: var(--one); transition: 1s ease-in-out; }
#vine2 > div.corner { display: block; position: absolute; width: 25px; height: 25px; color: var(--five); transition: 1s ease-in-out; }
.top {top: 0px; border-top-style: solid;}.bottom {bottom: 0px; border-bottom-style: solid;}.left {left: 0px; border-left-style: solid;}.right {right: 0px; border-right-style: solid; }
.vine0:hover #vine2 { top: 20px; left: 20px; height: 460px; width: 360px; transition: 1s ease-in-out 1.5s; }
.vine0:hover #vine2 > div.corner { width: 75px; height: 75px; transition: 1s ease-in-out 1.5s; }
.vine2a { box-sizing: border-box; border: 20px solid transparent; text-align: center; opacity: 1; transition: 1s ease-in-out 1s; font: 20px/120% Vidaloka; }
.vine2a span { display: block; font: italic 800 40px/120% Vidaloka; letter-spacing: 3px; }
.vine0:hover .vine2a { opacity: 0; transition: 1s ease-in-out .5s; }
.vine2b { box-sizing: border-box; border: 20px solid transparent; text-align: center; opacity: 1; transition: 1s ease-in-out; font: italic 14px/120% Vidaloka; opacity: 1; margin-top: -10px; transition: 1s ease-in-out 1s; }
.vine0:hover .vine2b { opacity: 0; transition: 1s ease-in-out .5s; }
.vine3 { position: absolute; top: 00px; left: 0px; border: 50px solid transparent; overflow: auto; height: 500px; width: 410px; font: 13px/180% Vidaloka; box-sizing: border-box; padding-right: 10px; text-align: justify; color: var(--one); opacity: 0; transition: .5s ease-in-out; }
.vine3 b { color: var(--four); }.vine3 i { color: var(--five); }
.vine0:hover .vine3 { opacity: 1; transition: 1s ease-in-out 2.1s; }
.vine3::-webkit-scrollbar { width: 5px; }
.vine3::-webkit-scrollbar-track { background: var(--three); border: 2px solid var(--two); border-radius: 50px; }
.vine3::-webkit-scrollbar-thumb { background: var(--three); border: none; border-radius: 50px; }
</style><link href="https://fonts.googleapis.com/css?family=Vidaloka&display=swap" rel="stylesheet">[/html]
[html]<div id="ellet-dev2"><div class="outline">
<div class="text">
<div class="imagex">
<img src="https://78.media.tumblr.com/212be37f91b7412fa62817c9369ad0aa/tumblr_p7yg36HvXH1qlyolpo1_400.png">
<img src="https://78.media.tumblr.com/4777cde719636f3f6e60dd5e2d6c09ce/tumblr_p7yg36HvXH1qlyolpo4_400.png">
<img src="https://78.media.tumblr.com/bef4c4faa7bc9ef8536fd4fe1b6c32a4/tumblr_p7yg36HvXH1qlyolpo3_400.png">
<img src="https://78.media.tumblr.com/ea4fff4abeda6d4bdcce123f1f122700/tumblr_p7yg36HvXH1qlyolpo2_400.png">
</div>
</div></div>
<div class="ship">
ted x andromeda
</div>
</div>
<link href="http://files.jcink.net/uploads/ellectricfeels/hpcss.css" rel="stylesheet" type="text/css">[/html]
- Подпись автора
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
