Y2K McBling Layout

Tags: y2k; mcbling

Description:

y2k inspired layout Includes: -Backgrounds -Banner -Background images in profile boxes -Overlay -Customizable rotating pfp

Preview:

click on the image for a larger preview

Code:

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

<style> 

#profile{
 position: fixed;
 background-image: url('https://i.pinimg.com/originals/78/e7/d5/78e7d57f906341b54a2f27a89974a80b.gif'); background-position: center center; background-size: 100%;
 background-color: black;
 color: black;
 z-index: 100;
 top: 0; 
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}
#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > ul {
 padding: 10px 50px;
 border: 6px double blue;
 background-color: white;
}

</style>







<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}




table, th, td {

border: 0px solid;

}

:root {

--topic1: "Links";
--topic2: "Interests";
--topic3: "Books";
--topic4: "Music";
--topic5: "Simp List";
--topic6: "Quotes";

}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{


color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px white !important;
filter: brightness(95%) !important;


}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}






main:before {

	width: 100%;

	height: 300px ;

	display: block;

	content: "";

	background-image: url('https://i.pinimg.com/originals/7a/a1/5f/7aa15f12cab6c8e1596c03db7d9bf2d3.gif');

	background-position: center center;

	background-size: 96%;

}

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url('https://i.pinimg.com/originals/91/5a/1c/915a1c1a1b68bcafe0fdf30ed8204ad0.gif');

  content: "";

  height: 500%;

  left: -50%;

  opacity:.15;

  position: fixed;

  top: -110%;

  width: 500%;

  pointer-events:none;

}

.online { visibility: hidden; } .online img { content: url("https://i.pinimg.com/originals/2c/13/79/2c137988f5a8b8c7d85567a699d72229.gif"); animation-name: none; visibility: visible; height: 100px; width: 100px; }


body

        {background-image: url(https://i.pinimg.com/736x/fd/e7/89/fde7892fafe57900c4842e831dc92ba8.jpg); no-repeat fixed; background-size:50%;

}

:root {

        --logo-blue: #FF89D2;

        --darker-blue: #FFFFF;

        --lighter-blue: #B3DAF1;

        --even-lighter-blue: #B3DAF1;

        --lightest-blue: #FFFFFF;

        --dark-orange: #CBCBC;

        --light-orange: #FFA0A0;

        --even-lighter-orange: #FFFFFF;

        --green:;

    }


.profile .contact {background-image: url(https://i.pinimg.com/564x/a6/c3/97/a6c39780eb9016e15e5d0d5cdc3c6bb1.jpg);
}

.profile .blurbs {background-image: url(https://i.pinimg.com/564x/d9/dd/40/d9dd401780795345b83e66b484cebf3d.jpg);
}

.profile .blog-preview {background-image: url(https://i.pinimg.com/736x/17/99/30/179930b61154561ec766939a36343733.jpg); background-size: 100%; padding: 1px;
}


.profile .friends {background-image: url(https://i.pinimg.com/564x/98/15/77/981577017aa13009c47a3b0dd7062a6c.jpg);
}

.profile .url-info {background-image: url(Image Url for ur PFP goes here); background-size: 50%; padding: 1px
}


h1
{
	color: 
h1
{         color: turquoise; 
	//text-shadow: 8px 9px #92ABFF;
	
};
	text-shadow: 5px 1px 3px #92ABFF, 0 0 2px #92ABFF, 0 0 2px black;


</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 0 of 0 comments ( View all | Add Comment )