Pink 2000s scene layout

Tags: emo, scene, pink, mcbling, 2000s, y2k

Description:

pink emo/mcbling/scene 2000th avril lavine type layout, its plain but cutee pls comment if ur using, it makes me happy

Preview:

click on the image for a larger preview

Code:

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

<style>

/* this is the cursor that appears when you hover over links */
a:hover{
    cursor: url('https://cur.glitter-graphics.net/pub/111/111944aomhvemlia.gif'), auto;
}
/* this is the main cursor */
* { 
    cursor: url('https://cur.glitter-graphics.net/pub/111/111944aomhvemlia.gif'), auto; 
}
</style>

<style>
/* font-family */
@font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); }
@font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); }

</style>

<style>
/* this is where the colors are rooted */

:root{
    --headers: #ff3884;
    --text: #cc6aa3; 
    --names: #ff458c;
    --links: #cf0064;
    --hover: #fc00a0;
    --borders: 4px double #fc00a0;
    --background_image: url('https://i.pinimg.com/564x/dd/3e/f6/dd3ef6d2505a68035ad84b5b52b400db.jpg');
    --font-family: "RavenouslyDemoGrunge-Ea9OW";
    --curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */
}

/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {display:none;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */
/* .details-table td:first-child{display:none;}  this code hides the general-heroes titles */

/* this is where your background image ends up being styled */

body{
    background-image: var(--background_image)!important;
    background-color: #000;
    background-size: contain;
    background-attachment: fixed;
    color: var(--text)!important;
}
/* this is where your name appears */
h1{
    color: #ff30cf;
    font-family:  "PenetrationOutGrunge-JvyM"; 
    font-size:30px !important;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
}

/* the navigation is adjusted here */
nav{
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: var(--text);
    text-shadow:none;
}
nav .links{
    color: var(--text);
    background-color: transparent;
    border-radius: var(--curve);
    text-align: center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

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

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}

/* the online symbol and text */

.online{
    color: var(--links) !important;
    text-transform: lowercase;
    margin:auto;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%) !important;
}

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
    font-family: "PenetrationOutGrunge-JvyM";
    font-size: 20px;
    font-weight: normal;
}
a, p, b, nav label, .section{ 
    font-family: var(--font-family) !important;	
    font-size: 14px;
    font-weight: bold;
}
/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:1px;
    background: var(--links);
    border: none;
}

/* this is where you adjust the borders and background */
.blurbs, .friends, .profile .table, .blog-preview, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
}

.general-about .details{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
    padding:20px;
    text-align: right;
}
.mood{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
    text-align: center;
    padding:5px;
}
.icon{border:none !important;}
.comment-replies{border:2px dotted #ff007b;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/
main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

/* the interest table */
.table-section{
    background-color:transparent!important;
    border:var(--borders)!important;
    background-color: rgba(0,0,0,0.5)!important;
}
.details-table{
    border-spacing:0px 10px;
}
.details-table td{
    border-top:1px solid darkred;
    padding:5px;
}

/* the header section of the boxes */
.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: rgba(0,0,0,0.5);
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding:6px;
    border: none;
}
/* you can remove text-align:center; if you don't want your friends to be centered */
.friends-grid{
    text-align: center;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: brightness(70%);
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */
.friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */


/* custom contact
you can change the content: "✦" to content: url('image-url-here');
*/

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "▸"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "▸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "▸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "▸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "▸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "▸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "▸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "▸"
} 
/* where your spacehey url goes. you can add a picture here instead.
if you don't want a picture or the url just remove this code 
and add this:

.url-info{display:none;}

*/
.url-info{
    background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    height: 193px;
    border: var(--borders)!important;
    border-radius: var(--curve);
}
.url-info p{
    opacity: 0.0;
}

/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: 0px dotted #e6007a !important;
    outline: none !important;
    border-radius: 8px;
    padding:5px;
    border-spacing: 4px; /* this changes the distance between boxes */
}

/* this styles the first column */
.comments-table td:first-child{

    background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg');
    background-size: cover;
    background-position: center;
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 2px solid #e6007a;
    padding:10px;
    border-radius: 0px;
}

footer{
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid #e6007a;
}
::-webkit-scrollbar-thumb {
    background: #e6007a; 
    border-radius: var(--curve);
}
</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 254 comments ( View all | Add Comment )

Caylee ⋆.˚✮︎︎ ✮˚.⋆	1765073380 usingggg Report Comment
Xx-AshleyBee-xX	1764988322 Using!1!! :3 Report Comment
lina	1764916585 Using ٩(^ᗜ^ )و ´- Report Comment
EmmaMassacre	1764910694 USING Report Comment
EmmaMassacre	1764910694 USING Report Comment
9bibiio(. ❛ . ❛.)	1764080119 USINGGG!!!!!!!!! Report Comment
Flora !	1763957784 Using for now ;) Report Comment
Madzmaia	1763802485 Using Report Comment
Navi	1763649198 using!!! Report Comment
yanoquieroveeveer	1763429529 Using! :b Report Comment
jackie / mahana	1763311821 using! <3 Report Comment
victoriaasvirus	1763240389 using xx Report Comment
Sophieslays	1763153633 Using!! Report Comment
fl0ryns_fl0w3r	1763126915 using Report Comment
I'm hot, your not!	1763077974 Using!! Report Comment
I'm hot, your not!	1763077971 Using!! Report Comment
I'm hot, your not!	1763077971 Using!! Report Comment
I'm hot, your not!	1763077971 Using!! Report Comment
I'm hot, your not!	1763077970 Using!! Report Comment
I'm hot, your not!	1763077970 Using!! Report Comment