Element/Group not appearing on document

September 26, 2022

I’m trying to make a popup in HTML but it doesn’t seem to appear on the webpage.

This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup</title>
    <link rel="stylesheet" href="styles/popups.css">
</head>
<body>
    <div class="ssc-popup-group" id="ssc-popup">
        <div class="ssc-popup-main popup-main">
            <div class="ssc-popup-text-group popup-text-group">
                <div class="ssc-popup-title popup-title">Society, Social Interaction and Culture</div>
                <div class="ssc-popup-concept-text">
                    <div class="ssc-popup-concept-title popup-text-title">Concepts</div>
                    <div class="ssc-popup-concept-text1 popup-text">Social Interaction › 
                        <br>Society › 
                    </div>
                    <div class="ssc-popup-concept-text2 popup-text">
                        Social interaction is an exchange between two or more individuals.
                        <br>A society is a group of people who share a culture or an idea.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

.scc-popup-group{
    background-color: white;
    border-radius: 20px;
}

.scc-popup-main{
    background-color: rgb(100, 107, 112);
    background-image: url(/images/culture_module_bg.jpeg);
    background-blend-mode: multiply;
    margin: 10px;
    border-radius: 15px;
}

.ssc-popup-text-group{
    text-align: center;
    font-family: Nunito, Arial;
    color: white;
}

.popup-text-title{
    font-weight: bold;
    font-size: 20px;
}

I’ve tried changing the background color to black and the text color to black as well. It still doesn’t appear on the webpage.