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.  
  8.   <link href="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  9.   <link rel="stylesheet" href="https://c...content-available-to-author-only...r.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  10.  
  11.   <style> 
  12.     body {
  13.       background-color: bisque;
  14.     }
  15.  
  16.     .card-img-top {
  17.       width: 200px;
  18.       height: 200px;
  19.       object-fit: cover;
  20.       border-radius: 50%;
  21.       margin: 20px auto 0;
  22.     }
  23.  
  24.     .card {
  25.       text-align: center;
  26.       padding-bottom: 20px;
  27.     }
  28.   </style>
  29. </head>
  30. <body>
  31.  
  32. <!-- Navbar -->
  33. <nav class="navbar navbar-dark bg-dark px-4">
  34.   <a class="navbar-brand" href="index.html"><i class="bi bi-arrow-left"></i> กลับหน้าแรก</a>
  35. </nav>
  36.  
  37. <!-- Header -->
  38. <header class="text-dark text-center py-5">
  39.   <h2 class="display-6">รวมจังหวัดยอดนิยมในภาคใต้ของไทย</h2>
  40. </header>
  41.  
  42. <!-- Cards -->
  43. <div class="container">
  44.   <div class="row justify-content-center">
  45.  
  46.     <!-- แหลมกระทิง -->
  47.     <div class="col-md-4 mb-4">
  48.       <div class="card">
  49.         <img src="https://w...content-available-to-author-only...r.com/wp-content/uploads/2021/02/1612156854186-01-1-scaled-e1619416679843-1024x768.jpeg" class="card-img-top" alt="แหลมกระทิง">
  50.         <div class="card-body">
  51.           <h5 class="card-title">แหลมกระทิง</h5>
  52.           <p class="card-text">จังหวัดภูเก็ต</p>
  53.           <a href="lham.html" class="btn btn-primary">ดูเพิ่มเติม</a>
  54.           <a href="https://m...content-available-to-author-only...o.gl/pCQeUvL2RkXM2V5N8" class="btn btn-outline-primary">ดูแผนที่</a>
  55.         </div>
  56.       </div>
  57.     </div>
  58.  
  59.     <!-- เสม็ดนางชี -->
  60.     <div class="col-md-4 mb-4">
  61.       <div class="card">
  62.         <img src="https://w...content-available-to-author-only...m.com/img/krabi-thailand.jpg" class="card-img-top" alt="เสม็ดนางชี">
  63.         <div class="card-body">
  64.           <h5 class="card-title">เสม็ดนางชี</h5>
  65.           <p class="card-text">จังหวัดพังงา</p>
  66.           <a href="sahmed.html" class="btn btn-primary">ดูเพิ่มเติม</a>
  67.         </div>
  68.       </div>
  69.     </div>
  70.  
  71.     <!-- ถ้ำภูผาเพชร -->
  72.     <div class="col-md-4 mb-4">
  73.       <div class="card">
  74.         <img src="https://m...content-available-to-author-only...t.com/images/105658195/image.jpg" class="card-img-top" alt="ถ้ำภูผาเพชร">
  75.         <div class="card-body">
  76.           <h5 class="card-title">ถ้ำภูผาเพชร</h5>
  77.           <p class="card-text">จังหวัดสตูล</p>
  78.           <a href="cave.html" class="btn btn-primary">ดูเพิ่มเติม</a>
  79.         </div>
  80.       </div>
  81.     </div>
  82.  
  83.   </div>
  84. </div>
  85.  
  86. <!-- Bootstrap JS -->
  87. <script src="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  88. </body>
  89. </html>
  90.  
Success #stdin #stdout 0.04s 25568KB
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>

  <link href="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://c...content-available-to-author-only...r.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  <style> 
    body {
      background-color: bisque;
    }

    .card-img-top {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 50%;
      margin: 20px auto 0;
    }

    .card {
      text-align: center;
      padding-bottom: 20px;
    }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark px-4">
  <a class="navbar-brand" href="index.html"><i class="bi bi-arrow-left"></i> กลับหน้าแรก</a>
</nav>

<!-- Header -->
<header class="text-dark text-center py-5">
  <h2 class="display-6">รวมจังหวัดยอดนิยมในภาคใต้ของไทย</h2>
</header>

<!-- Cards -->
<div class="container">
  <div class="row justify-content-center">

    <!-- แหลมกระทิง -->
    <div class="col-md-4 mb-4">
      <div class="card">
        <img src="https://w...content-available-to-author-only...r.com/wp-content/uploads/2021/02/1612156854186-01-1-scaled-e1619416679843-1024x768.jpeg" class="card-img-top" alt="แหลมกระทิง">
        <div class="card-body">
          <h5 class="card-title">แหลมกระทิง</h5>
          <p class="card-text">จังหวัดภูเก็ต</p>
          <a href="lham.html" class="btn btn-primary">ดูเพิ่มเติม</a>
          <a href="https://m...content-available-to-author-only...o.gl/pCQeUvL2RkXM2V5N8" class="btn btn-outline-primary">ดูแผนที่</a>
        </div>
      </div>
    </div>

    <!-- เสม็ดนางชี -->
    <div class="col-md-4 mb-4">
      <div class="card">
        <img src="https://w...content-available-to-author-only...m.com/img/krabi-thailand.jpg" class="card-img-top" alt="เสม็ดนางชี">
        <div class="card-body">
          <h5 class="card-title">เสม็ดนางชี</h5>
          <p class="card-text">จังหวัดพังงา</p>
          <a href="sahmed.html" class="btn btn-primary">ดูเพิ่มเติม</a>
        </div>
      </div>
    </div>

    <!-- ถ้ำภูผาเพชร -->
    <div class="col-md-4 mb-4">
      <div class="card">
        <img src="https://m...content-available-to-author-only...t.com/images/105658195/image.jpg" class="card-img-top" alt="ถ้ำภูผาเพชร">
        <div class="card-body">
          <h5 class="card-title">ถ้ำภูผาเพชร</h5>
          <p class="card-text">จังหวัดสตูล</p>
          <a href="cave.html" class="btn btn-primary">ดูเพิ่มเติม</a>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://c...content-available-to-author-only...r.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
https://ideone.com/6yankk
language:
PHP (php 7.3.5)
created:
4 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!