styl.css

.r1 {
    margin: 0;
    padding: 0;
    background-image: url('./img/istockphoto-959093714-612x612.jpg'); /* เปลี่ยน 'your-image.jpg' เป็น URL ของรูปภาพที่คุณต้องการใช้ */
    background-size: cover; /* ปรับขนาดให้พอดีกับพื้นที่ */
    background-position: center; /* จัดตำแหน่งให้รูปอยู่ที่กลาง */
    background-repeat: no-repeat; /* ไม่ให้ทำซ้ำ */
    background-color: rgba(0, 0, 0, 0.5); /* ปรับความโปร่งแสงของรูปภาพ */
    /* หรือจะใช้ background-opacity: 0.5; ก็ได้ */
  }
  .r2 {
    margin: 0;
    padding: 0;
    background-image: url('./img/istockphoto-952039286-170667a.webp'); /* เปลี่ยน 'your-image.jpg' เป็น URL ของรูปภาพที่คุณต้องการใช้ */
    background-size: cover; /* ปรับขนาดให้พอดีกับพื้นที่ */
    background-position: center; /* จัดตำแหน่งให้รูปอยู่ที่กลาง */
    background-repeat: no-repeat; /* ไม่ให้ทำซ้ำ */
    background-color: rgba(0, 0, 0, 0.5); /* ปรับความโปร่งแสงของรูปภาพ */
    /* หรือจะใช้ background-opacity: 0.5; ก็ได้ */
  }
  
  button {
    padding: 6px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: rgb(0, 255, 98);
    color: white;
  }
  .button-one {
    padding: 10px 50px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: rgb(0, 8, 255);
    color: white;
  }
  .button-two {
    padding: 10px 1px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    background-color: rgb(166, 0, 255);
    color: white;
  }
  .card {
    border: 1px solid #650ec18b;
    border-radius: 8px;
    padding: 30px;
    max-width: 100%;
    margin: 30px auto; /* เพิ่ม margin เพื่อย้ายการ์ดลงข้างล่างอีก */
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    text-align: center; /* จัดให้ข้อความอยู่ตรงกลาง */
    margin-top: 10px; /* เพิ่มระยะห่างด้านบน */
    margin-bottom: 10px; /* เพิ่มระยะห่างด้านล่าง */
    
  }
  #demoButton {

    transition: background-color 0.100s ease; /* เพิ่ม transition เพื่อทำให้การเปลี่ยนสีมีการแตกต่างชัดเจน */
  }