ZENO Remake themed layout

Tags: zeno remake, game, light, red

Description:

a small ZENO layout i've made (not without help of other creators), please enjoy it!

update: the shadow around pfp is not there anymore, i thought it was ugly eek

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by moakuyo (#1 ranpo kinnie) ‧₊ ᵎᵎ 🍒 .˚✮ (https://layouts.spacehey.com/layout?id=98678) -->

(write your About me here)

<style>* {cursor:url(https://external-media.spacehey.net/media/sJmPQFc35ABHDWbCRnvD84irtBs7epdjaHKVUa6hhINc=/http://www.rw-designer.com/cursor-view/178545.png), auto !important;}
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');
body{font-family: "Slabo 27px", serif;}
</style>

<style>.online { visibility: hidden; } .online img { content: url("https://biscuit.crd.co/assets/images/gallery100/25922ac5.gif?v=ca0f6e9d"); animation-name: none; visibility: visible; height: 50px; width: 50px; }</style>


<style>

:root{
    --headers: #000000;
    --text: #000000; 
    --names: #000000;
    --links: #000000;
    --hover: #810000;
    --borders: 4px dotted #000000;
    --curve: 0px; 
}

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: #000000;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */
/* .details-table td:first-child{display:none;}  this code hides the general-heroes titles */


body{
    background-image: url("https://i.pinimg.com/564x/fe/80/05/fe8005f00f57faf99fae46830ab03e32.jpg");
    background-color: #000;
    background-size: contain;
    background-attachment: fixed;
    color: var(--text)!important;

}
.profile {
background-image:url(https://i.pinimg.com/564x/c7/56/6a/c7566a9492be00e218f175476b368629.jpg);
  background-repeat: repeat;
    background-size: 20%;
}

main:before {
 width: 100%;
 height: 250px;
 display: block;
 content: "";
 background-image: url(https://img.itch.zone/aW1nLzEzMjE3ODkxLnBuZw==/original/em%2BFKO.png);
background-position: center; 
background-size: 100%;
margin: 5px
left: 10px;
}


h1{
    font-family:  "PenetrationOutGrunge-JvyM"; 
    font-size:30px !important;
    font-weight: bold;
    text-align: center;
    background-color: #810000b0;
    border: var(--borders);
}


nav{
    background-color: #8100005c;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: var(--text);
    text-shadow:none;
}
nav .links{
    color: var(--text);
    background-color: transparent;
    border-radius: var(--curve);
    text-align: center;
}


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


nav img.logo{
    filter: brightness(0) saturate(0%) invert(8%) sepia(84%) saturate(0%) hue-rotate(358deg) brightness(0%) contrast(117%)!important;
}


.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}


.online{
    color: var(--links) !important;
    text-transform: lowercase;
    margin:auto;
} 

}



h2, h3, h4, h5{
    font-family: "PenetrationOutGrunge-JvyM";
    font-size: 20px;
    font-weight: normal;
}
a, p, b, nav label, .section{ 
    font-family: var(--font-family) !important; 
    font-size: 14px;
    font-weight: bold;
}


hr{
    height:1px;
    background: var(--links);
    border: none;
}


.blurbs, .friends, .profile .table, .blog-preview, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: #810000b0;
}

.general-about .details{
    border-radius: var(--curve) !important;

border: var(--borders) !important;
    background-color: #810000b0;
    padding:20px;
    text-align: right;
}
.mood{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: #810000b0;
    text-align: center;
    padding:5px;
}
.icon{border:none !important;}
.comment-replies{border:2px dotted #630000;}
.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/


td{
    background-color: transparent!important;
}


main{
    background: #810000b0;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}


.table-section{
    background-color:#810000b0;
    border:var(--borders)!important;
    background-color: #810000b0;
}
.details-table{
    border-spacing:0px 10px;
}
.details-table td{
    border-top:1px solid darkred;
    padding:5px;
}


.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}



.profile-info {
    border: 2px solid #000000;
    background-image: url(https://i.pinimg.com/564x/2b/11/56/2b1156e3cde3b589788bf63d9bf15672.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 15px;
    margin-bottom: 15px;
    background-size: 100%;
    border-radius: var(--curve) !important;
}

}
}

.friends-grid{
    text-align: center;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: brightness(70%);
}

.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.friends, .mood, .general-about .details{margin-bottom: 20px;}



.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: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
 /* add to favorites */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
 /* Send Message */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
 /* forward to friend */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
 /* instant message */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
 /* block user */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
 /* add to group */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
 /* report user */
 content: url(https://watermelon.crd.co/assets/images/gallery05/267c3a89.gif?v=2a41aca3)
} 


.url-info {
    border: 0px !important;
    background-image: url(https://external-media.spacehey.net/media/sbPhBwqZ0dmZXgyCjwwPWnueu0cFXeYeW_-0BAJ0wPEc=/https://gifcity.carrd.co/assets/images/gallery39/57111abe.gif?v=4b72c168);
    background-position: 23% 0;
    background-size: cover;
    margin: 1px auto !important;
    font-size: 0px;
    height: 60px
}
.url-info p{
    opacity: 0.0;
}


.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 2px solid #630000;
    padding:10px;
    border-radius: 0px;
}

footer{
    background-color: #8100005c;
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}

<style>


::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid #630000;
}
::-webkit-scrollbar-thumb {
    background: #630000; 
    border-radius: var(--curve);
}
.general-about .profile-pic {
    display: block;
    float: left;
    height: 170px;
    box-shadow: 0px 0px 0px #ff0707;
    border: #831919 double 5px;
}
<style>
.contact {

  border-radius: 25px;
  background-image: url();
background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
line-height: 8px;
color: #000;
background-size: 50%;

}
.profile-pic {
 border-radius: 00px;
        overflow: hidden;
        border:1px dashed grey;
}

</style>

<style>

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;

</style>




<style>


/*CHANGE INTEREST BOX HERE*/



table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "Games";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Anime";
  --topic5: "Books";
  --topic6: "Manga";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color: #000000 !important;
letter-spacing:normal !important;
text-shadow: 0px 0px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

</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 13 of 13 comments ( View all | Add Comment )

kremka ᶻ 𝗓 ˙	1719763864 using Report Comment
kremka ᶻ 𝗓 ˙	1719763863 using Report Comment
Ventus	1718881856 using Report Comment
Max!! :3	1718762894 Using! Report Comment
овсянка!!	1714844628 использование Report Comment
hi!! hey!! :3 i!!!NsKm√3	1714406319 usingg Report Comment
Verbatim	1711380457 using !! Report Comment
✶ Nocturne / Diggory	1711066405 using!!! ^_^ Report Comment
𖦹 ꒰ Hιrᥲᥒ᥆ ⏜ 🩸 ✧ ♰	1710627370 USING!! Report Comment
𐙚┆₊⊹ ៸៸ 🩸 ver 𓈒 ⑅	1708975809 USINGG Report Comment
making a new account ...	1708562268 USING USONG SING Report Comment
URUS3I	1708286333 usando!!! GRACIAS AMO ZENOREMAKE Report Comment
nico xp	1707820384 using!!!! tysmm ^_^ Report Comment