HTML

<!DOCTYPE html>
<html>
<head>
<title> Jake's Coffee Shop </title>
</head>

<body>
<h1> Jake's Coffee Shop</h1>


    <a href="#home">Home</a>
    <a href="#menu">Menu</a>
    <a href="#music">Music</a>
    <a href="#Job">Jobs</a>


<p> Come in and experience...</p>

<img src="latte.jpg" style="width:421px;height=798px;">
<br/>

<ul>
<li>Speciality Coffee and Tea</li>
<li>Freshly made sandiches</li>
<li>Bagels, Muffin and Organic Snacks</li>
<li>Open Mic Nights</li>
<li>.....</li>
</ul>

<p>23 Pine Road</p>
<p>Nottingham, NGI 5YU</p>
<p>01159324567</p>
<br>

 <p>Copyright 2011 Jake's Coffee House</p>
 <a href="#jake">jake@jcoffee.com</a>

</html>
</body>





CSS

 <!DOCTYPE html>
<html>
<head>

<meta charset ="utf-8">
<link rel="stylesheet" type="text/css" href="lab5.css">

<title> Jake's Coffee Shop </title>


</head>

<body>
<div id="container">
    <div id="logo">
<h1> Jake's Coffee Shop</h1>
   </div>
   <div id="leftcolumn">
    <a class="navBar" href="#home">Home</a>
    <a class="navBar" href="#menu">Menu</a>
    <a class="navBar" href="#music">Music</a>
    <a class="navBar" href="#Job">Jobs</a>
 </div>

    <div id="rightcolumn">
<p> Come in and experience...</p>
<style>
      img{
     float: right;
  }
 </style>

<img class="floatright" src="latte.jpg" style="width:300px;height=400px;">


<ul>
<li>Speciality Coffee and Tea</li>
<li>Freshly made sandiches</li>
<li>Bagels, Muffin and Organic Snacks</li>
<li>Open Mic Nights</li>
<li>.....</li>
</ul>

<p>23 Pine Road<br>Nottingham, NGI 5YU<br>01159324567</br></p>

 </div>
 <div id="footer">

 <p>Copyright 2011 Jake's Coffee House
 <br><a href="#jake">jake@jcoffee.com</a></br></p>

</html>
</body>


the CSS file (lab5.css)

body {
      background-color: #ffffcc;
      color: #330000;
      font-family: Verdana;
    }

    #container {
      margin-top: 20px;
      margin-left: 20%;
      margin-right: 20%;
      height: 480px;
      width: 750px;
      border-style: solid;
      padding: 0px;
    }

    #logo {
      background-color: #ccaa66;
      text-align: center;
      border-bottom-style: solid;
      border-top-style: solid;
      height: 80px;
      margin: 0px;
    }

    #leftcolumn {
      background-color: #e8d882;
      position: relative;
      padding-left: 20px;
      left: 0px;
      width: 130px;
      height: 320px;
      float: left;
      white-space: pre-line;
    }

    #navBar {
      text-align: left;
    }

    #rightcolumn {
      background-color: #f1e8b0;
      position: relative;
      width: 580px;
      height: 300px;
      padding: 10px;
      float: right;
    }

  
    #footer {
      background-color: #ccaa66;
      border-top-style: solid;
      height: 62px;
      text-align: center;
      font-style: italic;
      width: 750px;
      margin-top: 320px;
      padding-top: 10px;
    }

Comments

Post a Comment

Popular posts from this blog

FashionValet

Image
FashionValet               F ashionValet adalah merupakan sebuah perniagaan yang mengumpul sebahagian besar jenama-jenama terkenal mahupun di dalam atau di luar negara. FashionValet bukan sahaja menawarkan pakaian-pakaian mengikut fesyen terkini tetapi terdapat juga aksesori-aksesori lain yang menarik seperti kasut,beg tangan,tudung,produk kosmetik dan sebagainya. Apa yang menarik mengenai FashionValet ? Kita sebagai pengguna dapat mencari segala keperluan yang kita perlukan dengan hanya menggunakan satu laman web sahaja tanpa sebarang kesulitan. Ini kerana FashionValet telah memberikan satu kelainan di mana pelbagai jenis pakaian dan barangan aksesori lain mampu dimiliki mengikut keperluan masa dan keadaan. Percaya atau tidak, FashionValet telah memberi peluang kepada semua orang untuk merasa hasil rekaan-rekaan terkenal tanah air seperti Rizman Ruzaini, Hatta Dolmat dan ramai lagi.           Menurut...
Read more
Image
HTML & CSS  <!DOCTYPE html> <html lang="en"> <head> <title>Trillium Media Design</title> <meta charset="utf-8"> </head> <body> <header><h1>Trillium Media Design</h1></header> <div><a href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact</a></div> <h2>New Media and Web Design</h2> <article>Trillium Media Design will bring your company's Web presence to the next level.<br>  We offer a comprehensive range of services:</article> <ul> <li>Website Design</li> <li>Interactive Animation</li> <li>E-Commerce Solutions</li>    <li>Usability Studies</li> <li>Search Engine Optimization</li> </ul> <h2>Meeting Your Business Needs</h2> <article...
Read more