Smoke Effect in Your Name:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="smoke.css">
<title>smoke effect on Name</title>
</head>
<body>
<section>
<video src="smoke.mp4" autoplay muted ></video>
<h1>
<span>T</span>
<span>R</span>
<span>I</span>
<span>N</span>
<span>E</span>
<span>T</span>
<span>R</span>
<span>A</span>
</h1>
</section>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
video{
object-fit: cover;
}
section{
background:#000 ;
}
h1{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
letter-spacing: 1rem;
text-transform: uppercase;
color: #f5f5f5;
font-size: 5em;
font-family: sans-serif;
}
h1 span{
display: inline-block;
animation: animate 1s ease-in-out;
}
@keyframes animate{
0%{
opacity: 0%;
transform: rotateY(90deg);
filter: blur(10px);
}
100%{
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay: 0.6s;
}
h1 span:nth-child(2)
{
animation-delay: 1s;
}
h1 span:nth-child(3)
{
animation-delay: 1.7s;
}
h1 span:nth-child(4)
{
animation-delay: 2.3s;
}
h1 span:nth-child(5)
{
animation-delay: 2.7s;
}
h1 span:nth-child(6)
{
animation-delay: 3.2s;
}
h1 span:nth-child(7)
{
animation-delay: 3.7s;
}
h1 span:nth-child(8)
{
animation-delay: 4s;
}
Team Profile With Animation Effect:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css"/>
<link rel="stylesheet" href="./style.css">
<title>team animated</title>
</head>
<body>
<div class="container">
<div class="icon">
<div class="imgBx active" style="--i:1;" data-id="content1">
<img src="./images/trinetra.jpg" alt="">
</div>
<div class="imgBx" style="--i:2;" data-id="content2">
<img src="./images/nancy.jpg" alt="">
</div>
<div class="imgBx" style="--i:3;" data-id="content3">
<img src="./images/avinash.jpg" alt="">
</div>
<div class="imgBx" style="--i:4;" data-id="content4">
<img src="./images/shalini.jpg" alt="">
</div>
<div class="imgBx" style="--i:5;" data-id="content5">
<img src="./images/shubham.JPG" alt="">
</div>
<div class="imgBx" style="--i:6;" data-id="content6">
<img src="./images/pankaj.jpg" alt="">
</div>
<div class="imgBx" style="--i:7;" data-id="content7">
<img src="./images/shibbu.png" alt="">
</div>
<div class="imgBx" style="--i:8;" data-id="content8">
<img src="./images/nira.jpg" alt="">
</div>
</div>
<div class="content">
<div class="contentBx active" id="content1">
<div class="card">
<div class="imgBx">
<img src="./images/trinetra.jpg" alt="">
</div>
<div class="textBx">
<h2>Trinetra Sahu<br><span>Software Developer</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content2">
<div class="card">
<div class="imgBx">
<img src="./images/nancy.jpg" alt="">
</div>
<div class="textBx">
<h2>Nancy Agrawal<br><span>CEO C.N.C</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content3">
<div class="card">
<div class="imgBx">
<img src="./images/avinash.jpg" alt="">
</div>
<div class="textBx">
<h2>Avinash Ku. Pandey<br><span>Senior Developer</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content4">
<div class="card">
<div class="imgBx">
<img src="./images/shalini.jpg" alt="">
</div>
<div class="textBx">
<h2>Shalini Singh<br><span>entrepreneur</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content5">
<div class="card">
<div class="imgBx">
<img src="./images/shubham.JPG" alt="">
</div>
<div class="textBx">
<h2>Shubham Sharma<br><span>network ass.</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content6">
<div class="card">
<div class="imgBx">
<img src="./images/pankaj.jpg" alt="">
</div>
<div class="textBx">
<h2>pankaj rajput<br><span>security manager</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content7">
<div class="card">
<div class="imgBx">
<img src="./images/shibbu.png" alt="">
</div>
<div class="textBx">
<h2>Shivam Rajput<br><span>ass. Manager</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content8">
<div class="card">
<div class="imgBx">
<img src="./images/nira.jpg" alt="">
</div>
<div class="textBx">
<h2>Nira Fatima<br><span>graphical Designer</span></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
//enter js file name
</script>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;
600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
.container{
position: relative;
width: 600px;
height: 600px;
border: 1px solid #f5f5f5;
border-radius: 50%;
}
.container .icon{
position: relative;
width: 100%;
height: 100%;
left: -50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.container .icon .imgBx{
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transition: 0.5s;
border: 1px solid #fff;
box-shadow: 0 0 0 4px #222,
0 0 0 6px #fff;
transform: rotate(calc(360deg/8 * var(--i)));
transform-origin: 340px;
z-index: 100;
overflow: hidden;
}
.container .icon .imgBx:hover{
margin-top: -10px;
}
.container .icon .imgBx.active{
box-shadow: 0 0 0 4px #222,
0 0 0 10px #ff1d50;
}
.container .icon .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
transform: rotate(calc(-360deg/8 * var(--i)));
transition: 0.5s;
filter: grayscale(1);
}
.container .icon .imgBx.active img{
filter: grayscale(0);
}
.content{
position: absolute;
inset: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.content:before{
content: '';
position: absolute;
inset: 70px;
border: 4px solid transparent;
border-left: 15px solid #f37673;
border-right: 15px solid #fff;
border-radius: 50%;
animation: anim1 5s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes anim1{
0%
{
rotate: 0deg;
}
100%
{
rotate: 360deg;
}
}
.content:after{
content: '';
position: absolute;
inset: 125px;
border: 4px solid transparent;
border-top: 28px solid #457b9d;
border-bottom: 18px solid #f1faee;
border-radius: 50%;
animation: anim2 2.6s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes anim2{
0%
{
rotate: 360deg;
}
100%
{
rotate: 0deg;
}
}
.contentBx{
position: absolute;
transform: scale(0);
transition: 0.5s;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
}
.contentBx.active{
transform: scale(1);
opacity: 1;
transition-delay: 0.5s;
}
.contentBx .card{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
grid-auto-flow: 15px;
}
.contentBx .card .imgBx{
position: relative;
width: 150px;
height: 150px;
border-radius: 10px;
overflow: hidden;
}
.contentBx .card .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.contentBx .card .textBx{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contentBx .card .textBx h2{
margin-top: 10px;
position: relative;
font-size: 1.25rem;
font-weight: 600;
color: #fff;
line-height: 1em;
text-transform: uppercase;
text-align: center;
}
.contentBx .card .textBx h2 span{
font-size: 0.65em;
color: #fff;
font-weight: 500;
letter-spacing: 0.1em;
}
.contentBx .card .textBx .sci{
position: relative;
display: flex;
gap: 7px;
margin-top: 10px;
}
.contentBx .card .textBx .sci li{
list-style: none;
}
.contentBx .card .textBx .sci li a{
position: relative;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background: #444;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: 0.5s;
}
.contentBx .card .textBx .sci li a:hover{
background: #2196f3;
}
JAVA SCRIPT CODE:
let imgBx = document.querySelectorAll('.imgBx')
let contentBx = document.querySelectorAll('.contentBx')
for(let i=0; i < imgBx.length; i++){
imgBx[i].addEventListener('mouseover', function(){
for(let i=0; i<contentBx.length; i++){
contentBx[i].className = 'contentBx';
}
document.getElementById(this.dataset.id).className = 'contentBx active';
for(let i=0; i<imgBx.length; i++){
imgBx[i].className = 'imgBx';
}
this.className = 'imgBx active';
} )
}
Student Management System in Python:
Python code:
import datetime
from tkinter import *
import tkinter.messagebox as mb
from tkinter import ttk
from tkcalendar import DateEntry # pip install tkcalendar
import sqlite3
# Creating the universal font variables
headlabelfont = ("Noto Sans CJK TC", 15, 'bold')
labelfont = ('Garamond', 14)
entryfont = ('Garamond', 12)
# Connecting to the Database where all information will be stored
connector = sqlite3.connect('SchoolManagement.db')
cursor = connector.cursor()
connector.execute(
"CREATE TABLE IF NOT EXISTS SCHOOL_MANAGEMENT (STUDENT_ID INTEGER PRIMARY KEY
AUTOINCREMENT NOT NULL, NAME TEXT, EMAIL TEXT, PHONE_NO TEXT, GENDER TEXT, DOB
TEXT, STREAM TEXT)"
)
# Creating the functions
def reset_fields():
global name_strvar, email_strvar, contact_strvar, gender_strvar, dob,
stream_strvar
for i in ['name_strvar', 'email_strvar', 'contact_strvar', 'gender_strvar',
'stream_strvar']:
exec(f"{i}.set('')")
dob.set_date(datetime.datetime.now().date())
def reset_form():
global tree
tree.delete(*tree.get_children())
reset_fields()
def display_records():
tree.delete(*tree.get_children())
curr = connector.execute('SELECT * FROM SCHOOL_MANAGEMENT')
data = curr.fetchall()
for records in data:
tree.insert('', END, values=records)
def add_record():
global name_strvar, email_strvar, contact_strvar, gender_strvar, dob,
stream_strvar
name = name_strvar.get()
email = email_strvar.get()
contact = contact_strvar.get()
gender = gender_strvar.get()
DOB = dob.get_date()
stream = stream_strvar.get()
if not name or not email or not contact or not gender or not DOB or not stream:
mb.showerror('Error!', "Please fill all the missing fields!!")
else:
try:
connector.execute(
'INSERT INTO SCHOOL_MANAGEMENT (NAME, EMAIL, PHONE_NO, GENDER, DOB,
STREAM) VALUES (?,?,?,?,?,?)', (name, email, contact, gender, DOB, stream)
)
connector.commit()
mb.showinfo('Record added', f"Record of {name} was successfully added")
reset_fields()
display_records()
except:
mb.showerror('Wrong type', 'The type of the values entered is not
accurate. Pls note that the contact field can only contain numbers')
def remove_record():
if not tree.selection():
mb.showerror('Error!', 'Please select an item from the database')
else:
current_item = tree.focus()
values = tree.item(current_item)
selection = values["values"]
tree.delete(current_item)
connector.execute('DELETE FROM SCHOOL_MANAGEMENT WHERE STUDENT_ID=%d'
% selection[0])
connector.commit()
mb.showinfo('Done', 'The record you wanted deleted was successfully
deleted.')
display_records()
def view_record():
global name_strvar, email_strvar, contact_strvar, gender_strvar, dob,
stream_strvar
if not tree.selection():
mb.showerror('Error!', 'Please select a record to view')
else:
current_item = tree.focus()
values = tree.item(current_item)
selection = values["values"]
name_strvar.set(selection[1]); email_strvar.set(selection[2])
contact_strvar.set(selection[3]); gender_strvar.set(selection[4])
date = datetime.date(int(selection[5][:4]), int(selection[5][5:7]),
int(selection[5][8:]))
dob.set_date(date);stream_strvar.set(selection[6])
# Initializing the GUI window
main = Tk()
main.title('DataFlair School Management System')
main.geometry('1000x600')
main.resizable(0, 0)
# Creating the background and foreground color variables
lf_bg = 'MediumSpringGreen' # bg color for the left_frame
cf_bg = 'PaleGreen' # bg color for the center_frame
# Creating the StringVar or IntVar variables
name_strvar = StringVar()
email_strvar = StringVar()
contact_strvar = StringVar()
gender_strvar = StringVar()
stream_strvar = StringVar()
# Placing the components in the main window
Label(main, text="SCHOOL MANAGEMENT SYSTEM", font=headlabelfont, bg='SpringGreen').
pack(side=TOP, fill=X)
left_frame = Frame(main, bg=lf_bg)
left_frame.place(x=0, y=30, relheight=1, relwidth=0.2)
center_frame = Frame(main, bg=cf_bg)
center_frame.place(relx=0.2, y=30, relheight=1, relwidth=0.2)
right_frame = Frame(main, bg="Gray35")
right_frame.place(relx=0.4, y=30, relheight=1, relwidth=0.6)
# Placing components in the left frame
Label(left_frame, text="Name", font=labelfont, bg=lf_bg).place(relx=0.375, rely=0.
05)
Label(left_frame, text="Contact Number", font=labelfont, bg=lf_bg).place(relx=0.
175, rely=0.18)
Label(left_frame, text="Email Address", font=labelfont, bg=lf_bg).place(relx=0.2,
rely=0.31)
Label(left_frame, text="Gender", font=labelfont, bg=lf_bg).place(relx=0.3, rely=0.
44)
Label(left_frame, text="Date of Birth (DOB)", font=labelfont, bg=lf_bg).place(relx
=0.1, rely=0.57)
Label(left_frame, text="Stream", font=labelfont, bg=lf_bg).place(relx=0.3, rely=0.
7)
Entry(left_frame, width=19, textvariable=name_strvar, font=entryfont).place(x=20,
rely=0.1)
Entry(left_frame, width=19, textvariable=contact_strvar, font=entryfont).place(
x=20, rely=0.23)
Entry(left_frame, width=19, textvariable=email_strvar, font=entryfont).place(
x=20, rely=0.36)
Entry(left_frame, width=19, textvariable=stream_strvar, font=entryfont).place(
x=20, rely=0.75)
OptionMenu(left_frame, gender_strvar, 'Male', "Female").place(x=45, rely=0.49,
relwidth=0.5)
dob = DateEntry(left_frame, font=("Arial", 12), width=15)
dob.place(x=20, rely=0.62)
Button(left_frame, text='Submit and Add Record', font=labelfont, command=add_
record, width=18).place(relx=0.025, rely=0.85)
# Placing components in the center frame
Button(center_frame, text='Delete Record', font=labelfont, command=remove_record,
width=15).place(relx=0.1, rely=0.25)
Button(center_frame, text='View Record', font=labelfont, command=view_record,
width=15).place(relx=0.1, rely=0.35)
Button(center_frame, text='Reset Fields', font=labelfont, command=reset_fields,
width=15).place(relx=0.1, rely=0.45)
Button(center_frame, text='Delete database', font=labelfont, command=reset_form,
width=15).place(relx=0.1, rely=0.55)
# Placing components in the right frame
Label(right_frame, text='Students Records', font=headlabelfont, bg='DarkGreen',
fg='LightCyan').pack(side=TOP, fill=X)
tree = ttk.Treeview(right_frame, height=100, selectmode=BROWSE,
columns=('Student ID', "Name", "Email Address", "Contact
Number", "Gender", "Date of Birth", "Stream"))
X_scroller = Scrollbar(tree, orient=HORIZONTAL, command=tree.xview)
Y_scroller = Scrollbar(tree, orient=VERTICAL, command=tree.yview)
X_scroller.pack(side=BOTTOM, fill=X)
Y_scroller.pack(side=RIGHT, fill=Y)
tree.config(yscrollcommand=Y_scroller.set, xscrollcommand=X_scroller.set)
tree.heading('Student ID', text='ID', anchor=CENTER)
tree.heading('Name', text='Name', anchor=CENTER)
tree.heading('Email Address', text='Email ID', anchor=CENTER)
tree.heading('Contact Number', text='Phone No', anchor=CENTER)
tree.heading('Gender', text='Gender', anchor=CENTER)
tree.heading('Date of Birth', text='DOB', anchor=CENTER)
tree.heading('Stream', text='Stream', anchor=CENTER)
tree.column('#0', width=0, stretch=NO)
tree.column('#1', width=40, stretch=NO)
tree.column('#2', width=140, stretch=NO)
tree.column('#3', width=200, stretch=NO)
tree.column('#4', width=80, stretch=NO)
tree.column('#5', width=80, stretch=NO)
tree.column('#6', width=80, stretch=NO)
tree.column('#7', width=150, stretch=NO)
tree.place(y=30, relwidth=1, relheight=0.9, relx=0)
display_records()
# Finalizing the GUI window
main.update()
main.mainloop()
-----------|THAT IS ALL|-----------
Thank you for using Dev.Trinetra.
