Please Subscribe My YouTube Channel

Showing posts with label O level Notes. Show all posts
Showing posts with label O level Notes. Show all posts

Tuesday, June 23, 2026

Saving Calculator with Python

Saving Calculator with Python



#Importing Tkinter Library
import tkinter as tk

#Function to Add Expenses
def add_expense():
    global expense_entries, expenses_frame
    expense_name = expense_name_entry.get()
    expense_amount = float(expense_amount_entry.get())
    expense_entries.append((expense_name, expense_amount))
    update_expenses()
#Function to Update Expenses   
def update_expenses():
    global expenses_frame, expense_entries
    for widget in expenses_frame.winfo_children():
        widget.destroy()
    for i, (name, amount) in enumerate(expense_entries):
        tk.Label(expenses_frame, text=name, fg="white", bg="#735DA5", 
                 font=("Arial", 12, "bold")).grid(row=i, column=0, padx=5, pady=2, sticky="w")
        tk.Label(expenses_frame, text=amount, fg="white", bg="#735DA5", 
                 font=("Arial", 12, "bold")).grid(row=i, column=1, padx=5, pady=2, sticky="w")
#Function to Calculate Savings
def calculate_savings():
    total_expense = sum(amount for _, amount in expense_entries)
    savings = income.get() - total_expense
    savings_label.config(text=f"Savings: {savings}", fg="white", bg="#735DA5", font=("Arial", 12, "bold"))

#Function to Calculate Complete Expenditure
def calculate_complete_expenditure():
    total_expense = sum(amount for _, amount in expense_entries)
    total_expense_label.config(text=f"Total Expenditure: {total_expense}", fg="white",
                               bg="#735DA5", font=("Arial", 12, "bold"))
    calculate_savings()
#Creating Expense Entries List
expense_entries = []

#Creating the Tkinter Window
root = tk.Tk()
root.title("Savings Calculator with Satyam Sir")
root.configure(bg="#735DA5")

#Creating GUI Elements
# Income/Earning
tk.Label(root, text="Income/Earning -", fg="white", bg="#735DA5",
         font=("Arial", 12, "bold")).grid(row=0, column=0, padx=5, pady=2)
income = tk.DoubleVar()
tk.Entry(root, textvariable=income).grid(row=0, column=1, padx=5, pady=2)
 
# Expense Entry
tk.Label(root, text="Expense Name:", fg="white", bg="#735DA5",
         font=("Arial", 12, "bold")).grid(row=1, column=0, padx=5, pady=2)
expense_name_entry = tk.Entry(root)
expense_name_entry.grid(row=1, column=1, padx=5, pady=2)
 
tk.Label(root, text="Expense Amount:", fg="white", bg="#735DA5"
         , font=("Arial", 12, "bold")).grid(row=2, column=0, padx=5, pady=2)
expense_amount_entry = tk.Entry(root)
expense_amount_entry.grid(row=2, column=1, padx=5, pady=2)
 
# Add Expense Button
add_button = tk.Button(root, text="Add Expense", command=add_expense, fg="white",
                       bg="#D3C5E5", font=("Arial", 12, "bold"))
add_button.grid(row=3, columnspan=2, padx=5, pady=2)
 
# Expenses Frame
expenses_frame = tk.Frame(root, bg="#735DA5")
expenses_frame.grid(row=4, columnspan=2, padx=5, pady=2)
 
# Total Expenditure and Savings
total_expense_label = tk.Label(root, text="Total Expenditure: ", fg="white", bg="#735DA5", font=("Arial", 12, "bold"))
total_expense_label.grid(row=5, column=0, padx=5, pady=2)
savings_label = tk.Label(root, text="", fg="white", bg="#735DA5", font=("Arial", 12, "bold"))
savings_label.grid(row=6, column=0, padx=5, pady=2)
 
# Buttons to calculate total expenditure and savings
calculate_button = tk.Button(root, text="Calculate Expenditure", command=calculate_complete_expenditure, fg="white",
                             bg="#D3C5E5", font=("Arial", 12, "bold"))
calculate_button.grid(row=7, columnspan=2, padx=5, pady=2)

#Running the Application
root.mainloop()





Password Strength Notifier


Password Strength Notifier in Python

#created by Satyam Sir
def checkPassword(password):
    upperChars, lowerChars, specialChars, digits, length = 0, 0, 0, 0, 0
    length = len(password)

    if (length < 6):
        print("Password must be at least 6 characters long!\n")
    else:
        for i in range(0, length):
            if (password[i].isupper()):
                upperChars += 1
            elif (password[i].islower()):
                lowerChars += 1
            elif (password[i].isdigit()):
                digits += 1
            else:
                specialChars += 1

    if (upperChars != 0 and lowerChars != 0 and digits != 0 and specialChars != 0):
        if (length >= 10):
            print("The strength of password is strong.\n")
        else:
            print("The strength of password is medium.\n")
    else:
        if (upperChars == 0):
            print("Password must contain at least one uppercase character!\n")
        if (lowerChars == 0):
            print("Password must contain at least one lowercase character!\n")
        if (specialChars == 0):
            print("Password must contain at least one special character!\n")
        if (digits == 0):
            print("Password must contain at least one digit!\n")


password = input("Please enter password: ")
checkPassword(password)



Guess Number & Win Coin Program Python

Guess Number & Win Coin Program Python


#Project By Satyam Sir Hardoi (+91 9026728220)
#use when we hide any number and ask someone to guess number
import random
number=random.randint(1,5)
earn=0
print("Play & Guess Number")
while True:
    Guess_Number=int(input("Enter any number:- "))
    if number==Guess_Number:
        print("Correct Match")
        print("You have earn 100 Point")
        earn+=100
        print(earn)
        break
    else:
        print("Wrong Number")
print("I am going Home, Tata Bay Bay!")
#for exit console you can exit() or quit()
quit()



Sunday, June 21, 2026

Python Create KBC Software Mini Project

Python KBC Software Mini Project

#if not color work on idle then run it on cmd or powershell
#pip install colorama
#pip install threading
from colorama import init, Fore, Style
init(convert=True, autoreset=True)  # key line
import time
import threading
from colorama import Fore, Style, init
init(autoreset=True)


print(Fore.CYAN + "                             === Welcome to KBC===" + Style.RESET_ALL)
print(Fore.YELLOW + "                          Please Wait For Become Rich")


from colorama import init, Fore
from time import sleep

init(convert=True, autoreset=True)
for sec in range(5, -1, -1):  # 5 se 1 tak countdown
    print(f"                                  {Fore.GREEN} {sec}sec", end="\r")  # \r same line overwrite karega
    sleep(1)
print("\n\n")



# Timer ke liye global flag
#time_up= False

def timer(seconds):
    global time_up
    time.sleep(20)
    time_up= True
    print(f"\n{Fore.RED}⏰ Time Up!{Style.RESET_ALL}")

# KBC Questions - Aap aur add kar sakte ho
questions = [
    {
        "q": "Bharat ke pehle Pradhan Mantri kaun the?",
        "options": ["A. Sardar Patel", "B. Jawaharlal Nehru", "C. Lal Bahadur Shastri", "D. Indira Gandhi"],
        "answer": "B"
    },
    {
        "q": "Python programming language kisne banayi?",
        "options": ["A. James Gosling", "B. Guido van Rossum", "C. Dennis Ritchie", "D. Bjarne Stroustrup"],
        "answer": "B"
    },
    {
        "q": "Taj Mahal kahan sthit hai?",
        "options": ["A. Delhi", "B. Jaipur", "C. Agra", "D. Mumbai"],
        "answer": "C"
    },
    {
        "q": "Earth ka natural satellite kya hai?",
        "options": ["A. Mars", "B. Venus", "C. Moon", "D. Jupiter"],
        "answer": "C"
    },
    {
        "q": "Computer ka brain kise kehte hain?",
        "options": ["A. RAM", "B. CPU", "C. Hard Disk", "D. Monitor"],
        "answer": "B"
    },
    {
        "q": "Ganga nadi ka udgam sthal kya hai?",
        "options": ["A. Yamunotri", "B. Gangotri", "C. Gomukh", "D. Haridwar"],
        "answer": "B"
    },
    {
        "q": "HTTP ka full form kya hai?",
        "options": ["A. Hyper Text Transfer Protocol", "B. High Tech Transfer Process",
                    "C. Hyper Transfer Text Protocol", "D. None"],
        "answer": "A"
    },
    {
        "q": "Bharat Ratna se sammanit pehli mahila kaun thi?",
        "options": ["A. Indira Gandhi", "B. Mother Teresa", "C. Sarojini Naidu", "D. Lata Mangeshkar"],
                                                                                  
        "answer": "A"
    },
    {
        "q": "C programming kisne banayi?",
        "options": ["A. Guido van Rossum", "B. Dennis Ritchie", "C. James Gosling", "D. Linus Torvalds"],
        "answer": "B"
    },
    {
        "q": "Surya ka sabse nazdeek grah kaun sa hai?",
        "options": ["A. Venus", "B. Mercury", "C. Mars", "D. Earth"],
        "answer": "B"
    }
]

score = 0
prize_money = [1000, 2000, 3000, 5000, 10000, 20000, 40000, 80000, 160000, 320000]

for i, ques in enumerate(questions):
    global time_up
    time_up = False

    print(f"\n{Fore.YELLOW}Question {i+1} for Rs. {prize_money[i]}:{Style.RESET_ALL}")
    print(ques["q"])
    for opt in ques["options"]:
        print(opt)

    print(f"\n{Fore.GREEN}Timer: 20 seconds | A/B/C/D dabakar answer lock karo{Style.RESET_ALL}")

    # Timer start
    t = threading.Thread(target=timer, args=(20,))
    t.daemon = True
    t.start()

    # Input lene tak
    user_ans = None
    while not time_up and user_ans is None:
        user_ans = input("Aapka jawab: ").upper()
        if user_ans not in ['A', 'B', 'C', 'D']:
            print("Galat input! A/B/C/D me se chuno")
            user_ans = None
        time.sleep(0.1)

    if time_up:
        print(f"{Fore.RED}Sahi jawab tha: {ques['answer']}{Style.RESET_ALL}")
        break

    # Answer check
    if user_ans == ques["answer"]:
        score += 1
        print(f"{Fore.GREEN}Bilkul Sahi Jawab!{Style.RESET_ALL}")
    else:
        print(f"{Fore.RED}Galat Jawab! Sahi answer tha: {ques['answer']}{Style.RESET_ALL}")
        break

print(f"\n{Fore.CYAN}Game Over! Aapne {score} questions sahi kiye.")
print(f"Aapki jeet: Rs. {prize_money[score-1] if score > 0 else 0}{Style.RESET_ALL}")





Saturday, January 27, 2024

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push...

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push Button



Tuesday, December 05, 2023

How to make CV with Html & Css

Make CV with Html & CSS

<!DOCTYPE html>

<html>
<head>
    <title>Resume</title>
    <style>
        .outborder{width:800px;height:1150px;border:1px solid silver;margin:0px auto;}
        p{font-size:20px;margin-left:8px;}
        hr{padding:0;margin:0;}
        .border{width:99%;padding:5px;background:lightblue;border:1px solid black;font-weight:bold;}
        ul{font-size:20px;margin-left:20px;}
        h2{margin-right:18px;}
        .name{margin-left:10px;font-family:;font-weight:bold;}
    </style>
</head>
<body>
  <div class="outborder">
    <h1 align="center"><u>CURRICULUM VITAE</u></h1><br>
    <h2 class="name">Divyansh Gupta</h2>
    <div style="border:2px solid;height:120px;width:100px;float:right;margin-top:-30px;margin-right:20px;"><img src="C:\Users\2023\Desktop\my photo.png"height="120"width="103"></div>
        <p>House,129 New Rahat Market<br>
        Railway Ganj Hardoi-241001<br>
        Mob:-+91 xxxxxxxx10<br>
        Email:-divyanshgupta14@gmail.com</p>
        <hr><hr>
        <div class="border">CAREER  OBJECTIVE</div>
        <p>Aiming to achieve a challenging and professional position from where I can make a significant contribution to the organization in the form of my dedication by using all my skills.</p>
    <div class="border">EDUCATIONAL QUALIFICATION</div>
        <ul>
            <li><b>10<sup>th</sup></b> Passed from UP Board</li>
            <li><b>12<sup>th</sup></b> Passed from UP Board</li>
            <li><b>B.Com Passed from Kanpur University</li></b>
        </ul>
     <div class="border">TECHNICAL QUALIFICATION</div>
        <ul><b>
            <li>Tally ERP 9.0</li>
            <li>CCC</li>
            <li>ITI DM</li>
            <li>ADCA</li></b>
        </ul>
     <div class="border">PERSONAL DETAILS</div>
<ul>


        <li>Father's Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b> &nbsp;&nbsp;Pradeep Gupta</li>
        <li>Date of Birth &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b> &nbsp;&nbsp;         11-10-2001</li>
        <li>Nationality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>   &nbsp;&nbsp;&nbsp;Indian</li>
        <li>Gender &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>:</b> &nbsp;&nbsp;&nbsp; Male</li>
        <li>Religion &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>&nbsp;&nbsp;&nbsp;Hindu</li>
        <li>Language Known &nbsp;&nbsp;<b> :</b>&nbsp; &nbsp; Hindi, English</li>
        <li>Skills &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>&nbsp; Good Communications Skills</li>
    </ul>
  <div class="border">DECLARATION</div>
  <p>I hereby declare that every information is true and I am solely responsible for its authenticity.</p>
  <b><p>Date.......<br>
     Place.......</p></b>
     <h2 align="right">(Divyansh Gupta)</h2>
  </div>
</body>
</html>


Tuesday, November 28, 2023

Rules Attribute in Table




Rules Attribute in Table






<html>
    <head>
<title>Rules Attribute in Table</title>
</head>
<body>
<!--Rules="none / rows / cols /  groups /all"-->
<h1>Rules Attribute</h1>
<table border width="80%"cellpadding="18"rules="cols">
<tr>
<th>Student's Name</th>
<th>Batch Time</th>
<th>Course</th>
</tr>
<tr>
<td>Ram</td>
<td>10Am</td>
<td>10Am</td>
</tr>
</table>
</body>
</html>






Monday, November 27, 2023

    HTML Table with Frame Attribute(Program No 4)


Frame Attribute in Table 

                                     

                 Watch Full Video That Given Below




<html>
    <head>
        <title>Frame Attribute in Table</title>
        <style>
th{color: white; background:brown;}
</style>
</head>
<body>
<!--frame="void / lhs / rhs / box / vsides
 / hsides / above / below / border"-->
<h1>Farme Attribute</h1>
<table border width="80%"cellspacing="15"frame="vsides">
<tr>
<th>Student's Name</th>
<th>Batch Time</th>
<th>Course</th>
</tr>
<tr>
<td>Ram</td>
<td>10Am</td>
<td>10Am</td>
</tr>
</table>
</body>
</html>





Sunday, November 19, 2023

Excel Shortcut Keys

Microsoft Excel Shortcut Keys

































Sunday, November 12, 2023

Create Stopwatch with Html, CSS & JavaScript



How To Create Stopwatch with Html, CSS & JavaScript





<!doctype html>
<html>
<head>
<title>Stop Watch</title>
<style>
#counter
{
margin:auto;
width:120px;
height:100px;
    font-family:fantasy;
font-size:80px;
border-left:14px solid red;
border-right:14px solid blue;
border-top:14px solid green;
border-bottom:14px solid black;
text-align:center;
padding:25px;
border-radius: 100%;

}
[type="button"]{padding:10px;background: green;color:white;font-size:large;font-weight: bold;}
[value="Start"]:focus{background: red;}
[value="Pause"]:focus{background: maroon;}
[value="Reset"]:focus{background: blue;}
</style>
<script>
var count=0,interval;
function increase()
{
count++;
document.getElementById("counter").innerHTML=count;
}
function start_watch()
{
interval=setInterval("increase()",1000);
}
function stop_watch()
{
clearInterval(interval);
}
function reset()
{
document.getElementById("counter").innerHTML=0;
count=0;
}
</script>
</head>
<body>
<div style="border:4px solid green;width:20%;margin-left:550px;margin-top:200px;padding:20px;border-radius:30px;">
<div id="counter">
0
</div>
<br>
<p align="center">
<input type="button" value="Start" onclick="start_watch()">
&nbsp;&nbsp;<input type="button" value="Pause" onclick="stop_watch()">
&nbsp;&nbsp;<input type="button" value="Reset" onclick="reset()">
</p>
</div>
</body>
</html>

Image Gallery with HTML & CSS

Create an Image Gallery with HTML & CSS





<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{margin-left:100px;}
img:{padding:4px;}
img:hover {box-shadow: 0 1px 18px 10px rgba(255, 0, 0);opacity: 0.8;transform: rotate(15deg);border-radius: 20px 0px 20px 0px;}

div.a{float:left;padding:10px;}
div.about {
  text-align: center;margin-left:1px;margin-top:15px;border:2px solid black; border-bottom:none;border-left:none;border-right:none;}
  span{box-shadow:1px 1px 6px 15px red;background:rgb(255,0,0,1);margin-left:-75px;}
  pre{margin-top:-86px;}
  hr {
  width: 100px;
  height: 7px;
  background: red;
  transition: width 1s;   

}

hr:hover {
  width: 900px;
}
pre::first-letter{color:red;font-size: 38px;font-family: cursive;}
pre:hover{color:green;text-shadow: 1px 1px 6px whitesmoke;}
</style>


</head>
<body>
<div style="background: rgb(21,3,87);color:white;height:150px;border-radius: 20px;margin:auto;"><br><br><h1 align="left"><span>Images Gallery</span><pre><h2>                Created By:- Infotech Computer Institute</h2></pre><hr></h1></div>
<br><br>
<div style="border:2px;filter:drop-shadow(5px -2px 6px black);">
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Center Hardoi</div></div>

<div class="a"><a href="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"target="_blank"><img src="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"width="200"height="300"></a><div class="about">Actor:- Amir Khan</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">Nature</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">Actor:- Salman Khan</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">Peacock</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">Sunflower</div></div>
<div class="a"><a href="D:\download\pexels-min-an-1629216.jpg"target="_blank"><img src="D:\download\pexels-min-an-1629216.jpg"width="200"height="300"></a><div class="about">Lord Buddha</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Institutions</div></div>
<div class="a"><a href="C:\Users\2023\Downloads\doc.png"target="_blank"><img src="C:\Users\2023\Downloads\doc.png"width="200"height="300"></a><div class="about">Dr. Menka Singh</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\pik.jpg"target="_blank"><img src="C:\Users\2023\Pictures\pik.jpg"width="200"height="300"></a><div class="about">M D:- Satyam Trivedi</div></div></div>


</body>
</html>

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>