1
1.demonstrate the use of fading effects.
=> Design:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>fadding effects</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("h2").fadeOut(1000);
});
Web Designing II PATEL VANSHIT
2
$("#b4").click(function(){
$("h2").fadeIn(1000);
});
$("#b2").click(function(){
$("h2").fadeToggle(1000);
});
$("#b3").click(function(){
$("h2").fadeTo("slow",0.4);
});
});
</script>
<style>
body {
background: url('C:\Users\Keshav Saymbar\Desktop\HTML 1\Assignment 1\k.jpg') no-repeat;
font-family: 'Arial', sans-serif;
.d1{
font-size: large;
text-align: left;
padding-left : 50px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left;
Web Designing II PATEL VANSHIT
3
a{
display: block;
color: black;
text-align: center;
font-size: large;
padding: 14px 16px;
text-decoration: none;
a:hover {
color: rgb(255, 255, 255);
font: 1em sans-serif;
font-size: large;
border-radius: 100px;
h3{
padding-left: 50px;
background-color: black;
color: darkred;
padding: 10px;
font-family: cursive;
button{
margin-left: 50px;
font: 1em sans-serif;
font-size: large;
background-color: #00ffff;
color: darkred;
border: none;
Web Designing II PATEL VANSHIT
4
border-radius: 100px;
padding: 10px 20px;
width: 150px;
box-shadow: 0 9px #999;
button:hover {
background-color: white;
button:active {
background-color: purple;
box-shadow: 0 5px #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="con">
<div class="box1">
<img src="v1.webp" alt="">
<div class="head">
<h4>Managed By: Shri Mahavir Vidya Mandir Trust</h4>
<h2>VIMAL TORMAL PODDAR BCA & COMMERCE COLLEGE</h2>
<h4>BCA I B.COM</h4>
<h4>Affiliated to VNSGU-SURAT</h4>
<h5>Subject : Web Designing-2</h5>
</div>
<img src="v2.webp">
</div>
<div class="nav">
<ul>
Web Designing II PATEL VANSHIT
5
<li id="l1"><a href="nav.html">Home</a></li>
<li id="l1"><a href="fad.html">Fadein</a></li>
<li id="l1"><a href="slid.html">Sliding</a></li>
<li id="l1"><a href="registration.html">Registration</a></li>
<li id="l1"><a href="jquery.html">Jquery</a></li>
</ul>
</div>
<div class="d1">
<br><br><br>
<h3>
High demand for IT professionals: The IT industry is one of the fastest-growing industries
in the world, and there is a high demand for qualified IT professionals. A BCA degree can
help you land a job in this competitive field.
• Good salary potential: IT professionals typically earn good salaries. With a BCA degree,
you can expect to earn a starting salary of around ₹30,000 to ₹40,000 per month in
India.
• Variety of career options: There are a wide variety of career options available to BCA
graduates. You can work as a software developer, web developer, database
administrator, network administrator, or IT project manager.
• Strong foundation for further studies: A BCA degree can also be a good foundation for
further studies, such as an MCA (Master of Computer Applications) degree.
</h3>
<br><br>
<button id="b1">fade-Out</button>
<button id="b4">fade-In</button>
<button id="b2">fade-Toggle</button>
<button id="b3">fade-To</button>
</body>
</html>
Web Designing II PATEL VANSHIT
6
2.demonstrate the use of sliding effects.
=> Design:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sliding effects</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0px;
padding: 0px;
Web Designing II PATEL VANSHIT
7
.d1{
font-size: large;
text-align: left;
padding-left : 50px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left;
a{
display: block;
color: white;
text-align: center;
font-size: large;
padding: 14px 16px;
text-decoration: none;
a:hover {
color: rgb(255, 255, 255);
font: 1em sans-serif;
font-size: large;
border-radius: 100px;
.p{
Web Designing II PATEL VANSHIT
8
height: 52vh;
width: 50vw;
background: transparent;
backdrop-filter: blur(17px);
margin: 91px 326px;
font-family: sans-serif;
font-size: 19px;
h3{
padding-left: 50px;
background-color: black;
color: darkred;
padding: 10px;
font-family: cursive;
button{
margin-left: 50px;
font: 1em sans-serif;
font-size: large;
background-color: purple;
color: white;
border: none;
border-radius: 100px;
padding: 10px 20px;
width: 150px;
box-shadow: 0 9px #999;
button:hover {
background-color: rgb(92, 7, 102);
Web Designing II PATEL VANSHIT
9
button:active {
background-color: purple;
box-shadow: 0 5px #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="con">
<div class="box1">
<img src="v1.webp" alt="">
<div class="head">
<h4>Managed By: Shri Mahavir Vidya Mandir Trust</h4>
<h2>VIMAL TORMAL PODDAR BCA & COMMERCE COLLEGE</h2>
<h4>BCA I B.COM</h4>
<h4>Affiliated to VNSGU-SURAT</h4>
<h5>Subject : Web Designing-2</h5>
</div>
<img src="v2.webp">
</div>
<div class="nav">
<ul>
<li id="l1"><a href="nav.html">Home</a></li>
<li id="l1"><a href="fad.html">Fadein</a></li>
<li id="l1"><a href="slid.html">Sliding</a></li>
<li id="l1"><a href="registration.html">Registration</a></li>
<li id="l1"><a href="jquery.html">Jquery</a></li>
</ul>
</div>
Web Designing II PATEL VANSHIT
10
<div class="con">
<div class="p">
<h3>
The salary for a BCA graduate can vary depending on their experience, skills, and
location. However, BCA graduates can expect to earn a starting salary of around
₹30,000 to ₹40,000 per month in India. With experience, BCA graduates can earn much
more.
What are the eligibility criteria for BCA?
To be eligible for a BCA program, you must have passed 10+2 or equivalent from a
recognized board with Mathematics as a compulsory subject. Some universities may
also require you to take an entrance exam.
</h3>
<br><br>
<button id="b1">slide-Up</button>
<button id="b2">slide-Down</button>
<button id="b3">slide-Toggle</button>
</div>
</div>
</body>
</html>
Web Designing II PATEL VANSHIT
11
3.make one registration page,(use jquery events and effects)
(full name, address,contact no,email ID,gender,course(BBA,BCA,B.com).
Note: use bootstrap or css for design.
=> Design:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>registration page</title>
<style>
*{
margin: 0px;
Web Designing II PATEL VANSHIT
12
padding: 0px;
body{
background: url('v2.jpeg');
.box{
border: 2px solid white;
height: 79vh;
width: 31vw;
border-radius: 10px;
margin: 65px 74px;
background-color: ;
color: whitesmoke;
font-family: sans-serif;
.box h3{
margin: 11px 45px;
cursor: pointer;
input{
padding: 10px 64px;
text-align: center;
border-radius: 8px;
margin: 12px 46px;
border: none;
box-shadow: 0px 0px 14px 0px;
button{
Web Designing II PATEL VANSHIT
13
background-color: #4070F4;
padding: 10px 78px;
border: none;
border-radius: 8px;
color: white;
font-size: 20px;
margin: 19px 54px;
cursor: pointer;
.box p{
margin: 0px 69px;
.box span{
color: #0032ba;
cursor: pointer;
margin-left: 2px;
.box h3:hover{
text-decoration:2px underline #0032ba;
</style>
</head>
<body>
<div class="con">
<div class="box1">
<img src="v1.webp" alt="">
<div class="head">
<h4>Managed By: Shri Mahavir Vidya Mandir Trust</h4>
<h2>VIMAL TORMAL PODDAR BCA & COMMERCE COLLEGE</h2>
<h4>BCA I B.COM</h4>
Web Designing II PATEL VANSHIT
14
<h4>Affiliated to VNSGU-SURAT</h4>
<h3>Subject : Web Designing-2</h3>
</div>
<img src="v2.webp">
</div>
<div class="nav">
<ul>
<li id="l1"><a href="nav.html">Home</a></li>
<li id="l1"><a href="fad.html">Fadein</a></li>
<li id="l1"><a href="slid.html">Sliding</a></li>
<li id="l1"><a href="registration.html">Registration</a></li>
<li id="l1"><a href="jquery.html">Jquery</a></li>
</ul>
</div>
<center>
<form>
<div>
<div class="box">
<h3>Registration</h3>
<input type="text" placeholder="Enter your full Name" required>
<br>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<input type="password" placeholder="Enter your Password" required>
<br>
<input type="password" placeholder="Confirm password " required>
<br>
<input type="checkbox">i accept all term & condition
Web Designing II PATEL VANSHIT
15
<br>
<button>Register Now</button>
<p>already have an account?<span>Login</span></p>
</div>
</div>
</form>
</center>
</body>
</html>
4.demonstrate the use of jquery events.
=> Design
Web Designing II PATEL VANSHIT
16
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>JQuery events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#h1").click(function(){
$("#h1").hide();
});
$("#h2").dblclick(function(){
$("#h2").hide();
});
$("#h3").mouseenter(function(){
$("#h3").css("background","yellow");
$("#h3").css("color","black");
});
$("#h4").mouseleave(function(){
$("#h4").css("background","yellow");
$("#h4").css("color","black");
});
$("#h5").mousedown(function(){
$("#h5").css("background","yellow");
$("#h5").css("color","black");
});
$("#h6").mouseup(function(){
Web Designing II PATEL VANSHIT
17
alert("You relesedthe mouse button on the paragraph");
});
$("#h7").hover(function(){
$("#h7").css("background","yellow");
$("#h7").css("color","black");
},
function(){
$("#h7").css("background","purple");
$("#h7").css("color","white");
});
});
</script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0px;
padding: 0px;
.navbar {
background-color: purple;
.d1{
font-size: large;
text-align: left;
padding-left : 50px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
Web Designing II PATEL VANSHIT
18
li {
float: left;
a{
display: block;
color: white;
text-align: center;
font-size: large;
padding: 14px 16px;
text-decoration: none;
h3{
padding-left: 50px;
background-color: purple;
color: white;
padding: 10px;
button{
margin-left: 50px;
font: 1em sans-serif;
font-size: large;
background-color: purple;
color: white;
border: none;
border-radius: 100px;
padding: 10px 20px;
width: 150px;
box-shadow: 0 9px #999;
Web Designing II PATEL VANSHIT
19
button:hover {
background-color: rgb(92, 7, 102);
button:active {
background-color: purple;
box-shadow: 0 5px #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="con">
<div class="box1">
<img src="v1.webp" alt="">
<div class="head">
<h4>Managed By: Shri Mahavir Vidya Mandir Trust</h4>
<h2>VIMAL TORMAL PODDAR BCA & COMMERCE COLLEGE</h2>
<h4>BCA I B.COM</h4>
<h4>Affiliated to VNSGU-SURAT</h4>
<h5>Subject : Web Designing-2</h5>
</div>
<img src="v2.webp">
</div>
<div class="nav">
<ul>
<li id="l1"><a href="nav.html">Home</a></li>
<li id="l1"><a href="fad.html">Fadein</a></li>
<li id="l1"><a href="slid.html">Sliding</a></li>
<li id="l1"><a href="registration.html">Registration</a></li>
<li id="l1"><a href="jquery.html">Jquery</a></li>
Web Designing II PATEL VANSHIT
20
</ul>
</div>
<h3 id="h1">
click()<br>
The click() method attaches an event handler function to an HTML element.<br>
The function is executed when the user clicks on the HTML element.<br>
If you click this paragraph once it will be disappear from here.
</h3>
<hr>
<h3 id="h2">
dblclick()<br>
The dblclick() method attaches an event handler function to an HTML element.<br>
The function is executed when the user double-clicks on the HTML element.<br>
If you double click this paragraph then it will disappear from here.<br>
</h3>
<hr>
<h3 id="h3">
mouseenter()<br>
The mouseenter() method attaches an event handler function to an HTML element.<br>
The function is executed when the mouse pointer enters the HTML element.<br>
If you enter the mouse on this paragraph it will highlight.
</h3>
<hr>
<h3 id="h4">
mouseleave()<br>
The mouseleave() method attaches an event handler function to an HTML
element.<br>
The function is executed when the mouse pointer leaves the HTML element.<br>
When the mouse leave this paragraph, the paragraph will be highlight.
Web Designing II PATEL VANSHIT
21
</h3>
<hr>
<h3 id="h5">
mousedown()<br>
The mousedown() method attaches an event handler function to an HTML
element.<br>
The function is executed, when the left, middle or right mouse button is pressed down,
while the mouse is over the HTML element.<br>
When you press down the mouse button on this paragraph it will show the pop-up
message on thid site.
</h3>
<hr>
<h3 id="h6">
mouseup()<br>
The mouseup() method attaches an event handler function to an HTML element.<br>
The function is executed, when the left, middle or right mouse button is released, while
the mouse is over the HTML element<br>
</h3>
<hr>
<h3 id="h7">
hover()<br>
The hover() method takes two functions and is a combination of the mouseenter() and
mouseleave() methods.<br>
The first function is executed when the mouse enters the HTML element, and the
second function is executed when the mouse leaves the HTML element.<br>
When you put the pointer of the mouse the paragraph will highlight and when you leave
the pointer of the mouse the paragraph will be normal.
</h3>
<hr>
</body>
</html
Web Designing II PATEL VANSHIT
