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 318 comments ( View all | Add 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
Blue goose	1786071717 Ok Report Comment
salli0_Puppy	1785842139 usinggg Report Comment
𑣲𝑀𝑒𝒾𝓃𝒶𝓂𝒾ˎˊ˗	1785622121 using!! Tysm ;D Report Comment
Gilmix ☘	1785546852 Using Report Comment
vin (^w^) 🎼	1784918541 using ! Report Comment
૮꒰˶ ҂ ˕ -꒱ა .ᐟ 𑄝 diesel \| offline!!	1783617775 using !!! >_< Report Comment
CathyDessIbukiAqua	1783118481 using! Report Comment
s.erenez_ 🪷	1783031509 using !! Report Comment
Kat ☆	1782257693 using!!! Report Comment
Lenyle -_-	1782069534 using! Report Comment
ポニョ	1781778217 Using the polka dot background! Thanks so much, also, your layout is amazing! Report Comment
ポニョ	1781778204 Using the polka dot background! Thanks so much, also, your layout is amazing! Report Comment