Project - Build Corporate Website HTML

<!
doctype html>
<html>
<head>
<title>Corporate Design - HTML/CSS Course - beginners to professional</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;
padding:0;
width:100%;
font-family:sans-serif,verdana, arial;
a:link {color:#e1e1e1; background-color:transparent; text-decoration:none}
a:visited {color:#e1e1e1; background-color:transparent; text-decoration:none}
a:hover {color:#e1e1e1; background-color:transparent; text-decoration:none}
a:active {color:#e1e1e1; background-color:transparent; text-decoration:none}
.header {
width:100%;
height:100px;
background-color:#053d6c;
}
.limg {
margin:0;
padding:10px 0 0 170px;
float:left;
.logoname {
float:left;
padding-top:48px;
color:#f4f4f4;
.navbar {
height:30px;
width:800px;
border:none;
margin-left:50px;
margin-top:40px;
margin-right: auto;
float:left;
}
.navbar ul {
padding-left:200;
margin:0;
.navbar li {
list-style:none;
color:#e1e1e1;
font-size:.8em;
float:left;
padding:0 15px 0 15px;
margin-top:0;
.bannerDiv {
width:100%;
height:380px;
margin:0;
.banner {
width:1000px;
height:300px;
margin:0;
margin-left:160px;
position: relative;
border-top-right-radius:50px;
border-bottom-left-radius:50px;
box-shadow: 1px 1px 1px 2px #919191;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-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: myfirst;
animation-duration: 25s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}
25% {background-image: url("images/mobileapp.jpg"); left:-1000px; top:0px;}
30% {background-image: url("images/web.jpg"); left:0px; top:0px;}
60% {background-image: url("images/multimedia.jpg"); left:0px; top:0px;}
85% {background-image: url("images/multimedia.jpg"); left:-1000px; top:0px;}
/* Standard syntax */
@keyframes myfirst {
25% {background-image: url("images/mobileapp.jpg"); left:-1000px; top:0px;}

85% {background-image: url("images/multimedia.jpg"); left:-1000px; top:0px;}
.bannerLeft {
width:150px;
height:350px;
position:absolute;
left:0;
top:75px;
.bannerRight {
width:150px;
height:350px;
position:absolute;
left:1199px;
top:75px;
}
.welcome {
margin:0;
margin-left:175px;
color:#e1e1e1;
padding:0;
float:left;
text-shadow: 2px 2px #5b5b5b;
.sIcons {
float:left;
margin:0;
margin-left:275px;
margin-top:27px;
.contentDiv {
width:1100px;
height:450px;
background-color:none;
float:left;
margin:0;
margin-left:120px;
}
.contentHeading {
float:left;
color:#5f5e5e;
margin:0;
margin-left:50px;
.contentHeading h2 span {
color:#009cff;
.contentTopics {
margin:0;
margin-left:50px;
float:left;
.topics {
width:300px;
height:300px;
border-radius:150px;
margin:0;
margin-right:20px;
margin-left:20px;
background-color:#e5ebed;
float:left;
.topics1 {
width:250px;
height:250px;
border-radius:125px;
margin:25px;
background-color:#f3fbfd;
float:left;
.topics1 img {
float:left;
border-radius:75px;
margin:50px;
.topics1 p {
width:150px;
height:150px;
float:left;
position: absolute;
border-radius:75px;
margin:60px;
color:#ffd800;
font-weight:bold;
font-size:1.4em;
padding-top:25px;
text-shadow: 2px 2px 2px #686400;
text-align:center;
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
.videoHeading {
width:1020px;
color:#5f5e5e;
margin:0;
margin-left:auto;
margin-right:auto;
}
h2 span, p span {
color:#009cff;
font-weight:bold;
.videos {
width:100%;
height:280px;
background-color:#f5f5f5;
float:left;
margin:0;
.video1 {
margin:0;
margin-left:180px;
margin-right:20px;
padding-top:25px;
float:left;
z-index:-1;
.list p {
font-size:.6em;
margin:0;
padding-top:25px;
.listImg1 {
position: absolute;
left:800px;
top:1050px;
z-index:35;
box-shadow:6px 2px 3px #939393;
.listImg2 {
position: absolute;
left:950px;
top:1110px;
z-index:36;
.listImg3 {
position: absolute;
left:645px;
top:1110px;
z-index:37;
}
.sliding {
width:100%;
height:125px;
background-color:white;
float:left;
margin:0;
.slider {
width:1000px;
float:left;
margin:0;
margin-left:200px;
padding:10px;
img {
margin:0;
margin-left:10px;
float:left;
.footer {
width:100%;
height:300px;
background-color:#e4e4e4;
float:left;
margin:0;
.footerList {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
width:1000px;
margin:0;
margin-left:auto;
margin-right:auto
.column1 {
width:320px;
height:300px;
float:left;
margin:0;
padding:0;
}
.column2 {
width:320px;
height:300px;
float:left;
margin:0;
padding:0;
.column3 {
width:320px;
height:300px;
float:left;
margin:0;
padding:0;
.footer p {
font-size:.8em;
.circles {
margin:0;
float:left;
width:50px;
height:10px;
.column1Text {
margin:0;
float:left;
width:240px
height:250px;
.footerlistheading {
margin:0;
padding:0;
margin-top:20px;
.circlebg {
margin:0;
float:left;
width:30px;
height:30px;
margin-top:22px;
margin-bottom:15px;
border-radius:15px;
background-color:white;
font-size:.7em;
text-align:center;
.blogtext {
width:240px;
height:50px;
float:left;
text-align:justify;
margin:0;
margin-left:30px;
padding:0 0 0 10px;
#adbanner {
position: fixed;
top: 10px;
right: 5px;
box-shadow:1px 2px 2px gray;
.footerbar {
width:100%;
height:20px;
float:left;
margin:0;
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="headernavbar">
<div class="limg">
<img src="images/logo.png" alt="Logo" height="75px"

width="75px">
</div>
<div class="logoname">
<span style="font-size:1.8em"><b>anumasun</b></span>
</div>
<div class="navbar">
` <ul>
<li><a href="home.html">Home</a></li>
<li><a href="webdevelopment.html">Web
Development</a></li>
<li style="background-color:#11aff5"><a
href="corporate.html">Corporate</a></li>
<li><a href="ecommerce.html">Ecommerce</a></li>
<li><a href="news.html">News</a></li>
<li><a href="tourismandtravel.html">Tourism &

Travel</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="bannerDiv">
<div class="banner">
</div>
<div class="bannerLeft">
</div>
<div class="bannerRight">
</div>
<div class="welcome">
<h1>Welcome to our Official Website</h1>
</div>
<div class="sIcons">
<img src="images/fb.jpg" alt="facebook" width="30px" >
<img src="images/youtube.jpg" alt="facebook" width="30px" >
<img src="images/linkedin.jpg" alt="facebook" width="30px" >
<img src="images/twitter.jpg" alt="facebook" width="30px" >
</div>
</div>
<div class="contentDiv">
<div class="contentHeading">
<h2><span>HTML<sup>5</sup> / CSS<sup>3</sup></span> Course
from <span>Scratch</span> for <span>Beginners</span> to <span>Professional</span></h2>
<p>This course is <span>designed for the beginners,</span> from

scratch learn HTML<sup>5</sup> & CSS<sup>3</sup> and become a <span>professional web
developer</span>, you can <span>build your own website</span> and choose a career as professional
<span>Front End Web Developer</span>.</p>
</div>
<div class="contentTopics">
<div class="topics">
<div class="topics1">
<img src="images/html5.jpg" alt="HTML5" >
<p>HTML<sup>5</sup> / CSS<sup>3</sup> for beginners</p>
</div>
</div>
<img src="images/css3.jpg" alt="HTML5" >
<p>HTML<sup>5</sup> / CSS<sup>3</sup> for beginners</p>
</div>
</div>
<p>Best Online Course for Beginners to Professional </p>
</div>
</div>
</div>
</div>

<div class="videoHeading">
<h2><span>HTML<sup>5</sup> / CSS<sup>3</sup></span> Course

<span>VIDEO & Z-Index</span></h2>
<p>Import Videos using The HTML5 "video" element, it

specifies a standard way to embed a video in a web page. Before HTML5 there was no standard for
showing videos on a web page, videos could only be played with a external plug-in like Flash.</p>
</div>
<div class="videos">
<div class="video1">
<video width="427" height="240" controls>
<source src="images/video.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="list">
<p>Align with position & Z-Index value</p>
<div class="listImg1">
<img class="img1" src="images/centerZ.jpg" alt="centerimage"

>
</div>
<img class="img2" src="images/rightZ.jpg" alt="rightimage" >
</div>
<img class="img3" src="images/leftZ.jpg" alt="leftimage" >
</div>
</div>
</div>

<div class="sliding">
<div class="slider">
<marquee behavior="scroll" direction="left" onmouseover='this.stop()'

onmouseout='this.start()'><img src="images/htmltag0.jpg" height="100" alt="sliding images"
scrollamount="3"/></marquee>
</div>
</div>

<div class="footer">
<div class="footerList">
<div class="column1">
<h4 class="footerlistheading">From the blog</h4>
<div class="circles">
<div class="circlebg">07 Oct</div>
<div class="circlebg">30 Sep</div>
<div class="circlebg">25 Feb</div>
</div>
<div class="column1Text">
<div class="blogtext"><p>Our sister agency, launches its Social

Hubb product at Success 2010 <br /><span style="font-size:.7em">Posted by self on Special
News</span></p></div>
<div class="blogtext" style="margin-top:18px"><p>Launch of Sayidaty
Mall <br /><span style="font-size:.7em">Posted by self on Special News</span></p></div>
<div class="blogtext" style="margin-top:18px"><p>Emirates Steel

<br /><span style="font-size:.7em">Posted by self on Special News</span></p></div>
</div>
</div>
<h4 class="footerlistheading">Testimonials</h4>
<p style="line-height:1.5; width:300px; text-align:justify">
Working with anumasun was a great experience, with a professional &

dedicated team. Building our new website with them was a great pleasure.
<br />
<span style="font-size:.7em"><b>Ramanujam,</b> Ambujam General

Trading L.L.C </span>
</p>
</div>
<h4 class="footerlistheading">Get in Touch with us</h4>
<p style="line-height:1.5">
#17, Park Street, Dubai Media City, <br />
Dubai, UAE<br />
Tel: + 971 50 3573970 <br />
Fax: + 971 4 3678069<br />
mail: sundar@anumasun.com<br />
www.anumasun.com
</p>
</div>
</div>
</div>
<div id="adbanner">
<img src="images/adbanner.jpg" alt="adbanner" />
</div>

<div class="footerbar">
</div>

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

Project - Build Corporate Website HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Project - Build Corporate Website HTML

Caricato da

Copyright:

Formati disponibili

<!

<title>Corporate Design - HTML/CSS Course - beginners to professional</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" />

a:link {color:#e1e1e1; background-color:transparent; text-decoration:none}

a:visited {color:#e1e1e1; background-color:transparent; text-decoration:none}

a:hover {color:#e1e1e1; background-color:transparent; text-decoration:none}

a:active {color:#e1e1e1; background-color:transparent; text-decoration:none}

padding:0 15px 0 15px;

box-shadow: 1px 1px 1px 2px #919191;

/* Chrome, Safari, Opera */

0% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

20% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

25% {background-image: url("images/mobileapp.jpg"); left:-1000px; top:0px;}

30% {background-image: url("images/web.jpg"); left:0px; top:0px;}

50% {background-image: url("images/web.jpg"); left:0px; top:0px;}

55% {background-image: url("images/web.jpg"); left:1000px; top:0px;}

60% {background-image: url("images/multimedia.jpg"); left:0px; top:0px;}

80% {background-image: url("images/multimedia.jpg"); left:0px; top:0px;}

85% {background-image: url("images/multimedia.jpg"); left:-1000px; top:0px;}

90% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

100% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

0% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

20% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

25% {background-image: url("images/mobileapp.jpg"); left:-1000px; top:0px;}

30% {background-image: url("images/web.jpg"); left:0px; top:0px;}

50% {background-image: url("images/web.jpg"); left:0px; top:0px;}

55% {background-image: url("images/web.jpg"); left:1000px; top:0px;}

60% {background-image: url("images/multimedia.jpg"); left:0px; top:0px;}

85% {background-image: url("images/multimedia.jpg"); left:-1000px; top:0px;}

90% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

100% {background-image: url("images/mobileapp.jpg"); left:0px; top:0px;}

text-shadow: 2px 2px #5b5b5b;

text-shadow: 2px 2px 2px #686400;

border: 1px solid black;

box-shadow:6px 2px 3px #939393;

box-shadow:4px 2px 4px #939393;

box-shadow:4px 2px 4px #939393;

-webkit-column-count: 3; /* Chrome, Safari, Opera */

box-shadow:1px 2px 2px gray;

<img src="images/logo.png" alt="Logo" height="75px"

<li><a href="tourismandtravel.html">Tourism &amp;

<h1>Welcome to our Official Website</h1>

<img src="images/fb.jpg" alt="facebook" width="30px" >

<img src="images/youtube.jpg" alt="facebook" width="30px" >

<img src="images/linkedin.jpg" alt="facebook" width="30px" >

<img src="images/twitter.jpg" alt="facebook" width="30px" >

<p>This course is <span>designed for the beginners,</span> from

<img src="images/html5.jpg" alt="HTML5" >

<p>HTML<sup>5</sup> / CSS<sup>3</sup> for beginners</p>

<img src="images/css3.jpg" alt="HTML5" >

<p>HTML<sup>5</sup> / CSS<sup>3</sup> for beginners</p>

<p>Best Online Course for Beginners to Professional </p>

<h2><span>HTML<sup>5</sup> / CSS<sup>3</sup></span> Course

<p>Import Videos using The HTML5 &quot;video&quot; element, it

<video width="427" height="240" controls>

<source src="images/video.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

<p>Align with position &amp; Z-Index value</p>

<img class="img1" src="images/centerZ.jpg" alt="centerimage"

<img class="img2" src="images/rightZ.jpg" alt="rightimage" >

<li><a href="tourismandtravel.html">Tourism &

<p>Import Videos using The HTML5 "video" element, it

<p>Align with position & Z-Index value</p>