Violet Evergarden

Tags: anime, layout, blue, white, simple

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.

Background image from WallpaperAccess.

Banner from Violet Evergarden anime, I took the screenshot.

Mini Banner from Violet Evergarden anime, I again took the screenshot.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*==========⚠️==========
* Violet Evergarden belongs to its original creator. I claim no rights.
* Background image from WallpaperAccess.
* Banner from Violet Evergarden anime, I took the screenshot.
* Mini Banner from Violet Evergarden anime, I again took the screenshot.
============⚠️========*/

@font-face {
font-family: "1942-monospace"; src: url('https://dl.dropbox.com/s/39glyzldic4r9bt/1942.ttf');
}
@font-face {
font-family: "NixieOne-regular"; src: url('https://dl.dropbox.com/s/4hzuvg6yiaeqzdf/NixieOne.ttf');
}

:root{
  --headers: #525f71;
  --text: #71645c;
  --names: #bbcad4;
  --links: #525f71;
  --hover: #000000;
  --mynamesize: 35px;
  --background_image: url('https://i.imgur.com/r4iCugb.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, .logout-btn:hover, .logout-btn:active{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(42%) sepia(94%) saturate(2423%) hue-rotate(165deg) brightness(100%) contrast(101%);
}

.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: "NixieOne-regular";
  text-shadow: 0px 0px 0px black !important;
  font-size: 12px!important;
}

h1, h2, h3, h4, h5, a, a:visited, a:active, .section, nav label{
  font-family: "1942-monospace";
  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: 12px!important;
}

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

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

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

.count{
color: #bbcad4;
}

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/6Kg05DD.png');
  background-position: center top;
  background-size: cover;
}

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

.online{
  font-family: "1942-monospace";
  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: 115px;
  background-image: url('https://i.imgur.com/OU2QqoQ.png');
  background-position: center top;
  background-size: 100%;
}

.general-about .profile-pic img{
  -webkit-mask-image: url(https://i.imgur.com/r4U3FDT.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(150deg);
  top:-0.25em;
}

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

.profile .blurbs .heading,
.profile .friends .heading{
  background-image: linear-gradient(to bottom right, #8ca2b2, #6787b6, #8ca2b2);
  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/r4U3FDT.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(150deg);
  top:-0.25em;
}

footer{
  background-image: linear-gradient(to bottom right, #8ca2b2, #6787b6, #8ca2b2);
}
</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 2 of 2 comments ( View all | Add Comment )

XxMoonxX

1683225299

using <3

Report Comment

c0rtniss

1681844844

Love this anime! Using :)

Report Comment