Danganronpa 2 - e-Handbook

Tags: danganronpa, komaeda, gif, digital, anime, animation

Description:

Theme based off of the e-Handbook and main menu from Danganronpa 2. The gradient in the background is actually based off of the loading screen, and it's the only gradient in the code so you should be able to change those colors if you ctl+f for "linear-gradient". Delete the 'cursor' line from the CSS if you don't like the reticle. Unfortunately, my code was really messy, so I might clean it up SOMETIME but I'm not in the mood to yet. Also, if you have any suggestions on elements to add to the theme, tell me! I'd add more if I could think of things to add, but I'm at a loss. Also, if you'd like a music player for the theme, here's a youtube player themed after the game ui!

Preview:

click on the image for a larger preview

Code:

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

<style>
       @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&family=Darumadrop+One&display=swap');
</style>
<style>
        .grid-container {
            display: grid;
            width: 100%;
            grid-template-columns: 100px 100px 100px;
            image-rendering: crisp;
        }
</style>
<style>
    body {
        background-color: #277fd0;
        background-image: url("https://groonklie.com/spacehey-junk/dangan/dangan2-menubg-tall.PNG"), url("https://groonklie.com/spacehey-junk/dangan/midgrid.PNG"), linear-gradient(#f8c802, #8fc978, #0261f5);
        background-position-y: bottom, 0%, center;
        background-size: auto;
        background-repeat: repeat-x, repeat, no-repeat;
        background-attachment: fixed;
        animation: menupan 20s linear infinite;
        font-family: 'Noto Sans', Verdana, arial, sans-serif, helvetica;
        cursor: url(https://groonklie.com/spacehey-junk/dangan/dangan2-cursor.PNG) 16 18, auto;
    }
    @keyframes menupan {
        from{ background-position-x: 0px, 0, 0; }
        to{ background-position-x: 960px, 0, 0; }
    }
    main {
        background: #1230 url("https://groonklie.com/spacehey-junk/dangan/lilgrid.PNG") !important;
    }
    nav { color: black !important; }
    nav .links a, nav .links .special a, .logout-btn { color: black; text-shadow: none; }
    nav .links a:hover, .logout-btn a:hover { color: red; }
    nav .top { background: #ddd9b7; }
    .logo { filter: brightness(0%); }
    nav .links { background-color: #ffe400; }
    container { background-color: #DDD9B7 !important; }
    footer { background-image: url("https://groonklie.com/spacehey-junk/dangan/dangan2-chatbanner.PNG"); background-color: #0000;}
    p { color: white; }
    a {
        color: #62d8ef;
        transition: color .1s steps(2,end);
    }
    a:hover, .count { color: #f0f; }
    .table-section, .url-info, .contact, main, footer { border: solid #fff6 2px !important; }
    .profile { background: #333c !important; }
    .details-table {
        background-image: url("https://groonklie.com/spacehey-junk/dangan/lilgrid.PNG");
        background-color: #000; image-rendering: pixelated;
    }
    .details-table td {
        background: #fff3 !important;
        color: white;
        font-weight: 700;
        border: solid black 2px;
    }
    .online:before { content:url("https://64.media.tumblr.com/436e881a6b8377a50f562928ea7e8f6d/94c38bbf0380f0e0-f3/s75x75_c1/29c9fa2ec099ab0a629d9830edd5fcfbc4973460.png"); }
    @keyframes flicker { from { opacity:1; } to { opacity:0.6; } }
    .online { color: #33ff98; }
    .details-table p {
        text-shadow: -1px 1px 1px #0009;
    }
    .details-table em {
        font-style: normal;
        color: #fbe300;
    }
    .details-table td:first-child {
        writing-mode: vertical-lr;
        text-align: right;
        width: fit-content;
        padding: 16px;
    }
    .profile-pic img, .friends img {
        border: solid black 2px;
        background: #0006 url("https://groonklie.com/spacehey-junk/dangan/lilgrid.PNG");
    }
    .profile-info { border: 2px solid #fff3; background-color: #6663; }
    .heading, .details-table td:first-child {
        color: white !important;
        background: #93c !important;
        font-weight: 900;
    }
    .details-table td:first-child { text-align: right; }
    main, .section h4, .person p { color: yellow !important; }

.icon, .online img {
display: none;
}
.contact .inner a:before, .online:before{
image-rendering: pixelated;
animation: flicker 0.08s steps(2,end) infinite alternate;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/add-friend.GIF")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/add-favorite.GIF")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/message.GIF")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/
content: url("https://groonklie.com/spacehey-junk/dangan/icons/forward-friend.GIF")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/imessage.GIF")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/block.GIF")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/add-group.GIF")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://groonklie.com/spacehey-junk/dangan/icons/report.GIF")
}
.logo {
content: url("https://groonklie.com/spacehey-junk/dangan/logo.PNG");
width: auto !important;
margin: 0 0 0 0px !important;
height: 45px !important;
}
</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 20 of 50 comments ( View all | Add Comment )

୨ ᑲrᥱᥱ ୧	1741903705 using ! Report Comment
LeutnantLAJ	1741332972 Using this it's genuinely amazing tysm!! Report Comment
kazuichi	1740912593 using Report Comment
kazuichi	1740912592 using Report Comment
Rodrick xP	1738293337 using !! ty! Report Comment
hihi	1735963433 using Report Comment
Anton Tyanochkin	1734607421 using Report Comment
Eivann	1734297212 usingg!! Report Comment
Fallen Clover <3	1734020431 Using!! Report Comment
@ KOREKIYO SHINGUJI !!	1732522517 UDSING :3 Report Comment
Silly!	1730689962 Using! ^^ Report Comment
KANIK!!	1728589474 using!! Report Comment
Serlei	1727556111 Using! :3 Report Comment
Nanamiis	1727196863 using! Report Comment
✧𝐌𝐎𝐓𝐇𝐢𝐂✦	1726843320 Using! Report Comment
Lop	1724862768 Using! Report Comment
K4zTheCreator	1724682369 Using!, Report Comment