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

Silly!	1730689962 Using! ^^ Report Comment
KANIK!!	1728589474 using!! Report Comment
Serlei	1727556111 Using! :3 Report Comment
Nanamiis	1727196863 using! Report Comment
★---★ SOKZ ★---★	1726843320 Using! Report Comment
niyah	1726437944 Using Report Comment
niyah	1726437943 Using Report Comment
niyah	1726437942 Using Report Comment
Lop	1724862768 Using! Report Comment
K4zTheCreator	1724682369 Using!, Report Comment
Ruvy :D	1724531085 using!!! Report Comment
꒰🍂 hinata ｡ ꒱	1723947570 using Report Comment
𝙵𝚘𝚛𝚛𝚎𝚜𝚝(Purpled's version)	1723703241 USING!! Report Comment
Fryestan!🍨 (profile under construction!!)	1723507323 Using!! Report Comment
HiHIronya	1721919618 using))) Report Comment
moz🐾	1721092399 using! ^_^ Report Comment
N0nebraincells	1719011486 Using :) Report Comment
Sunny/Лена!!	1716873006 Using!! Report Comment
🕸️⋆ xcl ﾟ☂︎	1716520243 using‼️ Report Comment
x11njijik	1716254712 using! Report Comment