Lowkey as hell- Waterparks Layout

Tags: waterparks, parx, awsten knight

Description:

My first layout I messed around with a bunch of codes and made this it has auto playing music, bright colours , and a loading screen You can edit things comment if using!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ¡☆Dex/Jay☆! (https://layouts.spacehey.com/layout?id=93197) -->

<!-- (c) Layout created by atha nox ☾ (https://layouts.spacehey.com/layout?id=91713) -->
<style>
        @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Press+Start+2P&family=Shadows+Into+Light&display=swap');

html:after {
  animation: grain 8s steps(10) infinite;
  background-image: url();
  background-size: 200px !important;
  content: '';
  height: 300%;
  left: -50%;
  opacity: .4; /*Change this value (0 - 1) to change the intensity of the effect)*/
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


:root {
--primary-color: #000000; 
  --secondary-color: #ffffff;
    --terciary-color: #B49D78;
}


body{
background-image: url('https://i.pinimg.com/originals/14/33/7c/14337c3861386bed63ca610176e81b11.jpg');
background-repeat: repeat;
background-position:undefined;
background-attachment: fixed;
background-size: auto;
background-color: var(--primary-color);
}

main{
background-color: var(--primary-color);
border: 3px solid gray;
opacity: 0.8;
  border-radius: 8px;
  line-height: 12px;
  font-size: 12px;
  width: 750px;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: var(--primary-color);
opacity: 0.8

  
}



nav .top {
background: none;
 font-family: poppins;
width: 750px;}

nav .links{ 
  background: var(--primary-color);
  border-radius: 8px;
  border: 3px solid gray;
  margin: 6px;
  width: 750px;
 

}

.col.w-40.left {
font-family: \permanent+marker;
}

.blurbs .inner .section:first-of-type h4{
	color: white;
  font-size: 15px;
}

.blurbs .inner .section:last-of-type h4{
color: white;
    font-size: 15px;
}

}

.profile h1 {
font-family: permanent+marker;
font-size: 50px;
color: rgb(85, 79, 124);
}

h4 {
color: var(--terciary-color);
font-family: permanent+marker;
  font-size: 20px;
  
}



.section h4, .details-table td:first-child {
color: white;
font-family: permanent+marker;
    
}

a, .count {
color: var(--secondary-color);
font-family: Monospace;
}

a:hover {
color: var(--primary-color);
font-family: Sans-Serif;
}

body,main {
color: var(--secondary-color);
font-family: poppins;
}

.details-table td, .details-table td:first-child{
background: none!important;
  border: none;

}
.heading{
background: none!important;

   
}
.comments-table td{
background: none!important;
    border: none;
}

.profile .contact {
border: none;}

.profile .table-section {

border: solid 2px grey;
border-radius: 8px;}

.profile .url-info {
border: solid 2px grey;
border-radius: 8px;}
}



img {
border-radius: 8px;
}

footer {
width: 750px;
background: none;}



</style>
<!-- (c) Layout created by ¡☆Jay☆! (https://layouts.spacehey.com/layout?id=89222) -->


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

<!-- (c) Layout created by 𝐥𝐞𝐱𝐥𝐲 (𝟐𝟕𝟕𝟕𝟓𝟐𝟐𝟎) (https://layouts.spacehey.com/layout?id=24375) -->

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/26129c318e4474187b1e188aa0419d63/8727ed040ecdf7a7-7c/s640x960/920adbb562613ebd3755f9968e253056b23c8bbe.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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 1 of 1 comments ( View all | Add Comment )

damien ☆

1708903633

hiii im using! love this sm actually it's so good

Report Comment