Please Subscribe My YouTube Channel

Saturday, November 11, 2023

Create OTP Verification Form (Popup Box) with HTML & CSS

Create OTP Verification Form











<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OTP Verification Form</title>
    <style>
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow:0.5px 1px 10px 0px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: black
}

.message {
  color: darkgray;
  font-size: 14px;
  margin-top: 4px;
  text-align: center
}

.inputs {
  margin-top: 10px
}

.inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  border: 2px solid blue;
  margin: 0 10px;
}

.inputs input:focus {
  border-bottom: 1px solid red;
  border-top: 1px solid green;
  outline: none;
}

.action {
  margin-top: 34px;
  padding: 12px 16px;
  border-radius: 8px;
  border:none;
  background-color: royalblue;
  color: white;
  align-self: end;
}</style>
</head>
<body>
    <div align="center"style="margin:200px;">
    <form class="form">
 <div class="title">OTP</div> 
 <div class="title">Verification Code</div>
<p class="message">We have sent a verification code to your mobile number</p> <div class="inputs">
<input id="input1" type="text" maxlength="1"> 
<input id="input2" type="text" maxlength="1"> 
<input id="input3" type="text" maxlength="1"> 
<input id="input4" type="text" maxlength="1"> </div>
 <button class="action">Verify Me</button> </form>
</div>

</body>
</html>

Thursday, November 09, 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023




<html>
<head>
<title>Apply Paragraph Borders</title>
<style>
#a{background:black;color:white;border:5px solid aqua;padding:30px;font-size:20px;margin:50px;}
#b{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:red;border:5px dotted green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#c{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:blue;border:5px dashed green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#d{background:rgba(00,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px groove red;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
#e{background:rgba(255,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px inset blue;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
</style>


</head>
<body>
<h1 style="border:4px solid green;color:white;margin:50px;padding:30px;background:maroon;text-align:center;"> Paragraph Borders </h1>
<p id="a">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</p>
<p id="b">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>
<p id="c">
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
<p id="d">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>

<p id="e">To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
</body>
</html>

Wednesday, November 08, 2023

Design Doctor Appointment Form with Html Css

How To Design Doctor Appointment Form with Html & Css





<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Doctor Appointment Form</title>
<style>
input:checked{accent-color:blue;}
textarea:hover{background:blue;opacity:0.3;}
textarea,img{filter:drop-shadow(6px 10px 12px red);}
[type="submit"]{background:teal;color:white;}
</style>
</head>
<body> 
<table align="center" width="70%" cellpadding="10px" cellspacing="0">
<tr>
<td rowspan="10"><img src="C:\Users\2023\Downloads\doc.png" align="left" width="500px" alt="Doctor Appointment Form"></td>
<td colspan="3"><h1 align="center">Doctor Appointment Form</h1><hr color="red"size="5"/></td>
</tr>
<tr>
<td>Appointment Date</td>
<td colspan="2"><input type="date"/></td>
</tr>
<tr>
<td>Appointment Time</td>
<td colspan="2"><input type="time"/></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" placeholder="First"/></td>
<td><input type="text" placeholder="Last"/></td>
</tr>
<tr>
<td>Gender</td>
<td colspan="2">Male<input type="radio" name="gender"/>Female<input type="radio" name="gender"/></td>
</tr>
<tr>
<td>Phone</td>
<td colspan="2"><input type="text" maxlength="10" placeholder="####"/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="city"/></td>
<td><input type="text" placeholder="state"/></td>
</tr>
<tr>
<td>Your Query</td>
<td colspan="2">
<textarea cols="40" rows="4"></textarea>
</td>
</tr>
<tr>
<td valign="top">Appointment Type</td>
<td colspan="2">
Select which appointment type(s) you require<br/>
<input type="checkbox"/> Cervix checkup<br/>
<input type="checkbox"/> Heart checkup<br/>
<input type="checkbox"/> Eye check-up<br/>
<input type="checkbox"/> Hearing Test<br/>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"> 
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<input type="submit" value="Appointment"/> &nbsp; &nbsp;<input type="submit" value="Reset"/>
</td>
</tr>
</table><br>
<div style="width:740px;padding:10px;margin-top:-900;">
<marquee behavior="alternate"><h1>Infotech Computer Institute</h1></marquee>
<address align="center"><b>Auther:- Satyam Trivedi</b><br>Near SBI Bank, Head Post Office Road Hardoi.<br>Classes By <a href="#">Satyam Sir</a></address><br></div>
</body>
</html>