Tokyo Ghoul 1

Tags: tokyo ghoul, simple, dark

Description:

First layout actually finished and publish. Thought that I would share my profile layout. If using please give me credit and the banner I have created myself using simple blending in Photoshop. Features Ken Kaneki from Tokyo Ghoul and I've not seen or watch. Please do not edit this code without permission from me and put the following code in the About Me section. DO NOT remove the top line please, thanks.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Dark Crimson (https://layouts.spacehey.com/layout?id=32214) -->

<!-- Layout created by Dark Crimson -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

body {
background: url(https://i.ibb.co/5MSBzsM/background2a.png) fixed;
text-align: justify;
}

.top {
height: 150px;
}

.search-wrapper input[type=text] {
background: #232323;
border: 1px solid #ee0908;
color: #ee0908;
}

button{
background: #232323;
border: 1px solid #ee0908;
color: #ee0908;
}

nav .links {
background: #eb685e url(https://i.ibb.co/8YF4bgr/nav.png);
padding-top: 5px;
font-size: 14px;
border-top: 1px solid #ee0908;
border-bottom: 1px solid #ee0908;
}

nav .links a {
color: #f6ecd4;
text-shadow: none;
}

nav .links a:hover {
text-decoration: none;
color: #ee0908;
}

nav .links .special a {
color: #f6ecd4;
}

nav .links .special a:hover {
color: #ee0908;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
content: " ✗ ";
color: #ee0908;
}

main {
background: #232323;
font-size: 18px;
font-family: 'Roboto Flex', sans-serif;
color: #efc66e;
}

main a {
color: #f7ead0;
font-weight: normal;
}

main a:hover {
text-decoration: none;
color: #ee0908;
}

main:before {
width: auto;
margin-bottom: 25px;
margin-top: -6px;
border-bottom: 1px solid #ee0908;
height: 354px;
display: block;
content: "";
background-image: url(https://i.ibb.co/kmmNZVh/banner.png);
background-position: center center;
background-size: cover;
border-radius: 0px 0px 0px 0px;
}

.container {
margin-top: 15px;
width: 90%;
max-width: 1000px;
border: 1px solid #ee0908;
background: #232323;
}

.w-40 h1 {
color: #ee0908;
font-family: 'Teko', sans-serif;
font-size: 34px;
font-weight: normal;
letter-spacing: 1px;
}

.profile {
margin-bottom: -23px;
margin-top: -23px;
}

.profile-pic img {
border: 1px solid #ee0908;
box-shadow: 0 0 6px #f7ead0;
}

.online { visibility: hidden; } .online img { content: url("https://i.ibb.co/vwBf4Sz/online.png"); animation-name: none; visibility: visible; height: 30px; width: 70px; color:#ca875c; }

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
border: 1px solid #ee0908;
}

.profile .contact .heading,
.profile .table-section .heading{
background: #ee0908;
color: #f7ead0;
text-transform: uppercase;
text-align: center;
font-family: 'Saira Condensed', sans-serif;
font-size: 22px;
font-weight: normal;
letter-spacing: 2px;
text-shadow: 0px 0px 4px #111;
border-bottom: 1px solid #ee0908;
}

.count {
color: #ee0908;
}

.profile .blurbs .heading,
.profile .friends .heading{
background: #ee0908;
color: #f7ead0;
text-transform: uppercase;
text-align: center;
font-family: 'Saira Condensed', sans-serif;
font-size: 22px;
font-weight: normal;
letter-spacing: 2px;
text-shadow: 0px 0px 4px #111;
border: 1px solid #ee0908;
padding-top: 4px;
}

.profile .friends .heading a{
color: #fff;
}

.profile .friends .heading a:hover{
color: #ee0908;
}

.contact img.icon { 
 display: none; 
}

.profile-info{
  border: 1px solid #ee0908;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin-bottom: 10px;
}

.contact .f-col>a::before{ 
content: " "; 
display: inline-block; 
width: 22px; 
height: 22px; 
content: " ✗ ";
background-size: 100% 100%;
} 

.details-table td:first-child {
background: #ee0908;
border: 1px solid #ee0908;
color: #f7ead0;
font-weight: normal;
}

.blurbs .inner .section:first-of-type h4{
font-size:0;
}

.blurbs .inner .section:first-of-type h4:after{
content:"About Me:";
font-size:18px;
margin-bottom: 10px;
color: #ee0908;
text-align: center;
font-weight: normal;
}

.blurbs .inner .section:last-of-type h4{
font-size:0;
font-weight: normal;
}

.blurbs .inner .section:last-of-type h4:after{
content:"Who I'd Like To Meet:";
font-size:18px;
margin-bottom: 10px;
color: #ee0908;
text-align: center;
}

.blog-preview {
background: transparent;
border: 1px solid #ee0908;
padding-left: 15px;
padding-right: 15px;
}

.blog-preview h4 {
background: #ee0908;
color: #f7ead0;
text-transform: uppercase;
text-align: center;
font-family: 'Saira Condensed', sans-serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0px 0px 4px #111;
border-bottom: 1px solid #ee0908;
margin: 0;
margin-left: -15px;
width: 577px;
height:37px;
padding-top: 6px;
}

.blog-preview h4 a {
text-decoration: none;
color: #f7ead0;
}

.blog-preview h4 a:hover {
text-decoration: none;
color: #ee0908;
}

.pfp-fallback {
border: 1px solid #ee0908;
box-shadow: 0 0 5px #f7ead0;
}

.pfp-fallback a {
color: #f7ead0;
}

.comments-table {
border: 1px solid #ee0908;
}

.comment-replies {
border: 1px solid #ee0908;
margin-bottom: 5px;
}

footer {
margin-bottom: 0px;
border-top: 1px solid #ee0908;
font-size: 14px;
background: #ee0908 url(https://i.ibb.co/cwgZ0KN/footer.png);
color: #f6ecd4;
}

footer a {
color: #efc66e;
}

footer a:hover{
text-decoration: none;
color: #ee0908;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: " ✗ ";
  color: #ee0908;
}

::-webkit-scrollbar-thumb:vertical { background:#ee0908;border: 3px solid #232323;}
::-webkit-scrollbar-thumb:horizontal { background:#ee0908;border: 3px solid #232323;}
::-webkit-scrollbar { background:#ee0908; border: 5px solid #232323; width: 11px; height: 7px;}

:root {
    --logo-blue: url(https://i.ibb.co/d65YFJB/top.png);
    --darker-blue: red;
    --lighter-blue: green;
    --even-lighter-blue: ;
    --lightest-blue:;
    --dark-orange: ;
    --light-orange: ;
    --even-lighter-orange: ;
    --green: teal;
}

</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.