html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web lay out 1.</title>
</head>
<body>
<div id="wrapper">
<div id="header" onmouseenter="xyz()">
<div id="logoL"><h2> Logo 1</h2></div>
<div id="logoR"><h2> Logo 2</h2></div><h2>Mission Statement</h2></div>
<div id="navbar" onclick="abc()"><h1 style="margin-top:0px">Navigation Bar</h1></div>
<div id="content">
<div id="bannerL" onclick="mno()">
<h1> This is left banner</h1>
</div>
<div id="bannerR" onmouseenter="pqr()">
<h1> This is right banner</h1> </div>
</div>
<div id="footer"><h3>Footer for copy right & contact information etc</h3></div>
</div>
<script>
function mno(){document.getElementById('bannerL').style.background= "blue";}
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*Author: Dushyant Kumar Tyagi*/;
*{padding:0px;
margin:0px;box-sizing:border-box ;
}
body{
background-color: #ade;
}
#wrapper{
border:2px solid blue;padding:8px;
}
#header{
height:100px;padding:5px;background-color: #a144e4;
}
#logoL{
width:20%;background-color: pink;
height:100%;float:left;padding:px;
}
#logoR{
width:20%;background-color: green;
height:100%;float:right;padding:px;
}
#navbar{margin-top:3px;
height:60px;background-color: #f4552f;padding:px;
}
#content{margin-top:3px;
height:280px;padding:5px;background-color: gold;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*var abc ;
document.getElementById("navbar").onclick=abc;*/
function abc(){
document.getElementById('navbar').style.background="green";
}
function xyz(){
document.getElementById('header').style.background="gold";
}
var kk= Math.ceil(5.89);
alert(kk);
var kk= Math.floor(5.89);
alert("You ate learning JacaScript's Ceil function "+" "+kk);
alert("Today'sDate is "+new Date())
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run