style.css

*{
    box-sizing: border-box;
}

body{
    font-family: 'Roboto', 'sans-serif';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* overflow: hidden; */
    margin: 0;
}

.bg{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-color: #0b1522;
    z-index: 999;
}

.heart{
    height: 2rem;
    width: 2rem;
    background: #f20044;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 20px 90px #f20044;
    animation: heart .6s linear infinite;
}
.heart::before{
    content: '';
    position: absolute;
    height: 2rem;
    width: 2em;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px 20px 90px #f20044;
}
.heart::after{
    content: '';
    position: absolute;
    height: 2rem;
    width: 2rem;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: -10px 20px 90px #f20044;
}
@keyframes heart{
    0%{
        transform: rotate(-45deg) scale(1.2);
    }
    80%{
        transform: rotate(-45deg) scale(1.0);
    }
    100%{
        transform: rotate(-45deg) scale(.8);
    }
}

.fade{
    opacity: 0;
    animation: fade 2s;
    animation-iteration-count: 1;
}
@keyframes fade{
    0%{
        opacity: 1;
    }
    50%{
        opacity: .4;
    }
    90%{
        opacity: .1;
    }
}

.content{
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url("https://source.unsplash.com/random/1000x1000") center no-repeat;
    background-size: cover;
}