fork download
copy 
  1. your-website/
  2. │
  3. ├── index.html
  4. ├── style.css
  5. └── images/ (โฟลเดอร์สำหรับเก็บรูปภาพสินค้า)
  6. <!DOCTYPE html>
  7. <html lang="th">
  8. <head>
  9.     <meta charset="UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>ร้านค้าออนไลน์</title>
  12.     <link rel="stylesheet" href="style.css">
  13. </head>
  14. <body>
  15.     <header>
  16.         <div class="container">
  17.             <h1>ร้านค้าออนไลน์</h1>
  18.             <nav>
  19.                 <ul>
  20.                     <li><a href="#home">หน้าหลัก</a></li>
  21.                     <li><a href="#products">สินค้า</a></li>
  22.                     <li><a href="#contact">ติดต่อ</a></li>
  23.                 </ul>
  24.             </nav>
  25.         </div>
  26.     </header>
  27.  
  28.     <section id="home" class="hero">
  29.         <div class="container">
  30.             <h2>ยินดีต้อนรับสู่ร้านค้าออนไลน์</h2>
  31.             <p>พบกับสินค้าคุณภาพดีราคาย่อมเยาว์</p>
  32.             <a href="#products" class="btn">ดูสินค้า</a>
  33.         </div>
  34.     </section>
  35.  
  36.     <section id="products" class="products">
  37.         <div class="container">
  38.             <h2>สินค้าของเรา</h2>
  39.             <div class="product-grid">
  40.                 <div class="product">
  41.                     <img src="images/product1.jpg" alt="สินค้า 1">
  42.                     <h3>สินค้า 1</h3>
  43.                     <p>รายละเอียดสินค้า 1</p>
  44.                     <p>ราคา: ฿100</p>
  45.                     <button>เพิ่มลงตะกร้า</button>
  46.                 </div>
  47.                 <div class="product">
  48.                     <img src="images/product2.jpg" alt="สินค้า 2">
  49.                     <h3>สินค้า 2</h3>
  50.                     <p>รายละเอียดสินค้า 2</p>
  51.                     <p>ราคา: ฿150</p>
  52.                     <button>เพิ่มลงตะกร้า</button>
  53.                 </div>
  54.                 <!-- เพิ่มสินค้าเพิ่มเติมที่นี่ -->
  55.             </div>
  56.         </div>
  57.     </section>
  58.  
  59.     <section id="contact" class="contact">
  60.         <div class="container">
  61.             <h2>ติดต่อเรา</h2>
  62.             <p>หากมีคำถามหรือข้อสงสัย กรุณาติดต่อเราได้ที่:</p>
  63.             <p>Email: info@example.com</p>
  64.             <p>โทรศัพท์: 02-123-4567</p>
  65.         </div>
  66.     </section>
  67.  
  68.     <footer>
  69.         <div class="container">
  70.             <p>&copy; 2023 ร้านค้าออนไลน์. สงวนลิขสิทธิ์.</p>
  71.         </div>
  72.     </footer>
  73. </body>
  74. </html>
Success #stdin #stdout 0.03s 25348KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
your-website/
│
├── index.html
├── style.css
└── images/ (โฟลเดอร์สำหรับเก็บรูปภาพสินค้า)
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ร้านค้าออนไลน์</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>ร้านค้าออนไลน์</h1>
            <nav>
                <ul>
                    <li><a href="#home">หน้าหลัก</a></li>
                    <li><a href="#products">สินค้า</a></li>
                    <li><a href="#contact">ติดต่อ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="home" class="hero">
        <div class="container">
            <h2>ยินดีต้อนรับสู่ร้านค้าออนไลน์</h2>
            <p>พบกับสินค้าคุณภาพดีราคาย่อมเยาว์</p>
            <a href="#products" class="btn">ดูสินค้า</a>
        </div>
    </section>

    <section id="products" class="products">
        <div class="container">
            <h2>สินค้าของเรา</h2>
            <div class="product-grid">
                <div class="product">
                    <img src="images/product1.jpg" alt="สินค้า 1">
                    <h3>สินค้า 1</h3>
                    <p>รายละเอียดสินค้า 1</p>
                    <p>ราคา: ฿100</p>
                    <button>เพิ่มลงตะกร้า</button>
                </div>
                <div class="product">
                    <img src="images/product2.jpg" alt="สินค้า 2">
                    <h3>สินค้า 2</h3>
                    <p>รายละเอียดสินค้า 2</p>
                    <p>ราคา: ฿150</p>
                    <button>เพิ่มลงตะกร้า</button>
                </div>
                <!-- เพิ่มสินค้าเพิ่มเติมที่นี่ -->
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2>ติดต่อเรา</h2>
            <p>หากมีคำถามหรือข้อสงสัย กรุณาติดต่อเราได้ที่:</p>
            <p>Email: info@example.com</p>
            <p>โทรศัพท์: 02-123-4567</p>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2023 ร้านค้าออนไลน์. สงวนลิขสิทธิ์.</p>
        </div>
    </footer>
</body>
</html>
https://ideone.com/Ap2Jml
language:
PHP (php 7.3.5)
created:
18 hours 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!