yuff | Squares Profile Code

Character Name

Catchphrase

Character Name

Catchphrase

Character Name

Catchphrase

Character Name

Catchphrase

Code by Yuff

Select a Color:
Gray Blue Red Gold

A navigation profile for your journal!

Gray:	Blue:
<raw-code><div class="container" style="margin: auto; width: 500px; height: 405px;"> <!--IMAGE--> <div class="image" style="display: inline-block; float: left; background-image: url(IMAGE-URL-HERE); background-size: cover; width: 300px; height: 400px; border: solid rgb(54,59,56); border-radius: 5px;"> <div style="position: relative; top: 275px; background-color: rgba(62,57,53, 0.6); text-align: left; width: 300px;"> <span style="font-family: Georgia, serif; font-weight: bold; font-size: 22pt; color:rgb(248,248,248); padding-left: 4.5%;">Character Name</span> </div> <div style="position: relative; top: 280px; background-color: rgba(181,188,155, 0.7); text-align: right; width: 300px;"> <span style="font-family: Georgia, serif; font-size: 10pt; padding-right: 4.1%; color: rgb(62,57,53);">Catchphrase</span> </div> </div> <!--END IMAGE--> <!--NAVIGATION BAR--> <div class="navbar" style="display: inline-block; float: inherit; background-color: rgb(225,226,212); width: 185px; text-align: right; border: 1px solid rgb(54,59,56); border-radius: 5px; font-family: Georgia, serif; font-size: 13pt;"> <!--FIRST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(54,59,56); border-right: 9px solid rgb(54,59,56); border-top-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(62,57,53);">Link</a> </div> <!--END FIRST LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(54,59,56); border-right: 9px solid rgb(54,59,56);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(62,57,53);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(54,59,56); border-right: 9px solid rgb(54,59,56);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(62,57,53);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(54,59,56); border-right: 9px solid rgb(54,59,56);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(62,57,53);">Link</a> </div> <!--END LINK--> <!--LAST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(54,59,56); border-right: 9px solid rgb(54,59,56); border-bottom-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(62,57,53);">Link</a> </div> <!--END LAST LINK--> </div> <!--END NAVIGATION BAR--> </div> </raw-code> <div style="text-align: center; font-family: verdana; font-size: 90%; font-variant: small-caps;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>	<raw-code> <div class="container" style="margin: auto; width: 500px; height: 405px;"> <!--IMAGE--> <div class="image" style="display: inline-block; float: left; background-image: url(IMAGE-URL-HERE); background-size: cover; width: 300px; height: 400px; border: solid rgb(0,0,54); border-radius: 5px;"> <div style="position: relative; top: 275px; background-color: rgba(37, 39, 135, 0.6); text-align: left; width: 300px;"> <span style="font-family: Georgia, serif; font-weight: bold; font-size: 22pt; color:rgb(248,248,248); padding-left: 4.5%;">Character Name</span> </div> <div style="position: relative; top: 280px; background-color: rgba(143, 239, 255, 0.7); text-align: right; width: 300px;"> <span style="font-family: Georgia, serif; font-size: 10pt; padding-right: 4.1%; color: rgb(0,0,54);">Catchphrase</span> </div> </div> <!--END IMAGE--> <!--NAVIGATION BAR--> <div class="navbar" style="display: inline-block; float: inherit; background-color: rgb(54,114,162); width: 185px; text-align: right; border: 1px solid rgb(0,0,54); border-radius: 5px; font-family: Georgia, serif; font-size: 13pt;"> <!--FIRST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(0,0,54); border-right: 9px solid rgb(0,0,54); border-top-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(0,0,54);">Link</a> </div> <!--END FIRST LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(0,0,54); border-right: 9px solid rgb(0,0,54);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(0,0,54);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(0,0,54); border-right: 9px solid rgb(0,0,54);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(0,0,54);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(0,0,54); border-right: 9px solid rgb(0,0,54);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(0,0,54);">Link</a> </div> <!--END LINK--> <!--LAST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(0,0,54); border-right: 9px solid rgb(0,0,54); border-bottom-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(0,0,54);">Link</a> </div> <!--END LAST LINK--> </div> <!--END NAVIGATION BAR--> </div> </raw-code> <div style="text-align: center; font-family: verdana; font-size: 90%; font-variant: small-caps;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
Red:	Gold:
<raw-code> <div class="container" style="margin: auto; width: 500px; height: 405px;"> <!--IMAGE--> <div class="image" style="display: inline-block; float: left; background-image: url(IMAGE-URL-HERE); background-size: cover; width: 300px; height: 400px; border: solid rgb(55,0,3); border-radius: 5px;"> <div style="position: relative; top: 275px; background-color: rgba( 92, 9, 11, 0.6); text-align: left; width: 300px;"> <span style="font-family: Georgia, serif; font-weight: bold; font-size: 22pt; color:rgb(248,248,248); padding-left: 4.5%;">Character Name</span> </div> <div style="position: relative; top: 280px; background-color: rgba(213, 96, 98, 0.7); text-align: right; width: 300px;"> <span style="font-family: Georgia, serif; font-size: 10pt; padding-right: 4.1%; color: rgb(254, 251, 251);">Catchphrase</span> </div> </div> <!--END IMAGE--> <!--NAVIGATION BAR--> <div class="navbar" style="display: inline-block; float: inherit; background-color: rgb(249,43,34); width: 185px; text-align: right; border: 1px solid rgb(55,0,3); border-radius: 5px; font-family: Georgia, serif; font-size: 13pt;"> <!--FIRST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(55,0,3); border-right: 9px solid rgb(55,0,3); border-top-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END FIRST LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(55,0,3); border-right: 9px solid rgb(55,0,3);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(55,0,3); border-right: 9px solid rgb(55,0,3);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(55,0,3); border-right: 9px solid rgb(55,0,3);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LINK--> <!--LAST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(55,0,3); border-right: 9px solid rgb(55,0,3); border-bottom-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LAST LINK--> </div> <!--END NAVIGATION BAR--> </div> </raw-code> <div style="text-align: center; font-family: verdana; font-size: 90%; font-variant: small-caps;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>	<raw-code> <div class="container" style="margin: auto; width: 500px; height: 405px;"> <!--IMAGE--> <div class="image" style="display: inline-block; float: left; background-image: url(IMAGE-URL-HERE); background-size: cover; width: 300px; height: 400px; border: solid rgb(53,28,13); border-radius: 5px;"> <div style="position: relative; top: 275px; background-color: rgba(172,132,30, 0.6); text-align: left; width: 300px;"> <span style="font-family: Georgia, serif; font-weight: bold; font-size: 22pt; color:rgb(248,248,248); padding-left: 4.5%;">Character Name</span> </div> <div style="position: relative; top: 280px; background-color: rgba(246,189,44, 0.7); text-align: right; width: 300px;"> <span style="font-family: Georgia, serif; font-size: 10pt; padding-right: 4.1%; color: rgb(254, 251, 251);">Catchphrase</span> </div> </div> <!--END IMAGE--> <!--NAVIGATION BAR--> <div class="navbar" style="display: inline-block; float: inherit; background-color: rgb(246,189,44); width: 185px; text-align: right; border: 1px solid rgb(53,28,13); border-radius: 5px; font-family: Georgia, serif; font-size: 13pt;"> <!--FIRST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(53,28,13); border-right: 9px solid rgb(53,28,13); border-top-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END FIRST LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(53,28,13); border-right: 9px solid rgb(53,28,13);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LINK--> <!--LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(53,28,13); border-right: 9px solid rgb(53,28,13);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--LINK--> <!--END LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(53,28,13); border-right: 9px solid rgb(53,28,13);"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LINK--> <!--LAST LINK--> <div class="link" style="width: 180px; height: 50px; border: 1px solid rgb(53,28,13); border-right: 9px solid rgb(53,28,13); border-bottom-right-radius: 5px;"> <a href="URL-HERE" style="line-height: 50px; text-decoration: none; padding-right: 5%; color: rgb(55, 0, 3);">Link</a> </div> <!--END LAST LINK--> </div> <!--END NAVIGATION BAR--> </div> </raw-code> <div style="text-align: center; font-family: verdana; font-size: 90%; font-variant: small-caps;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>

Code Notes

Images for this code should be ideally at 300x400px, but it will resize itself on its own.

Extra navigation links can be added, the code accomadates up to SEVEN links before it starts to get work! Just make sure to paste the additional links between the first and last links, as those are the ones with the fancy curving code.

Feel free to edit the colors or any other parts of the code! Colors are in RGB(X,X,X) format.

The Sora artwork was made by MrLipSchutz on DA. I currently don't know who to credit for the Allen art, please let me know if you know!

Speaking of credit, please keep the credit line attached to the code! Thanks!

Squares Profile Code

no subject