A simple version using the HTML and CSS provided
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Georgia', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
section {
position: relative;
}
h1 {
text-transform: none;
margin: 50px;
letter-spacing: -6px;
font-size: 120px;
line-height: 80%;
color: mediumvioletred;
margin-top: 70px;
width: 500px;
}
h3 {
text-transform: none;
margin: 10px;
letter-spacing: -6px;
font-size: 60px;
line-height: 100%;
color: plum;
width: 500px;
}
.glitter {
width: 400px;
height: 340px;
background-image: url(../images/glitterPink.gif);
background-size: 800px;
position: absolute;
bottom: -100px;
left: 500px;
background-color: ;
background-blend-mode: screen;
z-index: 10;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.glitter-shadow {
width: 400px;
height: 340px;
left: 500px;
bottom: -100px;
position: absolute;
}
.glitter-shadow::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: plum;
z-index: 0;
left: -20px;
top: 20px;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
HTML: