pluralsight-build-webistes-.../archive/building-websites-html/07/demos/template.html

102 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Bethany' Pie Shop!</title>
<meta name="author" content="Bethany's Pie Shop">
<meta name="description" content="Store front for Bethany's Pie Shop">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<style>
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: #e6e4d9;
background-image: url('images/pattern.png');
}
#mainheader {
background-color: #a593c2;
}
#leftmenu {
float: left;
width: 30%;
margin-bottom: 20px;
}
nav {
height: 60px;
width: 1000px;
margin: 0 auto 20px;
}
.searchbox {
padding: 5px;
margin: 10px 10px;
width: 200px;
}
#main {
float: right;
width: 70%;
margin-bottom: 20px;
}
footer {
clear: both;
width: 100%;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
</style>
</head>
<body>
<header id="mainheader">
<nav>
<img src="images/cake.svg" height="55" />
</nav>
</header>
<div style="width:1000px;margin-left: auto;margin-right: auto;">
<aside id="leftmenu">
<img src="images/bethanylogo.png" />
<header>
<h4 style="text-align: center;">Browse our pies</h4>
</header>
<input type="search" class="searchbox" placeholder="Search our store" />
</aside>
<main id="main">
</main>
<footer>
<p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
</p>
<small>2020 Bethany's Pie Shop - All rights reserved</small>
</footer>
</div>
</body>
</html>