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

yejun	1752407813 using! Report Comment
Julia 🎼	1752257333 using Report Comment
Yao Wang	1751215542 using! Report Comment
MAKRELA!! :3	1751142350 USING Report Comment
Myakii	1750881118 using :p Report Comment
L1TANY_	1750556516 usimg ! Report Comment
MAGGOTROTTEN	1749965902 using! Report Comment
n e o	1749348639 usandoo Report Comment
Nerd ୨ৎ	1749191619 using Report Comment
L0NELY4L1FE</3	1748826199 using! :3 i luv itt!!1 Report Comment
Name Pending	1748702483 using :> Report Comment
Yuma_Юма☆: .｡. o(≧▽≦)o .｡.:☆	1748285177 using Report Comment
avey ꪆৎ	1748185643 using! Report Comment
⊹andyxx	1748043585 using Report Comment
L0VEGY4L!	1747128879 usinggg Report Comment
luka	1746948402 USING Report Comment
kori	1746665966 Using Report Comment
yona	1745876162 Usinggg Report Comment
STengineer	1745738647 I'm using this. Report Comment
Kaliqui	1745410440 Using !! Ty <33 (๑•̀ㅂ•́)و✧ Report Comment