<body>
        <div class="Character">
            <div class="Owner">
                <img class="Image" src="Images/Bubble.jpg" />
            </div>
        </div>

        <div class="Contain">
            <div class="TitleCard">Black Jack</div>
            <div class="TheCards">Cards:</div>
            <div class="TheResult">Sum:</div>
            <div class="TheEnd">Status:</div>
            <div class="CardDeck"></div>
            <div class="ForButton">
                <button class="TheButton">Start Game</button>
                <button class="NewButton">Draw a Card?</button>
                <div class="Card"></div>
                <div class="Intro">Want to play BlackJack?</div>
            </div>
        </div>
body {
    max-width: 800px;
    margin: auto;
    background-color: black;
}

/*==============Dealer picture==============================================*/
.Owner {
    background-image: url("Images/Dealer.jpg");
    min-height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 20px;
}

/*==============Image========================================*/
.Image {
    height: 200px;
    background-repeat: repeat;
    border: solid;
    position: relative;
    top: 100px;
    left: 300px;
}

/*===========================Character FOR BUBBLE AND DEALER======================================*/

.Character {
}
/*===========================Container=========================================*/

.Contain {
    margin: 20px;
    border: solid;
    background-image: url("Images/BlackJack.jpg");
}

/*====================================Title Card===============================================*/

.TitleCard {
    color: purple;
    text-align: center;
    font-size: 30px;
    display: none;
}

/*======================================The Cards=================================================*/

.TheCards {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    display: none;
}

/*=======================================The Result=========================================================*/
.TheResult {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    display: none;
}

/*==============================================The CardDeck===============================================================*/

.CardDeck {
    height: 75px;
    width: 50px;
    border: solid;
    display: none;
    margin-top: 30px;
    margin-left: 20px;
    background-image: url("Images/Deck.jpg");
    background-repeat: no-repeat;
}

/*===================================================The Status===============================================================*/

.TheEnd {
    color: white;
    text-align: center;
    font-size: 20px;
    display: none;
}

/*===================================================For Button(CONTAINER) w/ buttons inside==========================================================================*/

.ForButton {
    display: flex;
    justify-content: center;
    height: 100px;
    align-items: center;
    border: solid;
}

.TheButton {
    margin: 10px;
    color: green;
}
/*===================================================For Intro======================================================*/

.Intro {
    margin: 10px;
    color: white;
    font-size: 20px;
}
/*==================================STARTING GAME==================================================================================*/

.NewButton {
    display: none;
    color: brown;
    border: solid;
}

.CardDeck {
    background-image: url("Images/Deck.jpg");
}
class Deal {
    constructor() {
        const DealerAnimation = gsap.from(".Owner", {
            opacity: -1,
            duration: 3,
        });
    }
}

let animation = new Deal();

// =======================STARTING THE GAME========================================
let TitleCard = document.querySelector(".TitleCard"); // BlackJack
let TheCards = document.querySelector(".TheCards"); // Cards:
let TheResult = document.querySelector(".TheResult"); // Sum:
let TheStatus = document.querySelector(".TheEnd"); // Status:
let CardDeck = document.querySelector(".CardDeck"); // IMAGE OF CARD DECK
let Animate = document.querySelector(".Card"); // Card Animation
// Buttons

let TheIntro = document.querySelector(".Intro"); // Want to play black jack?
let TestButton = document.querySelector(".TheButton"); // Start Game
let ForButton = document.querySelector(".ForButton"); // Container for the Buttons

let TheImage = document.querySelector(".CardDeck");
let NewButton = document.querySelector(".NewButton"); //[Draw a card?]

TestButton.addEventListener("click", Test2);
// EXECUTING GAME

function Test2() {
    //Draw a Card
    NewButton.style.display = "block";
    //Title
    TitleCard.style.display = "block";
    //TheCards
    TheCards.style.display = "block";
    //TheResult
    TheResult.style.display = "block";
    //TheStatus
    TheStatus.style.display = "block";
    //CardDeck
    CardDeck.style.display = "block";

    // TESTBUTTON AND INTRO
    TestButton.style.display = "none";
    TheIntro.style.display = "none";

    //IMAGE OF CARD DECK

    ForNewButton(ForButton);

    function ForNewButton(a) {
        a.style.justifyContent = "normal";
        a.style.margin = "10px";
        a.style.marginTop = "30px";
    }
}

// WHEN COMING BACK: FIX CARD IMAGE AND WORK ON ANIMATIONS

//========================FOR "DRAW A CARD" BUTTON========================================

NewButton.addEventListener("click", Test3);

function Test3() {
    let Random = Math.floor(Math.random() * 3);

    if (Random === 2) {
        Animate.style.color = "blue";
        Animate.style.backgroundImage = "url(Images/TwoCard.jpg)"; // .CARD
        Animate.style.height = "75px";
        Animate.style.width = "45px";
        Animate.style.margin = "10px";

        gsap.from(".Card", {
            duration: 1,
            y: "-100px",
            x: "-100px",
        });
    }
    /*if (Random === 3) {
        CreateButton.style.color = "yellow";
        ChildForCards.style.backgroundImage = "url(Images/ThirdCard.jpg)";
        ChildForCards.style.height = "75px";
        ChildForCards.style.width = "45px";
    }*/
    if (Random === 4) {
        CreateButton.style.color = "lightBlue";
    }
    if (Random === 5) {
        CreateButton.style.color = "purple";
    }
    if (Random === 6) {
        CreateButton.style.color = "black";
    }
    if (Random === 7) {
        CreateButton.style.color = "orange";
    }
    if (Random === 8) {
        CreateButton.style.color = "brown";
    }
    if (Random === 9) {
        CreateButton.style.color = "lightGreen";
    }
    if (Random === 10) {
        CreateButton.style.color = "lightpurple";
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.