Welcome to Fairy Tail RPG, where your visions come true through your words. You control the destiny of your character. Do you have what it takes to bring the world to order or chaos?

You are not connected. Please login or register

Hatsuharu's HTML Tests ♫

View previous topic View next topic Go down  Message [Page 1 of 1]

#1Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Wed Feb 14, 2018 2:53 am

Hatsuharu
I'll be putting up templates I make here. Use it, alter it, rip it apart and experiment. Do whatever you want with it; idc.



Last edited by Hatsuharu on Tue May 22, 2018 9:20 am; edited 16 times in total



#2Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Thu Feb 22, 2018 9:16 pm

Hatsuharu
EQUIPMENT




Headgear
Headgear
HEADGEAR

Armor
Armor
ARMOR

Weapon
Weapon
WEAPON

Off-Hand
Off-Hand
OFF-HAND

Relic
Relic
RELIC

Companion
Companion
COMPANION



Last edited by Hatsuharu on Fri Feb 23, 2018 2:50 pm; edited 1 time in total



#3Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Fri Feb 23, 2018 12:23 pm

Hatsuharu
MAGIC



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a lobortis felis. Aenean dignissim massa porta magna ullamcorper, pretium imperdiet libero malesuada. Fusce ornare arcu eget finibus rutrum. Sed id orci finibus, congue justo sed, maximus mauris. Sed dapibus eros ut nibh auctor luctus. Donec nec feugiat lacus. Nunc et tincidunt lacus, vitae porttitor leo. Nulla maximus dictum ex quis venenatis. Integer eleifend nunc et erat convallis porta. Etiam lobortis, magna viverra bibendum scelerisque, mi dolor bibendum mauris, eu aliquet metus enim ut dolor. Aliquam eu gravida tortor. Maecenas id magna suscipit augue facilisis aliquam ac id justo.

Spells
D-RankC-RankB-RankA-RankS-Rank


D-Rank Spells
Spell 1 | Spell 2 | Spell 3 | Spell 4 | Spell 5
Spell 1 Description
Spell 2 Description
Spell 3 Description
Spell 4 Description
Spell 5 Description

C-Rank Spells
Spell 1 | Spell 2 | Spell 3 | Spell 4 | Spell 5
Spell 1 Description
Spell 2 Description
Spell 3 Description
Spell 4 Description
Spell 5 Description

B-Rank Spells
Spell 1 | Spell 2 | Spell 3 | Spell 4 | Spell 5
Spell 1 Description
Spell 2 Description
Spell 3 Description
Spell 4 Description
Spell 5 Description

A-Rank Spells
Spell 1 | Spell 2 | Spell 3 | Spell 4 | Spell 5
Spell 1 Description
Spell 2 Description
Spell 3 Description
Spell 4 Description
Spell 5 Description

S-Rank Spells
Spell 1 | Spell 2 | Spell 3 | Spell 4
Spell 1 Description
Spell 2 Description
Spell 3 Description
Spell 4 Description



#4Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Thu Mar 08, 2018 1:54 pm

Hatsuharu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tempus odio. Ut pretium varius purus, at molestie nisi gravida in. Vivamus in egestas mauris. Aliquam erat volutpat. Vestibulum at cursus erat, at elementum erat. Morbi mattis felis eu varius viverra. Mauris bibendum eleifend malesuada. Fusce sit amet nulla odio. Vivamus sapien leo, fermentum eget vulputate a, pharetra at metus. Duis ornare eu lacus a sollicitudin. Nam eu enim maximus, egestas nunc sed, eleifend neque. Ut eu gravida libero. Sed pretium consectetur urna a tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tempus odio. Ut pretium varius purus, at molestie nisi gravida in. Vivamus in egestas mauris. Aliquam erat volutpat. Vestibulum at cursus erat, at elementum erat. Morbi mattis felis eu varius viverra. Mauris bibendum eleifend malesuada. Fusce sit amet nulla odio. Vivamus sapien leo, fermentum eget vulputate a, pharetra at metus. Duis ornare eu lacus a sollicitudin. Nam eu enim maximus, egestas nunc sed, eleifend neque. Ut eu gravida libero. Sed pretium consectetur urna a tempor.



#5Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Fri Mar 09, 2018 1:55 pm

Hatsuharu



Last edited by Hatsuharu on Mon Oct 15, 2018 1:27 pm; edited 9 times in total



#6Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Tue Apr 03, 2018 8:24 pm

Hatsuharu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit lectus sit amet tristique molestie. Morbi eleifend blandit massa, ut rhoncus nisi bibendum sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tempor libero leo, eu fermentum sapien luctus ac. Cras hendrerit hendrerit urna, sed elementum justo porttitor vitae. Praesent vel malesuada nunc. Maecenas vitae luctus elit. Mauris eros enim, consectetur quis nunc ut, sagittis molestie massa. Aliquam consectetur mauris et elit viverra, finibus pretium justo hendrerit.

Nulla et ornare lacus, vel dictum dui. Ut maximus mauris nec elementum lobortis. Maecenas condimentum fringilla quam, vitae viverra augue tempor ut. Nullam sodales vel metus et dapibus. Phasellus a pulvinar mauris. Sed ultricies pretium euismod. Vivamus quis lectus ut ligula faucibus lacinia sit amet nec leo. Sed ante neque, efficitur at dui in, elementum efficitur risus. Morbi lobortis felis sed arcu volutpat mollis. Proin faucibus volutpat erat. Integer eleifend erat tristique sollicitudin vehicula. Maecenas ut nulla vel leo tincidunt interdum at in nisl. Curabitur elementum enim orci, at pulvinar mi bibendum nec. Pellentesque vel bibendum tellus. Mauris eu magna sagittis, convallis sem sit amet, vehicula mi. Donec condimentum nunc vel diam bibendum convallis.

WC: ???



#7Hatsuharu 

Hatsuharu's HTML Tests ♫ Empty Mon May 21, 2018 6:01 am

Hatsuharu

Lorem ipsum dolor sit amet
Consectetur adipiscing elit


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis orci neque, blandit eget magna at, cursus consequat nisl. Aenean eget lobortis est. Etiam vitae bibendum leo. Phasellus fringilla pulvinar semper. Proin suscipit, turpis ut accumsan tempor, sapien risus varius metus, at dapibus urna augue non diam. Nunc et vehicula elit. Nullam in auctor arcu. Pellentesque congue, mauris id vehicula imperdiet, libero est efficitur libero, vel maximus magna dui vel est. Fusce sodales rhoncus ex ac placerat. Integer scelerisque lectus vel libero finibus, vel accumsan turpis gravida. Curabitur gravida metus at ipsum posuere, in luctus est molestie. Praesent ac odio lectus. Integer eu laoreet ante. Pellentesque a porttitor odio.

Proin ac semper magna. Mauris ut nibh in risus sollicitudin interdum non sit amet odio. Etiam condimentum varius sagittis. Proin eget nisl neque. Morbi odio sem, pretium ut sagittis nec, fermentum vehicula quam. Nam dui nunc, volutpat eget lacinia vitae, lacinia ac enim. Fusce aliquam erat vitae vestibulum pretium. Donec ullamcorper est ac massa finibus, at gravida massa consectetur. Aliquam sollicitudin mauris in mi suscipit pellentesque. Sed ut dignissim leo. Nulla finibus gravida magna at finibus. Duis vitae lorem sit amet quam pellentesque feugiat. Donec non neque eu massa malesuada semper sed ac enim. Sed tincidunt nisi mollis pharetra mollis. Nam bibendum purus non nisi aliquam, et bibendum tortor fringilla. Fusce feugiat nisl dolor, at facilisis velit tempus eu.

Nam turpis ligula, tempus in justo id, consectetur maximus elit. Aliquam erat volutpat. Aliquam sed massa a augue faucibus sollicitudin. Aliquam at odio ornare, tincidunt lorem id, feugiat est. Duis eu orci sit amet justo tempor condimentum vel vitae elit. Maecenas in lacus eu nisi malesuada porta. Vestibulum feugiat mollis nisl, a placerat metus aliquam quis. Etiam varius ante a enim pulvinar, id aliquet magna lobortis. Mauris hendrerit sed neque ac feugiat. Aenean convallis fringilla massa, a volutpat dui semper quis. Phasellus scelerisque venenatis consectetur. Quisque aliquet arcu nec nibh ultricies, vel congue ligula porta. Vivamus vel mollis eros. Suspendisse ac libero velit. Vestibulum vitae semper lorem. Vestibulum ut justo eu lacus venenatis imperdiet.

The Numbers:




Code:
<div class="haru-wings"><div class="haru-wing-left"></div><div class="haru-wing-right"></div><div class="haru-wing-hover"><span class="haru-hover-quote">
Lorem ipsum dolor sit amet
Consectetur adipiscing elit</span>

<iframe width="20" height="20" src="https://www.youtube.com/embed/NpEaa2P7qZI?start=5&loop=1" frameborder="0" allow="autoplay; encrypted-media"></iframe></div></div><div class="haru-post-wrapper"><div class="haru-post-img"></div><div class="haru-post-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis orci neque, blandit eget magna at, cursus consequat nisl. Aenean eget lobortis est. Etiam vitae bibendum leo. Phasellus fringilla pulvinar semper. Proin suscipit, turpis ut accumsan tempor, sapien risus varius metus, at dapibus urna augue non diam. Nunc et vehicula elit. Nullam in auctor arcu. Pellentesque congue, mauris id vehicula imperdiet, libero est efficitur libero, vel maximus magna dui vel est. Fusce sodales rhoncus ex ac placerat. Integer scelerisque lectus vel libero finibus, vel accumsan turpis gravida. Curabitur gravida metus at ipsum posuere, in luctus est molestie. Praesent ac odio lectus. Integer eu laoreet ante. Pellentesque a porttitor odio.

Proin ac semper magna. Mauris ut nibh in risus sollicitudin interdum non sit amet odio. Etiam condimentum varius sagittis. Proin eget nisl neque. Morbi odio sem, pretium ut sagittis nec, fermentum vehicula quam. Nam dui nunc, volutpat eget lacinia vitae, lacinia ac enim. Fusce aliquam erat vitae vestibulum pretium. Donec ullamcorper est ac massa finibus, at gravida massa consectetur. Aliquam sollicitudin mauris in mi suscipit pellentesque. Sed ut dignissim leo. Nulla finibus gravida magna at finibus. Duis vitae lorem sit amet quam pellentesque feugiat. Donec non neque eu massa malesuada semper sed ac enim. Sed tincidunt nisi mollis pharetra mollis. Nam bibendum purus non nisi aliquam, et bibendum tortor fringilla. Fusce feugiat nisl dolor, at facilisis velit tempus eu.

Nam turpis ligula, tempus in justo id, consectetur maximus elit. Aliquam erat volutpat. Aliquam sed massa a augue faucibus sollicitudin. Aliquam at odio ornare, tincidunt lorem id, feugiat est. Duis eu orci sit amet justo tempor condimentum vel vitae elit. Maecenas in lacus eu nisi malesuada porta. Vestibulum feugiat mollis nisl, a placerat metus aliquam quis. Etiam varius ante a enim pulvinar, id aliquet magna lobortis. Mauris hendrerit sed neque ac feugiat. Aenean convallis fringilla massa, a volutpat dui semper quis. Phasellus scelerisque venenatis consectetur. Quisque aliquet arcu nec nibh ultricies, vel congue ligula porta. Vivamus vel mollis eros. Suspendisse ac libero velit. Vestibulum vitae semper lorem. Vestibulum ut justo eu lacus venenatis imperdiet.

[spoiler="The Numbers"][/spoiler]</div></div>

<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Cinzel');@import url('https://fonts.googleapis.com/css?family=Muli');.haru-wing-hover { clear:both;background:#161616;border-radius:5px 5px 0 0;width:370px;height:145px;margin:auto;padding:15px;text-align:center;opacity:0;position:relative;z-index:2;transition:opacity 1s;transition-delay:0.1s; }.haru-hover-quote { font-size:1.4em;font-family:'Cinzel',Arial;line-height:1.3em;color:#bb0a1e;text-shadow:0px 0px 15px #bb0a1e;font-weight:bold; }.haru-wings:hover .haru-wing-hover { opacity:0.9; }.haru-wing-left { float:left;width:50%;height:200px;background-image:url('https://i.postimg.cc/SRxZchhB/Vamp-Wings-Mirror.png');opacity:0;background-repeat:no-repeat;background-position:center center;position:relative;z-index:3;margin-bottom:-200px;transition: transform 1s, opacity 1s;transition-delay:0.1s; }.haru-wing-right { float:right;width:50%;height:200px;background-image:url('https://i.postimg.cc/Y93n4SJN/Vamp-Wings.png');opacity:0;background-repeat:no-repeat;background-position:center center;position:relative;z-index:3;margin-bottom:-200px;transition: transform 1s, opacity 1s;transition-delay:0.1s; }.haru-wings:hover .haru-wing-left { transform:rotate(-20deg) translate(-30px,20px);opacity:1; }.haru-wings:hover .haru-wing-right { transform:rotate(20deg) translate(30px,20px);opacity:1; }.haru-post-wrapper { width:400px;background:#161616;box-shadow: 0px 0px 15px #bb0a1e;border-radius:5px;margin:-175px auto auto auto;position:relative;z-index:1; }.haru-post-img { width:400px;height:175px;background-image:url('https://i.postimg.cc/sxbp1dD9/Hatsu.jpg');border-radius: 5px 5px 0 0; }.haru-post-text { font-family:'Muli';line-height:150%;padding:25px;color:#e5e4e2; }.haru-dialogue { color:#bb0a1e;text-shadow:0px 0px 9px #bb0a1e; }.haru-post-wrapper .codebox { border: none; }.haru-post-wrapper .codebox dt { border-bottom: 1px solid #bb0a1e; }</style>



View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum