Website 1
The following is an example of a basic 3-page website.
A few lines of PHP are used to insert the header and footer, but everything else is just HTML. This could be used for a very small brochure website that doesn't get updated often, or by a user who knows HTML. There is not much to maintain or update, making for an easy but limited solution.
Click for demo
A few lines of PHP are used to insert the header and footer, but everything else is just HTML. This could be used for a very small brochure website that doesn't get updated often, or by a user who knows HTML. There is not much to maintain or update, making for an easy but limited solution.
Click for demo
Top-level folder:
Pages-html folder:
View Code
Top-level folder:
footer.php ▾
<br><br>
<a class = 'greenbutton' href = '../../projects'>Return to Projects</a><br><br>
<br><br><br>Copyright © <?php echo date('Y'); ?> Susan Rodgers, <a href = 'https://lilaavenue.com'>Lila Avenue</a><br><br>
</body>
</html>
header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'The Nip Shoppe'</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Elsie" rel="stylesheet">
<link rel= 'stylesheet' type='text/css' href= 'style.css'>
</head>
<body>
<div class = 'header'>
<a class = 'menuitem' href = 'index.php?page=about'>About</a>
<a class = 'site-title' href = 'index.php'>The Nip Shoppe</a>
<a class = 'menuitem' href = 'index.php?page=contact'>Contact</a>
</div>
<div class = 'header2'>
<a class = 'site-title' href = 'index.php'>The Nip Shoppe</a>
<a class = 'menuitem' href = 'index.php?page=about'>About</a>
<a class = 'menuitem' href = 'index.php?page=contact'>Contact</a>
</div>
<div class = 'banner'>
<div class = 'greeting'>
<div class = 'description'>For All Your Catnip Needs </div>
</div>
</div>
index.php ▾
<?php
$pageid = 'home';
if (isset ($_GET['page'])) {
$pageid = $_GET['page'];
}
include ("header.php");
echo "<main>";
echo (file_get_contents ("blocks-html/" . $pageid . ".php"));
echo "</main>";
include ("footer.php") ;
?> style.css ▾
body {
font-family: "Lato", sans-serif;
text-align: center;
font-size: 1em;
margin: 0 auto;
}
h1, h3 {
font-family: 'Elsie', cursive;
letter-spacing: 1px;
}
.left {
text-align: left;
}
.left h2 {
text-align: center;
}
a {
text-decoration: none;
color: green;
}
a:hover {
color: aqua;
}
/** PAGE STYLES */
/** HEADER AND MENU STYLES */
.header {
text-align: center;
position: fixed;
background-color: #356335;
z-index: 1;
display: block;
margin: auto;
top: 0;
width: 100%;
border-top: 5px solid lightcoral;
}
.header2 {
text-align: center;
background-color: #356335;
display: block;
margin: auto;
width: 100%;
border-top: 5px solid lightcoral;
display: none;
}
a.site-title {
font-family: 'Elsie', cursive;
text-align: center;
color: white;
font-size: 46px;
letter-spacing: 1px;
}
.greeting {
color: white;
font-size: 30px;
font-weight: bold;
padding-top: 200px;
padding-bottom: 200px;
position: relative;
text-align: center;
}
a.menuitem {
color: white;
display: inline-block;
font-size: 1.3em;
padding: 5px 10px;
margin: 0 10px;
}
.banner {
padding: 0px;
display: inline-block;
width: 100%;
background-image: url("images/green3.jpg");
height: auto;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
/** STANDARD PAGE SECTION STYLES */
main {
text-align: center;
display: block;
margin: auto;
background-color: #356335;
color: white;
padding-bottom: 30px;
}
main a {
color: white;
}
.half-column {
margin-top: 30px;
width: 50%;
display: inline-block;
box-sizing: border-box;
padding: 0 10px 30px 10px;
background-color: white;
color: #356335;
border: 2px solid lightcoral;
line-height: 170%;
}
.fourth-column {
display: inline-block;
width: 25%;
box-sizing: border-box;
vertical-align: top;
text-align: center;
padding-top: 50px;
background-color: #356335;
color: white;
line-height: 140%;
}
/** BUTTON STYLES */
.greenbutton {
width: 160px;
background-color: green;
border: 1px solid darkgreen;
border-radius: 3px;
padding: 10px;
margin: 5px auto;
}
a.greenbutton {
color: white;
font-weight: bold;
font-size: 1em;
}
/** BREAKPOINTS */
@media only screen and (max-width: 800px) {
.header {
display: none;
}
.header2 {
display: block;
}
.site-title {
width: 100%;
display: block;
margin: 0 auto;
}
.banner {
max-height: 100px;
}
.greeting {
padding: 30px;
}
.half-column, .fourth-column {
width: 100%;
}
}pages-html folder:
about.php ▾
<div class = 'half-column left'>
<h2>About Us</h2>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.
<br>
<br>Although 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.
<br>
<br>Soon, Felinia residents were enjoying catnip varieties that had previously been only available in places like Catalonia and Katmandu. The business became so successful that Tom and Martin became Felinia's most successful feline entrepreneurs.
<br>
<br>From its simple beginnings in a college dormitory, today, The Nip Shoppe is run from a 20-acre office park with 5 warehouses and an ultramodern distribution center. A new facility has just been built to conduct catnip research. You can find "Ultra Catnip Oil' at your local pharmacy - one of the many medicinal oils recently introduced to the expanding collection of catnip products.
<br>
<br>Despite all the success, Tom and Marin still have a hands-on approach to managing their nearly 200 employees, all of whom enjoy discount Nip Shoppe products as a perk for their employment. Their showroom on Main Street, Felinia is open 6 days a week. Stop by and get some nip!<br>
<br>
</div> contact.php ▾
<div class = 'half-column'>
<h2>Contact</h2>
<h1>The Nip Shoppe</h1>
<h4>You can contact us 7 days a week at (513) 418-1480</h4>
<h4>Send us an email at info@thenipshoppe.com</h4>
<br>Our showroom is in the middle of downtown Felinia, Ohio<br>3 minutes from the I-71 with lots of free parking.
<br><br>
<b>Location</b>
222 Scratching Post Road <br>
Felinia, Ohio 45222 <br>
<b>Visit us on Furbook </b><br>
<b>Visit us on Shedstagram</b>
</div>
home.php ▾
<div class = 'fourth-column'>
<h2>Specials!!While Supplies Last</h2>
<br><b>Dilettante Package</b>
<br>3oz of all 5 flavors
<br>$49.95
<br>
<br><b>Weekend Binge Package</b>
<br>3lbs current crop catmint
<br>$63.63
<br>
<br><b>Hard Days Night Package</b>
<br>20oz Purple Haze
<br>20oz Lucy in the Sky
<br>20oz Stairway to Heaven
<br>$82.77
<br>
</div><div class = 'half-column'>
<h1>Welcome to The Nip Shoppe</h1>
<h2>We carry the largest selection of quality catnip in all of Felinia</h2>
<br><b>Visit our showroom in beautiful downtown Felinia, Ohio
<br>Prepare to be amazed!</b>
<br>
<br><b>Varieties</b>
<br>Common Catnip - our most popular flavor, warm hues
<br>Camphor Catnip - faint hints of exotic locales
<br>Greek Catnip - our strongest variety - be careful!<br>Lemon Catnip - slightly sweet - a favorite with the kittens
<br>Catmint - bitter overtones, but popular with a select few
<br>
<br><b>Seasonal Products</b>
<br>Purple Haze
<br>Lucy in the Sky
<br>Stairway To Heaven
<br>
<br>
<br>
</div><div class = 'fourth-column'>
<b>Hours</b>
<br>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
<br>
<br><b>Location</b>
<br>222 Scratching Post Road
<br>Felinia, Ohio 45222
<br>
<br><b>Contact Us</b>
<br>(555)111-2222 <br>
<br>thenipshippe@furmail.com
<br>
<br><b>Visit us on Furbook </b>
<br>
<br><b>Visit us on Shedstagram</b>
<br>
<br>
</div>