simple pink heart layout

Tags: pink, simple, heart, hearts, cute, flipped profile

Description:

this is the second pink heart-themed layout i've made 💀💀
includes a custom cursor + online icon and scrollboxes!! + the page iz flipped :P
comment if ur gonna use!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ⨂ valerie vengeance ⨂ (https://layouts.spacehey.com/layout?id=86330) -->

<a href="https://spacehey.com/gods_worst_angel">layout by valerie</a>

<style>
body{
  background: url(https://i.ibb.co/Dt1Bt0V/OIP-1.jpg) center;
  background-size: cover;
}

main{
  background: rgb(236, 140, 172, 0.7);
  color: white;
  height: 400px;
  overflow-y: scroll;
  border: dashed 2px white;
}

* a{
  color: white;
}

* a:hover{
  color: rgb(197, 66, 111);
  text-decoration-style: wavy !important;
}
  
nav .links li:not(:last-child)::after {
  content: " ๑ ";
  color: #ffcad6;
  font-size: 1.5em;
}

nav .links a:hover {
  text-decoration: underline;
  color: rgb(197, 66, 111);
  text-decoration-style: wavy !important;
}

nav .links{
  border-left: dashed 2px white;
  border-right: dashed 2px white;
}

nav .links a{
  text-shadow: none;
}

nav .top{
  background: rgb(195, 84, 122, 0.5);
  border: dashed 2px white;
  margin-top: 15px;
}

footer{
  background: none;
  color: black;
}

footer a{
  color: black;
}

.profile-info{
  border: dashed 2px white;
  font-style: italic;
}

.count{
  color: rgb(197, 66, 111);
}

main{
  direction: rtl;
}

main div *{
  direction: ltr;
}

.blurbs{
  height: 200px;
  overflow-y: scroll;
  text-align: center;
}

.heading{
  text-align: center;
}

.table-section:not(.table-section + .table-section){
  color: white;
  height: 200px;
  overflow-y: scroll;
}

.friends p{
  color: white !important;
}

.friends a p:hover{
  color: rgb(197, 66, 111) !important;
}

.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add friend */
	content: url(https://external-media.spacehey.net/media/sg_F-g0ujCGv1He0p-ei5qErMaFMZAoo50G-zdYbnp5k=/https://pixels.crd.co/assets/images/gallery16/d5f57095.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://external-media.spacehey.net/media/sPvxONWiYqg_fYn3Dy6dcFzfxyhFbXfYxDQ9V8lfvTQo=/https://pixels.crd.co/assets/images/gallery16/e2fbd1bd.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://external-media.spacehey.net/media/s7CfazVHOcR0wxm-z-BC8LHrSQap0Rzt2FurPb23xgU8=/https://pixels.crd.co/assets/images/gallery15/6f52a3fd.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://external-media.spacehey.net/media/sYEUonn1-pRtqvw2N_71ItaKBcrzgDCs2z3-ufavYPIc=/https://pixels.crd.co/assets/images/gallery15/ce8871cc.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://external-media.spacehey.net/media/sdoSJSIAd2lN7d0j-LjHqa4_v9jLeE2Yr5LRanvG1VZ0=/https://pixels.crd.co/assets/images/gallery16/10da3fd5.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://external-media.spacehey.net/media/sTX6Lg8DeEmVEOc7DjITWyOn9vLxFYGien7K73xHVa9w=/https://pixels.crd.co/assets/images/gallery16/04226347.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://external-media.spacehey.net/media/sTnitlNwJ5LFZAOkVjlMysiZdBYylF2xyTXYGwEWj9hc=/https://pixels.crd.co/assets/images/gallery15/e8b3f1aa.gif?v=b496e8e4);
  font-size: 12px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://external-media.spacehey.net/media/su03hx6Bq5lOLKr_VPcs-QmvJsI7-4sjR3OMXOtJU8VE=/https://64.media.tumblr.com/49695d23834b081c96a09d77da7cbefa/49148566a2e0c40c-72/s75x75_c1/13c9122dadc3da1e4a6a3e6811d593e1f876ec60.gifv);
  font-size: 12px;
}

.icon{
  content: url(https://external-media.spacehey.net/media/sYAlkSy22YeDISEsOxJCOBN01Luu8PiMygfkrPxVXJwg=/https://pixels.crd.co/assets/images/gallery15/e21e0810.gif?v=b496e8e4);
}

table.comments-table{
  border: dashed 2px white;
}

#comments{
  height: 200px;
  overflow-y: scroll;
}

.comments-table td, .comment-replies{
  border: none;
}

.profile-pic {
-webkit-mask-image: url(https://external-media.spacehey.net/media/sl6OGbVxiakqIoftpvxqhvgoanMfRlpg16x1Mk2u9epw=/https://marketplace.canva.cn/okGJA/MAEt5ookGJA/1/tl/canva-star-shape-icon-MAEt5ookGJA.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.profile .friends .person img:not(.icon) {
-webkit-mask-image: url(https://external-media.spacehey.net/media/s6exBT3BsUQF54wGGweITP2LZoS04USdeMUlyqLRp2MY=/https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.comments-table td:first-child img:not(.icon) {
-webkit-mask-image: url(https://external-media.spacehey.net/media/s6exBT3BsUQF54wGGweITP2LZoS04USdeMUlyqLRp2MY=/https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

:root {
--logo-blue: white;
--lighter-blue: rgb(195, 84, 122, 0.5);
--light-orange: rgb(195, 84, 122, 0.5);
--dark-orange: white;
--even-lighter-orange: rgb(195, 84, 122, 0.5);
--lightest-blue: none;
--even-lighter-blue: none;
}

::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
  background: none;
  border-radius: 100vw;
  margin-block: .5em;
}

::-webkit-scrollbar-thumb {
  background: rgb(236, 140, 172);
  border: .25em;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
   background: rgb(195, 84, 122);
}
</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 )

⋆｡‧˚ʚKOTOɞ˚‧｡⋆	1704354409 using!!! Report Comment
! MEL (active on tiktok)	1703797374 USING Report Comment
KAKE! ⭐	1701888059 using!! Report Comment
Venessa	1701391893 is there a way i can make it show my whole profile at once without the scrollwheel? fine if not i just dont know how to code and was curious <3 Report Comment yeah! in this part: main{ background: rgb(236, 140, 172, 0.7); color: white; height: 400px; overflow-y: scroll; border: dashed 2px white; } take this out: height: 400px; overflow-y: scroll; by ⨂ valerie vengeance ⨂; 1701392242; Report omg ty! <3 by Venessa; 1701392328; Report yw ^_^ by ⨂ valerie vengeance ⨂; 1701392374; Report
Venessa	1701391545 using <3 Report Comment
娜塔莎	1700630318 using!! ** Report Comment
Yur1!! X3	1700485435 USINGG!! :D Report Comment
Jay	1700342688 I’m going to use it its so cute !! Report Comment thanks :] by ⨂ valerie vengeance ⨂; 1700342725; Report
cherri	1700054877 usinf Report Comment