Its a fantastic template for creating a Web-Application and WebSite . you can use this template for a business to show your Work...
HTML Coding :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="header" style ="padding-right:100px;">
<div style="float:left; margin-left:40px; margin-top:60px; ">
<a href="#">
<img src="logo.png" alt="logo" style="float:left;" />
</a>
<span class="header-description">
<strong> DesignStyle </strong> Template</span>
<br />
<span class="header-description2">Your very cool description goes here </span>
</div>
<div>
<a href="#">
<img src="rss-logo.png" alt="rss" style="float:right; margin-right:-30px; margin-top:70px; "/>
</a>
</div>
</div>
<div class="header2">
<div style="float:left;">
<div class="header2-description"style="float:left">
<u>
<span class="header-description" style="color:Green; margin:40px; text-align:center; font-size:35pt;" >
Even Better <span style="color:Blue;"> than Gold </span>
</span>
</u>
<br />
<span style="padding-left:40px; color:Silver; font-size:15pt; font-family:Calibri">A clear template to Showcase your products </span>
</div>
<div style="width:250px; height:200px; border:2px solid white; background-color:White; padding-left:35px;float:none">
<a href="#">
<img src="demo-bt.gif" alt="view demo" />
</a>
</div>
</div>
<div>
<div class="menu">
<ul>
<li><a href="#">About the Authors</a></li>
<li><a href="#">Inside Link for Showing</a></li>
<li><a href="#">Eco Theme</a></li>
<li><a href="#">Deep Blue Theme</a></li>
<li><a href="#">More Theme to Come</a></li>
</ul>
<div class="readmore">
<a href="#">
<img src="read.png" />
</a>
</div>
</div>
</div>
</div>
<div class="blueimage" style="clear:both">
<div class="text-on-blueimage" style="float:left;">
<img src="arrow.gif" alt="arrow" class="arrow-alignment-on-blue-image"/>
<span class=""> About Us
</span>
<hr style="" />
<span class="text-on-blueimage" style="font-size:16pt; padding:0px;">
<strong> CopyRight by Jaspreet Singh </strong><br />
</span>
<span class="text-on-blueimage" style="font-family:Times New Roman;font-size:15pt;padding:0px;">
You can reach me at A-Z@gmail.com for any question dial number <u> 0000000000 </u> Happy to Help You
</span>
</div>
<div style="float:right; margin-right:100px; margin-top:20px; padding-left:20px;">
<img src="img_01.gif" alt="img_01" />
</div>
</div>
<div class="footer" >
<div style="">
<div class="sub-footer1 footer-text" style="float:left;">
<span class="footer-span-header">Service </span>
<hr class="footer-hr-margin" />
<div class="sub-footer-text" style="float:left;">
<ul>
<li><a href="#">Standard </a></li>
<li><a href="#">Classic</a> </li>
<li><a href="#">Modern</a> </li>
</ul>
</div>
<div>
<img src="img_02.gif" />
</div>
<div style="font-size:13pt;font-family:Times New Roman; clear:both; margin-left:30px; ">
<span style="color:Black;">
We are her for you to provide services and new technologies.
</span>
</div>
</div>
<div class="sub-footer2 footer-text" style="float:right">
<span class="footer-span-header">Author</span>
<hr class="footer-hr-margin" />
<div class="sub-footer-text" style="float:left;">
<ul>
<li><a href="#">Standard </a></li>
<li><a href="#">Classic</a> </li>
<li><a href="#">Modern</a> </li>
</ul>
</div>
<div>
<img src="img_03.gif" />
</div>
<div style="font-size:13pt;font-family:Times New Roman; clear:both; margin-left:30px; ">
<span style="color:Black;">
We are her for you to provide services and new technologies.
</span>
</div>
</div>
<div class="sub-footer3 footer-text" style="float:left;">
<span class="footer-span-header">Eco Theme</span>
<hr class="footer-hr-margin" />
<div style="font-size:13pt;font-family:Times New Roman; clear:both; margin-left:30px; ">
<span style="color:Black;">
We are her for you to provide services and new technologies.
</span>
</div>
<div style="margin-left:30px; margin-top:30px;">
<img src="read.png" />
</div>
</div>
</div>
<div style="clear:both"></div>
<div style="margin-top:-25px;background-image:url(images/footer.gif);height:112px">
<div style="clear:both;height:20px"></div>
<div style="float:left;width:200px">Terms | Condition</div>
<div style="float:right;">© 2009 Your Corporation. All rights reserved</div>
</div>
</div>
</div>
</body>
</html>
CSS Coding :
body
{
width:900px;
height:900px;
margin-left:100px;
border:2px solid transparent;
padding-right:140px;
}
.header
{
width:900px;
height:200px;
background-image:url(header.gif);
}
.header2
{
width:1050px;
height:204px;
background-image:url(header-2.gif);
background-position:center;
}
.header-description , .header-description2
{
font-family:Calibri;
color:White;
font-size:30pt;
margin-left:40px;
margin-top:90px;
}
.header-description2
{
font-size:10pt;
}
/*--------------------------------------2nd Header----------------------------------------*/
.header2-description
{
float:left;
background-color:White;
Width:500px;
height:100px;
}
.menu
{
width:250px;
height:204px;
float:right;
background-color:White;
}
.menu ul
{
list-style-image:url(list-arrow.gif);
}
.menu li
{
padding:3px;
font-family:@Arial Unicode MS;
}
.menu ul li a
{
}
.readmore
{
width:200px;
height:100px;
margin-left:40px;
}
.blueimage
{
height:200px;
width:1000px;
background:url(Blue-image.png) top left;
}
.text-on-blueimage
{
color :White;
font-size:22pt;
font-family:Calibri;
width:550px;
border:2px solid transparent;
padding-left:40px;
}
.arrow-alignment-on-blue-image
{
margin-top:30px;
}
hr
{
color:White;
}
/*-------------------------------Footer------------------------------------*/
.footer
{
border:2px solid Black;
width:997px;
height:295px;
}
.sub-footer1 , .sub-footer2 ,.sub-footer3
{
border:2px solid Silver;
width:260px;
height:230px;
margin-left:50px;
margin-top:30px;
}
.sub-footer2
{
margin-left:0px;
margin-right:50px;
}
.sub-footer3
{
margin-left:50px;
}
.footer-text
{
color:Silver;
font-family:Calibri;
font-size:25pt;
}
.footer-span-header
{
margin-left:30px;
}
.footer-hr-margin
{
margin-left:30px;
margin-right:30px;
}
.sub-footer-text
{
width:120px;
height:80px;
border:2px solid transparent;
margin-left:30px;
font-size:12pt;
color:Blue;
}
you can download the images from below link :
Image-Download
or put the below link in URL :
https://drive.google.com/folderview?id=0B-U8QYBZ9RGJMVBuNFdIT2NTNWM&usp=sharing
Download Code
0 comments:
Post a Comment