cool ass lain layout!! (song included, does not loop)

Tags: lain, 2000s, simple, cute, music, autoplay, anime, animation, gif

Description:

its lain idk its also my old layout! change whatever u want !! there's also a lain gif that pops up before it displays ur profile SOOO erm silly jumpscare warning ig!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by megalodonny (https://layouts.spacehey.com/layout?id=101070) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body{font-family: 'Special Elite', cursive;}
</style>

<style>

body{
background: url(https://images.pexels.com/videos/3045163/free-video-3045163.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500)
}

nav::before {
    content: ' ';
    width: 78-px;
    height: 135px;
    display: block;
    margin: 20px auto;
    top: 0;
    left: 0;
    z-index: 100;
    background: url('https://i.pinimg.com/564x/1e/69/ae/1e69aec133a3687765580b50527251f8.jpg');
    background-size: cover;
    background-position: center;
}

nav .top {
    background: #000000cc;
    color: #0e791f;
    padding: 15px 10px 14px 10px;
    position: relative;
}
.logo {

content:url("https://64.media.tumblr.com/3a052d332bf12fbf42d2600ae3b469ee/cc9ab1822d53d505-46/s250x400/9ab7920586ddff3b244eaf66ec9e346493232075.pnj");
}

button, input {
    overflow: visible;
    background: #000000cc;
    border: 1px solid #0e791f;
    color: #0e791f;
    font-weight: bold;
}

.logout-btn, .logout-form {
    color: #4361ee;
    text-transform: uppercase;
    display: inline-block;
    font-size: 100%;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "✉";
    color: #e9f5eb;
}

nav .links {
    background-color: transparent;
    text-align: center;
    padding: 3.5px 16px 5.5px 16px;
}

nav .links a {
    text-decoration: none;
    color: #e9f5eb;
    text-shadow: 0 0 5px #e9f5eb;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: #e9f5eb;
}

nav .links a:hover {
    text-decoration: underline;
    color: #e9f5eb;
    font-weight: bolder;
    text-transform: uppercase;
}

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 150px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/564x/0c/d6/31/0cd631c9a5ec9c32bc9509567535dae4.jpg);
    background-position: center center;
    background-size: cover;
}

main {
    background: #000000cc;
    color: #e9f5eb;
    border: 1px solid #4361ee;
    padding: 6px 0px;
    font-size: 80%;
text-align: center;
}

span {
    text-align: center;
    color: #e9f5eb;
    text-transform: uppercase;
    font-size: 170%;
}

a {
    color: #4361ee;
    text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #e9f5eb;
    text-transform: uppercase;
    font-weight: bolder;
    font-style: italic;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

.general-about .profile-pic {
    display: block;
    float: left;
    margin: 0 15px 8px 0;
    border: 1px solid #4361ee;
}

.general-about .details {
    display: flow-root;
    text-align: center;
}

.profile .mood {
    width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.mood:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 50px;
    background-image: url(https://64.media.tumblr.com/e5d5f44dd7b8f4f72c302353dfb2ba50/34ec6d5a12765c24-2a/s400x600/d94c7c6c42a316270e948bd3a11f4a0ca76e0bdd.jpg);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 300px;
}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: transparent;
    color: #e9f5eb;
    text-align: center;
    border-bottom: 1px solid #4361ee;
    padding: 2px 7px;
}

.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px solid #4361ee;
    margin: 10px 0;
}

.details-table td:first-child {
    background: transparent;
    color: #4361ee;
    text-align: center;
    font-weight: bold;
    border: 1px solid #0e791f;
    width: 33%;
}

.details-table td {
    background: transparent;
    color: white;
    border: 1px solid #4361ee;
    vertical-align: top;
}

.profile-info {
    border: 1px solid #4361ee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    margin-bottom: 10px;
}

.profile .profile-info {
	background-image: url();
	padding: 20px;
    border: 1px solid #4361ee;
    
}


.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    border-bottom: 1px solid #4361ee;
    color: #4361ee;
    padding: 2px 7px;
    text-align: center;
}

.profile .blurbs {
    margin: 20px 0;
    border: 1px solid #4361ee;
    
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #4361ee;
    text-align: center;
}

.friends {
    border: 1px solid #4361ee;
    
}

.count {
    color: #4361ee;
}

.profile .friends .person p {
    color: #4361ee;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border: 1px solid #4361ee;
    
}


.friends-grid {
    border-top: 1px solid #4361ee;
    padding-top: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    border: 1px solid #4361ee;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td:first-child img:not(.icon) {
    width: 90px;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #4361ee;
    
}

.comments-table td, .music-table td {
    background: #000000;
    border: 1px solid #4361ee;
    vertical-align: top;
}

table.comments-table {
    border: 1px solid #4361ee;
    
}


footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #00000000;
    color: #cdd8db;
     
}


::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #e9f5eb;
}
::-webkit-scrollbar-thumb {
    background: #4361ee;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e9f5eb;  
}

<style>
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

auto;}


</style>



<iframe width="0" height="0" src="https://www.youtube.com/embed/C7aCInI-g10//?&;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>


<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/3d/e4/cd/3de4cd20dd67e69c0bca4fa02bf28fb4.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;} }

HTML,BODY{cursor: 
url(http://www.rw-designer.com/cursor-view/181440.png),
auto;}


A:hover{cursor: 
url(http://www.rw-designer.com/cursor-view/181440.png),
auto;}
</style>
<style>
.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/sCLNcck/ezgif-5-5861b4e688.png);
  animation: rotation 6s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}</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 39 comments ( View all | Add Comment )

delta	1775287046 using 🙏 Report Comment
windspirit	1774621161 using, i luv it Report Comment
Scruffy_Cord	1769298475 using Report Comment
Helena is Dead!	1768782936 using Report Comment
NOVA!!	1767980317 usingg!! Report Comment
tuttifruuiiti	1766767208 are creds needed?? Report Comment
⋆. 𐙚˚࿔ yanko 𝜗𝜚˚⋆	1766111138 Using!!! Report Comment
s0LarISs	1756342174 Usingg Report Comment
ang3ldr001	1754113660 usingg Report Comment
omvi	1749786473 is there anyway to change the music? Report Comment
Erbom	1749152079 using!! Report Comment
lea!(ᴗ͈ˬᴗ͈)ꕤ.ﾟ	1745865575 USING Report Comment
buzzingpowerline	1745210465 using tankyu Report Comment
Araik__	1745007008 using tyyy Report Comment
🂡Jade/Flint🂡	1743983569 usinnggg Report Comment
vivi	1741227098 using! Report Comment
yuki	1740819733 , Report Comment
Kavi	1739622932 thank you for such a beautiful theme! I will use it! Report Comment
Paper_face890	1738234597 gonna use it, i'm still new Report Comment
pikel	1737283126 using :3 Report Comment