10. Styling our Pages
-views/404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Not Found</title>
<style>
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.main-header {
width: 100%;
height: 3.5rem;
background-color: #dbc441;
padding: 0 1.5rem;
}
.main-header-nav {
height: 100%;
display: flex;
align-items: center;
}
.main-header__item-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-header_item {
margin: 0 1rem;
padding: 0;
}
.main-header_item a {
text-decoration: none;
color: black;
}
main {
padding: 1rem;
}
.main-header_item a:hover,
.main-header_item a:active,
.main-header_item a.active {
color: rgb(196, 37, 116);
}
.product-form {
width: 30rem;
max-width: 90%;
margin: auto;
}
.form-control {
margin: 1rem 0;
}
.form-control label,
.form-control input {
display: block;
width: 100%;
}
.form-control input {
border: 1px solid #dbc441;
font: inherit;
border-radius: 2px;
}
button {
font: inherit;
border: 1px solid rgb(196, 37, 116);
color: rgb(196, 37, 116);
background: white;
border-radius: 3px;
cursor: pointer;
}
button:hover,
button:active {
background-color: rgb(196, 37, 116);
color: white;
}
</style>
</head>
<body>
<header class="main-header">
<nav class="main-header-nav">
<ul class="main-header__item-list">
<li class="main-header_item"><a href="/">Shop</a></li>
<li class="main-header_item">
<a class="active" href="admin/add-product">Add Product</a>
</li>
</ul>
</nav>
</header>
<h1>Page Not Found!</h1>
</body>
</html>
-view/add-product.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Product</title>
<style>
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.main-header {
width: 100%;
height: 3.5rem;
background-color: #dbc441;
padding: 0 1.5rem;
}
.main-header-nav {
height: 100%;
display: flex;
align-items: center;
}
.main-header__item-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-header_item {
margin: 0 1rem;
padding: 0;
}
.main-header_item a {
text-decoration: none;
color: black;
}
main {
padding: 1rem;
}
.main-header_item a:hover,
.main-header_item a:active,
.main-header_item a.active {
color: rgb(196, 37, 116);
}
.product-form {
width: 30rem;
max-width: 90%;
margin: auto;
}
.form-control {
margin: 1rem 0;
}
.form-control label,
.form-control input {
display: block;
width: 100%;
}
.form-control input {
border: 1px solid #dbc441;
font: inherit;
border-radius: 2px;
}
button {
font: inherit;
border: 1px solid rgb(196, 37, 116);
color: rgb(196, 37, 116);
background: white;
border-radius: 3px;
cursor: pointer;
}
button:hover,
button:active {
background-color: rgb(196, 37, 116);
color: white;
}
</style>
</head>
<body>
<header class="main-header">
<nav class="main-header-nav">
<ul class="main-header__item-list">
<li class="main-header_item"><a href="/">Shop</a></li>
<li class="main-header_item">
<a class="active" href="admin/add-product">Add Product</a>
</li>
</ul>
</nav>
</header>
<main>
<form class="product-form" action="/add-product" method="POST">
<div class="form-control">
<label for="title">Title</label>
<input type="text" name=" name="title" id="title"/>
</div>
<button type="submit">Add Product</button>
</form>
</main>
</body>
</html>
<!-- html5 skeleton -->
-views/shop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Product</title>
<style>
body{
padding: 0;
margin: 0;
font-family: sans-serif;
}
.main-header{
width: 100%;
height: 3.5rem;
background-color: #dbc441;
padding: 0 1.5rem;
}
.main-header-nav{
height: 100%;
display: flex;
align-items: center;
}
.main-header__item-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-header_item{
margin: 0 1rem;
padding: 0;
}
.main-header_item a{
text-decoration: none;
color: black;
}
main{
padding: 1rem;
}
.main-header_item a:hover,
.main-header_item a:active,
.main-header_item a.active{
color: rgb(196, 37, 116);
}
</style>
</head>
<body>
<header class="main-header">
<nav class="main-header-nav">
<ul class="main-header__item-list">
<li class="main-header_item"><a class="active" href="/">Shop</a></li>
<li class="main-header_item"><a href="admin/add-product">Add Product</a></li>
</ul>
</nav>
</header>
<main>
<h1>My products</h1>
<p>List of all the products...</p>
</form>
</main>
</body>
</html>
<!-- html5 skeleton -->