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

sweetangels!	1767808032 using! Report Comment
Evie_cat/ᐠ - ˕ -マ Ⳋ	1767755712 Using Report Comment
ᯓ★angelbite	1767574174 USING! :3 Report Comment
OLY☆〜（ゝ。∂）	1767211483 USING!! Report Comment
laurafernandesz6	1767080426 Using xD Report Comment
Alexx	1767049468 usandoooo Report Comment
RIN	1766658033 USING SO CUTEEEEEEEEEEEEEEEE Report Comment
⋮ ⌗ ┆haruri 𓏵 ( ˶°ㅁ°) !!	1766384807 using !!! Report Comment
natsuki !!	1766101200 Using !! Report Comment
(⸝⸝⸝ᵒ̴̶̷ᴗᵒ̴̶̷ꕤ)	1765785881 Using!:) Report Comment
magnolia!! ^_^	1765435477 using!! Report Comment
[ ♯ 𝔸𝕞𝕪 ʚɞ 🍮🎹⋆.˚]	1765125996 using!! Report Comment
HarryMason	1765047288 USING!! Report Comment
kαოí ˃ 𖥦 ˂	1764680985 using^^ Report Comment
Eliori Da Cow	1764477028 Using! It's cool Report Comment
monixx	1763564751 Using! Report Comment
𝗞. 𝗟𝗶𝘇𝘇𝗶𝗲 ☕	1763315939 ¡Usando! Report Comment
meowry	1763150966 using!! so cute tyy:3 Report Comment
magnolia!! ^_^	1762754606 using ^_^ Report Comment
Neula?! -_-	1762596224 Using! Report Comment