Di bawah ini kita akan mempelajari cara membuat buletin email dengan CSS.
<!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;} form { border: 3px solid #f1f1f1; font-family: Arial; } .container { padding: 20px; background-color: #f1f1f1; } input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } input[type=checkbox] { margin-top: 16px; } input[type=submit] { background-color: #4CAF50; color: white; border: none; } input[type=submit]:hover { opacity: 0.8; } </style> <body> <h2>Contoh CSS Newsletter</h2> <form action="/action_page.php"> <div class="container"> <h2>Subscribe Buletin Kami</h2> <p>Buletin kami menyediakan informasi mengenai anime dan film-film terbaru dan terupdate. Subscribe buletin kami agar kami bisa infokan ke kamu berita-berita hangat yang akan di posting. Kami akan memberikan informasi-informasi terbaru lewat email kamu!</p> </div> <div class="container" style="background-color:white"> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Buletin Harian </label> </div> <div class="container"> <input type="submit" value="Subscribe"> </div> </form> </body> </html>
Cara Membuat Buletin
Langkah 1) Tambahkan HTML
Gunakan elemen untuk memproses masukan. Kemudian tambahkan inputan untuk setiap field bersama dengan tombol “submit”:
Contoh
<h2>Contoh CSS Newsletter</h2> <form action="/action_page.php"> <div class="container"> <h2>Subscribe Buletin Kami</h2> <p>Buletin kami menyediakan informasi mengenai anime dan film-film terbaru dan terupdate. Subscribe buletin kami agar kami bisa infokan ke kamu berita-berita hangat yang akan di posting. Kami akan memberikan informasi-informasi terbaru lewat email kamu!</p> </div> <div class="container" style="background-color:white"> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Buletin Harian </label> </div> <div class="container"> <input type="submit" value="Subscribe"> </div> </form>
Langkah 2) Tambahkan CSS:
Contoh
/* Gaya elemen formulir dengan border di sekelilingnya */ form { border: 4px solid #f1f1f1; } /* tambahkan beberapa padding dan warna background abu-abu ke container */ .container { padding: 20px; background-color: #f1f1f1; } /* Beri style pada elemen inputan dan button submit */ input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Tambahkan margins ke checkbox */ input[type=checkbox] { margin-top: 16px; } /* Style untuk submit button */ input[type=submit] { background-color: #4CAF50; color: white; border: none; } input[type=submit]:hover { opacity: 0.8; }