159 lines
5.2 KiB
HTML
Raw Normal View History

2023-02-24 14:18:17 -06:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:940px;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding: 10px 10px 10px 155px;
background-color: #CCCCC;
background-repeat: no-repeat;
height: 130px;
}
nav {
float: left;
width: 150px;
letter-spacing: 0.1em;
font-weight: bold;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
display: block;
padding: 20px;
background-color: #b3c7e6;
border-bottom: 1px solid #ffffff;
}
nav a:link {
color: #ffffff;
}
nav a:visited {
color: #eaeaea;
}
nav a:hover {
background-color: #eaeaea;
color: #869dc7;
}
main {
background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
display: block;
}
h1 {
margin-bottom: 0;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
margin: 5px;
}
span {
size: 90em;
font-family: italic;
color: #00005D;
padding-left: 15em;
}
figure {
float: right;
width: 260px;
margin: 10px;
}
figcaption {
text-align: center;
font-size: .8em;
font-style: italic;
}
footer {
font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
article {
background-color: #FFFFFF;
height: auto;
#font-size: 80em; //idk why but this declaration completely breaks it - Caleb
font-style: italic;
padding-left: 15em;
color: #00005D;
}
aside {
float: right;
width: 15em;
padding: 1em;
background-color: lightgray;
position: relative;
top: -20px;
font-size: 100%;
left-padding: 0;
height: auto;
}
#header1 {
background-image: url("lighthouselogo.jpg");
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header1">
<h1>Lighthouse Island Bistro</h1>
<span>the best coffee on the coast</span>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Bistro Blog</h2>
<aside>Watch for the March Madness Wrap next month!</aside>
<article>
<header><h3>Valentine Wrap</h3></header>
<time datetime="2018-02-01">February 1, 2018</time>
<p>The February special sandwich is the Valentine Wrap &mdash;
heart-healthy organic chicken with roasted red peppers on a whole wheat wrap.</p>
</article>
<article>
<header><h3>New Coffee of the Day Promotion</h3></header>
<time datetime="2018-01-12">January 12, 2018</time>
<p>Enjoy the best coffee on the coast in the comfort of your home. We will feature a different flavor of our gourmet, locally roasted coffee each day with free bistro tastings and a discount on one-pound bags.</p>
</article>
</section>
</main>
<footer>Copyright &copy; 2018
</footer>
</div>
</body>
</html>