Build a Page of Playing Cards - Build a Page of Playing Cards

Curriculum Help
1

Tell us what’s happening:

I can’t really get the 12 and 13 right, in my codebase they are already there but it seems like the “checking” reads it as false, could somebody help me pls?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="playing-cards">
        <div class="card">
            <div class="left">
                <p class="number">A</p>
            </div>
            <div class="middle">
                <p class="red">♥</p>
            </div>
            <div class="right">
                <p class="number">A</p>
            </div>
        </div>
        <div class="card">
            <div class="left">
                <p class="number">2</p>
            </div>
            <div class="middle">
                <p class="black">♠</p>
            </div>
            <div class="right">
                <p class="number">2</p>
            </div>
        </div>
        <div class="card">
            <div class="left">
                <p class="number">3</p>
            </div>
            <div class="middle">
                <p class="red">♦</p>
            </div>
            <div class="right">
                <p class="number">3</p>
            </div>
        </div>
    </main>
</body>
</html>


/* file: styles.css */
body {
    background-color: #D9C4EC;
}

.card {
    height: 400px;
    width: 17%;
    border: 3px solid black;
    background-color: aliceblue;
    border-radius: 50px;

}

#playing-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    display: flex;
    justify-content: space-between;
}

.left {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    align-self: flex-start;
}

.middle {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-self: center;

}
.right {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    margin-right: 20px; 
}

.red {
    color: red;
    font-size: 4em
}

.black {
    color: black; 
    font-size: 4em
}

.number {
    font-size: 1.5em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5.2 Safari/605.1.15

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @Gearzx,

You have two .card selectors in your CSS. Please combine them to pass the tests.

Happy coding

3

thank u so much I feel so stupid now LMAO