CodePen Embed - Game play page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S9Game</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <!-- Header Section -->
    <header class="header">
        <nav>
            <ul>
                <li><a href="#" class="logo">S9Game</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Tournaments</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Banner Section -->
    <section class="banner">
        <h1>Welcome to S9Game</h1>
        <p>Play now and win big!</p>
        <a href="https://s9game.vip/?from_gameid=5044767&channelcode=4050000" target="_blank" class="play-button">Play Now</a>
    </section>
    
    <!-- Game List Section -->
    <section class="game-list">
        <h2>Popular Games</h2>
        <ul>
            <li>
                <img src="game1.png" alt="Game 1">
                <h3>Game 1</h3>
                <p>Play now and win!</p>
            </li>
            <li>
                <img src="game2.png" alt="Game 2">
                <h3>Game 2</h3>
                <p>Play now and win!</p>
            </li>
            <!-- Add more games here -->
        </ul>
    </section>
    
    <!-- Modal Popup -->
    <div class="modal" id="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Modal Title</h2>
            <p>Modal content...</p>
        </div>
    </div>
    
    <!-- Footer Section -->
    <footer class="footer">
        <p>&copy; 2024 S9Game. All rights reserved.</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2; /* Light gray background */
}

.header {
    background-color: #333; /* Dark gray header */
    color: #fff;
    padding: 1em;
    text-align: center;
}

.header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.header nav ul li {
    margin-right: 20px;
}

.header nav a {
    color: #fff;
    text-decoration: none;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.banner {
    background-image: linear-gradient(to bottom, #4CAF50, #8BC34A); /* Green gradient banner */
    background-size: 100% 300px;
    background-position: 0% 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.banner h1 {
    font-size: 36px;
}

.play-button {
    background-color: #fff; /* White play button background */
    color: #333; /* Dark gray play button text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.play-button:hover {
    background-color: #ddd; /* Light gray play button hover background */
}

.game-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff; /* White game list background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.game-list li {
    margin: 20px;
    width: calc(33.33% - 20px);
}

.game-list img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}
.game-list h3 {
    font-size: 18px;
    margin-top: 10px;
}

.footer {
    background-color: #333; /* Dark gray footer */
    color: #fff;
    padding: 1em;
    text-align: center;
    clear: both;
}

/* Modal Popup Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
    .game-list li {
        width: calc(50% - 20px);
    }
}

@media only screen and (max-width: 480px) {
    .game-list li {
        width: 100%;
    }
    .banner {
        height: 200px;
    }
    .banner h1 {
        font-size: 24px;
    }
}

// Get the modal element
var modal = document.getElementById('modal');

// Get the button that opens the modal
var btn = document.getElementById('myBtn');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = 'block';
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = 'none';
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}

This Pen is owned by babar ali pk on CodePen.

See more by @babar-ali-the-writer on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.