Scribd
Upload
5 views21 pages

Web Assignment 2

Vimal tormal poddar

Uploaded by

vanshitpatel23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views21 pages

Web Assignment 2

Vimal tormal poddar

Uploaded by

vanshitpatel23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like