ช่วยเขียน responsive web app code black ground สี ชมภู สําหรับรับแสดง notion page ของ 'https://psychedelic-fowl-350.notion.site/433231d493a5458e89e8b9c223696258'
ผลลัพธ์
/* index.html */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shiloh Church</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Prompt" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js>" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<link rel="preconnect" href="<https://fonts.gstatic.com>" />
<link href="<https://fonts.googleapis.com/css2?family=Prompt&display=swap>" rel="stylesheet" />
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.8.1/css/all.css>" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="<https://earthchie.github.io/jquery.Thailand.js/jquery.Thailand.js/dist/jquery.Thailand.min.css>">
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css>" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
<script src="<https://code.jquery.com/jquery-3.5.1.js>"></script>
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css>" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="<https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap>" rel="stylesheet">
<!--AutoComplete-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Niramit:wght@400&display=swap" rel="stylesheet"> <link href="https://ltschool.web.app/css/Bootstrapcolor.css" rel="stylesheet" type="text/css"> <base target="_top"> <link rel="stylesheet" href="styles.css"> <script language="JavaScript"> <!-- Begin var password = 'password' password=prompt('กรุณาใส่รหัสผ่านให้ถูกต้อง:',''); if (password != '777') { location.href=''; } // End --> </script> </head> <body> <header> <h1>Shiloh Church</h1> </header> <main> <div id="notion-container"> <!-- Embed Notion Page Here --> <iframe src="https://psychedelic-fowl-350.notion.site/433231d493a5458e89e8b9c223696258" width="100%" height="100%" style="border:none; min-height: 100vh;"></iframe> </div> </main> <footer> <p> Copyright © 2023-<script>document.write(new Date().getFullYear())</script> Shiloh Church All Rights Reserved</p> </footer> </body> </html>
และ
/* styles.css */
body { font-family: Arial, sans-serif; background-color: #40E0D0; /* สีชมพู */ display: flex; flex-direction: column; height: 100vh; }
header { background-color: #6495ED; color: white; text-align: center; padding: 1rem; }
main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 1rem; }
#notion-container { width: 100%; max-width: 1200px; height: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }