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 nya (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 210 comments ( View all | Add 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
gaby	1745353603 using itt! ty Report Comment
✮aria✮	1745314340 usingg :3 Report Comment
Angelz!~ 🦴	1744819792 usingggg Report Comment
mars,,, 💢	1744444117 using Report Comment
mars,,, 💢	1744444117 using Report Comment
juni ☼｡˚❀	1744351260 using :3 Report Comment
h4z3l_⟡₊ ⊹	1744282799 usingg Report Comment
ChaseBurger	1743669322 using ^^ Report Comment
ＶＩＮＮＹ！	1743610828 using!! Report Comment
Lukas ⁉️	1743483612 Usinn Report Comment
Helin!!(๑˃ᴗ˂)ﻭ	1743267563 USINGG:3 Report Comment
⊱　⁺ aiko ᶻz	1742927949 usinggg Report Comment
th3o	1742449576 using!! this is so cutee :3 Report Comment
cupid ♡	1742241420 using 4 blog! Report Comment