Beauty and the Beast

Tags: tragiictayy, layout, full, purple, disney
Description:

Customizable (FULL) layout based on Beauty and the Beast.
You choose if and what you want hidden, or if you want to leave it completely alone.
Screenshot taken on mobile, in landscape mode.
If you use this, please comment below, or add me on here. Thank you! :)
Preview:

click on the image for a larger preview
Code:

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

<style>

:root{
     --headers: #fef8de;
     --text: #dd9e9a;
     --names: #dd9e9a;
     --links: #fef8de;
     --hover: #dd9e9a;
     --borders: 1px solid #bb2a2a !important;
    
     --background_image: url('https://images4.alphacoders.com/224/224668.jpg');
    
     --font-family: arial;
     --mynamesize: 30px;
     --transparency: .55;
     --curve: 0px;
     --hue: 0deg;
     --simple_bg: #ffffff;
}

.url-info{display:none !important;}
.blurbs .heading{display:none !important;}
h3, h4, h5, .url-info b{ color: var(--headers) !important;} 
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px solid var(--links);} /* line in bewtween comment replies*/
.count{color:var(--links);}
a, p{padding-left: 5px;margin:1px;}
.mood, DIV.friends:nth-child(3){margin-bottom:10px;}

a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: bold;
    text-decoration-style: none;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: bold;
    text-decoration-style: none;
}
nav .top a:hover{
    text-decoration: bold;
    text-decoration-style: none;
}
nav .links a:hover{
    text-decoration: bold;
    text-decoration-style: none;
}

a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 11px;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: arial;
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 11px;
}

.icon{border:none !important;}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:3px solid var(--links);border-radius:var(--curve);}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
table.details-table{padding: 5px;}
.blog-preview p{padding:5px;}


body {
    background-image: var(--background_image) !important;
    background-color: black ;
    background-repeat: no-repeat;
    background-size: cover!important;
    background-attachment: fixed!important;
}


nav{
    background: #7b5287!important;
    background-size: contain;
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: #7b5287!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 8px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(76%) sepia(9%) saturate(942%) hue-rotate(314deg) brightness(80%) contrast(86%); !important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "";
    color: var(--links);
}

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 1px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}


.online{display: none! important; color: var(--links) !important;} 
.online img {display: none! important; 
    filter: brightness(0) saturate(100%) invert(76%) sepia(9%) saturate(942%) hue-rotate(314deg) brightness(80%) contrast(86%); !important;
}

h1{
    display: none! important;
    padding-left: 30px !important;
    font-family: arial;
    font-size:30px !important;
    color: var(--headers)!important;
}


.profile-info{
    background: #7b5287!important;
    background-size: contain;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding: 4px;
}

.general-about .details, .mood, .contact{
    background: #7b5287!important;
    background-size: contain;
}

.general-about .details{
  display: block;
  text-align: right;
  margin-bottom:-5px;
  padding-top:120px;
  padding-bottom:70px;
  padding-right: 20px;
  border-left: 1px solid #bb2a2a!important;
  border-right:1px solid #bb2a2a!important;
  border-top: 1px solid #bb2a2a;
  border-radius: 0px 0px 0px 0px;
}

.profile .contact{
     border-left: 1px solid #bb2a2a;
     border-right: 1px solid #bb2a2a;
     border-bottom: 1px solid #bb2a2a;
     border-top: transparent;
     border-radius: 0px 0px 0px 0px;
}

.mood{
    text-align: left;
    margin-top: -10px!important;
    margin-bottom: -5px;
    padding-bottom: 5px;
    border-left: 1px solid #bb2a2a;
    border-right: 1px solid #bb2a2a;
    border-top: transparent;
}

.profile .contact .heading h4{display:none;}
.profile .contact a{font-size: 11px;}


.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: "🥀"
}

main{
    font-family:var(--font-family)!important;
    color: var(--text)!important;
    background: transparent;
    background-size: 100%;
    background-position: center;
}

.profile .friends .person img{
    border: none!important;
    border-radius: var(--curve);
}
.friends-grid{
    text-align: center;
}
.friends .heading a.more{
    padding-right: 16px;
}

:root{--box_color_and_seethru: rgba(0, 0, 0, 0.0);}

td {
    background-color: #7b5287!important;
}
hr{
    border: 5px solid pink;
    border-radius: 50px;
    background: pink;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
    background-color: #7b5287!important;
    background: url('');
    background-size: contain;
}
.blog-preview{
    background: #7b5287!important;
    text-align: center;
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
}
.blog-preview {
    background: #7b5287! important;
    background-size: contain;
}
.table-section{
    border:var(--borders) !important;
    background: #7b5287!important;
    background-size: contain;
    border-radius: var(--curve) !important;
}
.heading{
    display: none!important;
    background:#7b5287!important;
    text-align: center;
    border:none!important;
}
.comments-table td {
    background: #7b5287!important;;
    color:transparent!important;
    border-radius: var(--curve);
}
.comments-table td:first-child{
    background: #7b5287!important;
}
.comments-table td:first-child img {
    border: none!important;
    border-radius: var(--curve)
}


footer{
    background: transparent!important;
    border: none! important;
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: url('');
    background-size: contain;
}

</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.