Skip to content

Instantly share code, notes, and snippets.

@aaronbalthaser
Created May 26, 2014 18:20
Show Gist options
  • Save aaronbalthaser/69cdb4e47cd4c4c58957 to your computer and use it in GitHub Desktop.
Save aaronbalthaser/69cdb4e47cd4c4c58957 to your computer and use it in GitHub Desktop.
Simple Web Page
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
setcookie('name', $_POST['name'], time() + 60 * 60 * 24 * 2);
setcookie('form', 'none', time() + 60 * 60 * 24 * 2);
setcookie('message', 'block', time() + 60 * 60 * 24 * 2);
header("Location: index.php");
}
$message = isset($_COOKIE['message']) ? $_COOKIE['message'] : 'none';
$form = isset($_COOKIE['form']) ? $_COOKIE['form'] : 'block';
$name = isset($_COOKIE['name']) ? ucfirst($_COOKIE['name']) : '';
?>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Simple Web Page</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
.wrapper {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 0 20px; }
.wrapper::after {
content: " ";
display: block;
clear: both; }
html {
font-family: 14px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body {
color: #535353;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 160%; }
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
p,
ul,
ol {
margin-bottom: 22px; }
ul {
list-style-type: disc;
margin-left: 1.5em; }
ul li {
margin-left: .85em; }
.clearfix:before,
.clearfix:after {
content: "";
display: table; }/
.clearfix:after {
clear: both; }
a {
color: indianred;
font-weight: bold; }
#header {
background: #76c7c0;
padding: 20px; }
#main #sidebar {
width: 23.72881%;
float: left;
margin-right: 1.69492%; }
#main #sidebar #nav-sidebar {
list-style: none;
margin: 0;
padding: 0; }
#main #sidebar #nav-sidebar ul {
margin: 0;
padding: 0; }
#main #sidebar #nav-sidebar li {
margin: 12px 0;
padding: 0;
list-style: none;
width: 100%;
height: 50px;
position: relative; }
#main #sidebar #nav-sidebar a {
background: #76C7C0;
margin: 0;
text-decoration: none;
position: absolute;
width: 100%;
height: 50px;
padding: 12px 0 0 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px; }
#main #sidebar #nav-sidebar a:hover {
background: #a2f1e9; }
#main #content {
width: 74.57627%;
float: right;
padding: 20px; }
#footer {
clear: both;
background: #76c7c0; }
#footer #nav-footer ul {
float: left;
height: 40px;
padding: 0;
margin: 0;
list-style: none;
width: 100%; }
#footer #nav-footer li {
float: left;
display: inline-block;
line-height: 40px; }
#form-container {
background: blanchedalmond;
padding: 6px; }
#message {
background: indianred;
padding: 12px;
color: white;
font-size: 16px;
font-weight: bold; }
#form-container {
display: <?php echo $form . ';'; ?>}
#message {
display: <?php echo $message . ';'; ?>}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<a href="/" title="Return to the homepage" id="logo">
<img width="157" height="29" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAAdCAYAAACwlm4OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEQ0MwQjczMjBCMDhFMjExQUZGRkEyMTJCRDk4MTQ3NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0Y3MEI3QUREMDcxMUUzQTlBRUQ0RjA2QkRDRTI1MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0Y3MEI3OUREMDcxMUUzQTlBRUQ0RjA2QkRDRTI1MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUyMUQyRTk4REM3QjExRTNCQzAxQjU2MUExNTVFNkQ2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUyMUQyRTk5REM3QjExRTNCQzAxQjU2MUExNTVFNkQ2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g+BnywAABGNJREFUeNrsXItxozAQlT1pQFcCLeASuBJICbgEXAIpAUogJUAJpgRcgunAPmlulWzW+oEBn33amZ04RoJl9bRfJZvL5ZIxxkrBneDfggcWKJAnbTab0XO2gnP4HAtOgxrvJi64EXyFnzyo5BZ0geYluXET+JyEjRxAtwZ9QqgiqYXfAyF6CyqYnWRMvAtqCJZubYohVo6DKh4Puggy5StwjxIZ2+JdEZ8tc3AAT+cVBAQpPF9dL1EsNkciUWgSiQQ9LwUZz+i7xjMGTGAu5iXJqFdBheAvvYrPqeD++k2l4J96vVwuveArcCaYWTgRXKLxkgvBkWZsRsbkZB7mo2CO5srPtWW85IY8L3aMV5xr3oG+D7uDI3I/rJvGU8bScv965LzSoC/MKYzpNWs5m14F+CQoR4HOBYJk5HjKKXrJ84gXxRviOhMXDwadSYZ8pE64Y40UHy0YmFWvEnTbEebVZfZrcJ+KPgSfNOPkd7IILauKB/RdB66oJi5JZn97GI/nMA+Z1HN2GlkGcr1D1/IV62sHkOEXZLtYhoi4bexGW5h7IPNOZI5vDDqGnHrd/K0a3+hVgI77WLqCoLVGrjB1mPfc4RJdO1m3M6m5N+3I3GGBMsf1ZAVLR2XgZD1KjQtUzCfIkkwYM1qvyo1K1t1/6xmwYuv1zr5bZZ8jLI+ycDbKiQVoNYXXkuwqW72MGSyAz+9r1PMqjZWoPPUZTXimzzsOHnJ/kTBoVj1qrjvdK37pjgBMUUXMeTzxhSPiDiokg8qYanL/Zy68mha3Jfrk6Hs85wgZcrqSXKsVh1MDuGxCTo2F6M4tHQo1bYJXKC5TfQ7Ae9h4Js9QsSc4sLF1BJfcw6osFXCnjuB7x17zRAy3gPATQpROM6+AuuPYpOA0g9ueDXTc0+wmGgu0hFnvUKb38cIF+4QAYtC43x1kuwdNeFPfCajFs/a3CWaeUkaAMdX6KAVzYtHYi4NM14HxiVkHpJcOJVgR3KdD12LkPVpNqeufsXQUQKkh20w84j5fS9eS538YAKdaWGc2T+tq6ZjMx7oUkBxwgz5V+1B3Ro/GcqawKENGImL6+mv6SNBRC0MzpQIYm/3qTnkqsusbsvMyWJgaZbvZk4IuY/Z+8p64xxS5X6qXlDxnIDo9acDbGzbs4od5t5qMMTYIrOIFpaicuMb9DPK0BOgJu23Kxxag/oulg2HC+HfNex0IMHoAX0NcZEviatV5OTmMS2sImebXK2nM63p+MamS65r1kUeHoR5R1S89m+Lc0qngFnkah7zNnU1/030axwGG3OPAhW0testaKLl6siYJ6iwcNZ0Sq16h6/D1vrgbgboSP67jGzfAOqG5oaWVebRhemjgj20rpZpDA2phTC2gZqaTIktx43mSxAfUtcZY8IXlvtGrDmQu3siJgVajBsVR1UwhyUNp6l+DBQq0KgXQBQqgCxRAFyhQAN0L0X/77ztC9rouqW6CLNTKAnD39ACakL3+EWAA2SWAzJu3GrwAAAAASUVORK5CYII=" />
</a>
</div>
<section id="main">
<aside id="sidebar">
<nav id="nav-sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</aside>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, nesciunt, ipsum, voluptas, optio dolorem quisquam sed aliquam unde beatae delectus suscipit impedit consequuntur neque dolor illo deserunt rem ut at.</p>
<div id="form-container">
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"/>
<input type="submit" id="submit" name="submit"/>
</form>
</div>
<p id="message"><?php echo $name ?>, You are amazing!</p>
</section>
</section>
<footer id="footer" class="clearfix">
<nav id="nav-footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
@nathanbrauer
Copy link

Hi Aaron!

Thanks for this. :) Can you provide a version which utilizes HTML, CSS, and Javascript only? This was the initial intent of the project, but looks like we forgot to make that clear in the document (oops!).

Thank you!
Nathan J. Brauer
Sr. Web Developer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment