CSS 4 Homework
Create this page
Make a new folder in your homework file and create a page in it called waffle.html. Link a stylesheet to it and recreate this screenshot using the HTML below. You can’t change the HTML!
Waffle Bar Website Sample
based on this HTML
<body class="background"> <div class="middle"> <h1>ONLINE WAFFLE BAR</h1> <p>There are a lot of things to see on my website</p> <p>Try out the waffle bar. I'm sure you'll find something tasty.</p> <h2>menu</h2> <p>Here is a list of delicious waffles to try</p> <ul> <li>Blueberry</li> <li>Raspberry</li> <li>Banana</li> <li>Buffalo hot wings</li> <li>Plain</li> </ul> </div> </body>
You’ll need this image
Waffles!
Click here for the spoilers
.background {background:#0F6 url(http://farm3.static.flickr.com/2125/2255557633_1f30e367c9.jpg) no-repeat right top}
.middle {margin:20px; padding:20px; border:6px solid orange}
li {border:1px solid blue; background:#CCC; color:blue; padding:10px;}
h1, h2 {background:pink;}
p {background:#fff; padding:10px; margin:0;}
done
Margin is the space on the outside of an element, padding is the space created on the inside.