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

enan >ᴗ<	1741715001 using Report Comment
꒰୨୧◞ 。𝒌𝒂𝒍𝒊⠀.ᐟ	1741470478 using ♡︎ Report Comment
々 MΛƧƬΣЯƧΉIƬ ︵ { SpaceHey's Favorite Writer } ︶	1738566109 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
Gare_bear	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
idk why	1705781288 Using Report Comment
miauchelle	1705338089 Using!:3 Report Comment
Ticci Toby Fan	1704812049 Can you make a FUN GIRL layout (Yan-sim)?? and like use this gif? https://media1.tenor.com/m/kKZtEUXI9AcAAAAd/ayano-aishi.gif Report Comment I can try to do it, but I don't know where I would put this gif by ₊𝘔𝘦𝘪𝘳𝘪𝘩𝘦𝘳𝘦⊹; 1704817963; Report I was mainly just making a suggestion ir something Yandere sim related is fine :) by Ticci Toby Fan; 1704818035; Report
Nicolas	1703707712 using Report Comment