User:Angry Hearts/Sandbox

T h i s p a g e  i s  t o  t e s t  m y  H T M L  a n d  c o d i n g,  p l e a s e  l e a v e  t h i s  a l o n e  f o r  n o w. Hola, Soy Angry Hearts ;3

R a i n b o w T e x t G e n e r a t o r  ; 3
http://patorjk.com/text-color-fader/ P e r f e c t i o n i s  t h e  d i s e a s e  o f  a  n a t i o n.

STEVEN UNIVERSE FONT
<div style=" height: 1px; z-index: 1;     color: #f0c4dd;     text-shadow: /* outline */ 3px 0px 0px #ffffff, /* right */ -3px 0px 0px #ffffff, /* left */ 0px 3px 0px #ffffff, /* bottom */ 0px -3px 0px #ffffff, /* top */ 2px 2px 0px #ffffff, /* bottom right */ -2px 2px 0px #ffffff, /* bottom left */ 2px -2px 0px #ffffff, /* top right */ -2px -2px 0px #ffffff, /* top left */ /* vertical shadow */ 3px 4px 0px #f2dfe0, /* right */ -3px 4px 0px #f2dfe0, /* left */ 2px 5px 0px #f2dfe0, /* bottom right */ -2px 5px 0px #f2dfe0, /* bottom left */ 0px 6px 0px #f2dfe0, /* bottom */ 3px 2px 0px #f2dfe0, /* middle bottom right */ -3px 2px 0px #f2dfe0;">Star Child Star Child

Rainbow text Alternative
<div style="   text-align: center;    width: 641px;    color: #000;    font-size: 56px;    font-family: futura,'avenir next condensed', 'arial narrow', sans-serif;    font-weight: 700;    background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);    background-image: -moz-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);    background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%); -webkit-background-size: 100% 5px; -moz-background-size: 100% 5px; background-size: 100% 10px;">Rainbow Boarded Text

Also this one
<div style="margin: 30px auto;   width: 750px;    background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);    background-image: -moz-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);    background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%); -webkit-background-size: 100% 10px; -moz-background-size: 100% 10px; background-size: 100% 10px; background-repeat: no-repeat; background-position-y: bottom; padding-bottom: 31px;"> Gradient Border

Glowing Text
<div style="display: inline-block; box-sizing: border-box; border: medium none; font: 48px &quot;Warnes&quot;,Helvetica,sans-serif; color: rgb(255, 255, 255); text-align: center; text-overflow: clip; white-space: pre; text-shadow: 0px 0px 10px rgb(255, 255, 255), 0px 0px 20px rgb(255, 255, 255), 0px 0px 30px rgb(255, 255, 255), 0px 0px 40px rgb(255, 0, 222), 0px 0px 70px rgb(255, 0, 222), 0px 0px 80px rgb(255, 0, 222), 0px 0px 100px rgb(255, 0, 222); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 0s;">This Glowing Text

Glowing Texts Part 2
<div style="display: inline-block; box-sizing: border-box; border: medium none; font: 18px &quot;Warnes&quot;,Helvetica,sans-serif; color: rgb(255, 255, 255); text-align: center; text-overflow: clip; white-space: pre; text-shadow: 0px 0px 10px rgb(255, 255, 255), 0px 0px 20px rgb(255, 255, 255), 0px 0px 30px rgb(255, 255, 255), 0px 0px 40px rgb(255, 0, 222), 0px 0px 70px rgb(255, 0, 222), 0px 0px 80px rgb(255, 0, 222), 0px 0px 100px rgb(255, 0, 222); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 0s;background: linear-gradient(to right, #FF0000, #FF4000, #FF8000, #FFBF00, #FFFF00, #BFFF00, #80FF00, #40FF00, #00FF00, #00FF40, #00FF80, #00FFBF, #00FFFF, #00BFFF, #0080FF, #0040FF, #0000FF, #4000FF, #8000FF, #BF00FF, #FF00FF, #FF00BF, #FF0080, #FF0040, #FF0000, #FF0000, #FF4000, #FF8000, #FFBF00, #FFFF00, #BFFF00, #80FF00, #40FF00, #00FF00, #00FF40, #00FF80, #00FFBF, #00FFFF, #00BFFF, #0080FF, #0040FF, #0000FF, #4000FF, #8000FF, #BF00FF, #FF00FF, #FF00BF, #FF0080, #FF0040, #FF0000);-webkit-background-clip: text; -webkit-text-fill-color: transparent;   font-weight: bold; font-family: 'Courier New'">This magnificent piece of art.

This really Cool thing
        Wow! Hehehehe ;3  • •  <div style="position: absolute; bottom: 50px; left: 370px; height: 65px; width: 65px; border-radius:40px; border: 2px solid grey; background-color: white; box-shadow: -2px 2px 5px grey; overflow: hidden;"> <div style="position: absolute; bottom: 100px; left: 440px; height: 50px; width: 50px; border-radius:28px; border: 2px solid grey; background-color: white; box-shadow: -2px 2px 5px grey; overflow: hidden;"> <div style="position: absolute; bottom: 150px; left: 485px; height: 40px; width: 40px; border-radius: 25px; border: 2px solid grey; background-color: white; box-shadow: -2px 2px 5px grey; overflow: hidden;"> <div style="position: absolute;left: 15px;bottom: -35px;text-align: center;border: 5px solid #d000cc;border-radius: 0 0 20px 20px;padding: 2px 10px;background-color: rgba(202, 5, 255, 0.4);font-size: 16px !important;line-height: 21px !important;box-shadow: 0 0 10px rgb(234, 0, 255);"> • •  • <div style="position: absolute;right: 20px;top: -35px;text-align: center;border: 5px solid #ed06ff;border-radius: 20px 20px 0 0;padding: 2px 15px;background-color: rgba(190, 5, 226, 0.4);font-size: 16px !important;line-height: 21px !important;box-shadow: 0 0 10px rgb(138, 26, 230);"> •

More Texts
<div style="text-align: center;   margin: 20px auto;    font-family: 'League-Gothic', Courier;    font-size: 76px;    text-transform: uppercase;    color: #fff;    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;">Flame Text

<div style="text-align: center;   margin: 100px auto;    font-family: impact;    font-size: 131px;    text-transform: uppercase;    color: #000000;    text-shadow: 10px 10px 0 #ff17ee, 20px 20px 0 #5aff5f, 30px 30px 0 #fd17ff, 40px 40px 0 #5fff5a;">Bar Text

<div style="  background-image:    linear-gradient(135deg,    transparent 84px,    rgba(217, 91, 67, 1) 84px, rgba(217, 91, 67, 1) 100px,    rgba(236, 208, 120, 1) 100px, rgba(236, 208, 120, 1) 106px,    rgba(192, 41, 66, 1) 106px, rgba(192, 41, 66, 1) 120px,    rgba(236, 208, 120, 1) 121px, rgba(236, 208, 120, 1) 127px,    rgba(84, 36, 55, 1) 127px, rgba(84, 36, 55, 1) 142px,    rgba(236, 208, 120, 1) 142px, rgba(236, 208, 120, 1) 148px,    rgba(83, 119, 122, 1) 148px, rgba(83, 119, 122, 1) 163px,    rgba(236, 208, 120, 1) 163px, rgba(236, 208, 120, 1) 168px,    rgba(217, 91, 67, 1) 169px    ),    linear-gradient(135deg,    rgba(217, 91, 67, 1) 15px, rgba(217, 91, 67, 1),    rgba(236, 208, 120, 1) 15px, rgba(236, 208, 120, 1) 21px,    rgba(192, 41, 66, 1) 21px, rgba(192, 41, 66, 1) 36px,    rgba(236, 208, 120, 1) 36px, rgba(236, 208, 120, 1) 42px,    rgba(84, 36, 55, 1) 42px, rgba(84, 36, 55, 1) 57.5px, rgba(236, 208, 120, 1) 57px, rgba(236, 208, 120, 1) 63px, rgba(83, 119, 122, 1) 63px, rgba(83, 119, 122, 1) 78px, rgba(236, 208, 120, 1) 78px, rgba(236, 208, 120, 1) 84px, transparent 84px, transparent 99px );font-family:impact;font-size:20px">Gradient border

I know, I know, why did I do this? I'm kinda obsessed with CSS right now.

<div style="-moz-column-count: 2; -moz-column-gap: undefinedpx; -webkit-column-count: 2; -webkit-column-gap: undefinedpx; column-count: 2; column-gap: undefinedpx;">This is something written by guts and will taken by my glorious friends. One serves his will in Undertale while the other serves his duty here. Both helped me reach where I am in life and inspired me to be more than what I am and what I can become.

Love is something fragile. It's sort of like a mirror, you look at it to find beauty but once shattered, you'd have an impossible chance to fix it. A flower is something amazing, it's grows from a tiny seed into to something quite wonderful and blossoms into something heartwarming.

More!
<span class="button" style="border: 1px solid #661573;   background: #3644a3;    background: -webkit-gradient(linear, left top, left bottom, from(#975abf), to(#3644a3));    background: -webkit-linear-gradient(top, #975abf, #3644a3);    background: -moz-linear-gradient(top, #975abf, #3644a3);    background: -ms-linear-gradient(top, #975abf, #3644a3);    background: -o-linear-gradient(top, #975abf, #3644a3);    background-image: -ms-linear-gradient(top, #975abf 0%, #3644a3 100%);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;    text-shadow: #917fdb 0 1px 0;    color: #000000;    font-family: helvetica, serif; padding: 8.5px 18px; font-size: 14px; text-decoration: none; text-align:center; width:200px; vertical-align: middle;">This button is workin dawg.

<div style="width: 300px;   position: absolute;    text-align: center;    font-size: 20px!important;    background: #ff007b;    background: -webkit-gradient(linear, left top, left bottom, from(#ff007b), to(#ab2c2c));    background: -webkit-linear-gradient(top, #ff007b, #ab2c2c);    background: -moz-linear-gradient(top, #ff007b, #ab2c2c);    background: -ms-linear-gradient(top, #ff007b, #ab2c2c);    background: -o-linear-gradient(top, #ff007b, #ab2c2c);    background-image: -ms-linear-gradient(top, #ff007b 0%, #ab2c2c 100%);    -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    font-family: 'Helvetica Neue',Helvetica, sans-serif;"><div style="    content: '';    position: absolute;    display: block;    bottom: -1em;    border: 1.5em solid #e30e61;    z-index: -1;    left: -2em;    border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;"> <div style=" content: ''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #c23a3a; z-index: -2;right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;"> <div style="   margin-top: 2px; border-top: 1px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);"> <strong class="ribbon-content"> Stitched Ribbon CSS <div style="margin-bottom: 2px; border-top: 1px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);">

<div style="width: 300px;   position: relative;    text-align: center;    font-size: 20px!important;    background: #7e02ec;    background: -webkit-gradient(linear, left top, left bottom, from(#c000ff), to(#3b1448));    background: -webkit-linear-gradient(top, #c000ff, #3b1448);    background: -moz-linear-gradient(top, #c000ff, #3b1448);    background: -ms-linear-gradient(top, #c000ff, #3b1448);    background: -o-linear-gradient(top, #c000ff, #3b1448);    background-image: -ms-linear-gradient(top, #c000ff 0%, #3b1448 100%);    -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    box-shadow: rgba(000,000,000,0.3) 0 1px 1px;    font-family: 'Helvetica Neue',Helvetica, sans-serif;"><div style="    content: '';    position: absolute;    display: block;    bottom: -1em;    border: 1.5em solid #420684;    z-index: -1;    left: -2em;    border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;"> <div style=" content: ''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #420684; z-index: -2;right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;"> <div style="   margin-top: 2px; border-top: 3px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);"> <strong class="ribbon-content"> Forced Center <div style="margin-bottom: 2px; border-top: 3px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);">

<div style="width: 65px;   height: 14px;    text-align: center;    color: rgba(167, 167, 167, 0.18);    padding-bottom: 53px;    border-top: 2px dashed rgba(0, 0, 0, 0.2);    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);">Glass Box

<div style= width: 600px; height: 120px; display: table-cell; vertical-align: middle; text-align: center; font-size: 30px; font-weight: bold; font-family: cambria;"> <div style="  color: #69D2E7; outline: 10px dashed #E0E4CC; box-shadow: 0 0 0 10px #69D2E7;"> Hola! I am a fusion box!

<ul id="WikiaNotifications" class="WikiaNotifications"> <li> <div data-type="1" style="box-shadow: 20px 20px 20px black;   top: -48px;"> That module down there is by Ditto Creeper Bot ;D ~AH </li> </ul>

<div style="height:380px; width:504px; position:absolute; z-index:2147483647; padding:40px; border:40px solid #000000; background:rgba(0,0,0,0.7); box-shadow:inset 0px 0px 20px #000000, 0px 0px 20px #000000; color:#DDDDDD; text-shadow: 0px 0px 20px #000000;">

<p style="font-size:125%; margin-top:40px;">Welcome, <span class="insertusername" style="color:#FFFFFF !important; text-shadow:0px 0px 20px #FFFFFF;">user ! My name is Angry Hearts, I am years old and live in America. I am a coder, with over two years of experience in C#, Ruby, JavaScript, and HTML. I also have some level of ease with foreign language.

I am <span style="color:#FFFFFF !important; text-shadow:0px 0px 20px #FFFFFF;">here if you need help with anything or would just like to talk, but please keep in mind that my schedule is pretty packed most days, so it may take me an hour or more to get back to you.

undefined