Session - 4 HTML Dropdown

Session – 4
Lecture – 31 HTML / CSS Comments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5/css3 for beginners to front end developers</title>
<link rel="stylesheet" type="text/css" href="external.css">
<style>
/* this style for the page background */
body {
background-color:green;
/*
p{
color:blue;
font-weight:bold;
*/
</style>
</head>
<body>
<div class="one"> </div>
<div class="two"> </div>

<div class="gradient">

<p><span style="color:red; font-size:3em">align this paragraph with inline style</span></p>
</div>

</body>
</html>
Lecture – 32 HTML Formatting
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
<style>
</style>
</head>
<body>
<p>
This is normal Text <br>
<b><i>Bold Text</i></b> <br>
<i>italic Text</i> <br>
<small>Small Text</small><br>
<mark> This is Marked</mark> <br>
<del>Removed or Deleted</del><br>
the temperature 50<sup>o</sup> <br>
H<sub>2</sub>O
</p>
</body>
</html>
Lecture – 33 HTML / CSS Links
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color:black; background-color:transparent; text-decoration:none; }
a:visited {
color:black; background-color:transparent; text-decoration:none; }
a:hover {
color:blue; background-color:transparent; text-decoration:none;}

a:active {
color:blue; background-color:gray; text-decoration:none; }
</style>
</head>
<body>
<a name="top" />
<a href="image.html">link to Image </a><br><br>
<a href="shadow.html"><img src="images/leaf.gif" alt="link" /> </a>
<p>create paragraph</p>
<br><br>
<p>next line</p>
<br><br>
<br><br>
<p>next line</p>
<br><br>
<br><br>
<p>next line</p>
<br><br>
<br><br>
<p>next line</p>
<br><br>
<br><br>
<p>next line</p>
<br><br>
<br><br>
<p>next line</p>
<br><br>
<p><a href="#top">back to top</a></p>
</body>
</html>
Lecture – 34 CSS Posotion, Z-index
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
width:500px;
height:200px;
background-color:gray;
}
.top {
width:120px;
height:400px;
background-color:yellow;
position:fixed;
top:25px;
right:50px;
text-align:center;
.relative {
position:relative;
left:100px;
top:5px;
.absolute {
position:absolute;
left:300px;
top:50px;
.overlap {
position:absolute;
left:600px;
top:250px;
width:200px;
height:200px;
background-color:blue;
z-index:3;
.overlap1 {
position:absolute;
left:700px;
top:350px;
width:200px;
height:200px;
background-color:red;
z-index:1;
.overlap2 {
position:absolute;
left:550px;
top:270px;
width:200px;
height:200px;
z-index:4;
.overlap3 {
position:absolute;
left:650px;
top:180px;
width:200px;
height:200px;
background-color:pink;
z-index:2;
</style>
</head>
<body>
<p class="relative"> Div 2 Aligned with position Relative</p>
<div class="scroll">
<p> Div 1 Aligned without position</p>
</div>
<p class="relative"> Div 2 Aligned with position Relative</p>
</div>
<p class="absolute"> Div 3 Aligned with position Absolute</p>
</div>
</div>
</div>
<div class="overlap">
<p>Overlap this</p>
</div>
<div class="overlap1">
<p>Overlap this</p>
</div>
<p>Overlap this</p>
</div>
<p>Overlap this</p>
</div>
<div class="top">
<h1 class="top">Keep this Heading on the Right side of the Screen</h1>
</div>
</body>
</html>
Lecture – 35 CSS Display
<!DOCTYPE html>
<html>
<head>
<style>
.hide {
visibility:hidden;
.display {
display:none;
li {
display:inline;
span {
display:block;
</style>
</head>
<body>
<h1>Show this Heading</h1>
<h1 class="hide">hide this Heading</h1>

<p>Note: The Hidden heading still takes up space</p>
<h1>Show this Heading</h1>
<div class="display">hide this div</div>
<p>Note: The Hidden div does not take up space</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>WebSite</li>
</ul>
<span>This line is going to break here</span>
<span>continue from line 1</span>
</body>
</html>
Lecture – 36 HTML5 / CSS3 – Navigation Bar, Drop Down Menu
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:200px;
#main {
margin:0;
display:inline;
padding:15px 5px 15px 0;
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
#main li {
display:inline-block;
margin:0;
padding:15px 20px;
background-color:#fefefe;
cursor:pointer;
margin-right:-5px;
position:relative;
#main li:hover {
background-color:red;
color:#fff;
}
#dropdown {
position:absolute;
top:48px;
left:0;
z-index:2;
padding:0;
opacity:0;
visibility:hidden;
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
#dropdown li {
color:black;
width:125px;
#main li:hover #dropdown {
opacity:1;
visibility:visible;
</style>
</head>
<body>
<ul id="main">
<li>Home</li>
<li>
Web Development
<ul id="dropdown">
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Corporate</li>
<li>Ecommerce</li>
<li>News
<ul id="dropdown">
<li>Latest News</li>
<li>Political</li>
<li>Sports</li>
</ul>
</li>
<li>Tourism & Travel</li>
<li>Contact</li>
</ul>
</body>
</html>
Lecture -37 HTML – Javascript
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<li><span id="time">Time</span></li>
</body>
<script type="text/javascript">
var today = new date();
document.getElementById("time").innerHTML=today;
</script>
</html>
Lecture – 38 CSS3 Multiple column
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Lecture – 39 CSS3 2D Animations
<!DOCTYPE html>
<html>
<head>
<style>
#fade {
width:200px;
height:200px;
background:green;
-webkit-animation:animate 15s; /* chrome, safari, opera */
animation:animate 15s;
/* chrome, safari, opera */
@-webkit-keyframes animate {
from {background:green;}
to {background:blue;}
/* standard syntax */
@keyframes animate {
from {background:green;}
to {background:blue;}
@-webkit-keyframes rotate {
from {
-webkit-transform:rotate(0deg)
to {
-webkit-transform:rotate(360deg)
#rotate img {
margin-top:100px;
-webkit-animation-name:rotate;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-transition-timing-function:linear;
}
#rotateX {
width:200px;
height:200px;
-ms-transform:rotate(25deg); /* IE9 */
-webkit-transform:rotate(25deg); /* safari */
-tansform:rotate(20deg); /* standard syntex */
#skew {
width:200px;
height:200px;
margin-top:50px;
margin-left:150px;
-ms-transform:skewx(25deg); /* IE9 */
-webkit-transform:skewx(25deg); /* safari */
-tansform:skewx(20deg); /* standard syntex */
#scale {
width:200px;
height:200px;
margin-top:50px;
margin-left:150px;
-ms-transform:scale(1.5,1.5); /* IE9 */
-webkit-transform:scale(1.5,1.5); /* safari */
-tansform:scale(1.5,1.5); /* standard syntex */
.banner {
width:1000px;
height:300px;
background:green;
position:relative;
-webkit-animation-name:banner;
-webkit-animation-duration:25s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* standard syntax*/
animation-name:banner;
animation-duration:25s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
@-webkit-keyframes banner {
0% {background-image:url("images/mobileapp.jpg"); left:0px; top:0px;}
40% {background-image:url("images/web.jpg"); left:0px; top:0px;}
80% {background-image:url("images/multimedia.jpg"); left:0px; top:0px;}
/* standard syntax */
@keyframes banner {
</style>
</head>
<body>
<div class="banner"> </div>
<div id="fade"> </div>
<div id="rotate"> <img src="images/creek.jpg" > </div>
<div id="rotateX"> </div>
<div id="skew"> </div>
div id="scale"> </div>
</body>
</html>

Session - 4 HTML Dropdown

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Session - 4 HTML Dropdown

Uploaded by

Copyright:

Available Formats

Session – 4

Lecture – 31 HTML / CSS Comments

<title>html5/css3 for beginners to front end developers</title>

<link rel="stylesheet" type="text/css" href="external.css">

/* this style for the page background */

<div class="one"> </div>

<div class="two"> </div>

<p><span style="color:red; font-size:3em">align this paragraph with inline style</span></p>

gradient background color applied to this div

this is inline style text

Lecture – 32 HTML Formatting

<title>html5/css3 for beginners to front end developers</title>

<link rel="stylesheet" type="text/css" href="external.css">

<b><i>Bold Text</i></b> <br>

<i>italic Text</i> <br>

<mark> This is Marked</mark> <br>

the temperature 50<sup>o</sup> <br>

Lecture – 33 HTML / CSS Links

<title>html5/css3 for beginners to front end developers</title>

color:black; background-color:transparent; text-decoration:none; }

color:black; background-color:transparent; text-decoration:none; }

color:blue; background-color:transparent; text-decoration:none;}

color:blue; background-color:gray; text-decoration:none; }

<a name="top" />

<a href="image.html">link to Image </a><br><br>

<a href="shadow.html"><img src="images/leaf.gif" alt="link" /> </a>

<p><a href="#top">back to top</a></p>

Lecture – 34 CSS Posotion, Z-index

<title>html5/css3 for beginners to front end developers</title>

<p class="relative"> Div 2 Aligned with position Relative</p>

<p> Div 1 Aligned without position</p>

<p class="relative"> Div 2 Aligned with position Relative</p>

<p class="absolute"> Div 3 Aligned with position Absolute</p>

<p> Div 4 Aligned without position</p>

<h1 class="top">Keep this Heading on the Right side of the Screen</h1>

<title>html5/css3 for beginners to front end developers</title>

<h1>Show this Heading</h1>

<h1 class="hide">hide this Heading</h1>

<h1>Show this Heading</h1>

<div class="display">hide this div</div>

<p>Note: The Hidden div does not take up space</p>

<span>This line is going to break here</span>

<span>continue from line 1</span>

<span>continue from line 2</span>

<span>continue from line 3</span>

Lecture – 36 HTML5 / CSS3 – Navigation Bar, Drop Down Menu

<title>html5/css3 for beginners to front end developers</title>

padding:15px 5px 15px 0;

-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);

#main li:hover #dropdown {

<li>Tourism &amp; Travel</li>

<title>html5/css3 for beginners to front end developers</title>

var today = new date();

Lecture – 38 CSS3 Multiple column

Lecture – 39 CSS3 2D Animations

<title>html5/css3 for beginners to front end developers</title>

-webkit-animation:animate 15s; /* chrome, safari, opera */

/* chrome, safari, opera */

<li>Tourism & Travel</li>