<!DOCTYPE html>
<html>
<head>
  <title>Roblox-style Webpage with Thumbnails and Genres</title>
  <style>
    /* Reset default styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Apply Roblox-like styles */
    body {
      background-color: #181818;
      font-family: Arial, sans-serif;
      color: #ffffff;
    }

    h1 {
      font-size: 36px;
      font-weight: bold;
      margin: 20px 0;
    }

    p {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .roblox-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }

    .roblox-sidebar {
      display: flex;
      flex-direction: column;
      background-color: #222222;
      padding: 10px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #333333 #222222;
    }

    .roblox-sidebar::-webkit-scrollbar {
      width: 8px;
    }

    .roblox-sidebar::-webkit-scrollbar-track {
      background: #222222;
    }

    .roblox-sidebar::-webkit-scrollbar-thumb {
      background-color: #333333;
      border-radius: 4px;
    }

    .roblox-sidebar button {
      width: 100%;
      padding: 10px;
      background-color: #0084ff;
      color: #ffffff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .roblox-sidebar button:hover {
      background-color: #0066cc;
    }

    .roblox-content {
      flex-grow: 1;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .roblox-genre {
      margin-bottom: 40px;
    }

    .roblox-genre h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    .roblox-game-container {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
    }

    .roblox-game {
      flex: 0 0 300px;
      margin-right: 20px;
    }

    .roblox-game:last-child {
      margin-right: 0;
    }

    .roblox-game img {
      max-width: 100%;
      border-radius: 4px;
    }

    .roblox-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #0084ff;
      color: #ffffff;
      text-decoration: none;
      border-radius: 4px;
      font-size: 18px;
      transition: background-color 0.3s ease;
    }

    .roblox-button:hover {
      background-color: #0066cc;
    }
  </style>
</head>
<body>
  <div class="roblox-container">
    <div class="roblox-sidebar">
      <button>Profile</button>
      <button>Games</button>
      <button>Avatar</button>
      <button>Money</button>
    </div>

    <div class="roblox-content">
      <h1>Welcome to My Roblox-style Webpage</h1>
      <p>Hello! This webpage is designed to resemble the style of Roblox.</p>

      <div class="roblox-genre">
        <h2>Action</h2>
        <div class="roblox-game-container">
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 1 Thumbnail">
            <h3>Game 1</h3>
            <p>Description of Game 1.</p>
            <a href="#" class="roblox-button">Play Game 1</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 2 Thumbnail">
            <h3>Game 2</h3>
            <p>Description of Game 2.</p>
            <a href="#" class="roblox-button">Play Game 2</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 3 Thumbnail">
            <h3>Game 3</h3>
            <p>Description of Game 3.</p>
            <a href="#" class="roblox-button">Play Game 3</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 4 Thumbnail">
            <h3>Game 4</h3>
            <p>Description of Game 4.</p>
            <a href="#" class="roblox-button">Play Game 4</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 5 Thumbnail">
            <h3>Game 5</h3>
            <p>Description of Game 5.</p>
            <a href="#" class="roblox-button">Play Game 5</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 6 Thumbnail">
            <h3>Game 6</h3>
            <p>Description of Game 6.</p>
            <a href="#" class="roblox-button">Play Game 6</a>
          </div>
          <!-- Add more action games here -->
        </div>
      </div>

      <div class="roblox-genre">
        <h2>Adventure</h2>
        <div class="roblox-game-container">
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 7 Thumbnail">
            <h3>Game 7</h3>
            <p>Description of Game 7.</p>
            <a href="#" class="roblox-button">Play Game 7</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 8 Thumbnail">
            <h3>Game 8</h3>
            <p>Description of Game 8.</p>
            <a href="#" class="roblox-button">Play Game 8</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 9 Thumbnail">
            <h3>Game 9</h3>
            <p>Description of Game 9.</p>
            <a href="#" class="roblox-button">Play Game 9</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 10 Thumbnail">
            <h3>Game 10</h3>
            <p>Description of Game 10.</p>
            <a href="#" class="roblox-button">Play Game 10</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 11 Thumbnail">
            <h3>Game 11</h3>
            <p>Description of Game 11.</p>
            <a href="#" class="roblox-button">Play Game 11</a>
          </div>
          <div class="roblox-game">
            <img src="https://via.placeholder.com/300x150" alt="Game 12 Thumbnail">
            <h3>Game 12</h3>
            <p>Description of Game 12.</p>
            <a href="#" class="roblox-button">Play Game 12</a>
          </div>
          <!-- Add more adventure games here -->
        </div>
      </div>

      <!-- Add more genres here -->

    </div>
  </div>
</body>
</html>