Pink

Tags:

Description:

/*==========⚠️==========

* for colors go to https://htmlcolorcodes.com/color-names

* for )

/*==========⚠️=========

* the div below is the background song that autoplays.

* it's a youtube video embed code with the width and height set to 1 so it's hidden.

* to edit youtube song, copy the http url you get from

* the youtube embed code and replace up until the ? mark.

* or go to https://blog.spacehey.com/entry?id=6243 for explanation.

============⚠️=========

Code:

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


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

<style> 

/*============= cursors  ===================*/
a:hover{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur668.cur'), auto;
}
body {
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur671.cur'), auto;
}
</style>
<style>
/*============= font style ===================*/
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
</style>
<style>
/*============= layout details ===================*/
:root{
 --headers: #ec5a5a;
 --text: pink;
 --names: #ec5a5a;
 --links: pink;
 --hover: #f3d7d7;
 --borders: 1px solid #f3d7d7 !important;

 --background_image: url("https://i.imgur.com/6zCbRs2.png");

 --font-family: 'Gotu', sans-serif;
 --mynamesize: 30px;
 --transparency: .55;
 --curve: 0px;
 --hue: 0deg;
 --simple_bg: #ffffff;
}
main .left{
 padding-right: 20px;
}
.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
h3, h4, h5, .url-info b{ 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, 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 double hotpink;} /* line in bewtween comment replies*/
.count{color:#f3d7d7;}
/*============= text decoration ===================*/
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
 text-decoration: underline;
 text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
 text-decoration: underline;
 text-decoration-style: wavy;
}
nav .top a:hover{
 text-decoration: underline;
 text-decoration-style: wavy;
}
nav .links a:hover{
 text-decoration: underline;
 text-decoration-style: wavy;
}
/*============= font family ===================*/
h2, h3, h4, h5, a, p, nav label, .section{
 font-family: var(--font-family) !important;	
 text-shadow: 0px 0px 0px black !important;
 font-size: 12px;
}
/*============= padding and margin ===================*/
.icon{border:none !important;}
.blurbs{margin-top:10px !important;margin-bottom:30px !important}
.friends{margin-top:-10px !important;margin-bottom:30px !important}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px dotted pink;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;margin-top:30px!important}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
.mood{margin-top:20px;}
/*============= background image ===================*/
body {
 background-image: var(--background_image) !important;
 background-color: white !important;
 background-repeat: repeat;
 background-size: 120px;
}
/*============= navigation ===================*/
/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */
nav{
 background: white;
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
 margin-bottom: 30px;
 border: var(--borders);
}
nav .top {
 background: rgba(0,0,0,0.0);
}
nav .top a{
 color: pink!important;
}
nav .links {
 background: transparent!important;background-size: 100%100%!important;}
nav img.logo{filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(305deg) brightness(104%) contrast(105%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " | ";
 color: var(--headers);
}
/*============= color the search bar and button ===================*/
.search-wrapper input[type=text] {
background-color: rgba(0, 0, 0, 0.0) !important;
border: 2px solid pink !important;
color:pink !important;
border-radius: 0px !important;
}
button{
border-radius: 0px !important;
border: 2px solid pink!important;
font-family: var(--font-family) !important;
background-color:rgba(0, 0, 0, 0.0) !important;
color:pink!important;
}
/*============= online icon  ===================*/
.online {content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);}
/*============= profile name ===================*/
h1{
padding-left: 20px !important;
font-family: 'Gotu', sans-serif;
font-size:25px !important;
margin-top: -10px!important;
color: var(--links)!important;
}
/*============= box shadows ===================*/
.mood, .blog-preview, .contact{
margin-bottom: 30px;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}
.table-section, .blurbs, .friends{
margin-bottom: 30px !important;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}
.friends{
margin-top: 10px!important;
}
/*============= profile info ===================*/
.profile-info{
 background:white;
 border: var(--borders)!important;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 15px 5px;
 margin-bottom: 30px;
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}
.profile-info .inner{
 font-weight: bold;
 text-align: center;
}
/*============= contact  ===================*/
.contact {
 background: white;
 padding: 20px;
 margin-bottom:40px!important;
}
 /*============= images ===================*/
main{
 background: transparent;
 padding: 6px 0px;
}
.profile-pic img{
outline:none !important;
border: none!important;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black)!important;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}
.profile .friends .person img{
transform: skew(0deg, 0deg);
border-radius: 0px;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
}
.friends-grid img{
outline:none !important;
filter: opacity(90%) !important;
border-radius: var(--curve) !important;
}
.inner img{
outline:none !important;
filter: hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
border-radius: var(--curve) !important;
}
/*============= box color for interests and social media. change 0.0 to 0.5 to see a difference ===================*/
:root{--box_color_and_seethru: rgba(0, 0, 0, 0.0);}
/*============= interest table background color. replace transparent with any color to see the change ===================*/
td {background-color: transparent!important;}
hr{
 border-top: 1px solid pink;
}
/*============= boxes ===================*/
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.friends, .blurbs{
background: white;
}
.mood, .contact, .blog-preview{
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.mood, .blog-preview {
text-align: center;
background: white;
border: var(--borders) !important;
}
.table-section{
border:var(--borders) !important;
background-color:white!important;
border-radius: var(--curve) !important;}
.heading{
background:transparent!important;
padding-bottom: 4px !important;
background-size:100%100%!important;
text-align: center;
border:none!important ;
}
.comments-table {
display: block;
height: 500px!important;
overflow-y: scroll;
border: var(--borders) !important;
outline: none !important;
}
.comments-table td {
background-image: url('') !important;
background-size: cover;
}
.comments-table td:first-child img {
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}
/*============= footer ===================*/
footer{
 color:red;
 text-align: center;
 font-size: 60%;
 margin: 10px 0 10px;
 padding: 10px 5px;
 background: white;
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #f6e3e3;
}
</style>

<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 10%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
width: 2px;
border: 1px dotted hotpink;
}
::-webkit-scrollbar-thumb {
background: pink;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: hotpink;
}

</style>
<div>
 <iframe frameborder="0" width="1" height="1" src="https://www.youtube.com/embed/d9IxdwEFk1c?autoplay=1;fs=0&amp;iv_load_policy=3&amp;showinfo=0&amp;rel=0&amp;cc_load_policy=0&amp;start=1&amp;end=270&amp;vq=large&amp;origin=https://youtubeembedcode.com"><div>youtubeembedcode de</div><div> </div></iframe>
</div>

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

cath9a5ydt

1782377841

I often recorded screenshots and short demo videos of such designs to share with friends, but extra parts of the frame ruined the look and prevented highlighting details. That's when I started using no software required and quickly cropped the videos to the perfect size. Thanks to this the clips became clean, compact and professional, while all layout elements from pink accents to scrollbars looked flawless. Now the process of sharing creative profiles has become much more enjoyable and effective

Report Comment

Ausyie Da Skunk

1727849878

Awesome!! It was really difficult to find a working autoplay, thank you very much!

Report Comment

3 bigus

1665611297

supa helpful 4 beginnerz, def going to refer back 2 thiz B-)

Report Comment