From Shadows Codes, 10/8/2020

<style>


@import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Dynalight|Great+Vibes|Italianno|Meie+Script|Parisienne|Petit+Formal+Script|Ruthie&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300|Chathura|Marvel|Open+Sans:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Aladin|Audiowide|Bangers|Chathura|Marvel|Open+Sans:300|Permanent+Marker|Share|Staatliches&display=swap');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}

 body{
 background: #000;
 background-position: center;
 background-size: cover;
 }


@keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}


 @keyframes fadeup{
 from{opacity:0;top:10vh;}
 to{opacity:1;top:8vh;}
 }

@keyframes fadeuplogo{
 from{opacity:0;top:24vh;}
 to{opacity:1;top:22vh;}
 }

 @keyframes bouncein1{
 0%{bottom: 6vh;opacity: 0;}
 50%{bottom:16vh;}
 100%{bottom:14vh;opacity: 1;}
 }

@keyframes bouncein2{
 0%{bottom: 46vh;opacity: 0;}
 50%{bottom:56vh;}
 100%{bottom:54vh;opacity: 1;}
 }

@keyframes pulseglow{
0%{box-shadow: 0 0 2vh #fff0c9;}
50%{box-shadow: 0 0 4vh #fff0c9;}
100%{box-shadow: 0 0 2vh #fff0c9;}
}

 #maintitle{
 position: fixed;
 z-index: 5;
 text-align: center;
 height: 25vh;
 width: 50vw;
 left: 2vw;
 font-family: 'Aguafina Script';
 font-size: 15vh;
 color: #fff;
 text-shadow: 0vh 1vh 1vh #000;
 animation: fadeup .5s 1;
 animation-fill-mode: both;
 animation-delay: .5s;
 }


 #box1, #box2{
 position: fixed;
 padding: 1%;
 overflow: auto;
 background: radial-gradient(#fff, #f9dc84);
 box-shadow: 0vh 1vh 1vh #f9dc84;
 height: 30vh;
 width: 35vw;
 right: 5vw;
 font-family: 'Marvel';
 font-size: 2.5vh;
 color: ##1a092d;
 text-shadow: 0vh .5vh .75vh;
 }

 #box1{
 animation: bouncein1 1s 1;
 animation-fill-mode: both;
 animation-delay: .75s;
 }

 #box2{
 animation: bouncein2 1s 1;
 animation-fill-mode: both;
 animation-delay: .8s;
 }



 h1{font-size: 5vh;font-weight: lighter;}
 a{text-decoration: underline;transition: 0.2s;color: #a078ba;}
 a:hover{transition: 0.2s;color:#8852a8;}


#logo{
position: fixed;
left: 21.5vw;
 animation: fadeuplogo .5s 1;
 animation-fill-mode: both;
 animation-delay: .6s;
}

#logo img{
height: 25vh;
}

b{
 color: #9e49ff;
text-shadow: 0 0 1vh #7700ff;
}


#showcase{
height: 20vh;
overflow: hidden;
position: fixed;
width: 120vw;
bottom: 19vh;
left: -30vw;
opacity: 0;
background: transparent;
color: #333;
animation: fadein 2s 1;
animation-fill-mode: both;
animation-delay: 1s;
}

.showcase p{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: #fff;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 4s linear infinite;
-webkit-animation: scroll-left 4s linear infinite;
animation: scroll-left 30s linear infinite;
letter-spacing: 20px;
}


.showcase p:hover{
-webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 animation-play-state: paused;
}

@-moz-keyframes scroll-left {
0% {-moz-transform: translateX(100%);}
100%{-moz-transform: translateX(-100%);}
}

@-webkit-keyframes scroll-left{
0%{-webkit-transform: translateX(100%);}
100%{-webkit-transform: translateX(-100%);}
}

@keyframes scroll-left{
0%{
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);}
}

.screencap{
height:12vh;
box-shadow: 0 0 1vh #808080;
}

.screencapnew{
height:12vh;
animation: pulseglow 1.4s infinite;
animation-fill-mode: both;
}

.hoverover{
 position: relative;
 display: inline-block;
}

.hoverover .hoverovertext {
 visibility: hidden;
 position: relative;
 left: 30px;
 width: 20vw;
 height: 20vh;
 overflow: hidden;
 background-color: black;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 7;
}

.hoverover:hover .hoverovertext {
 visibility: visible;
}


</style>

<div id="maintitle">From Shadows Coding</div>

<div id="logo">
<img src="https://i.imgur.com/UxNP8yk.gif">
</div>


<div id="showcase">
<div class="showcase"><br><br>
<p>
<a target="_blank" href="https://i.imgur.com/dWJHwge.png"><img src="https://i.imgur.com/dWJHwge.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/QC4KyxU.png"><img src="https://i.imgur.com/QC4KyxU.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/L42pjBQ.png"><img src="https://i.imgur.com/L42pjBQ.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/INLQ84m.png"><img src="https://i.imgur.com/INLQ84m.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/aoR7rnc.png"><img src="https://i.imgur.com/aoR7rnc.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/AggfahT.png"><img src="https://i.imgur.com/AggfahT.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/6a3lLsi.png"><img src="https://i.imgur.com/6a3lLsi.png" class="screencap"></a>
<a target="_blank" href="https://i.imgur.com/DeXtBs9.png"><img src="https://i.imgur.com/DeXtBs9.png" class="screencapnew"></a>
</p>
</div>
</div>


<div id="box1">
<center>
<h1>02: Public Use Layouts and Resources</h1>
Below is a list of public, free-to-use layouts that I build from time-to-time when I'm feeling moderately lazy. Feel free to use them, but please keep the credit on the layout.<br>
<br>
<u><b>VERY IMPORTANT.</b></u><br>
To use these layouts, you need to take the entirety of the layout's code and stick it in the 'body' section of your 'edit profile' page. If you separate the code, you will cause the fonts to go haywire, and the scrollbar to become visible. I design my layouts to hide the scrollbar because the Chrome scrollbar looks totally hideous.<br>
I've seen too many people with jacked up codes because they take the CSS and the HTML and put them into the two separate boxes.<br>
<br>
I typically use this <a target="_blank" href="https://htmledit.squarefree.com/">Real-time HTML Editor</a> to put together my codes, and I recommend it for anyone looking to build something of their own.<br>
For my fonts, I use <a target="_blank" href="https://fonts.google.com/">Google Fonts</a>, although <a target="_blank" href="https://roleplay.chat/profile.php?user=Deum">Monster Codes</a> also has a fonts page, and I occasionally use that as well.<br>
</center>
<br>
<ol>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/7ipx8WJX">Lynz.</a><span class="hoverovertext"><img src="https://i.imgur.com/6aLV7g3.png" height="100%"></span></div> Three boxes, fast slide-in animation, and spot for one image.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/qqcm7bv9">Through the Fire.</a><span class="hoverovertext"><img src="https://i.imgur.com/GDdTWLC.png" height="100%"></span></div> One box, with four tabs. One image. No animations.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/DiF1U4Hj">That Grey Cat.</a><span class="hoverovertext"><img src="https://i.imgur.com/6IPMfNU.png" height="100%"></span></div> One image, slides in. Two boxes, both fade in.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/SsGEyxzH">Liger.</a><span class="hoverovertext"><img src="https://i.imgur.com/LWegQmF.png" height="100%"></span></div> One image, and one box with a slanted animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/ivtA82Tv">Snowflake.</a><span class="hoverovertext"><img src="https://i.imgur.com/Jsbkmvr.png" height="100%"></span></div> One image, three boxes with a gradual slide-in animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/EGwLQ163">Archer of Red.</a><span class="hoverovertext"><img src="https://i.imgur.com/mwjXpVe.png" height="100%"></span></div> One image, three gif buttons and one gif-header. Move-in animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/vdga0YLQ">Shinobi.</a><span class="hoverovertext"><img src="https://i.imgur.com/qtdpvOx.png" height="100%"></span></div> One image, one box, three tabs, slide-in animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/6w2s8u4e">Striped.</a><span class="hoverovertext"><img src="https://i.imgur.com/Xb2arlA.png" height="100%"></span></div> One image, one box, two animated stripes, slide-in/fade animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/qyVqKBhT">Crystal.</a><span class="hoverovertext"><img src="https://i.imgur.com/I1Layjm.png" height="100%"></span></div> One image, one box, one info, three tabs, one title. No animation.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/WqB8ytRp">Florencian.</a><span class="hoverovertext"><img src="https://i.imgur.com/j7P6a1K.png" height="100%"></span></div> One Image, One Box, four tabs, One Title, smooth transition between tabs.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/LuPGGp6m">Cottontail.</a><span class="hoverovertext"><img src="https://i.imgur.com/HCrJFq2.png" height="100%"></span></div> One Image, One Box, three tabs, smooth transition between tabs.</li>
<li><div class="hoverover"><a target="_blank" href="https://pastebin.com/raw/SvT7gzz5">Annika.</a><span class="hoverovertext"><img src="https://i.imgur.com/o5uSrPa.png" height="100%"></span></div> <u><b>New!</b></u> One image, Two Boxes, Four tabs with animated buttons.</li>

</div>
<div id="box2">
<center>
 <h1>01: Rules and Prices</h1>
 Hello! Thank you for visiting my coding profile.
Here, I have information regarding my profile commissions, as well as a list of free-to-use layouts in the second box.<br>
If you're looking to hire me to build you a role-playing layout, there are a few key things you should take note of first.<br>
<br>
<li>This profile is Not for role playing. It is for consultation on commissions or on pre-made layouts. (And occasionally for shitposting In-Room.)</li>
<li>My layouts are purely HTML- and CSS-based. <b>I do not write JavaScript.</b></li>
<li>My codes can be distinguished either by the little tag I put in the Out of Character section, or by the small cat in the bottom corner of the screen.</li>
<li>Please don't remove the tag or the small cat. These are credits to my work.</li>
<li>Don't steal my codes. I make good money through my coding commissions. If you want one for yourself, see below for commission pricing.</li>
<br>
 My commissions vary in prices, depending on a few variables.<br>
 Base Price : $20 per Layout<br>
 Animations : +$5<br>
 Same-Day Completion : +$5<br>
 <br>
 If you bring a render-able image, I will gladly remove the background from the image for an extra $5 added to the base price.<br>
<br>
I only accept PayPal.<br><br>
<b>For more questions on coding and commissions and whatnot, please feel free to DM me or send me an RPCMail!
</div>