Hot Pink Layout

Tags: pink, black, bela

Description:

If you have any questions, please comment below or go to my blog here.

Image Credits —

    ⇘ Body background: https://i.imgur.com/12n6w6D.jpg

    ⇘ General Background: https://i.pinimg.com/originals/7f/f5/80/7ff580780890b170bd0ef4e18f9eb611.gif

    ⇘ Online Code: https://i.imgur.com/12n6w6D.jpg

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=567) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
</style>

<style>

/* for colors go to https://htmlcolorcodes.com/color-names */
/* for fonts go to https://fonts.google.com */
/* you can also rename your interest boxes here */

:root{
  --headers: pink;
  --text: white; 
  --names: white;
  --links: thistle;
  --hover: pink;  
  --background_image: url("https://i.imgur.com/12n6w6D.jpg");
  --font-family: 'Dancing Script', cursive;
  --curve: 0px;
  --borders: 5px dashed deeppink;
}

h1{
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    font-family: 'Dancing Script', cursive;
      font-size:40px !important;
    	letter-spacing:0.1em !important;
      -webkit-text-fill-color: transparent !important;
      -webkit-text-stroke-width: 1px !important;
      -webkit-text-stroke-color: deeppink !important;
      text-shadow: 
    		2px 2px black,
    		3px 3px 6px deeppink !important;
    
}
.url-info{display:none !important;}
.blurbs .heading{display:none !important;} 

h3, h4, h5, .url-info b{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color:black!important;background:url('https://dl.glitter-graphics.com/pub/1069/1069696u5bz28q735.gif'); !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
.count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p, nav .links a:hover{color:black!important;background:url('https://dl.glitter-graphics.com/pub/1069/1069696u5bz28q735.gif'); !important;}  /* color of names on hover */
nav label{color: var(--headers) !important;} /* color of search */
.section h4 {color: var(--headers) !important;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

h2, h3, h4, h5, a, p, nav label, .section{ 
    font-family: var(--font-family) !important;	
    text-shadow: 2px 2px 3px crimson !important;
    font-size: 18px;
}

.comment-replies{border:1px dashed deeppink;}


body {
    background-image: var(--background_image) !important;
    background-color: var(--simple_bg) !important;
    background-attachment: fixed !important;
    background-position: center;
}

main{
    background-color:rgba(0, 0, 0, 0.8); !important;
margin-top:30px;}

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

nav{
    border: var(--borders);
}
nav .top { 
    background: rgba(0,0,0,0.8);
    color:var(--headers);
}
nav .links {
    background: rgba(0,0,0,0.8)!important;
    background-size: 100%100%!important;
    text-align: center;
}
nav .links a{
    color: pink!important;
text-shadow:none;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(28%) sepia(62%) saturate(7017%) hue-rotate(315deg) brightness(101%) contrast(105%); !important;}

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

.online {
    margin:auto;
    content: url(https://dl.glitter-graphics.com/pub/352/352870r1wbtx0gci.gif);}

.section h4{
    text-align: center;
}

.profile-info{
    background-color: transparent!important;
    background-size: contain;
    border: 0px solid deeppink !important;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}
.profile .contact a{
    color: white!important;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    font-size: 15px;
}
.general-about .details, .mood, .contact{
    background: url('https://i.pinimg.com/originals/7f/f5/80/7ff580780890b170bd0ef4e18f9eb611.gif');
    background-size: cover;
}

/* custom border */ 
.general-about .details{
  display: block;
  text-align: right;
  margin-bottom: -5px;
  padding-top:120px;
  padding-right: 20px;
  border-left: 5px dashed deeppink!important;
  border-right: 5px dashed deeppink!important;
  border-top: 5px dashed deeppink;
}
.profile .contact{
 border-left: 5px dashed deeppink;
 border-right: 5px dashed deeppink;
 border-bottom: 5px dashed deeppink;
 border-top: 0px dashed gray;
}
.mood{
    text-align: center;
    margin-top: -10px;
    border-left: 5px dashed deeppink;
    border-right: 5px dashed deeppink;
    border-top: transparent;
}
.online{
    padding-bottom: 15px;
}
main{
    border: transparent !important;
    outline: none !important;
}

.profile-pic img{
    outline:none !important;
    padding:20px;
    filter:  drop-shadow(0px 0px 0px black) !important;
}

.inner img{
    outline:none !important;
    filter:   drop-shadow(0px 0px 0px black) !important;
    border-radius: var(--curve) !important;
}

/* interest table background color. replace transparent with any color to see the change */

td {background-color: transparent!important;}

/* boxes */
.heading{
    border-radius: var(--curve) !important;
    padding: 2px !important;
}
.url-info, .blurbs, .friends, .table, footer, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.friends{
    margin-bottom: 20px;
}
.table-section{
    border:var(--borders) !important;
    background-color:transparent!important;
    border-radius: var(--curve) !important;}
.heading{
    background:url('')!important;
    padding-bottom: 4px !important;
    background-size:100%100%!important;
    text-align: center;
}
.blog-preview{
    text-align: center;
}
.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: 0px dashed red;
    border-bottom: 1px dashed deeppink;
}

.comments-table td:first-child img { 
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}
.comment-reply:not(:first-child){
 border-top: 1px dashed deeppink;
}
footer{
    background:transparent;
}
.blurbs, .friends, .table-section{
    margin-top:30px!important;
}
</style>

<style>

/* Scrollbar styles */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}

::-webkit-scrollbar-track {
border-radius: 10px;
width: 2px;
border: 1px dashed deeppink;
}

::-webkit-scrollbar-thumb {
background: deeppink; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: pink;  
}
</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 9 of 9 comments ( View all | Add Comment )

cherri/jax	1701438534 using Report Comment
Kenny	1699076611 using!!!!!! Report Comment
galaxia ☆	1693850061 using :>> Report Comment
Heyscenekid	1692233282 using!! Report Comment
Catty Noir	1688670900 pretty!! using :3 Report Comment
Sarfiaholic	1674363598 ty ty so much!! <3 ^__^ Dis is exactly the kind of layout I was looking for!! Report Comment
Princess👸🏾💖🌸💓	1647595232 Beautiful Report Comment
Vex	1641346985 Its amazing!! Report Comment
kitkat	1631822598 i luv it so much Report Comment