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

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.

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

rayfinnedfishes

1717485947

using!!! :0 I wanted to say the top spacehey logo does get cut off at the corners a little bit, in case you were unaware n would like to fix it!!

Report Comment

it seems to be an issue with the round borders, I think it also applies to the logo for some reason ? I wish I could be of more help but I Literally have no idea how anything related to coding works I'm just throwing stuff in there and hoping
thank you so much for this layout also !!! sorry I didn't say much about that in the first comment I was rushed and forgot to proofread but oh my gosh it is beautiful !!! this is my favorite wof book cover of all time and seeing it show up when I looked absolutely made my year hooray for sea creatures

by rayfinnedfishes; 1717542776; Report

Melian :3

1713598020

its been 11 months and you still haven’t added the picture

Report Comment

there was a picture, seems to not be there anymore. i'll fix it

by linkzac; 1717082211; Report

Melian :3

1713598020

its been 11 months and you still haven’t added the picture

Report Comment