CSS দিয়ে ইমেইল নিউজলেটার ফর্ম তৈরি করার পদ্ধতি

উদাহরণ

নিচের কোডটি CSS ব্যবহার করে ইমেইল নিউজলেটার সাবস্ক্রিপশন ফর্ম তৈরি করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;}
h1 {
    text-align: center;
}
form {
    border: 3px solid #f1f1f1;
    padding: 20px;
    background-color: #f3f3f3;
    max-width: 800px;
    margin: auto;
}
input[type=text], input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 30px;
}
input[type=checkbox] {
    margin-top: 16px;
}
input[type=submit] {
    background-color: rgb(236, 255, 61);
    color: rgb(0, 0, 0);
    border: none;
    font-size: 25px;
    font-weight: bolder;
}
input[type=submit]:hover {
    background-color: rgb(255, 238, 0);
}
</style>
<body>
<h1>Email Newsletter Example</h1>
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
</div>
<div>
<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"> Daily Newsletter </label>
<input type="submit" value="Subscribe">
</form>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে: