Responsive card using HTML, CSS and JavaScript

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">

📌 Some suggestions

• Instead of using position to center your content in the center of the screen, you can use the flexbox or grid properties in the body. You will no longer need the div with class BackgroundBody:

body {
    background-color: hsl(275, 100%, 97%);
    background-image: url(./assets/images/background-pattern-desktop.svg);
    background-repeat: no-repeat;
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.container {
    border-radius: 20px;
    background-color: white;
    /* margin: 15% 35%; There's no need */
    padding: 25px;
    text-align: justify;
    /* position: absolute; There's no need */
}