fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>โปรโมชั่นและข่าวสาร</title>
  7.     <style>
  8.         body {
  9.             font-family: sans-serif;
  10.             background-color: #fff4d6;
  11.             text-align: center;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         .banner {
  16.             background-color: #ffcc66;
  17.             padding: 20px;
  18.             border-radius: 10px;
  19.             margin: 20px auto;
  20.             width: 80%;
  21.             max-width: 1320px;
  22.         }
  23.         .banner img {
  24.             width: 100%;
  25.             border-radius: 10px;
  26.         }
  27.         .buttons {
  28.             display: flex;
  29.             justify-content: center;
  30.             gap: 10px;
  31.             margin-top: 20px;
  32.         }
  33.         .button {
  34.             background-color: #ffa500;
  35.             padding: 15px;
  36.             border-radius: 10px;
  37.             cursor: pointer;
  38.             color: white;
  39.             font-weight: bold;
  40.             width: 200px;
  41.         }
  42.         .shop {
  43.             margin-top: 30px;
  44.             padding: 20px;
  45.             background-color: #ffd966;
  46.             border-radius: 10px;
  47.             width: 80%;
  48.             max-width: 800px;
  49.             margin-left: auto;
  50.             margin-right: auto;
  51.         }
  52.         .shop-item {
  53.             background-color: #ffb347;
  54.             padding: 10px;
  55.             border-radius: 10px;
  56.             margin: 10px;
  57.         }
  58.         .buy-button {
  59.             background-color: #ff6600;
  60.             color: white;
  61.             padding: 10px;
  62.             border: none;
  63.             border-radius: 5px;
  64.             cursor: pointer;
  65.             margin-top: 10px;
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  70.     <h1>โปรโมชั่นและข่าวสาร</h1>
  71.     <div class="banner">
  72.         <img src="banner-example.jpg" alt="ตัวอย่างแบนเนอร์">
  73.     </div>
  74.     <div class="buttons">
  75.         <div class="button">ตัวอย่าง CLICK!!</div>
  76.         <div class="button">ตัวอย่าง CLICK!!</div>
  77.         <div class="button">ตัวอย่าง CLICK!!</div>
  78.     </div>
  79.  
  80.     <div class="shop">
  81.         <h2>ร้านค้า</h2>
  82.         <div class="shop-item">
  83.             <p>สินค้า 1 - ราคา 100 บาท</p>
  84.             <button class="buy-button">ซื้อเลย</button>
  85.         </div>
  86.         <div class="shop-item">
  87.             <p>สินค้า 2 - ราคา 200 บาท</p>
  88.             <button class="buy-button">ซื้อเลย</button>
  89.         </div>
  90.         <div class="shop-item">
  91.             <p>สินค้า 3 - ราคา 300 บาท</p>
  92.             <button class="buy-button">ซื้อเลย</button>
  93.         </div>
  94.     </div>
  95. </body>
  96. </html>
Success #stdin #stdout 0.04s 25744KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>โปรโมชั่นและข่าวสาร</title>
    <style>
        body {
            font-family: sans-serif;
            background-color: #fff4d6;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .banner {
            background-color: #ffcc66;
            padding: 20px;
            border-radius: 10px;
            margin: 20px auto;
            width: 80%;
            max-width: 1320px;
        }
        .banner img {
            width: 100%;
            border-radius: 10px;
        }
        .buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        .button {
            background-color: #ffa500;
            padding: 15px;
            border-radius: 10px;
            cursor: pointer;
            color: white;
            font-weight: bold;
            width: 200px;
        }
        .shop {
            margin-top: 30px;
            padding: 20px;
            background-color: #ffd966;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .shop-item {
            background-color: #ffb347;
            padding: 10px;
            border-radius: 10px;
            margin: 10px;
        }
        .buy-button {
            background-color: #ff6600;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>โปรโมชั่นและข่าวสาร</h1>
    <div class="banner">
        <img src="banner-example.jpg" alt="ตัวอย่างแบนเนอร์">
    </div>
    <div class="buttons">
        <div class="button">ตัวอย่าง CLICK!!</div>
        <div class="button">ตัวอย่าง CLICK!!</div>
        <div class="button">ตัวอย่าง CLICK!!</div>
    </div>
    
    <div class="shop">
        <h2>ร้านค้า</h2>
        <div class="shop-item">
            <p>สินค้า 1 - ราคา 100 บาท</p>
            <button class="buy-button">ซื้อเลย</button>
        </div>
        <div class="shop-item">
            <p>สินค้า 2 - ราคา 200 บาท</p>
            <button class="buy-button">ซื้อเลย</button>
        </div>
        <div class="shop-item">
            <p>สินค้า 3 - ราคา 300 บาท</p>
            <button class="buy-button">ซื้อเลย</button>
        </div>
    </div>
</body>
</html>
https://ideone.com/FEUckz
language:
PHP (php 7.3.5)
created:
264 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!