Design a calendar using HTML and CSS
<html>
<head>
<title>Calendar</title>
<style>
h2 { text-align:center;color:Blue; }
table {
border-collapse: collapse;
background:lightgrey ;
color: black;
margin-left:auto;
margin-right:auto;
}
th,td {
font-weight:bold;padding:20px; }
th {
color:white; background:blue;Â }
</style>
</head>
<body>
<h2>March 2025</h2><br>
<table>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Output
Design a Form using HTML and CSS
<html>
<head>
<title>Form</title>
<style>
body { background-color:lightblue;}
.label{font-family:sans-serif; font-size:12pt; font-weight:bold; color:blue;}
input[type=text],input[type=password],input[type=number],input[type=date]{background-color:purple; color:white; width:300px; height:30px; border:3px solid red; border-radius:10px; margin:15px 5px; padding:15px; font-weight:bold; font-size:12pt;}
input[type=text]:focus{border:5px solid white;}
input[type=”radio”],input[type=”checkbox”]{width:20px; height:20px; margin-right:10px;}
.radio,.checkbox {font-family:sans-serif; font-size:12pt; font-weight:bold; color:purple}
select {width:150px; padding:6px 10px; border:none; border-radius:5px; background-color:purple; color:white; font-weight:bold; font-size:12pt;}
textarea {width:300px; height:100px; padding:10px 20px; border:3px solid red; border-radius:10px; background-color:purple;color:white; resize:none; font-weight:bold; font-size:12pt;}
input[type=submit],input[type=reset]{background-color:purple; color:white; height:40px; width:80px; font-weight:bold; font-size:13pt; font-family:courier New; cursor:pointer; border:none; border-radius:10px; margin:15px 0; padding:10px; text-align:center}
input[type=submit]:hover{background-color:indigo;}
input[type=reset]:hover{background-color:indigo;}
}
</style>
</head>
<body>
<form>
<label for=”name” class=”label”>Name:</label>
<input type=”text” name=”nm” size=”30″ maxlength=”35″ placeholder=”Enter Your Name”><br><br>
<label for=”pass” class=”label”>Password:</label>
<input type=”password” name=”pas” size=”30″ maxlength=”35″ placeholder=”Enter Your Password”><br><br>
<label for=”phn” class=”label”>Ph No:</label>
<input type=”number” name=”phn”><br><br>
<label for=”dob” class=”label”>Birth Date:</label>
<input type=”date” name=”dob”><br><br>
<label for=”gn” class=”label”>Gender:</label>
<label class=”radio”>
<input type=”radio” name=”gn” value=”M”>Male</label>
<label class=”radio”>
<input type=”radio” name=”gn” value=”F”>Female</label>
<label class=”radio”>
<input type=”radio” name=”gn” value=”O”>Other</label><br><br>
<label for=”qua” class=”label”>Qualification:</label>
<label class=”checkbox”>
<input type=”checkbox” name=”qua” value=”HSLC”>HSLC</label>
<label class=”checkbox”>
<input type=”checkbox” name=”qua” value=”HSLC”>HS</label>
<label class=”checkbox”>
<input type=”checkbox” name=”qua” value=”HSLC”>Graduation</label>
<label class=”checkbox”>
<input type=”checkbox” name=”qua” value=”HSLC”>Post Graduation</label><br><br>
<label for=”cst” class=”label”>Caste:</label>
<select name=”cst”>
<option>General</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
</select><br><br>
<label for=”fdb”>Feedback:</label><br>
<textarea>Write Your Feedback….</textarea><br><br>
<input type=”submit” name=”sb” value=”Submit”>
<input type=”reset” name=”cn” value=”Cancel”>
</form>
</body>
</html>
Output:
