Yona of the Dawn

Tags: anime, layout, red, purple, yona of the dawn

Description:

If you use this theme please comment below to let me know. Please don't remove any of the credits or copyrights inside the code, please remember to give credit if you use this. You may not use this one as a base, I will have more simple ones coming for that. This one is just really easy to break.

Scenery Background Image from IMDB

Main Banner from Hulu

Yona Banner from Heroes Wiki Fandom

Please Don't Remove Any Credits From This Layout! Thank You!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Coffee Queen (https://layouts.spacehey.com/layout?id=28198) -->

<style>
/*==========⚠️==========
* Yona of the Dawn belongs to its original owner. I claim no rights to it.
* Scenery Background Image from IMDB
* Main Banner from Hulu
* Yona Banner from Heroes Wiki Fandom
* Please Don't Remove Any Credits From This Layout! Thank You!
============⚠️========*/

@font-face {
font-family: "creation-regular"; src: url('https://dl.dropbox.com/s/ug0wz1u6si4dujx/creation.ttf');
}
@font-face {
font-family: "simplicity-Medium"; src: url('https://dl.dropbox.com/s/fdsdvlj2vhu6yvl/simplicity.ttf');
}

:root{
  --headers: #7367a1;
  --text: #595087;
  --names: #bd0f54;
  --links: #a696e0;
  --hover: #000000;
  --mynamesize: 35px;
  --background_image: url('https://i.imgur.com/TJ0xi94.jpg');
  --darker-blue: transparent;
  --lighter-blue: transparent;
  --even-lighter-blue: transparent;
  --lightest-blue: transparent!important;
}

h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/

a{color: var(--links) !important;} /* color of links */

p, h2{color: var(--text) !important;} /* color of text */

h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */

nav label{color: var(--headers) !important;} /* color of search */

.section h4{color: var(--names) !important;} /* aboutme & want2meet headings */

.online{color: var(--links) !important;} /* color of the 'online' text */

.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

.logo {
   filter: invert(17%) sepia(4%) saturate(6341%) hue-rotate(212deg) brightness(70%) contrast(86%);
}

.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img{
  border: 0px dotted gray !important;
  outline: none !important;
}

p{
  font-family: "simplicity-Medium";
  text-shadow: 0px 0px 0px black !important;
  font-size: 14px!important;
}

h1, h2, h3, h4, h5, a, a:visited, a:active, .section, nav label{
  font-family: "creation-regular";
  text-shadow: 0px 0px 0px black !important;
}

h1{
  font-size: var(--mynamesize) !important;
}

h2, h3, h4, h5, a, a:visited, a:active, nav label, .section{
  font-size: 14px!important;
}

a:hover{
  cursor: url('https://cur.cursors-4u.net/nature/nat-9/nat842.png'), auto;
}

nav .top, nav .links{
  background-image: linear-gradient(to bottom right, #4A001D, #BD0F54, #4A001D);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

nav .links a:hover {
  text-decoration: underline;
  text-decoration-style: wavy !important;
}

nav .links li::after{
display: none;
}

.count{
color: #120f82;
}

body{
  background-image: var(--background_image) !important;
  background-position: center;
  background-attachment: fixed;
  background-repeat: repeat;
}

main:before{
  width:auto;
  margin-bottom:10px;
  height: 250px;
  display:block;
  content: "";
  background-image: url('https://i.imgur.com/S5OesKd.jpg');
  background-position: center top;
  background-size: cover;
}

main{ 
  background: #ffefe8;
  opacity: .90;
}

.online{
  font-family: "creation-regular";
  font-size: 20px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s;
}

.online img{
  display: none;
}

.profile .profile-info{
  height: 215px;
  background-image: url('https://i.imgur.com/68Of8SI.png');
  background-position: center top;
  background-size: cover;
}

.general-about .profile-pic img{
  -webkit-mask-image: url(https://i.imgur.com/wwkS0on.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform:scale(1.025,1.025);
  position:relative;
  filter: sepia(100%) hue-rotate(250deg);
  top:-0.25em;
}

.profile .contact .heading,
.profile .table-section .heading{
  background-image: linear-gradient(to bottom right, #4A001D, #BD0F54, #4A001D);
  text-align: center;
  padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
  background-image: linear-gradient(to bottom right, #4A001D, #BD0F54, #4A001D);
  text-align: center;
  padding: .1em;
}

.profile .friends{
  text-align: center;
}

.profile .blurbs .section h4{
  padding: .1em;
}

.profile .comments-table td{
  background-color: transparent;
  border: 0px solid white!important;
}

.profile .comments-table .comment-replies{
  border: 0px solid white!important;
}

.comments-table img,
.person img{
  -webkit-mask-image: url(https://i.imgur.com/wwkS0on.png);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform:scale(1.025,1.025);
  position:relative;
  filter: sepia(100%) hue-rotate(250deg);
  top:-0.25em;
}

footer{
  background-image: linear-gradient(to bottom right, #4A001D, #BD0F54, #4A001D);
}
</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 0 of 0 comments ( View all | Add Comment )