Layout Doki Doki Literature Club/DDLC Theme

Tags: kawaii, ddlc, pink, vista, gradient, doki doki literature club

Description:

This is my first layout I've ever created, so the coding is a bit of a mess and not exactly in order, But it's been okay since the time I've been using this ^_^

This layout was Inspired-ish by Window Vista!

regarding the huge codes for the link content source, there wasn't any cute gifs I can find besides in deviantart. And deviantart was the only choice, For the logo, I made it In Ibispaint X, spacehey did not support the logo img i uploaded from imgurr for some reason so I uploaded it from deviantart instead, I'm not sure why deviantart img source are so big.

no need to credit, I had a lot of fun making this (it took 3 days to make it)

also I feel like the logo clutters the whole layout, In my eyes I recommend you to remove it if you want. yes, the background moves!1!!1!

also if you want the little ddlc stickers on the bottom left,,,, get here!!!!!!!!!have fun :D

Preview:

click on the image for a larger preview

Code:

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

<style>
    a {
        color: #d14fba;
        text-decoration: none;
        background-color: transparent;
    }

    body {
        background-image: radial-gradient(#ffe6f3 24%, transparent 10%), radial-gradient(#ffe6f3 24%, transparent 10%);
        background-attachment: fixed;
        background-color: #ffffff;
        background-size: 40px 40px;
        background-position: 0 0, 60px 60px;
        animation-name: backgroundmovement;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        height: 200px;
        width: 100%;
        font-family: MS UI Gothic, sans-serif, Journal, helvetica;
    }

    @keyframes backgroundmovement {
        0% {
            background-position: 0px 0px, 60px 60px;
        }
        100% {
            background-position: 60px 60px, 120px 120px;
        }
    }

    .container {
        width: 810px;
        max-width: 100%;
        margin: 0 auto 10px;
    }

    main {
        margin-top: 7px;
        background: white;
        border-radius: 4px;
        box-shadow: 0 0 2px #da9dc3;
        color: black;
        padding: 6px 0px;
        font-size: 80%;
    }

    nav .top {
        background-image: linear-gradient(to bottom, #ffbee1 25%, #ff94d4, #ffd8ee);
        border-radius: 5px 5px 0px 0px;
        border: #ff93e0 1px solid;
        border-bottom: none;
        box-shadow: inset 0 0 6px;
        padding: 15px 10px 14px 10px;
    }

    nav .links {
        background-color: #ffbaeb;
        background-image: linear-gradient(to bottom, #fff7fb, #ffe1f2 17%);
        border: 1px solid #ffbaeb;
        border-radius: 0px 0px 3px 3px;
    }

    nav .links a {
        color: white;
        text-shadow: 0 0 2px #00cf19;
    }

    nav .links a:hover {
        text-decoration: underline;
        color: #ffffff;
    }

    nav .links .icon {
        content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dakfoy7-216e4b0d-5a14-4bcd-958d-bdac8cbb8c23.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGFrZm95Ny0yMTZlNGIwZC01YTE0LTRiY2QtOTU4ZC1iZGFjOGNiYjhjMjMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.yHwJCxy3mFTIG9IZ4O9T0TLtxci89wTZXJ70G2-IDu0");
        width: 14px;
        height: 14px;
    }
/* remove the logo from here btw */
    .logo {
        content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f1313323-9429-4e78-869b-34fedcd15dc0/dg1cjdc-d2bae46b-6051-47ba-b846-35f61021055b.png/v1/fill/w_1280,h_326/ddlc_spacehey_by_marrkkmaarshaall_dg1cjdc-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MzI2IiwicGF0aCI6IlwvZlwvZjEzMTMzMjMtOTQyOS00ZTc4LTg2OWItMzRmZWRjZDE1ZGMwXC9kZzFjamRjLWQyYmFlNDZiLTYwNTEtNDdiYS1iODQ2LTM1ZjYxMDIxMDU1Yi5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.0k0Qv76u3fdevwjjwjA8fGXXKRudrMZYqm2cP3wwZ3o");
    }
/* to here */

    nav .top .left .logo {
        width: 180px;
        height: 42px;
    }

    nav .top .left img {
        margin: 0 0 0 0px;
    }

    .profile .contact .heading,
    .profile .table-section .heading,
    .setting-section .heading,
    .home-actions .heading {
        background-image: linear-gradient(to bottom, #ffbee1 25%, #ff94d4, #ffd8ee);
        border: #ff93e0 1px solid;
        border-radius: 2px 2px 0 0;
        box-shadow: inset 0 0 3px;
        color: white;
    }

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .setting-section,
    .home-actions {
        width: 100%;
        box-shadow: 0 0 2px #cbcbcb;
        border: 1.8px solid transparent;
        border-radius: 2px;
    }

    .profile-info {
        background: #ffe6f3;
        border: 2px solid #ffbee1;
    }

    .profile .blurbs .heading,
    .profile .friends .heading {
        background: #ffe6f3;
        border: 2px solid #ffbee1;
        color: #000000;
    }

    .profile .blurbs .section h4 {
        margin: 0;
        color: #a20093;
    }

    .details-table td:first-child {
        background: #bfdbfe00;
        background: linear-gradient(#ffdef0, white 20px);
        box-shadow: #ffffffab 0px 1px 2px 2px inset;
        color: #010101;
        font-weight: bold;
        width: 30%;
    }

    .details-table td {
        background: #dbeafe00;
        vertical-align: top;
    }
</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 325 comments ( View all | Add Comment )

bwii	1791171264 usingggg Report Comment
Menhera Neko	1789943865 using !! <3 Report Comment
mikhamikh	1789920031 usingg! Report Comment
mikhamikh	1789920031 usingg! Report Comment
𝔯𝔬𝔱 ♫	1789768510 using! Report Comment
Jesu ʚ♡ɞ	1789698676 using!!! Report Comment
no	1789660648 using! Report Comment
𝐷𝑢𝑟𝑢	1788595773 usingg Report Comment
ollie	1788245404 using : )) Report Comment
Moi	1787243836 using :-) Report Comment
Moi	1787243836 using :-) Report Comment
Hino	1786861126 using Report Comment
˚₊‧꒰ა ☆sayori☆ ໒꒱ ‧₊˚	1786803416 using! Report Comment
Missy	1786571943 using Report Comment
Nico	1786467194 Using Report Comment
Sammybean	1786450452 Using Report Comment
Euuuhh blaziken	1786071717 Ok Report Comment
salli0_Puppy	1785842139 usinggg Report Comment
𑣲𝑀𝑒𝒾𝓃𝒶𝓂𝒾ˎˊ˗	1785622121 using!! Tysm ;D Report Comment
Gilmix 🍀	1785546852 Using Report Comment