Message [Page 1 of 1]
sunflower // html testing 08/11/17, 10:39 am
(400/400) (175/175)
Last edited by Ariel-chan on 22/11/17, 01:11 am; edited 1 time in total
Re: sunflower // html testing 08/11/17, 11:35 am (400/400) (175/175)i. the magoi/stam/wordcount is hoverable. that means you need to hover over the words to get the numbers and stuff.
ii. i put the things that can be edited (text-wise) in caps.
iii. the image is a 100x100 - it should resize. the current image url is 'https://i.imgur.com/m39Lr3Q.gif'. it doesn't need to be a gif but i used one anyway.
iv. this template will automatically color bolded text into red if you use <b></b> - using [b][/b] will cancel the effect for some reason.
v. whether you use <i></i> or [i][/i] it will always turn up red.
regis<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"><style>.heyitsokaytobemore {height: 140px;width: 280px;background-color: black;border-bottom: 17px solid #AE0000;box-sizing: border-box;font-family: 'Oswald', sans-serif;font-size: 30px;color: #aaa;text-transform: uppercase;padding-top: 11px;}.happywithagrin {height: 310px; max-height: 310px; width: 280px;overflow: auto;background-color: #1f1f1f;color: #aaa;font-family: 'Oswald', sans-serif;font-weight: 300;font-size: 13px;text-transform: uppercase;padding: 33px;box-sizing: border-box;text-align: justify;}.happywithagrin b { color: #AE0000; }.happywithagrin i { color: #AE0000; }.happywithagrin::-webkit-scrollbar-track { background-color: #440000; border: 0; }.happywithagrin::-webkit-scrollbar { width: 3px; background-color: #440000; }.happywithagrin::-webkit-scrollbar-thumb { background-color: #780000; border: 0px; }.stoicismandetcislovelyandall {width: 280px;height: 23px;background-color: black;box-sizing: border-box;color: #AE0000;font-family: 'Oswald', sans-serif;font-weight: 300;font-size: 8px;padding: 5px;text-transform: lowercase;}</style>
<div align="center"><div class="heyitsokaytobemore"><span style="color: #AE0000;">nero</span><img src="https://i.imgur.com/m39Lr3Q.gif;" style="border-radius: 50%; border: #AE0000 3px solid; width: 100px; height: 100px; max-width: 100px; max-height: 100px;">regis</div><div class="happywithagrin">HEY ITS OKAY TO BE MORE
HAPPY WITH A GRIN
STOICISM AND ETC IS LOVELY AND ALL
BUT SOMEDAY YOU'LL GET FROSTBITE
FROM ALL THAT COLDNESS
SLOWLY NUMBING YOUR FACE</div><div class="stoicismandetcislovelyandall"><div style="float: left;"><b>@TAG: SHORT NOTE</b></div><b><div style="float: right;"><span title="THIS IS THE PLACE WHERE YOU'LL WANT TO ACTUALLY PUT MAGOI AMMOUNTS">magoi</span> | <span title="THIS IS THE PLACE WHERE YOU'LL WANT TO ACTUALLY PUT WORDCOUNT AMMOUNTS">wordcount</span> | <span title="THIS IS THE PLACE WHERE YOU'LL WANT TO ACTUALLY PUT STAMINA AMMOUNTS">stamina</span></div></b></div><span title="made by breezes" style="font-size:8px; color: #AE0000;">❅</span></div>
Last edited by Ariel-chan on 28/12/17, 04:41 am; edited 5 times in total
Re: sunflower // html testing 08/11/17, 08:43 pm (400/400) (175/175)i. the images are 290x100 - i used gifs but you don't need to. the top image is 'https://i.imgur.com/59e5QRf.gif' and the bottom is 'https://i.imgur.com/tkNs4IH.gif'.
ii. this template will automatically color bolded text into purple if you use <b></b> - using [b][/b] will cancel the effect for some reason.
iii. whether you use <i></i> or [i][/i] it will always turn up purple.<style>.zuzumasrur { margin-bottom: 100px; }.talkloudly1 {border: 3px solid #3A0A51;box-sizing: border-box;background-image: url('https://i.imgur.com/59e5QRf.gif');background-position: center;background-repeat: no-repeat;width: 290px;height: 100px;}.talkloudly2 {border: 3px solid #3A0A51;box-sizing: border-box;background-image: url('https://i.imgur.com/tkNs4IH.gif');background-position: center;background-repeat: no-repeat;width: 290px;height: 100px;}.shoutinthestreets {height: 30px;width: 220px;background-color: #222222;border: 7px solid #3A0A51;border-bottom: 0px;border-top: 0px;box-sizing: border-box;color: #7a7a7a;font-family: sans-serif;margin-top: -30px;margin-bottom: 0px;font-size: 19px;padding: 10px;}.makeyourselfheard {width: 220px;background-color: #222222;color: #7a7a7a;padding: 13px;font-size: 12px;font-family: sans-serif;border: 7px solid #3A0A51;border-top: 0px;border-bottom: 0px;text-align: justify;box-sizing: border-box;}.makeyourselfheard b { color: #987CB9; }.makeyourselfheard i { color: #987CB9; }.makeyourselfheard::first-letter { color: #987CB9; font-weight: bold; }.amongthecrowd {height: 30px;width: 220px;background-color: #222222;border: 7px solid #3A0A51;border-top: 0px;border-bottom: 0px;box-sizing: border-box;color: #6D459B;font-family: sans-serif;font-size: 9px;margin-top: -100px;}</style><div align="center"><div class="zuzumasrur"><div class="talkloudly1"></div><div class="shoutinthestreets"><b><span style="color: #6D459B;">Z</span>UZU MANSUR</b></div><div class="makeyourselfheard">TALK <b>LOUDLY</b>
<b>SHOUT</b> IN THE STREETS
MAKE YOUR <i>SELF</i> HEARD
[b]AMONG[/b] THE [i]CROWD[/i]
RESIST AND [b]COMBAT[/b]
THE [i]MOVEMENT[/i] AND [b]TIDES[/b]</div><div class="talkloudly2"></div><div class="amongthecrowd"><b>mag/mag | word/word | stam/stam</b></div><span title="made by breezes" style="font-size:8px; color: #3A0A51;">❅</span></div></div> Re: sunflower // html testing 09/11/17, 01:36 pm (400/400) (175/175)i. the image should be 430 x 470 - in case you ever want to change it, the current image url is 'ttps://i.imgur.com/N5tMs52.png'.
ii. the first line will be colored orange. ([b][/b] won't work on the first line.)
iii. since i felt like regular bolded text wasn't bright enough, i increased the color brightness for any text within <b></b>. using [b][/b] will cancel the effect for some reason.
vi. whether you use <i></i> or [i][/i] it will always turn up purple.
v. notes can go on and on.<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i|Raleway" rel="stylesheet"><style>.loveshard {width: 430px;height: 470px;border: black 7px solid;}.loveshard:hover .butifyouthink {transition: all 1.4s ease-out;opacity: 1;}.yesweknow {width: 430px;height: 470px;box-sizing: border-box;background-image: url('https://i.imgur.com/ZdH18rC.png');}.butifyouthink {transition: all 1s ease;width: 430px;height: 470px;box-sizing: border-box;background-color: #202020;color: #595959;text-align: justify;margin-top: -470px;opacity: 0;}.delusionallythat {font-family: 'Playfair Display', serif;font-size: 66px;margin-top: 0px;text-align: center;}.givesyoutherightto {padding: 25px 0px;margin-top: 0px;background-color: black;height: 64px;font-size: 13px;font-family: 'Playfair Display', serif;box-sizing: border-box;text-align: center;}.closeyourheart {box-sizing: border-box;padding: 30px;height: 362px;max-height: 362px;overflow: auto;font-family: 'Raleway', sans-serif;font-size: 13px;}.closeyourheart:first-line { color: #615CAD; font-weight: bold; }.closeyourheart b { color: #6a6a6a; }.closeyourheart i { color: #615CAD; }.closeyourheart::-webkit-scrollbar-track { background-color: #202020; border: 0px; }.closeyourheart::-webkit-scrollbar { width: 4px; background-color: #202020; }.closeyourheart::-webkit-scrollbar-thumb { background-color: #151515; border: 0px; }</style><div align="center"><div class="loveshard"><div class="yesweknow"></div><div class="butifyouthink"><div class="delusionallythat"><br><span style="color: #444444;">K</span>allias <span style="color: #444444">A</span>lthaus</div><div class="givesyoutherightto">###/### magoi<span style="color: black">XX</span>###/### words<span style="color: black">XX</span>###/### stamina</div><div class="closeyourheart">
love's hard -
yes we know
but if <i>you</i> <b>think</b>
<i>delusionally</i> that
gives [i]you[/i] the right to
close your [b]heart[/b]
[b]soul[/b] and <b>mind</b>
from the [i]advances[/i] of <i>others</i>
<i>depriven</i> of <b>love</b>
you're a [b]fool[/b]
a <b>delusional</b> [i]deprived[/i] fool
<div style="padding: 40px; background-color: #151515;"><b>notes:</b> basically my attempt to fix the fact that i forgot to put a notes section >.<</div></div></div></div><span title="made by breezes" style="font-size:8px; color: #615CAD;">❅</span></div> Re: sunflower // html testing 04/10/18, 06:57 pm (400/400) (175/175)combat n notes n stuff Re: sunflower // html testing 04/10/18, 11:06 pm (400/400) (175/175)i. the image is 270 x 420. if you ever want to change it, the current image url is https://images2.imgbox.com/95/d4/cJax3PcY_o.png
ii. if you want a regular ol bold, use [b][/b]. however, if you want it to be in the fancy font, use <b></b>.
iii. p-please be careful with the code. forumation is a tad wonky so it is prone to breaking if you try to change anything ^^;
iv. speaking of wonky, when you hover over it, don't move your cursor for about half a second. Message [Page 1 of 1]
Similar topics
Permissions in this forum:
You cannot reply to topics in this forum
| No user |
