Session - 5 HTML

Session – 5
Lecture – 45 HTML Responsive Web Design
<!DOCTYPE html>
<html>
<head>
<title>html5/css3 for beginners to front end developers</title>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin:0;
background-color:#01a1b9;
.anumasun, anumasun {
display:block;
background-color:#e3e3e3;
padding:30px;
margin:0;
font-size:30px;
}
.navbar {
width:100%;
height:50px;
.navbar ul {
padding-left:20px;
.navbar li {
width:auto;
height:30px;
background-color:#3d3d3d;
list-style:none;
float:left;
padding:10px 10px 0 20px;
color:white;
font-size:.9em;
.course {
float:left;
margin:15px;
padding:15px;
width:300px;
height:300px;
text-align:justify;
}
.pimage {
text-align:center;
margin:0;
font-size:4em;
h2 {
color:#eefdff;
text-align:center;
width:100%;
margin:0;
.footer {
margin:0;
display:block;
background-color:#e3e3e3;
float:left;
width:100%;
text-align:center;
padding:20px 0 20px 0;
</style>
</head>
<body>
<h1 class="anumasun">anumasun Responsive Website</h1>
<div class="navbar">
<ul>
<li>Home</li>
<li>Web Development</li>
<li>Corporate</li>
<li>Ecommerce</li>
<li>News</li>
<li>Tourism & Travel</li>
<li>Contact Us</li>
</ul>
</div>
<img src="images/responsive.jpg" alt="responsive" width="100%" >
<h3 class="anumasun">Website for All Devices (Mobile, Tablet etc... </h3>
<br>
<anumasun>HTML5 / CSS3 From Scratch for Beginners to Professional</anumasun>
<div class="course">
<p class="pimage"> <img src="images/icon1.png" alt="responsive" ></p>
<h2>HTML5 / CSS3 </h2>
<p><b>From Scratch for Beginners to Front End Developers</b></p>
<p>Front end development is the development of those elements of a website that the
customer sees and interacts with directly. </p>
</div>
<p class="pimage"> <img src="images/icon2.png" alt="responsive" > </p>
<h2>Photoshop for Web </h2>
<p>The web design landscape is constantly changing, but Photoshop is still a classic.
Designers use it to create UI elements, web graphics, wireframes, and functional mockups.
Designs that transition beautifully and easily to production. </p>
</div>
<p class="pimage"> <img src="images/icon3.png" alt="responsive" > </p>
<h2>Graphic Design </h2>
<p>Graphic design is the methodology of visualcommunication, and problem-solving

through the use of type, space and image. The field is considered a subset of visual
communication and communication design, but sometimes the term "graphic design" is used
interchangeably with these due to overlapping skills involved. </p>
</div>
<p class="pimage"> <</p>
<h2>HTML5 / CSS3 </h2>
<p><b>From Scratch for Beginners to Front End Developers</b></p>
<p>Front end development is the development of those elements of a website that the
customer sees and interacts with directly. </p>
</div>
<p class="pimage"> =</p>
<h2>Photoshop for Web </h2>
<p>The web design landscape is constantly changing, but Photoshop is still a classic.
Designers use it to create UI elements, web graphics, wireframes, and functional mockups.
Designs that transition beautifully and easily to production. </p>
</div>
<p class="pimage"> > </p>
<h2>Graphic Design </h2>
<p>Graphic design is the methodology of visualcommunication, and problem-solving

through the use of type, space and image. The field is considered a subset of visual
communication and communication design, but sometimes the term "graphic design" is used
interchangeably with these due to overlapping skills involved. </p>
</div>
<div class="footer"> anumasun HTML5 / CSS3 Learning Course </div>
</body>
</html>
Lecture – 46 HTML5 Audio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
audio autoplay controls >
<source src="images/news.mp3" type="audio/mpeg">

<source src="images/news.ogg" type="audio/ogg">
</audio>
</body>
</html>
Lecture – 47 CSS3 Image Gallery, Image Sprites
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
background-color:#8affc6;
#ig {
margin:0;
width:100%;
height:100px;
background-color:#253b00;
}
#ig p {
color:#eeeeee;
font-size:5em;
text-align:center;
margin:0;
#gallery {
width:1100px;
height:auto;
margin:0;
margin-right:auto;
margin-left:auto;
.picture {
margin:10px;
padding:10px;
border:1px solid gray;
border-radius:5px;
float:left;
.picture img {
border-radius:5px;
}
.picture img:hover {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and earlier versions */
.click {
text-align:center;
font-size:.8em;
font-weight:bold;
.ig {
margin:0;
width:100%;
height:100px;
float:left;
background-color:#253b00;
#show1 {
width:75px;
height:75px;
background:url(images/icons.jpg) -30px -25px;
margin:10px 50px 0 155px;
}
#show2 {
width:75px;
height:75px;
#show3 {
width:75px;
height:75px;
#show4 {
width:75px;
height:75px;
</style>
</head>
<body>
<div id="ig">
<p>Image Gallery</p>
</div>
<div id="gallery">
<div class="picture">
<a target="_blank" href="bird1.html"> <img src="images/bird1.jpg" alt="gallery"

width="200" height="100" > </a>
<div class="click">
For Big Size, Click on the Picture
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>

width="200" height="100" > </a>
<div class="click">
</div>
</div>
</div>
<div class="ig">
<img id="show1" src="images/transparent.png" >
</div>
</body>
</html>
Lecture – 48 CSS Outline
<!DOCTYPE html>
<html>
<head>

<style>
.outline {
width:300px;
height:300px;
background-color:yellow;
margin:50px;
outline:pink solid 20px;
border:2px solid red;
p{
padding:25px;
margin:0;
</style>
</head>
<body>
<div class="outline">
<p>Create outline for this paragraph</p>
</div>
</body>
</html>
Lecture – 49 CSS3 User Resizing, Box Sizing
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
border:1px solid gray;
padding:20px;
margin:0;
width:400px;
resize:both;
overflow:auto;
.container {
width:500px;
.content {
box-sizing:border-box;
width:30%;
float:left;
</style>
</head>
<body>
<div class="resize">
User can resize this division with chrome and other supported browsers User can
resize this division with chrome and other supported browsers User can resize this division with
chrome and other supported browsers User can resize this division with chrome and other
supported browsers User can resize this division with chrome and other supported browsers
</div>
<br><br>
<div class="container">
<div class="content">
Create two divisions side by side. Create two divisions side by side.Create two
divisions side by side. Create two divisions side by side. Create two divisions side by side. Create
two divisions side by side. Create two divisions side by side. Create two divisions side by side.
Create two divisions side by side. Create two divisions side by side.
</div>
</div>
<div style="clear:both;"> </div>
</div>
</div>
</body>
</html>
Lecture – 50 HTML Meta Data
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Front End Web Developer Course" >
<meta name="keywords" content="html5, css3, web developer, front end web developer
anumasun anumasun online learning courses" >
<meta name="author" content="sundar" >
<meta name="viewport" content="width=device-width, height=device-height, minimum-

scale=0.5, maximum-scale=1.5, initial scale=1.0, user-scalable=yes" >
<meta http-equiv="content-language" content="en-us" >
<style>
body {
margin:0;
font-family: "arial", Verdana;
</style>
</head>
<body>
</body>
</html>
Lecture – 51 HTML – HTML5 Migration
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
padding:0;
width:100%;
font-family: "sans-serif", arial, Verdana;
background-image:url("images/pattern.png");
topline {
width:100%;
height:10px;
background:linear-gradient(red, #95201a);
margin:0;
float:left;
.limg {
margin:0;
padding: 10px 0 0 150px;
float:left;
logoname {
float:left;
padding-top:75px;
font-size:1.4em;
color:#bd1010;
font-weight:bold;
search {
float:right;
padding:75px 150px 0 0;
nav {
width:1100px;
height:50px;
border:none;
margin:0;
margin-left:130px;
margin-right:auto;
float:left;
nav ul {
padding-left:10px;
nav li {
list-style:none;
float:left;
padding:0 50px 0 20px;
color:#777777;
font-size:1em;
margin-top:10px;
.navbarbline {
height:2px;
width:1100px;
border:none;
margin:0;
margin-left:130px;
margin-right:auto;
float:left;
background-color:#aa1f17;
}
banner {
float:left;
margin-top:10px;
margin-left:130px;
box-shadow:1px 2px 1px #888888;
scrolling {
margin-top:10px;
float:left;
width:1100px;
font-size:1.2em;
margin-left:130px;
section {
width:1100px;
height:750px;
float:left;
margin:0;
margin-top:10px;
margin-left:130px;
background-color:#f9f9f9;
box-shadow:1px 2px 2px 1px #888888;

}
leftContent {
margin:20px;
width:70%;
float:left;
height:450px;
.leftContentHeading h3 {
margin:0;
color:#bd1010;
.leftContentHeading p {
margin:0;
padding:10px;
text-align:justify;
.readmore {
float:right;
color:#bd1010;
font-weight:bold;
font-size:.8em;
margin:0;
}
article {
width:30%;
height:250px;
margin:10px;
margin-top:40px;
float:left;
background-color:#f2eeee;
.services {
width:100%;
height:35px;
margin:0;
color:white;
text-align:center;
.services h4 {
margin:0;
padding:10px 0 0 10px;
.servicesp {
width:90%;
margin:10px;
text-align:justify;
}
p{
font-size:.9em;
.rightContent {
width:23%;
height:700px;
margin-right:20px;
margin-top:20px;
float:right;
.quote {
width:100%;
height:40px;
color:white;
border-radius:10px;
text-align:center;
.quote h4 {
padding-top:10px;
}
.ourServices {
width:100%;
height:300px;
background-color:#f4f1f1;
margin:0;
margin-top:30px;
.offerings {
width:100%;
height:45px;
background-color:none;
margin-0;
box-shadow: 0 2px 2px #888888;
.offerings h4 {
padding-top:15px;
text-align:center;
color:#bd1010;
.check {
color:#bd1010;
}
.offerslist li {
list-style:none;
font-size:.9em;
padding:15px 0 0 25px;
.inquiry {
width:100%;
height:45px;
background-color:none;
margin-0;
background:url("images/InquiryForm_img.jpg");
background-size:30% 99%;
background-repeat:no-repeat;
margin:0;
box-shadow: 0 2px 2px #888888;
.inquiry h4 {
padding-top:15px;
text-align:center;
color:#bd1010;
.formgroup {
margin:35px;
}
footer {
float:left;
margin:0;
width:100%;
height:300px;
margin-top:25px;
footer li {
list-style :none;
color:white;
padding:10px 0 10px 150px;
.sicons {
float:right;
margin-right:100px;
</style>
</head>
<body>
<container>
<header>
<topline>
</topline>
<div class="limg">
<img src="images/logo.png" alt="logo" height="100px" width="100px">
</div>
<logoname>
anumasun
</logoname>
<search>
<form class="forngroup">
Search<input></input>
</form>
</search>
<nav>
<ul>
<li>Home</li>
<li><span style="color:red;">Web Development</span></li>
<li>Corporate</li>
<li>Ecommerce</li>
<li>News</li>
<li>Tourism & Travel</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="navbarbline">
</div>
</header>
<banner>
<img src="images/banner.jpg" alt="banner" >
</banner>
<scrolling>
<marquee scrollamount="5" direction="left">Web Development</marquee>
<marquee scrollamount="2" direction="left">HTML5 / CSS3</marquee>
<marquee scrollamount="4" direction="left">ECommerce / SEO /

CMS</marquee>
<marquee scrollamount="3" direction="left">facebook / twitter /

linkedin</marquee>
</scrolling>
<section>
<leftContent>
<div class="leftContentHeading">
<h3>Welcome to anumasun</h3>
<p>Welcome to KESAV ADITYAA IT SOLUTIONS PVT LTD, we are

one of the world's foremost providers of SAP, Orcale, Mobile Application, Web Development
and Outsourcing Services. We help our clients to transform in order to improve their
performance more effectively, we are having our presence in <u>GCC, EAST ASIA and USA.</u>
</p>
<p class="readmore"> >>Read More...</p>
</div>
<article>
<div class="services">
<h4>Web Development</h4>
</div>
<div class="servicesp">
<p>Our experience of working with industry leaders in the

development of their systems has given Evince valuable insight into the possibilities for solving
business challenges by applying Internet technologies.
</p><br><br>
</div>
</article>
<article>
<h4>ECommerce</h4>
</div>

</p><br><br>
</div>
</article>
<article style="margin-top:6px">
<h4>SEO / CMS</h4>
</div>

</p><br><br>
</div>
</article>
<article>
<h4>Online Marketing</h4>
</div>

</p><br><br>
</div>
</article>
<article>
<h4>MCommerce</h4>
</div>

</p><br><br>
</div>
</article>
<article>
<h4>Direct Marketing</h4>
</div>

</p><br><br>
</div>
</article>
</leftcontent>
<div class="rightContent">
<div class="quote">
<h4>Request a Quote</h4>
</div>
<div class="ourServices">
<div class="offerings">
<h4>Offerings</h4>
</div>
<div class="offerslist">
<ul>
<li><span class="check">&check;</span> PHP/ MySql</li>
<li><span class="check">&check;</span> Mobile

Application</li>
<li><span class="check">&check;</span> Web

Development</li>
<li><span class="check">&check;</span> Content

Management</li>
<li><span class="check">&check;</span> Iphone

Application</li>
<li><span class="check">&check;</span> Ipad

Application</li>
</ul>
</div>
</div>
<div class="ourServices">
<div class="inquiry">
<h4>Inquiry</h4>
</div>
<div class="inquiryform">
<form class="formgroup">
<input type="text" placeholder="Name">
<br>
<br>
<input type="text" placeholder="phone">
<br>
<br>
<input type="email" name="email" placeholder="your email">
<br><br>
<input type="submit" value="submit">
</form>
</div>
</div>
</div>
</section>
</container>
<footer>
<div class="footerlinks">
<ul>
<li>Web Services</li>
<li>PHP / My Sql</li>
<li>Online Marketing</li>
<li>SEO / CMS</li>
<li>Request Quote</li>
<li>Contact Us</li>
</ul>
</div>
<div class="sicons">
<img src="images/fb.jpg" alt="facebook" width="25px">
<img src="images/youtube.jpg" alt="youtube" width="25px">
<img src="images/linkedin.jpg" alt="linkedin" width="25px">
<img src="images/twitter.jpg" alt="twitter" width="25px">
</div>
</footer>
</body>
</html>
Lecture – CSS3 3D Transform
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" />
<title>html/css course test</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
<style>
body {
margin:0;
h1 {
width:100%;
height:75px;
background-color:#ffd200;
margin:0;
padding-top:25px;
text-align:center;
#stage {
margin:200px 0 0 400px;
}
@-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
to {
-webkit-transform: rotateY(-360deg);
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
#spinner img {
position:absolute;
#spinner:hover {
-webkit-animation-play-state:paused;
</style>
</head>
<body>
<h1>CSS3 3D Transform</h1>
<div id="stage">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;" >
<img style="-webkit-transform: rotateY(0deg) translateX(180px);"

src="images/bird1.jpg" width="250" height="150" alt="" >



</div>
</div>
</body>
</html>

Session - 5 HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Session - 5 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Session – 5

Lecture – 45 HTML Responsive Web Design

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

<meta charset="UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

padding:10px 10px 0 20px;

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

<img src="images/responsive.jpg" alt="responsive" width="100%" >

<h3 class="anumasun">Website for All Devices (Mobile, Tablet etc... </h3>

<anumasun>HTML5 / CSS3 From Scratch for Beginners to Professional</anumasun>

<p class="pimage"> <img src="images/icon1.png" alt="responsive" ></p>

<h2>HTML5 / CSS3 </h2>

<p><b>From Scratch for Beginners to Front End Developers</b></p>

<h2>Photoshop for Web </h2>

<p class="pimage"> <img src="images/icon3.png" alt="responsive" > </p>

<h2>Graphic Design </h2>

<p>Graphic design is the methodology of visualcommunication, and problem-solving

<p class="pimage"> &lt;</p>

<h2>HTML5 / CSS3 </h2>

<p><b>From Scratch for Beginners to Front End Developers</b></p>

<p class="pimage"> &equals;</p>

<h2>Photoshop for Web </h2>

<p class="pimage"> &gt; </p>

<h2>Graphic Design </h2>

<p>Graphic design is the methodology of visualcommunication, and problem-solving

<div class="footer"> anumasun HTML5 / CSS3 Learning Course </div>

Lecture – 46 HTML5 Audio

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

audio autoplay controls >

<source src="images/news.mp3" type="audio/mpeg">

Lecture – 47 CSS3 Image Gallery, Image Sprites

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

<meta charset="UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

border:1px solid gray;

filter:alpha(opacity=50); /* IE 8 and earlier versions */

background:url(images/icons.jpg) -30px -25px;

margin:10px 50px 0 155px;

background:url(images/icons.jpg) -325px -25px;

margin:10px 50px 0 155px;

background:url(images/icons.jpg) -780px -25px;

margin:10px 50px 0 155px;

background:url(images/icons.jpg) -480px -190px;

margin:10px 50px 0 155px;

<a target="_blank" href="bird1.html"> <img src="images/bird1.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird2.html"> <img src="images/bird2.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird3.html"> <img src="images/bird3.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird4.html"> <img src="images/bird4.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird1.html"> <img src="images/bird1.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird2.html"> <img src="images/bird2.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird3.html"> <img src="images/bird3.jpg" alt="gallery"

For Big Size, Click on the Picture

<a target="_blank" href="bird4.html"> <img src="images/bird4.jpg" alt="gallery"

For Big Size, Click on the Picture

<img id="show1" src="images/transparent.png" >

<img id="show2" src="images/transparent.png" >

<li>Tourism & Travel</li>

<p class="pimage"> <</p>

<p class="pimage"> =</p>

<p class="pimage"> > </p>

<li>Tourism & Travel</li>