User:Quacks/Testing: Difference between revisions

From Skyrat
Jump to navigation Jump to search
m Added colors for each box.
m Added box shadows and made the code for this make a little more sense.
Line 1: Line 1:
<div style="border-radius: .2em; margin: 1em 1em 1em 1em; background: #404FF2;">
<div style="box-shadow: 0 0 .3em #999; background: #404FF2; border-radius: .2em; color: #FFF; padding: .4em .8em .5em; font-size: 120%"><center>'''Guides'''</center></div>
<div style="background: #404FF2; border-radius: .2em; color: #FFF; padding: .4em .8em .5em; font-size: 120%"><center>'''Guides'''</center></div>
<div style="border: solid #8E96F6; border-width: 0 0 .15em 0;"></div>
<div style="background: #FFF;">
<div style="display: flex;">
<div style="display: flex;">
<!--STARTER GUIDES-->
<!--STARTER GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #808080; background: #808080; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #808080; background: #808080; width: 15%;">
<div style="background: #808080; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Starter'''</center></div>
<div style="background: #808080; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Starter'''</center></div>
<div style="border: .2em solid #808080; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #808080; border-radius: .5em; background: #FFF;">
Line 13: Line 10:
</div>
</div>
<!--MEDICAL GUIDES-->
<!--MEDICAL GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #3F7597; background: #3F7597; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #3F7597; background: #3F7597; width: 15%;">
<div style="background: #3F7597; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Medical'''</center></div>
<div style="background: #3F7597; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Medical'''</center></div>
<div style="border: .2em solid #3F7597; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #3F7597; border-radius: .5em; background: #FFF;">
Line 21: Line 18:
</div>
</div>
<!--ENGINEERING GUIDES-->
<!--ENGINEERING GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #FF9D00; background: #FF9D00; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #FF9D00; background: #FF9D00; width: 15%;">
<div style="background: #FF9D00; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Engineering'''</center></div>
<div style="background: #FF9D00; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Engineering'''</center></div>
<div style="border: .2em solid #FF9D00; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #FF9D00; border-radius: .5em; background: #FFF;">
Line 29: Line 26:
</div>
</div>
<!--SCIENCE GUIDES-->
<!--SCIENCE GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #A06DA0; background: #A06DA0; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #A06DA0; background: #A06DA0; width: 15%;">
<div style="background: #A06DA0; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Science'''</center></div>
<div style="background: #A06DA0; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Science'''</center></div>
<div style="border: .2em solid #A06DA0; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #A06DA0; border-radius: .5em; background: #FFF;">
Line 37: Line 34:
</div>
</div>
<!--SECURITY GUIDES-->
<!--SECURITY GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #486091; background: #486091; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #486091; background: #486091; width: 15%;">
<div style="background: #486091; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Security'''</center></div>
<div style="background: #486091; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Security'''</center></div>
<div style="border: .2em solid #486091; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #486091; border-radius: .5em; background: #FFF;">
Line 45: Line 42:
</div>
</div>
<!--ANTAGONIST GUIDES-->
<!--ANTAGONIST GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #8B0000; background: #8B0000; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #8B0000; background: #8B0000; width: 15%;">
<div style="background: #8B0000; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Antagonists'''</center></div>
<div style="background: #8B0000; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Antagonists'''</center></div>
<div style="border: .2em solid #8B0000; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #8B0000; border-radius: .5em; background: #FFF;">
Line 53: Line 50:
</div>
</div>
<!--OTHER GUIDES-->
<!--OTHER GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #03870C; background: #03870C; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #03870C; background: #03870C; width: 15%;">
<div style="background: #03870C; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Other'''</center></div>
<div style="background: #03870C; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Other'''</center></div>
<div style="border: .2em solid #03870C; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #03870C; border-radius: .5em; background: #FFF;">
Line 61: Line 58:
</div>
</div>
<!--DEVELOPMENT GUIDES-->
<!--DEVELOPMENT GUIDES-->
<div style="border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #5589c5; background: #5589c5; width: 15%;">
<div style="box-shadow: 0 0 .3em #999; border-radius: .2em; margin: .35em .35em .5em .35em; border: .2em solid #5589c5; background: #5589c5; width: 15%;">
<div style="background: #5589c5; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Development '''</center></div>
<div style="background: #5589c5; border-radius: .2em; color: #FFF; padding: .4em .8em .5em;%"><center>'''Development '''</center></div>
<div style="border: .2em solid #5589c5; border-radius: .5em; background: #FFF;">
<div style="border: .2em solid #5589c5; border-radius: .5em; background: #FFF;">
Line 69: Line 66:
</div>
</div>


</div>
</div>
</div>
</div>
</div>

Revision as of 10:25, 23 July 2022

Guides
Starter
  • PLACEHOLDER
Medical
  • PLACEHOLDER
Engineering
  • PLACEHOLDER
Science
  • PLACEHOLDER
Security
  • PLACEHOLDER
Antagonists
  • PLACEHOLDER
Other
  • PLACEHOLDER
Development
  • PLACEHOLDER