style.css

*,
*::before,
*::after
{
    box-sizing: border-box;
}

body, html
{
    font-family: "poppins", sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 12pt;
    font-weight: 400;
    color: black;
}

body
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(125deg, mediumorchid, rgb(255, 32, 255));
    margin: 0;
    padding: 0;
}

/* white bg and top right Strip */
div
{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    min-width: 400px;
    min-height: 250px;
    max-width: 400px;
    max-height: 400px;
    background: linear-gradient(35deg, white 0%, white 84.7%, mediumorchid 85%, mediumorchid 91%, white 91.3%);
    box-shadow: 0 10px 60px 0 darkviolet, inset 0px -10px 17px 2px mediumorchid;
    border-radius: 25px;
    z-index: -1;
}

/* bottom circle */
div::before
{
    position: absolute;
    backdrop-filter: blur(5px);
    bottom: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    content: "";
    border-radius: 200px;
    background: #ffffff66;
    box-shadow: 0 10px 25px 0 darkviolet, inset 0px -8px 15px 0px purple;
    border: 0.1px solid transparent;
}

/* content  */
div > p
{
    position: relative;
    right: 5px;
    font-size: 24pt;
    font-weight: 900;
    margin: 0;
    padding: 20px 35px 10px 25px;
    line-height: 36pt;
    text-align: center;
    color: #3d0d49;
    align-self: center;
    order: 2;
}

/* horizontal Strip */
div > p > span
{
    position: absolute;
    bottom: 4px;
    left: 45px;
    width: 55%;
    height: 20px;
    background: mediumorchid;
    content: "";
    z-index: -1;
}

/* year */
div > p > i 
{
   color: white;
   text-shadow: 1px 1px 0px mediumorchid, 2px 2px 0px mediumorchid, 
               3px 3px 0px mediumorchid, -1px -1px 0px mediumorchid;
}

/* clay an glSS TEXT with bg and bottom right circle */
div::after
{
    backdrop-filter: blur(5px);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding-left: 20px;
    padding-bottom: 28px;
    top: -35px;
    left: -23px;
    width: 50%;
    height: 50%;
    background: #ffffff55;
    content: "Glassmorphism + Claymorphism";
    text-align: center;
    color: #3e0d4a;
    line-height: 16pt;
    font-weight: 700;
    border-radius: 15px;
    box-shadow: 0 5px 30px 0 mediumorchid, inset 0px -10px 20px 0px #ba55d3bb;
    border: 0.1px solid transparent;
}

/* image and and make the top left glass */
div > div
{
    all: unset;
    position: relative;
    width: 150px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 35px 0px 40px 30px;
    border-radius: 15px;
    background: url("https://picsum.photos/id/640/1280/800");
    background-size: cover;
    background-position: center;
    border: 0.1px solid mediumorchid;
    z-index: -1;
}

/* make the image color to bg color */
div > div::before
{
    all: unset;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: mediumorchid;
    mix-blend-mode: color;
    border-radius: 15px;
}

/* vanish the top left glass and its texts */
div  > div::after
{
    all: unset;

}