subs.njk 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. ---
  2. title: Berlangganan artikel lewat email
  3. ---
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <title>{{ title }}</title>
  10. <style>
  11. body {
  12. background-color: #f3f4f6;
  13. color: #1f2937;
  14. font: 16px/1.5 Inter, Segoe UI, Arial, Helvetica, sans-serif;
  15. }
  16. *,
  17. *:before,
  18. *:after {
  19. box-sizing: border-box;
  20. }
  21. body,
  22. h1,
  23. h2,
  24. h3,
  25. h4,
  26. h5,
  27. h6,
  28. p,
  29. ol,
  30. ul {
  31. margin: 0;
  32. padding: 0;
  33. font-weight: normal;
  34. }
  35. .con {
  36. width: 550px;
  37. border: 1px #ccc solid;
  38. border-radius: .378em;
  39. background-color: #fff;
  40. margin: 6em auto;
  41. padding: 1em;
  42. }
  43. .tra {
  44. width: 300px;
  45. margin: 0px auto;
  46. }
  47. form {
  48. margin-bottom: 2em;
  49. }
  50. label {
  51. font-size: .88em;
  52. line-height: 1.8em;
  53. }
  54. input {
  55. width: 300px;
  56. }
  57. input[type=email] {
  58. margin-bottom: 5px;
  59. padding: 10px;
  60. border: 1px #ccc solid;
  61. border-radius: .375em;
  62. }
  63. input[type=submit] {
  64. padding: 10px;
  65. background-color: #d00000;
  66. border: 1px #d00000 solid;
  67. border-radius: .376em;
  68. color: #fff;
  69. font-size: 1em;
  70. }
  71. h1 {
  72. font-size: 1.1em;
  73. font-weight: bold;
  74. text-align: center;
  75. margin-bottom: 1.5em;
  76. }
  77. p {
  78. font-size: .88em;
  79. line-height: 1.2em;
  80. margin-bottom: 1.3em;
  81. color: #6c757d;
  82. }
  83. .blok { display: block; }
  84. @media only screen and (max-width: 800px){
  85. body {
  86. width: 100%
  87. }
  88. .con{width: 100% }
  89. .tra{width: 80%}
  90. }
  91. </style>
  92. </head>
  93. <body>
  94. <div class="con">
  95. <div class="tra">
  96. <h1>Berlangganan Artikel lewat email</h1>
  97. <form action="https://buttondown.email/api/emails/embed-subscribe/kuspoes" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/kuspoes', 'popupwindow')" class="embeddable-buttondown-form mb 1 ">
  98. <label class="blok" for="bd-email">e-mail</label>
  99. <input class="blok" type="email" name="email" id="bd-email" placeholder="you@youremail.com">
  100. <input type="hidden" value="1" name="embed">
  101. <input class="inline" type="submit" value="Subscribe">
  102. </form>
  103. <p>Masukkan alamat email anda untuk memulai berlangganan artikel jurnal Kusaeni.</p>
  104. <p>Saya tidak akan mengirimkan spam dan tidak pula menjual alamat email anda.</p>
  105. <p>Jika sudah tidak ingin berlangganan, anda bisa berhenti berlangganan kapan saja dengan mudah.</p>
  106. <p>Layanan ini didukung oleh <a class="ba" href="https://buttondown.email" target="_blank">Buttondown</a>.</p>
  107. </div>
  108. </div>
  109. </body>
  110. </html>