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

Strawberry	1714695724 using w/ edited colors !! Report Comment
Sonia Nevermind	1712279497 Using!! Report Comment
. Crowven .	1707970349 using Report Comment
Mintyfreshtea	1707072312 using!! Report Comment
K0R1 !!!	1705364028 using ^^ Report Comment
cattokevo	1704597712 this looks sososo good, using!! Report Comment
◦○tcby○◦	1701980060 using x3 Report Comment
HuhanckaBleba228	1699280623 DEFINITELY USING THIS IS AWESOME Report Comment
possumsporch	1697491193 USING!!!!! Report Comment
Vex	1695512217 This looks so cool. Using ! Report Comment
The Aerie	1690141751 using!!! <3 Report Comment
rosebud_	1689453192 using!! ️ Report Comment
chris :3	1689302268 Using! :3 Report Comment
Xx_0l1ver95xX 🎤	1687995037 Using Report Comment
Rayyan	1687592283 using! (≧▽≦) Report Comment
‧͙⁺˚･༓☾ silly ☽༓･˚⁺‧͙	1687477134 Using : D!!! Report Comment
Nana :3	1686440991 Using :) Report Comment