USA: +1 725-224-8795 
Sign in
Your weekly assignment this week is simply to recreate your web page template using one of the templates using CSS layout. After you complete this, you will be in good shape for your final project to create an Web template to use for your website based off any of the table-based or css-based layouts, or a combination of any of them.
Expert Answer
Instructions:1.copy the code in sepetate file and name the Images folder and palce the attached files.
#)index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html >
<head>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta http-equiv=”” content=”text/html; charset=utf-8″ />
<title>Coffeelike | Designed by nodethirtythree + Templated.org</title>
<link href=”http://fonts.googleapis.com/css?family=Arvo” rel=”stylesheet” type=”text/css” />
<link href=”http://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css” />
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”bg”>
<div id=”outer”>
<div id=”header”>
<div id=”logo”>
<h1>
<a href=”#”>Coffeelike</a>
</h1>
</div>
<div id=”nav”>
<ul>
<li class=”first active”>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>Services</a>
</li>
<li>
<a href=”#”>Portfolio</a>
</li>
<li>
<a href=”#”>About</a>
</li>
<li>
<a href=”#”>Blog</a>
</li>
<li class=”last”>
<a href=”#”>Contact</a>
</li>
</ul>
<br class=”clear” />
</div>
</div>
<div id=”main”>
<div id=”sidebar”>
<h3>
Feugiat sem praesent
</h3>
<p>
Some randome data..Some randome data..Some randome data..Some randome data..Some randome data..Some randome data..Some randome data..Some randome data..
</p>
<h3>
Suscipit commodo lacinia
</h3>
<ul class=”linkedList”>
<li class=”first”>
<a href=”#”>Ridiculus dolore felis</a>
</li>
<li>
<a href=”#”>Cras velit vestibulum penatibus</a>
</li>
<li>
<a href=”#”>Eleifend porttitor auctor</a>
</li>
<li>
<a href=”#”>Semper erat sed consequat</a>
</li>
<li>
<a href=”#”>Integer egestas sodales</a>
</li>
<li class=”last”>
<a href=”#”>Aliquet cras odio tristique</a>
</li>
</ul>
</div>
<div id=”content”>
<div id=”box1″>
<h2>
Welcome to Coffeelike
</h2>
<img class=”left” src=”images/pic1.jpg” width=”130″ height=”160″ alt=”” />
<p>
This is <strong>Coffeelike</strong>, a two column CSS template by
<a href=””>nodethirtythree</a> + <a href=”http://templated.org/”>Templated.org</a> with photos from
<a href=””</a>. It’s released (for free) under the
<a href=””>bnj</a>,
so feel free to use it for any personal or commercial work, just keep our footer credit links intact.
Hit up our <a href=””>website</a> for more awesomely
cool free templates, and follow us on <a href=””>Twitter</a>
</p>
</div>
<div id=”box2″>
<h3>
Primis dolor fringilla porta
</h3>
<ul class=”imageList”>
<li class=”first”>
<img class=”left” src=”images/pic2.jpg” width=”80″ height=”80″ alt=”” /> <span>Quis faucibus mauris quis consectetur lobortis parturient sit turpis scelerisque neque aliquet.</span>
</li>
<li>
<img class=”left” src=”images/pic1.jpg” width=”80″ height=”80″ alt=”” /> <span>Lobortis malesuada penatibus porta varius ligula blandit sit dolor mattis morbi ullamcorper posuere tempus.</span>
</li>
<li class=”last”>
<img class=”left” src=”images/pic2.jpg” width=”80″ height=”80″ alt=”” /> <span>Diam nunc turpis placerat imperdiet ac cras ac sociis aliquam sed lacinia augue suspendisse.</span>
</li>
</ul>
</div>
<div id=”box3″>
<h3>
Magnis felis
</h3>
<p>
Vulputate magna nibh augue. Rutrum nibh sodales porta etiam.
</p>
<ul class=”linkedList”>
<li class=”first”>
<a href=”#”>Lobortis fringilla dictum cras</a>
</li>
<li>
<a href=”#”>Erat primis accumsan facilisis</a>
</li>
<li>
<a href=”#”>Laoreet in in magna</a>
</li>
<li>
<a href=”#”>Porta a vulputate placerat</a>
</li>
<li class=”last”>
<a href=”#”>Neque rhoncus rhoncus iaculis</a>
</li>
</ul>
</div>
<br class=”clear” />
</div>
<br class=”clear” />
</div>
</div>
<div id=”copyright”>
© Your Site Name | Design: <a href=””>Coffeelike</a> by <a href=””>Templated.org</a>
</div>
</div>
</body>
</html>
#)style.css:
* {
margin: 0;
padding: 0;
}
a {
color: #1495ff;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
body {
font-size: 12pt;
line-height: 1.75em;
font-family: Georgia, serif;
background: #ad8667 url(‘images/bg.jpg’);
color: #ebe1d9;
}
br.clear {
clear: both;
}
h1,h2,h3,h4 {
text-transform: lowercase;
letter-spacing: -1px;
}
h2,h3,h4 {
margin-bottom: 1em;
font-family: Arvo, serif;
color: #fff;
}
img.left {
float: left;
margin: 5px 20px 20px 0;
}
img.top {
margin: 5px 0 20px 0;
}
p {
margin-bottom: 1.5em;
}
ul {
margin-bottom: 1.5em;
}
.imageList {
list-style: none;
}
.imageList li {
clear: both;
}
#bg {
background: url(‘images/shadow.png’) top left repeat-x;
}
#banner {
background: #fff;
}
#box1 {
width: 745px;
overflow: hidden;
margin: 0 0 35px 0;
}
#box2 {
width: 355px;
overflow: hidden;
float: left;
}
#box3 {
width: 355px;
overflow: hidden;
margin: 0 0 0 390px;
}
#content {
width: 745px;
margin: 0 0 0 355px;
padding: 40px;
background: #fff;
}
#copyright {
padding: 0 0 80px 0;
text-align: center;
color: #D8C2AB;
}
#copyright a {
color: #D8C2AB;
}
#footer {
position: relative;
padding: 40px;
width: 1100px;
color: #e1d2c7;
}
#footer a {
color: #f4eeea;
}
#footer h2, #footer h3, #footer h4 {
color: #f4eeea;
}
#footer ul {
list-style: none;
}
#footer ul li {
padding: 15px 0 15px 0;
border-top: dotted 1px #c6aa95;
}
#footer ul li.first {
padding-top: 0;
border-top: 0;
}
#footerContent {
width: 745px;
margin: 0 0 0 355px;
}
#footerSidebar {
width: 240px;
float: left;
}
#header {
position: relative;
padding: 40px;
height: 120px;
}
#logo {
position: absolute;
top: 40px;
left: 40px;
height: 120px;
line-height: 120px;
}
#logo a {
text-decoration: none;
color: #fff;
}
#logo h1 {
font-size: 3.5em;
font-family: Lobster, cursive;
text-shadow: 0 2px 1px #32251B;
}
#main {
position: relative;
padding: 0;
width: 1180px;
color: #5e5e5e;
}
#main strong {
color: #3e3e3e;
}
#main a {
color: #242424;
}
#main h2, #main h3, #main h4 {
color: #242424;
}
#main ul {
list-style: none;
}
#main ul li {
padding: 15px 0 15px 0;
border-top: dotted 1px #b3b3b3;
}
#main ul li.first {
padding-top: 0;
border-top: 0;
}
#main ul.imageList li {
padding: 15px 0 15px 0;
}
#nav {
position: absolute;
right: 40px;
height: 53px;
line-height: 53px;
top: 73px;
}
#nav a {
text-decoration: none;
text-transform: lowercase;
color: #f4eeea;
text-shadow: 0 1px 1px #32251B;
font-size: 1.2em;
}
#nav li {
margin: 0 1em 0 1em;
}
#nav ul {
list-style: none;
}
#nav ul li {
float: left;
}
#outer {
position: relative;
width: 1180px;
margin: 0 auto;
padding: 30px;
}
#search input.button {
margin-left: 1em;
border: 0;
color: #fff;
background: #1495ff;
padding: 11px;
}
#search input.text {
border: dotted 1px #fff;
padding: 10px;
}
#sidebar {
width: 240px;
float: left;
padding: 40px;
background: #32251b;
color: #e1d2c7;
}
#sidebar a {
color: #e2e0df;
}
#sidebar h2, #sidebar h3, #sidebar h4 {
color: #fff;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
padding: 15px 0 15px 0;
border-top: dotted 1px #70665f;
}
#sidebar ul li.first {
padding-top: 0;
border-top: 0;
}
#)’images’ folder:
name as: bg
pic1
pic2
shadow
namings should be taly..
thanking you…
