Thursday, August 1, 2013
Sunday, July 14, 2013
Simple HTML and CSS ( from PSD)
html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="middle">
<img src="images/image1.png" width="511px" height="323px" />
<img src="images/image2.png" width="511px" height="323px" />
<img src="images/image3.png" width="511px" height="323px" />
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="middle">
<img src="images/image1.png" width="511px" height="323px" />
<img src="images/image2.png" width="511px" height="323px" />
<img src="images/image3.png" width="511px" height="323px" />
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
CSS
------------------------------------------------------
.header
{ background-image:url(images/header.png); background-repeat:repeat-x;
height:102px;
width:988px;
clear:both;}
.container
{
width:988px;
height:1138px;
background-color:#f2f2f2;}
.footer
{ background-image:url(images/footer.png);
background-repeat:repeat-x;
width:988px;
height:56px;}
.left
{ width:206px;
height:906px;
float:left;
background-color:#999;
}
.middle
{ width:515px;
height:1138px;
background-color:#309;
float:left;
margin-left:29px;}
.right
{ width:207px;
height:701px;
background-color:#666;
float:right;
margin-right:15px;
}
Saturday, July 13, 2013
My First Psd to HTML conversion
My First Psd to HTML conversion
HTML Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="Header-title">And a little tagline, too.</div>
</div>
<div id="clear"></div>
<div id="nevigation">
<ul class="nev">
<li class="nev">Home</li>
<li class="nev">About</li>
<li class="nev">Portfolio</li>
<li class="nev">Contact</li>
</ul>
</div>
<div id="clear">
</div>
<div id="container">
<div id="left-content">
<p style=" font-family:Arial, Helvetica, sans-serif; font-size:36px; font-weight:bold; color:#0e5d7a;margin-top:0px">Lorem Ipsum, Dolor sit</p>
<p style=" color:#444444; font-size:24px; font-weight:bold;font-family:Arial, Helvetica, sans-serif; margin-top:-35px;">Nullam vulputate felis id odio interdum nec malesuada mi pretiu</p>
<p style=" font-size:14px; font-family:Arial, Helvetica, sans-serif;">Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Praesent luctus egestas nisl, vitae vehicula eros rhoncus velxsadsad.Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. </p>
<p style=" font-size:14px; font-family:Arial, Helvetica, sans-serif;">Proin tempor erat sit amet nisl posadrta nec vulputate arcu imperdProin tempor erat sit amet nisl porta nec vulputate arcu imperdProin tempor erat sit amet nisl porta nec vulputate arcu imperdProinadasdas tempor erat sit amet nisl porta nec vulputate arcu imperdProin tempor erat sit amet nisl porta nec vulputate arcu imperdProin tempor erat sit amet nisl porta nec vulputaasdate arcu imperd</p>
<p>Latest Updatesasdsadas</p>
<p>Vestiblum id nulla eu sapien pellentesque<br />
June 1,2009</p>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id asdsadapurus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id pasdsadasdasurus turpis</p>
<p>Latest Updates</p>
<p>Vestiblum id nulla eu sapien pellentesque<br />
June 1,2009</p>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pasdasdulvinar tincidunt. Mauris id purus turpisUt vel turpis a orci pulvinar tincidunt. Mauris id purus turpis</p>
</div>
<div id="right-content">
<p>Subscribe!</p>
<ul style=" list-style-type:none;">
<li>Subscribe via rss</li>
<li>Get Email Updates</li>
<li>Follow Us on Twitter</li>
</ul>
<p>Popular Items</p>
<ul style=" list-style-type:none;">
<li>dadasdasdasdsad</li>
<li>adasdasdasdasd</li>
<li>asdsadasdasdas</li>
<li>asdsadasdasdad</li>
</ul>
<p>Contributors</p>
<ul style=" list-style-type:none;">
<li>dsadsadasdasd</li>
<li>asdasdasdasdasd</li>
<li>adasdasdasdasdasd</li>
<li>adasdasdasdasdasd</li>
</ul>
<div class="img"><p style="padding-top:10px;margin-left:10px; color:#434343;font-family:Arial, Helvetica, sans-serif; font-size:24px;">Join Our Team</p></div>
</div>
</div>
<div id="clear"></div>
<div id="footer"><p style="position:absolute;left:105px;color:#ffffff;">Copyright © 2009 MySite<br /> All Rghts Reserved</p></div>
</div>
</body>
</html>
CSS Code
body
{background-color:#F00;
margin:auto;
width:100%;
color:#595858;
}
#wrapper
{width:1000px;
height:1102px;
margin:0px;}
#header
{width:1000px;
height:165px;
background-image:url(images/mysite.png);
}
#logo
{ background-image:url(images/logo.png);
width:241px;
height:89px;
background-repeat:no-repeat;
position:absolute;
top:40px;
left:100px;}
#Header-title
{ position:absolute;
left:375px;
top:70px;
color:#e4dfdf;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
width:400px;
}
#nevigation
{with:9px;
height:57px;
background-image:url(images/nevi.png);
background-repeat:repeat-x;
}
#container
{background-color:#ebe8e8;
height:716px;
width:1000px;
}
#footer
{height:164px;
width:1000px;
background-color:#434343;}
ul.nev
{ list-style-type:none;
margin:0px;
padding:0px;
padding-top:15px;}
li.nev
{display:inline;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#676666;
padding-left:120px;
}
#clear
{clear:both;}
#left-content
{ width:539px;
background-color:#ebe8e8;
height:641px;
float:left;
margin-left:75px;
padding-top:30px;
overflow:inherit;}
#right-content
{
margin-top:30px;
margin-right:100px;
width:267px;
height:548px;
background-color:#d4d6d3;
float:right;
padding-left:0px;
}
.img
{ background-image:url(images/button.png); no-repeat;
width:193px;
height:54px;
margin-left:30px;
margin-top:104px;
}
Subscribe to:
Posts (Atom)