API tools faq
paste
Guest User

Untitled

a guest
Jan 18th, 2018
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.97 KB | None | 0 0
raw download clone embed print report
  1. <style type="text/css">
  2. .box {
  3. height:35px;
  4. font-size:16px;
  5. font-family:Arial, Helvetica, sans-serif;
  6. border-style:solid;
  7. border-width:1px;
  8. border-radius:5px;
  9. box-shadow:none;
  10. padding:6px;
  11. margin-top:15px;
  12. }
  13.  
  14. .btn {
  15. width: 100%;
  16. display: inline-block;
  17. font-size: 16px;
  18. font-weight: bold;
  19. font-family: Arial, Helvetica, sans-serif;
  20. touch-action: manipulation;
  21. background-color: #5c6ac3;
  22. border-color: #5c6ac3;
  23. color: white;
  24. height: 35px;
  25. border-style: solid;
  26. border-width: 1px;
  27. border-radius: 5px;
  28. box-shadow: none;
  29. padding: 6px;
  30. margin-top: 7px;
  31. }
  32.  
  33. .link {
  34. color: white;
  35. font-size: 10px;
  36. font-weight: normal;
  37. position: absolute;
  38. bottom: 15px;
  39. margin-left: -25px;
  40. }
  41. </style>
  42.  
  43. <script type="text/javascript">
  44. function validate(email)
  45. {
  46. var str = /^\w+([\.-]?\w+)*@("@")\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  47. if (email.value.match(str))
  48. {
  49. document.getElementById("error").style.display = "none";
  50. console.log(email.value);
  51. console.log(document.form.interest.value)
  52. } else {
  53. if (document.getElementById("error").style.display == 'none')
  54. {
  55. document.getElementById("error").style.display = "block";
  56. }
  57. }
  58. }
  59. </script>
  60.  
  61. <!DOCTYPE html>
  62. <html>
  63. <head>
  64. <title>Front End Dev Challenge</title>
  65. <meta charset="utf-8" />
  66. <meta name=" =viewport" content="width=device-width, initial-scale=1.0" />
  67. </head>
  68. <body style="background:#000639; font-family:Arial, Helvetica, sans-serif">
  69. <center>
  70. <div style="padding-top:2%; text-align:left; width:500px; color:white; font-weight:bold">
  71. <h1 style="font-size:24px">Stay up to date with ecommerce trends with Shopify's newsletter</h1>
  72.  
  73. <div style="padding-top:3px; background:#7AB55C; width:25px" />
  74. </div>
  75.  
  76.  
  77. <div style="padding-top:45px">
  78. <text style="font-size:16px; font-weight:normal">Subscribe for free marketing tips</text>
  79. </div>
  80.  
  81. <form onsubmit="validate(document.form.email); return false" name="form" method="post">
  82. <input name="email" class="box" type="text" placeholder="Email Address" style="float:left; width:55%" runat="server"/>
  83.  
  84. <select required class="box" aria-required="true" style="float:right; width:40%" name="interest">
  85. <option disabled selected hidden>Interested in...</option>
  86. <option value="1">Interest 1</option>
  87. <option value="2">Interest 2</option>
  88. <option value="3">Interest 3</option>
  89. <option value="4">Interest 4</option>
  90. <option value="5">Interest 5</option>
  91. <option value="6">Interest 6</option>
  92. <option value="7">Interest 7</option>
  93. </select>
  94.  
  95. <p id="error" style="color:#C23628; font-size:12px; display:none; padding-top:11%">Please enter a valid email address</p>
  96.  
  97. <button type="submit" class="btn">Sign up now</button>
  98.  
  99. </form>
  100.  
  101. <center>
  102. <a href="#" class="link">Unsubscribe</a>
  103. </center>
  104.  
  105. </center>
  106.  
  107. <script id="jsbin-source-html" type="text/html"><style type="text/css">
  108. .box {
  109. height:35px;
  110. font-size:16px;
  111. font-family:Arial, Helvetica, sans-serif;
  112. border-style:solid;
  113. border-width:1px;
  114. border-radius:5px;
  115. box-shadow:none;
  116. padding:6px;
  117. margin-top:15px;
  118. }
  119.  
  120. .btn {
  121. width: 100%;
  122. display: inline-block;
  123. font-size: 16px;
  124. font-weight: bold;
  125. font-family: Arial, Helvetica, sans-serif;
  126. touch-action: manipulation;
  127. background-color: #5c6ac3;
  128. border-color: #5c6ac3;
  129. color: white;
  130. height: 35px;
  131. border-style: solid;
  132. border-width: 1px;
  133. border-radius: 5px;
  134. box-shadow: none;
  135. padding: 6px;
  136. margin-top: 7px;
  137. }
  138.  
  139. .link {
  140. color: white;
  141. font-size: 10px;
  142. font-weight: normal;
  143. position: absolute;
  144. bottom: 15px;
  145. margin-left: -25px;
  146. }
  147. </style>
  148.  
  149. <script type="text/javascript">
  150. function validate(email)
  151. {
  152. var str = /^\w+([\.-]?\w+)*@("@")\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  153. if (email.value.match(str))
  154. {
  155. document.getElementById("error").style.display = "none";
  156. console.log(email.value);
  157. console.log(document.form.interest.value)
  158. } else {
  159. if (document.getElementById("error").style.display == 'none')
  160. {
  161. document.getElementById("error").style.display = "block";
  162. }
  163. }
  164. }
  165. <\/script>
  166.  
  167. <!DOCTYPE html>
  168. <html>
  169. <head>
  170. <title>Front End Dev Challenge</title>
  171. <meta charset="utf-8" />
  172. <meta name=" =viewport" content="width=device-width, initial-scale=1.0" />
  173. </head>
  174. <body style="background:#000639; font-family:Arial, Helvetica, sans-serif">
  175. <center>
  176. <div style="padding-top:2%; text-align:left; width:500px; color:white; font-weight:bold">
  177. <h1 style="font-size:24px">Stay up to date with ecommerce trends with Shopify's newsletter</h1>
  178.  
  179. <div style="padding-top:3px; background:#7AB55C; width:25px" />
  180. </div>
  181.  
  182.  
  183. <div style="padding-top:45px">
  184. <text style="font-size:16px; font-weight:normal">Subscribe for free marketing tips</text>
  185. </div>
  186.  
  187. <form onsubmit="validate(document.form.email); return false" name="form" method="post">
  188. <input name="email" class="box" type="text" placeholder="Email Address" style="float:left; width:55%" runat="server"/>
  189.  
  190. <select required class="box" aria-required="true" style="float:right; width:40%" name="interest">
  191. <option disabled selected hidden>Interested in...</option>
  192. <option value="1">Interest 1</option>
  193. <option value="2">Interest 2</option>
  194. <option value="3">Interest 3</option>
  195. <option value="4">Interest 4</option>
  196. <option value="5">Interest 5</option>
  197. <option value="6">Interest 6</option>
  198. <option value="7">Interest 7</option>
  199. </select>
  200.  
  201. <p id="error" style="color:#C23628; font-size:12px; display:none; padding-top:11%">Please enter a valid email address</p>
  202.  
  203. <button type="submit" class="btn">Sign up now</button>
  204.  
  205. </form>
  206.  
  207. <center>
  208. <a href="#" class="link">Unsubscribe</a>
  209. </center>
  210.  
  211. </center>
  212. </body>
  213. </html>
  214. </script>
  215.  
  216. </body>
  217. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!