ryo asuka layout

Tags: devilman; simple

Description:

errrr idk i like devilman crybaby and thought id make a simple layout for ryo :). please leave a comment and credit me if using, thanksss. i was too lazy to add little notes explaining stuff so the code is probably super messy but feel free to message me if u have any questions

Preview:

click on the image for a larger preview

Code:

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

<style>

:root {
    --light-gray: #cfc1aa;
    --gray: #cfc1aa;
    --dark-gray: #1d1f1e;
    --darker-gray: #545454;
    --logo-blue: ;
    --darker-blue: #8b7b66;
    --lighter-blue: #7f6a48;
    --even-lighter-blue:  ;
    --lightest-blue:  ;
    --red: #FF0000;
    --dark-orange: #7f6a48;
    --light-orange: ;
    --even-lighter-orange: #cfc1aa;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}

* {cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur656.cur), auto !important;}

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://pa1.narvii.com/6713/b5836c3f333208a137cee69c5fd39c885335c508_hq.gif');
	background-size: cover;
	background-repeat: no-repeat;
        background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');

h1 {
   font-family: 'Playfair Display', serif;
}

h4, a, b {
   font-family: 'Amiri', serif;
}

.profile .blurbs .section p {
    color: black;
}

.online {
    content: url(https://supplies.ju.mp/assets/images/gallery15/034e3163_original.gif?v=7ed57ecd);
    filter: brightness(0) saturate(100%) invert(53%) sepia(9%) saturate(970%) hue-rotate(354deg) brightness(91%) contrast(83%);
}

.logo {
   filter: brightness(0) saturate(100%) invert(43%) sepia(17%) saturate(852%) hue-rotate(358deg) brightness(92%) contrast(89%);
}

.search-wrapper input[type=text] { /* search bar */
    background-color: rgba(0, 0, 0, 0.0) !important;
    border-color: white !important;
    color: white !important;
    border-radius: 1px !important;
    font-weight: bold;
}

button { /* search button */
    border-radius: 0px !important;
    border: 0px solid green!important;
    font-family: 'Amiri', serif;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #836953!important;
    font-size: 14px;
}

label {
   color: #7f6a48;
   font-family: 'Amiri', serif;
    font-size: 14px;
}

.right {
   color: #7f6a48;
}

.logout-btn, .logout-btn:hover, .logout-btn:active {
   color: #7f6a48;
   font-family: 'Amiri', serif;
}

.blurbs .heading{display: none !important;}
.url-info {display: none; }
.profile-pic img {
   box-shadow: 0px 0px 30px 0px rgba(207, 193, 170);
}

.profile-pic img, .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
   box-shadow: 0px 0px 30px 0px #e7d0a6;
}

.friends-grid {
    max-height: 134px;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    filter: brightness(0) saturate(100%) invert(93%) sepia(7%) saturate(830%) hue-rotate(351deg) brightness(86%) contrast(88%);
}

nav .links {
   text-align: center;
}

body {
    background: url(https://external-media.spacehey.net/media/sC5EpE5bNgkEKeoFAAtLGu0IaiIA_2Mw02rwTdnh55Gg=/https://media.discordapp.net/attachments/679014749580558384/975132999932866642/New_Project.jpg?width=1025&height=576) no-repeat fixed;
    background-color: #cfc1aa;
    background-position-x: center;
    background-size: cover;
}

main {
   background: rgba(255, 255, 255, 0.7);
}

.comment-replies {
    border: 2px solid #7f6a48;
    margin-top: 10px;
}

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

.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p:before { content:"games"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p:before { content:"shows"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p:before { content:"other"; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p { font-size:0; }
.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p:before { content:" "; font-size:.7rem; }

.table-section:nth-last-child(2) .details-table tr:nth-child(6){
   display:none;
}

.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: "🍂"
}

.profile .left .table-section:last-child {
    display:none;
}

.table-section:nth-last-child(2)  td:first-child p {
    color: var(--darker-blue);
    font-family: 'Amiri', serif;
}

footer {
    background-color: rgba(255, 255, 255, 0.7);
}
</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 1px;
    border: 1px black;
}

::-webkit-scrollbar-thumb {
    background: #8b7b66;
}

::-webkit-scrollbar-thumb:hover {
    background: #6a5844;
}

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

Matthew	1728670565 using !! Report Comment
Sleepy D4shie !!	1728132444 Might be using !! Report Comment
nikki :3	1724883485 Using Report Comment
JcAmane★	1721712397 using★ Report Comment
Lixie_X3	1711157483 Using Report Comment
jon / jovi	1700894370 using :3!! Report Comment
₊‧°𐐪 vinny 𐑂°‧₊	1683823151 might use it!! experimenting rn :) Report Comment
♱marygoore♱	1679701379 totally using ♡ Report Comment thank uu!! lemme know if you have any problem with it by cipher; 1679753103; Report
psycho	1672466610 using! Report Comment