The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
File
By Guest on 24th December 2023 07:19:08 PM | Syntax: HTML5 | Views: 189


New Paste New paste | Download Paste Download | Toggle Line Numbers Show/Hide line no. | Copy Paste Copy text to clipboard
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="style.css">
  7.     <title>Product Introduction</title>
  8. </head>
  9. <body>
  10.     <header>
  11.         <h1>Lighter</h1>
  12.         <p>Making your Feature better!</p>
  13.     </header>
  14.  
  15.     <section id="productDetails">
  16.         <img src="https://th.bing.com/th/id/OIP.tVU_ep1ZXR1ONaJNoSUC5gHaHa?w=150&h=180&c=7&r=0&o=5&pid=1.7" alt="Product Image">
  17.         <div>
  18.             <h2>Lighter</h2>
  19.             <ul>
  20.                 <li>Make everything on your pov under control</li>
  21.                 <li>No electric needed</li>
  22.                 <li>Avoid your failure future</li>
  23.             </ul>
  24.         </div>
  25.     </section>
  26.  
  27.     <section id="pricing">
  28.         <h2> 999,999Usd</h2>
  29.         <p>Our product is available at an amazing price of $999,999. Don't miss out!</p>
  30.     </section>
  31.  
  32.     <section id="cta">
  33.         <h2>Get Yours Today!</h2>
  34.         <button onclick="openPurchaseForm()">Purchase Now</button>
  35.     </section>
  36.  
  37.     <div id="purchaseFormOverlay">
  38.         <div id="purchaseForm">
  39.             <span onclick="closePurchaseForm()" class="closeBtn">&times;</span>
  40.             <h2>Fill in your details</h2>
  41.             <form>
  42.                 <label for="name">Name:</label>
  43.                 <input type="text" id="name" name="name" required>
  44.  
  45.                 <label for="email">Email:</label>
  46.                 <input type="email" id="email" name="email" required>
  47.  
  48.                 <label for="address">Address:</label>
  49.                 <textarea id="address" name="address" rows="4" required></textarea>
  50.  
  51.                 <button type="button" onclick="submitPurchase()">Submit Purchase</button>
  52.             </form>
  53.         </div>
  54.     </div>
  55.    
  56.     <script src="script.js"></script>
  57. </body>
  58. </html>
  59.  
  60.  
  61.  
  62. css :
  63. body {
  64.     font-family: 'Arial', sans-serif;
  65.     margin: 0;
  66.     padding: 0;
  67.     box-sizing: border-box;
  68.     background-color: #f4f4f4;
  69. }
  70.  
  71. header {
  72.     background-color: #333;
  73.     color: #fff;
  74.     text-align: center;
  75.     padding: 20px;
  76. }
  77.  
  78. section {
  79.     margin: 20px;
  80.     background-color: #fff;
  81.     padding: 20px;
  82.     border-radius: 8px;
  83.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  84. }
  85.  
  86. #productDetails {
  87.     display: flex;
  88.     flex-wrap: wrap;
  89. }
  90.  
  91. #productDetails img {
  92.     max-width: 100%;
  93.     border: 1px solid #ccc;
  94.     border-radius: 8px;
  95.     margin-bottom: 20px;
  96. }
  97.  
  98. #productDetails div {
  99.     flex: 1;
  100.     margin-left: 20px;
  101. }
  102.  
  103. ul {
  104.     list-style-type: none;
  105.     padding: 0;
  106. }
  107.  
  108. ul li {
  109.     margin-bottom: 10px;
  110. }
  111.  
  112. ul li::before {
  113.     content: "\2022";
  114.     color: #333;
  115.     font-size: 16px;
  116.     margin-right: 5px;
  117. }
  118.  
  119.  
  120. button {
  121.     padding: 12px 24px;
  122.     font-size: 16px;
  123.     cursor: pointer;
  124.     background-color: #333;
  125.     color: #fff;
  126.     border: none;
  127.     border-radius: 4px;
  128.     transition: background-color 0.3s ease;
  129. }
  130.  
  131. button:hover {
  132.     background-color: #555;
  133. }
  134.  
  135. #purchaseFormOverlay {
  136.     display: none;
  137.     justify-content: center;
  138.     align-items: center;
  139.     position: fixed;
  140.     top: 0;
  141.     left: 0;
  142.     width: 100%;
  143.     height: 100%;
  144.     background-color: rgba(0, 0, 0, 0.5);
  145. }
  146.  
  147. #purchaseForm {
  148.     background-color: #fff;
  149.     padding: 20px;
  150.     border-radius: 8px;
  151.     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  152. }
  153.  
  154. .closeBtn {
  155.     font-size: 24px;
  156.     font-weight: bold;
  157.     color: #777;
  158.     cursor: pointer;
  159.     position: absolute;
  160.     top: 10px;
  161.     right: 10px;
  162. }
  163.  
  164. form {
  165.     display: flex;
  166.     flex-direction: column;
  167. }
  168.  
  169. label {
  170.     margin-top: 10px;
  171.     font-weight: bold;
  172. }
  173.  
  174. input,
  175. textarea {
  176.     padding: 8px;
  177.     margin-top: 5px;
  178.     margin-bottom: 15px;
  179.     border: 1px solid #ccc;
  180.     border-radius: 4px;
  181. }
  182.  
  183. button[type="button"] {
  184.     background-color: #333;
  185.     color: #fff;
  186.     border: none;
  187.     padding: 12px 24px;
  188.     font-size: 16px;
  189.     cursor: pointer;
  190.     border-radius: 4px;
  191.     transition: background-color 0.3s ease;
  192. }
  193.  
  194. button[type="button"]:hover {
  195.     background-color: #555;
  196. }
  197.  
  198.  
  199. js :
  200. function openPurchaseForm() {
  201.     document.getElementById("purchaseFormOverlay").style.display = "flex";
  202. }
  203.  
  204. function closePurchaseForm() {
  205.     document.getElementById("purchaseFormOverlay").style.display = "none";
  206. }
  207.  
  208. function submitPurchase() {
  209.     alert('You got scammed!, thank for infomation');
  210.     closePurchaseForm();
  211. }





file    



css : body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; box-sizing: border-box; background-color: #f4f4f4; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } section { margin: 20px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #productDetails { display: flex; flex-wrap: wrap; } #productDetails img { max-width: 100%; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; } #productDetails div { flex: 1; margin-left: 20px; } ul { list-style-type: none; padding: 0; } ul li { margin-bottom: 10px; } ul li::before { content: "\2022"; color: #333; font-size: 16px; margin-right: 5px; } button { padding: 12px 24px; font-size: 16px; cursor: pointer; background-color: #333; color: #fff; border: none; border-radius: 4px; transition: background-color 0.3s ease; } button:hover { background-color: #555; } #purchaseFormOverlay { display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } #purchaseForm { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .closeBtn { font-size: 24px; font-weight: bold; color: #777; cursor: pointer; position: absolute; top: 10px; right: 10px; } form { display: flex; flex-direction: column; } label { margin-top: 10px; font-weight: bold; } input, textarea { padding: 8px; margin-top: 5px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } button[type="button"] { background-color: #333; color: #fff; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s ease; } button[type="button"]:hover { background-color: #555; } js : function openPurchaseForm() { document.getElementById("purchaseFormOverlay").style.display = "flex"; } function closePurchaseForm() { document.getElementById("purchaseFormOverlay").style.display = "none"; } function submitPurchase() { alert('You got scammed!, thank for infomation'); closePurchaseForm(); }