Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Web Assignment 2

Vimal tormal poddar

Uploaded by

vanshitpatel23
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web Assignment 2

Vimal tormal poddar

Uploaded by

vanshitpatel23
Copyright
© © All Rights Reserved
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