DDLC Layout ❤︎ --- autoplay!!

Tags: ddlc, doki doki literature club, layout, cute, autoplay, music, gif, pink, loading screen

Description:

*At a friend's request* DDLC YEYYYYY, one of my favorite games!! (even though I needed therapy after this game), I made another layout... is it simple? I don't know, I'm out of creativity.. I posted it for you little people to use (I'm going to use it too) anyway ------ requests accepted!! remember to give me credit, if not I will sell your entire family:3 .....there may be errors, so please let me know if there is anything wrong

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ₊𝘔𝘦𝘪𝘳𝘪𝘩𝘦𝘳𝘦⊹ (https://layouts.spacehey.com/layout?id=89605) -->

<img src="https://64.media.tumblr.com/993b812e495d8bb6489fc672021f1a6c/f6f160628090f0d7-7c/s1280x1920/fcbec6a79d7912e14ebd2f25b2b517f2b936c98e.png"/>





ABOUT ME HERE




<style>
    .monika {
        background: url(https://64.media.tumblr.com/90e7627200ed600e9f5dd1db8dab42c9/tumblr_p0chpy6NJE1whk690o1_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 20px;
        bottom: 10px;
        height: 119px;
        width: 84px;
    }

    .monika:hover {
        animation: monika 1600ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes monika {
        from {
            transform: rotate(0deg);
            content: url("https://64.media.tumblr.com/6803f0f8ca6ab7295316f93d9c2e7661/tumblr_p0chpy6NJE1whk690o2_250.png");
        }
        to {
            transform: rotate(360deg);
        }
    }

    .natsuki {
        background: url(https://64.media.tumblr.com/daecf9a6f4ef3f35b52bd810a3c48b85/tumblr_p0chpy6NJE1whk690o3_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 90px;
        bottom: 10px;
        height: 110px;
        width: 96px;
    }

    .natsuki:hover {
        background: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        animation: natsuki 0.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes natsuki {
        0% {
            transform: translate(0);
            content: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        }
        20% {
            transform: translate(-2px, 2px);
        }
        40% {
            transform: translate(-2px, -2px);
        }
        60% {
            transform: translate(2px, 2px);
        }
        80% {
            transform: translate(2px, -2px);
        }
        100% {
            transform: translate(0);
            content: url("https://64.media.tumblr.com/e56f788575e650c620b01293e732557a/tumblr_p0chpy6NJE1whk690o4_250.png");
        }
    }

    .yuri {
        background: url(https://64.media.tumblr.com/8f61649f03a5582e59d1651641a321e0/tumblr_p0chpy6NJE1whk690o8_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 175px;
        bottom: 10px;
        height: 115px;
        width: 79px;
    }

    .yuri:hover {
        background: url("https://64.media.tumblr.com/128c37165a9b299b2a57bc1be1f810ad/tumblr_p0chpy6NJE1whk690o7_250.png");
        animation: yuri 1.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes yuri {
        0%,
        100% {
            transform: translateX(0);
            content: url("https://64.media.tumblr.com/128c37165a9b299b2a57bc1be1f810ad/tumblr_p0chpy6NJE1whk690o7_250.png");
        }
        10%,
        30%,
        50%,
        70% {
            transform: translateX(-5px);
        }
        20%,
        40%,
        60% {
            transform: translateX(5px);
        }
        80% {
            transform: translateX(8px);
        }
        90% {
            transform: translateX(-8px);
        }
    }

    .sayori {
        background: url(https://64.media.tumblr.com/935147ad782a2f20d9d3f9dc44750a36/tumblr_p0chpy6NJE1whk690o5_250.png) no-repeat;
        background-size: 100%!important;
        position: fixed;
        left: 245px;
        bottom: 10px;
        height: 115px;
        width: 79px;
    }

    .sayori:hover {
        background: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png");
        animation: sayori 0.9s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier;
    }

    @keyframes sayori {
        0%,
        100% {
            transform: translateX(0%);
            transform-origin: 50% 50%;
            content: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png")
        }
        15% {
            transform: translateX(-2px) rotate(-2deg);
        }
        30% {
            transform: translateX(5px) rotate(8deg);
        }
        45% {
            transform: translateX(-6px) rotate(-3.6deg);
        }
        60% {
            transform: translateX(5px) rotate(2.4deg);
        }
        75% {
            transform: translateX(-6px) rotate(-1.2deg);
            content: url("https://64.media.tumblr.com/4786cdff38bff0bd2bd53d469004d276/tumblr_p0chpy6NJE1whk690o6_250.png")
        }
    }

    }
</style>

<div class="monika"></div>
<div class="natsuki"></div>
<div class="yuri"></div>
<div class="sayori"></div>



<style>
.logo {
   content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f1313323-9429-4e78-869b-34fedcd15dc0/dg1cjdc-d2bae46b-6051-47ba-b846-35f61021055b.png/v1/fit/w_828,h_210/ddlc_spacehey_by_marrkkmaarshaall_dg1cjdc-414w-2x.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MzI2IiwicGF0aCI6IlwvZlwvZjEzMTMzMjMtOTQyOS00ZTc4LTg2OWItMzRmZWRjZDE1ZGMwXC9kZzFjamRjLWQyYmFlNDZiLTYwNTEtNDdiYS1iODQ2LTM1ZjYxMDIxMDU1Yi5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.0k0Qv76u3fdevwjjwjA8fGXXKRudrMZYqm2cP3wwZ3o);
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth704.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/29/bloody-knife.html" target="_blank" title="Bloody Knife"><img src="https://cur.cursors-4u.net/cursor.png" alt="Bloody Knife" style="position:absolute; top: 0px; right: 0px;"/></a>



<div style="float:  ; max-height: 250px; position: fixed; right: 9px; bottom: 30px; z-index: 100;"><img src="https://i.pinimg.com/originals/cd/d6/5b/cdd65b2ccd73a14a19e9a8fe681c6f48.gif" width="300" height="300"/></div>


<style>
body{

font-family: 'Allerta', sans-serif;
background-image: url(https://i.pinimg.com/564x/a2/47/b0/a247b07728d5db36171d6aa1ee0aefec.jpg);
background-size: 1000px;</style>


<style>
.general-about img {-webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>
.online {content:url('https://i10.glitter-graphics.org/pub/1681/1681910cknba4d3n3.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>


<style>
main:before {
	width: 100%;
	height: 170px;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/originals/a6/67/52/a66752f394286ad6387400f56d607781.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
</style>


<style>

@import url('https://fonts.googleapis.com/css2?family=Gayathri&display=swap');

:root {
--darker-blue: black;
--dark-orange: black; }

main, main p {  
font-family: 'gayathri', sans-serif;
font-size: 14px;
color: black; }

nav .top {
font-family: 'gayathri', sans-serif;
font-size: 13px;
font-weight: bold;
color: black;
background: #fad2e6;
border: 3px outset #ffc4da;
border-bottom: none;
border-radius: 4px 4px 0px 0px;
text-transform: lowercase; }

.logout-btn {
font-family: 'gayathri', sans-serif; 
font-size: 13px;
font-weight: bold;
color: black; }

footer {
font-family: 'gayathri', sans-serif;
font-size: 13px;
font-weight: bold;
text-transform: lowercase;
color: black;
background: #fad2e6;
border: 3px outset #ffc4da;
border-radius: 0px 0px 4px 4px;
border-top: none;
margin: 0px; }

[id='q'] {
border: 1px solid grey;
border-radius: 4px;
background: #f0f0f0;
padding: 3px; }

button {
font-family: 'gayathri', sans-serif;
border: 1px solid grey;
border-radius: 4px;
text-transform: lowercase;
background: #f0f0f0;
color: black;
padding: 3px; }

nav .links {
font-size: 13px;
text-align: center;
text-transform: lowercase;
word-spacing: 2px;
background: #fad2e6;
border: 3px outset #ffc4da;
border-top: none;
border-bottom: none;
border-radius: 0px; }

nav .links a, nav .links .special a {
font-family: 'gayathri', sans-serif; 
font-weight: bold;
color: white; }

nav .links a {
text-shadow: none;
font-weight: bold; }

main {
background: #feedf5;
border-bottom: none;
border-left: 3px outset #ffc4da;
border-right: 3px outset #ffc4da;
border-radius: 0px; }

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .url-info {
background: #fad2e6;
padding: 8px;
border: 2px solid #fff;
border-radius: 4px;
text-transform: lowercase;
text-align: center;
color: black; }

.profile h1 {
font-size: 250%; }

.general-about .profile-pic img {
border: 2px solid white;
border-radius: 4px;
height: 160px;
width: 160px; }

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
border: 2px solid white;
border-radius: 4px;
width: 90px;
height: 90px; }

.profile .contact, .profile .table-section {
border: none;
text-transform: lowercase; }

div.blog-preview {
background: #fad2e6;
padding: 5px;
text-align: center;
border: 2px solid white;
border-radius: 4px; }

div.blog-preview h4 {
text-transform: lowercase; }

.profile .blurbs .section h4 {
text-decoration: 1px underline;
text-transform: lowercase;
text-align: center; }

.profile .blurbs .section p {
text-align: center; }

.count {
color: black; }

.profile .friends .person p {
color: black; }

nav .links a:hover, a:hover {
color: white; }

.details-table td:first-child, .details-table td, .comments-table td:first-child, .comments-table td {
background: #fad2e6;
border-radius: 4px; }

table.comments-table {
border: none; 
overflow-y: scroll;
height: 400px; }

td {
border: 2px solid #fff; 
border-spacing: 3px; }

table {
border-spacing: 3px; }

b, p.report{
text-transform: lowercase; }

.contact .inner a img {
font-size: 0px; }

.contact .inner a img:before {
font-size: 1em;
display: block; }

.contact .f-col>a:before {
content: url(https://64.media.tumblr.com/tumblr_lkl75bsU9n1qfamg6.png);
display: inline-block; }

.report .icon{
visibility: hidden; }

p.report {
background: url(https://static.tumblr.com/rltvkjt/3Ddlmr3z3/mini-icone5.gif);
background-repeat: no-repeat;
display: inline-block; 
text-transform: lowercase; }

.profile-info {
background: #fad2e6;
border: 2px solid white;
border-radius: 4px;
text-transform: lowercase; }

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://i.pinimg.com/originals/0b/89/bd/0b89bd432f75cd0b5c703b3d6671204a.gif);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>




<style>
.top{

background-image: url(https://i.pinimg.com/564x/24/d1/80/24d180f08be8b00ecbb14e2ccd99ed54.jpg)!important;
background-size: 100%!important;
height: 80% !important;
border: groove pink 3px;
border-radius: 20px;
}</style>


<style>
<div style="float:  ; max-height: 100px; position: fixed; left: 13px; top: 12px; z-index: 200;">
<img src="https://64.media.tumblr.com/38676c64a53ef4e92b18328a0f954d49/f6f160628090f0d7-fd/s1280x1920/e53942520926dd4a1e884cde2604d8b2dd3128ed.gifv" height="150"/>
<style></style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/Bi1lE3cjQgM?si=oiinjQ9DMOwCmkyT//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>



<img src="https://external-media.spacehey.net/media/sIKOi9AxX369ySJyaz9UCkOIRxmie5N43TehyMbUjujU=/https://cdn.discordapp.com/attachments/1016967967084400641/1089612658673729546/22.png"/>

<img src="https://external-media.spacehey.net/media/slxncxHcllsMNqSBGrgkQZvd_viarGA-lqVHVHa8hBZo=/https://cdn.discordapp.com/attachments/1016967967084400641/1089612658426257550/23.png"/>

<img src="https://external-media.spacehey.net/media/srY5rBu7Fa-sGD639nmZGgr8gq0buFV-MR0ahUefaXnk=/https://cdn.discordapp.com/attachments/1016967967084400641/1089612659172851832/20.png"/>

<img src="https://external-media.spacehey.net/media/sM-eUWVO1O3a08EIp2X4HrpBA_Rn9zsRZRQb7zzyW7qw=/https://cdn.discordapp.com/attachments/1016967967084400641/1089612658921197781/21.png"/>

<img src="https://external-media.spacehey.net/media/sNeJYrbHxrtkPwsls3awUagQL_AHqUQMI1f8pLeTpr_I=/https://64.media.tumblr.com/2beed5af57ff990431c2dfe44d7b8375/tumblr_pcq4e5vbHw1xbgu08o4_100.png"/>

<img src="https://external-media.spacehey.net/media/s12KLeQv5EE9KQo622bzGt_EVYeqiGfswWo7IKuMsfRw=/https://64.media.tumblr.com/c97e2bfc230312555f7a59d65c5d18ba/tumblr_pbnta4aQ7Z1xzybrpo9_100.png"/>

<img src="https://i.pinimg.com/564x/60/b2/7e/60b27e4dc3e862cdeaebd3179d4e2b29.jpg"/>



<img src="https://64.media.tumblr.com/8ed7816ce60c31995d4125f796075c4c/f6f160628090f0d7-08/s1280x1920/2e2bd6a33f84474325cd27c867c4fb00d3e80f82.png"/>

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

fishh_bernn	1745588690 Using. Report Comment
bigos	1745232604 using!! Report Comment
yuyuuuuu	1744546525 usingggg ! Report Comment
Yangirl9	1744328155 Hi! Do yk the specific code for the Sayori gif on the bottom right? Report Comment
enan >ᴗ<	1741715001 using Report Comment
꒰୨୧◞ 。𝒌𝒂𝒍𝒊⠀.ᐟ	1741470478 using ♡︎ Report Comment
-Onyx-	1736709613 using!!! :D Report Comment
angelxo_8	1734304182 USING!! I LOVE IT SM Report Comment
୭ Javi Elliot	1731352046 gonna use weeehehehehe Report Comment
Laura 🦴💉🎀	1725201546 useeee Report Comment
ﾟ ˖ ꕀ Sayori ⠀꒰๑ ´` ๑꒱⠀ 𓂂	1723366829 usingg Report Comment
XxPiercedPrincessxX	1723214197 Using Report Comment
Gary	1720194308 Using! Report Comment
unplezz??????	1716899731 usingggg Report Comment
SHiiinn =3	1711903547 USINGGG!! Report Comment
SHiiinn =3	1711903545 USINGGG!! Report Comment
yxki3	1710313284 using !! Report Comment
Melo ྀ༷	1707530642 Using! Report Comment
Hannah !!	1705845511 using!! Report Comment