Please Subscribe My YouTube Channel

Showing posts with label O level Project. Show all posts
Showing posts with label O level Project. 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()





Small MCQ App Creation in Python

Small MCQ App Creation in Python


#created by satyam sir
print('Welcome to ITCI Quiz')
answer=input('Are you ready to play the Quiz ? (yes/no) :')
score=0
total_questions=3
 
if answer.lower()=='yes':
    answer=input('Question 1: What is extension of python programming language?')
    if answer.lower()=='.py':
        score += 1
        print('correct')
    else:
        print('Wrong Answer')
 
 
    answer=input('Question 2: Who is father of HTML? ')
    if answer.lower()=='tim bearners lee':
        score += 1
        print('correct')
    else:
        print('Wrong Answer :(')
 
    answer=input('Question 3: What is extension of web page?')
    if answer.lower()=='.html' or '.htm':
        score += 1
        print('correct')
    else:
        print('Wrong Answer :(')
 
print('Thankyou for Playing this small quiz game, you attempted',score,"questions correctly!")
mark=(score/total_questions)*100
print('Marks obtained:',mark)
print("\n")
print('visit my site to learn more:- www.itcicomputerhardoi.blogspot.com')



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}")





Friday, June 07, 2024

Calculator Practical & Project (O Level)

Calculator Practical & Project (O Level)








<html>
<head>
</head>
<body>
    <center>
    <h1>Calculator</h1>
    <caption>ITCI Computer Hardoi</caption></center><br>

<script>
function insert(num){
document.form.textView.value=document.form.textView.value+num;
}
function equal(){
var exp = document.form.textView.value;
if(exp){
document.form.textView.value=eval(document.form.textView.value);
}
}
function c(){
document.form.textView.value=" ";
}
</script>
<center>
    <div style="border:2px groove red;width:140;background:pink;border-radius:4px">
<form name="form">
<input type="text" name="textView"style="width:140px;height:30px;background:seagreen;border:2px solid green;color:white;"><br><br>
<input type="button" value="1" onclick="insert(1)"/>
<input type="button" value="2" onclick="insert(2)"/>
<input type="button" value="3" onclick="insert(3)"/>
<input type="button" value="+" onclick="insert('+')"/>
<br><br>
<input type="button" value="4" onclick="insert(4)"/>
<input type="button" value="5" onclick="insert(5)"/>
<input type="button" value="6" onclick="insert(6)"/>
<input type="button" value="-" onclick="insert('-')"/>
<br><br>
<input type="button" value="7" onclick="insert(7)"/>
<input type="button" value="8" onclick="insert(8)"/>
<input type="button" value="9" onclick="insert(9)"/>
<input type="button" value="*" onclick="insert('*')"/>
<br><br>
<input type="button" value="0" onclick="insert(0)"/>
<input type="button" value="/" onclick="insert('/')"/>
<input type="button" value="=" onclick="equal()"/>
<input type="button" value="C" onclick="c()"/>
<br><br>
<img src="D:\logo\best logo new.PNG"width="30"height="20">
</form>
</div>
</center>
</body>
</html>

Monday, February 12, 2024

Python Program- Count to Vowel & Consonants, If-Else-elif#Howto#ITCIComp...

          Vowel Consonants Counting

Tuesday, February 06, 2024

Reverse Number in Python with Slicing #Howto #Youtube #ITCIComputerHardo...

Reverse Number in Python

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 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>

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>