Wings of Fire: The Lost Heir layout

Tags: wings of fire, wof, the lost heir, blue, teal, cyan

Description:

hi this is a layout based on the cover of book two of wings of fire :3 I might do some more after this.

if there's any issues, let me know! this is my first layout after all!

the code I got for changing the contact icons was from here: https://blog.spacehey.com/entry?id=7464

I will add a screenshot later :3

Code:

<!-- (c) Layout created by linkzac (https://layouts.spacehey.com/layout?id=29952) --> <style> /*colors*/ :root { --logo-blue: rgb(0, 187, 255); --darker-blue: rgb(0, 255, 209); --lighter-blue: #00bbff; --even-lighter-blue: rgba(255, 255, 255, 0.49); --lightest-blue: rgba(255, 255, 255, 0.15); --light-orange: rgba(0, 108, 255, 0.5); --dark-orange: rgba(35, 0, 255); --even-lighter-orange: rgba(35, 0, 255); --turquoise: rgba(35, 0, 255); } /*background*/ body { background-color: rgb(17, 174, 218); background-image: url("https://static.wikia.nocookie.net/wingsoffire/images/7/7a/Wings_of_Fire_2_Full.jpg?format=original"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } /*background of the main profile*/ main { background-color: rgba(0, 167, 173, 0.75); } /*top section of spacehey*/ nav .top { background-color: rgba(10, 120, 141, 0.5); } nav .links { background-color: rgba(18, 233, 209, 0.25); } /*footer*/ footer { background-color: rgba(18, 233, 209, 0.25); } /*text color*/ p, div, span, h4, a, .count { color: #ffffff; } /*friends list I had to mess w/ to look good*/ .profile .friends .person p, .profile .friends .person a { color: cyan; } /*contacting*/ .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* Add to Friends */ content: "🐙" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: "🦑" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "🐚" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward to Friend */ content: "🦞" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* Instant Message */ content: "🦐" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* Block User */ content: "🦈" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* Add to Group */ content: "🪸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: "🐡" } /*online*/ .online { color: white; font-size: 20px; } /*round icons*/ img { border-radius: 100px; } </style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.