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

˚ ༘♡ ·˚꒰𝙲𝚛𝚢𝚜𝚝𝚊𝚕꒱ ₊˚ˑ༄	1769726433 𝚄𝚜𝚒𝚗𝚐^^ Report Comment
ANGELIQUE ！ー♪🦈ྀི༘~・	1769568155 Usingg <3 Report Comment
rat_345	1769359146 using Report Comment
J4ZMINE	1769248390 Using!! <3 Report Comment
J4ZMINE	1769248389 Using!! <3 Report Comment
Your lovely nightmare	1769077509 using Report Comment
Polisiasta	1768696921 usingg Report Comment
FloXO	1768691939 usingggg Report Comment
XxxSilvie4xxX	1768185445 usinggg Report Comment
Nana!	1768003254 usinggg!! Report Comment
Hanna	1767960229 Using Report Comment
Ignacy	1767901650 using Report Comment
allison :3	1767868253 usinggg Report Comment
Cher	1767758028 usinggg!!!! Report Comment
𝐢𝐥𝐢 🌘	1767476013 usingg Report Comment
Ari;>	1767404141 Using Report Comment
Svlqskz	1767053653 Usingg btw I love this xx Report Comment
Mollie	1766480558 USING Report Comment
Emmy(｡>﹏<)	1765426416 Using Report Comment
☆	1765269957 using Report Comment