Pink Hearts Layout

Tags: simple, pink, hearts, valentines, side nav, animation

Description:

A simple layout as described in title complete with profile image hover animations and a giant floating heart. To use, simply put all of the code in your blurbs. Make sure to not add an extra style tag at the start. This is a very simple layout, but it’s my first published one. It’s not tested on mobile, so sorry if you have issues. If the images aren’t loading please comment about it and I will get with you as soon as I can. Thank you!

Preview:

click on the image for a larger preview

Code:

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

<div class="canvas">
<div class="middlebg">
</div>
</div>
<div class="heart">
<img src="https://www.dropbox.com/scl/fi/00ehzzfakc6lb4xj1bkq9/heart-icon.svg?rlkey=bkm0ttrzkf74pgrk9zhjppwsy&raw=1"/>
</div>
<style>


* {
cursor: url('http://www.rw-designer.com/cursor-extern.php?id=187379'), auto;
}
body {
background-image: url(https://www.dropbox.com/scl/fi/uujhv09x1ilrfoc5q2szj/heart-pattern.png?rlkey=fcgo7x4wjtxconqug926mwlq4&raw=1);
background-size: 100px 100px;
overflow-x: hidden;
}

.container {
width: 730px;
}

nav .links a {
  text-shadow: 0px 0px transparent;
}
nav {
width: 82px;
float: left;
}
nav .top {
background: #FF51AE;
width: 730px;
}
nav .links {
background: #FFAAD9;
min-height: 400px;
max-height: 500px;
line-height: 30px;
border-radius: 0px 0px 0px 30px;
padding-bottom: 14px;
padding-left: 13px;
}

main {
padding-top: 80px;
width: 648px;
float: left;
background:white;
border: outset 6px white;
border-radius: 0px 0px 100px 0px;
margin-bottom: 10px;
}

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

.profile-pic {
position: relative;
width: 150px;
}


.profile-pic::before{
content: "";
background: url('https://www.dropbox.com/scl/fi/qovgjorrrboxqgvyrrtgx/gradient.png?rlkey=iiq1ibqquqkamco5ny0wzbqz6&raw=1');
background-size: cover;
position: absolute;
bottom: 1px;
left: -4px;
width: 168px;
height: 168px;
cursor-event:none;
filter: brightness(0) saturate(100%) invert(72%) sepia(97%) saturate(4909%) hue-rotate(301deg) brightness(103%) contrast(101%);
}

.profile-pic img:hover {
animation: pulse 1s infinite alternate;
}

.general-about .profile-pic {
width: 140px;
}

.general-about .profile-pic img{
-webkit-mask-image: url(https://www.dropbox.com/scl/fi/00ehzzfakc6lb4xj1bkq9/heart-icon.svg?rlkey=bkm0ttrzkf74pgrk9zhjppwsy&raw=1)!important;

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform: scale(0.9, 0.9);
}

.canvas {
position: absolute;
top: 0px;
left: 0px;
width: 99vw;
height: 100vh;
background: transparent;
pointer-events: none;
}
.middlebg {
background-color: var(--gray);
height: 300vh;
position: fixed;
z-index: -1;
margin: 0px auto 0px;
width: 900px;
left: 0;
right:0;
box-shadow: 0px 0px 50px #FF51AE;

}
 	.heart {
transform-origin: 200% 200%;
        animation: fall 21s ease-in-out infinite alternate, wobble 5s ease-in-out infinite alternate;
position: absolute;
width: 100px;
filter: invert(49%) sepia(21%) saturate(5305%) hue-rotate(301deg) brightness(103%) contrast(102%) drop-shadow(0px 0px 5px white);
transition: 0.5s;
 	}
 	 
 	@keyframes fall {
  from {left: 0%;}
  to {left: 100%;}
}
@keyframes wobble {
  from {transform: translate(0px, 250px);}
  to {transform: translate(0px, -250px);}
}
@keyframes pulse {
  from {transform: scale(0.9, 0.9);}
  to {transform: scale(1, 1);}
}

main a {
color: #FF0090;
}

main a:hover {
color: #A5005D;
}

.profile-info {
border: double 6px #FFAAD9;
}

.profile-info a:before {
content: "♡ ";
}

.profile-info a:after {
content: " ♡";
}

.url-info {
border: double 6px #FFAAD9 !important;
}

.contact {
background: #FF51AE !important;
border: 0px !important;
}

.contact a {
color: white;
}

.contact img {
display: none;
}
.contact a:before {
content: "♡ "
}

.contact .heading {
background: transparent !important;
}

.comments-table {
margin-bottom: 30px;
border-radius: 20px 0px;
border: double 6px #FFAAD9;
}

.comments-table td:first-child {
background: transparent !important;
border: 0px;
border-right: solid 2px #FFAAD9;
}
.comments-table td:last-child {
background: transparent !important;
border: 0px;
}

.heading {
border-radius: 10px 0px;
background: #FF51AE !important;
color: white !important; 
}

.heading a {
color: white !important; 
}

.section h4 {
color: #FF51AE !important;
}

.online img {
content: url(https://www.dropbox.com/scl/fi/00ehzzfakc6lb4xj1bkq9/heart-icon.svg?rlkey=bkm0ttrzkf74pgrk9zhjppwsy&raw=1);
animation: pulse 0.5s alternate infinite;
width: 5%;
height: 1%;
margin-right: -1px;
filter: brightness(0) saturate(100%) invert(28%) sepia(88%) saturate(1644%) hue-rotate(84deg) brightness(100%) contrast(102%);
}
.table-section {
border: 0px !important;
}
.icon {
content: url(https://www.dropbox.com/scl/fi/00ehzzfakc6lb4xj1bkq9/heart-icon.svg?rlkey=bkm0ttrzkf74pgrk9zhjppwsy&raw=1);
filter: invert(100%);
}

.details-table tr td:first-child {
background: #FFAAD9;
color: #FF51AE;
}
.details-table tr td:last-child {
background: #FFCCE8;
color: #A5005D;
}

.count {
color: #A5005D;
}

footer:after {
content: "Layout made by Agares";
}

.comment-replies {
border: solid 2px #FFCCE8;
}
h1:first-letter {
font-size: 125%;
}
h1 {
letter-spacing: -0.5px;
font-size: 135%;
text-shadow: 0px 5px 10px #FFAAD9;
}
</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 10 of 10 comments ( View all | Add Comment )

✰𝓙𝓾𝔃𝓸/𝓭𝓪𝓮𝔃𝓪༄	1713903079 using Report Comment
𐔌 . Karoliine ! ୧	1713727870 using Report Comment
mari	1710326113 usando:) Report Comment
♱Gothic doll	1710107008 using Report Comment
Anagelic	1710024730 using Report Comment
XyziiSP 🌠	1709910328 Using!! Report Comment
reagan	1709869937 using <3 Report Comment
ale	1709743449 using, thx 💗 Report Comment
mar	1709682177 using! <3 Report Comment
Rina	1709633252 using Report Comment