Build a CMS Step 1
For this project, we will be creating a website for The Nip Shoppe, a catnip retail establishment in Felinia, Ohio.
The complete website can be found at Nip Shoppe.
Getting Started
The demo for this step shows a static website where each page is accessed by a link in a menu.
about.html ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 1</title>
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-1'>← Return to CMS Step 1</a><br>
<a href = 'index.html' ><h1>The Nip Shoppe</h1></a>
<a class = 'menuitem' href = 'index.html' >Home</a>
<a class = 'menuitem' href = 'about.html' >About</a>
<a class = 'menuitem' href = 'contact.html'>Contact</a>
</header>
<main>
<h2>About the Nip Shoppe</h2>
<img src = 'images/tom-and-martin.png' alt = 'Tom and Martin, Nip Shoppe founders' />
<p>The Nip Shopped was founded in 1979 by two college cats, Tom Twitchitail and Martin Pawclaw, during their sophomore year at Felinia College. They met in a marketing class where they discovered that they both shared an interest in the pyschological and medical benefits of catnip.</p>
<p>Athough at the time, catnip was barely legal, they started a small business to procure nip for their fellow fraternity brothers. To their surprise, their customer base expanded rapidly, partly due to their thorough knowledge of catnip quality and variety.</p>
</main>
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>footer>
</body>
</html>
contact.html ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 1</title>
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-1'>← Return to CMS Step 1</a><br>
<a href = 'index.html' ><h1>The Nip Shoppe</h1></a>
<a class = 'menuitem' href = 'index.html' >Home</a>
<a class = 'menuitem' href = 'about.html' >About</a>
<a class = 'menuitem' href = 'contact.html'>Contact</a>
</header>
<main>
<h2>Contact the Nip Shoppe</h2>
<div class = 'content-column'>
<h3>Location:</h3>
<p> 222 Scratching Post Road<br>
Felinia, Ohio 45222</p>
<h3>Email: </h3>
thenipshippe@furmail.com
<h3>Phone</h3>
(513) 418-1480
</div><div class = 'sidebar-column'>
<h2>Big Sale!!!</h2>
<p><b>Hard Days Night Package </b></p>
<p>20oz Purple Haze<br>20oz Lucy in the Sky<br>20oz Stairway to Heaven<br>$82.76</p>
</div>
</main>
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>
</body>
</html>
index.html ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 1</title>
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-1'>← Return to CMS Step 1</a><br>
<a href = 'index.html' ><h1>The Nip Shoppe</h1></a>
<a class = 'menuitem' href = 'index.html' >Home</a>
<a class = 'menuitem' href = 'about.html' >About</a>
<a class = 'menuitem' href = 'contact.html'>Contact</a>
</header>
<main>
<h2>Welcome to The Nip Shoppe!</h2>
<h3> We carry a VAST selection of QUALITY catnip! </h3>
<h3>Visit our showroom in beautiful downtown Felinia and prepare be AMAZED!</h3>
<img src = 'images/showroom.png' alt = 'THe Nip Shoppe Showroom' />
<h2>Hours</h2>
<p>Monday 4pm - 11pm<br>Tuesday 4pm - 6pm<br>Wednesday 11am - 3pm<br>Thursday 11am - 11pm<br>Friday 7pm - midnight<br>Saturday 2pm - 3pm<br>Sunday - closed</p>
<h2>Location</h2>
222 Scratching Post Road
<br>Felinia, Ohio 45222
<br>
</main>
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>
</body>
</html>
style.css ▾
@font-face {
font-family: Chelsea_Market;
src: url('fonts/ChelseaMarket-Regular.ttf');
}
@font-face {
font-family:Open_Sans;
src: url('fonts/OpenSans-Regular.ttf');
}
body {
font-family: "Open_Sans", sans-serif;
text-align: center;
color: black;
margin: 0 auto;
text-align: center;
width: 1100px;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
h1 {
font-family: 'Chelsea_Market', cursive;
margin: 10px auto;
}
h2 {
text-align: center;
color: #3e4871;
}
h3 {
font-size: 16px;
color: #0d4a4d;
}
b {
color: purple;
}
a {
text-decoration: none;
color: #3e4871;
}
a:hover {
color: purple;
}
img {
max-width: 100%;
}
label {
font-weight: bold;
}
.error {
color: red;
padding: 20px;
font-size: 18px;
}
.return {
font-size: 12px;
}
/** HEADER */
.header {
text-align: center;
display: block;
margin: auto;
padding: 20px 0;
}
a.title {
color: black;
}
a.menuitem {
display: inline-block;
margin: 0 10px;
padding: 3px 7px;
text-decoration: underline;
font-size: 14px;
}
/** MAIN */
main {
text-align: center;
display: block;
margin: auto;
margin-top: 30px;
width: 1000px;
max-width: 100%;
}
/** COLUMNS */
.content-column, .sidebar-column , .half-column, .manage-column {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
vertical-align: top;
}
.content-column {
width: 65%;
text-align: left;
}
.sidebar-column {
width: 35%;
text-align: center;
}
.half-column {
width: 50%;
}
.manage-heading {
background-color: #3e4871;
padding: 5px;
margin: 20px auto 10px auto;
color: white;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
a.adminbutton, input.submitbutton {
display: block;
background-color: darkmagenta;
color: white;
padding: 5px 7px;
border: 1px solid black;
margin: 10px auto;
width: 140px;
}
input.submitbutton {
background-color: blue;
border: 1px solid black;
border-radius: 3px;
margin-bottom: 20px;
}
/** FOOTER */
footer {
font-size: .8em;
margin: 40px auto;
}
/**BREAKPOINTS */
@media only screen and (max-width: 600px) {
.content-column, .sidebar-column {
width: 100%;
text-align: center;
}
}