Scribd
Upload
61 views6 pages

Without CSS

The document is an HTML page for Jake's Coffee Shop with additional CSS styling. The CSS styles various elements on the page like the container, navigation bar, images, and content. It sets colors, sizes, positions and other styles. The HTML provides the content and structure and links to the external CSS file to apply the styles. Together the HTML and CSS create a simple styled web page for the coffee shop.

Uploaded by

AakashRaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views6 pages

Without CSS

The document is an HTML page for Jake's Coffee Shop with additional CSS styling. The CSS styles various elements on the page like the container, navigation bar, images, and content. It sets colors, sizes, positions and other styles. The HTML provides the content and structure and links to the external CSS file to apply the styles. Together the HTML and CSS create a simple styled web page for the coffee shop.

Uploaded by

AakashRaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Without CSS:

CSS:
Code:
HTML:
<!doctype html>
<html>
<head>
<title>Jake's Cofee Shop</title>
<link rel="stylesheet" type="text/css" href="file:///C:/Users/Nitin/Documents/IWP/jake2.css">
</head>
<body>
<div id="container">
<div id="box">
<div id="top" align="center"><strong><h1>Jake's Cofee Shop</h1></strong></div>
<br>
<br>
<div id="nav" align="left">
<ul class="na">
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Jobs</a></li>
</ul>
</div>
<br>
<br>
<div id="image">
<img src="http://www.todayifoundout.com/wp-content/uploads/2015/07/coffee2.png"
width="200" height="200"></div>
<div id="content">
Come in and experience...<br>
<ul >
<li>Specialty Cofee and Tea</li>
<li>Freshlmy made sandwiches</li>
<li>Bagels, Muffins and ORganic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li>...</li></ul>

<footer>
23 Pine Road<br>
Nottingham, NG1 5YU<br>
0115 9324567<br>
</footer>
</div>
<br>
<div align="center" id="bottom"><i>
Copyright &copy; 2011 Jake's Coffee House<br>
<a href='#'>[email protected]</a></i><br>
</div>
</div>
</div>
</body>
</html>

CSS:
body
{
background-color: #ffffcc;
font-family: verdana;
}

#container
{
margin: auto;
}

#box
{
border: 3px solid black;
height: 390px;
width: 1000px;
margin-left: 280px;
margin-top: 130px;
}

#top
{
border:2px solid black;
background-color:#ccaa66;
color:#330000;
}

#bottom
{
border:2px solid black;
background-color:#ccaa66;
color:#330000;
padding-top:2px;
padding-bottom:2px;
}
#nav
{
background-color:#E8D882;
width:160px;
position: fixed;
height: 262px;
margin-top: -39px;
margin-left: 0.2px
}

a
{
text-decoration: none;
}
.na
{
list-style-type:none;
padding: 2px;
}

ul.na > li
{
padding: 10px;
}

#image
{
float: right;
margin-top: -28px;
margin-right: 10px;
}

#content
{
margin-left: 201px;
margin-top: -59px;
}

You might also like