Skip to content

Instantly share code, notes, and snippets.

@aaronbalthaser

aaronbalthaser/index.html

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.
Download ZIP
Simple Web Page
Raw
index.html
<?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>
@aaronbalthaser
Copy link
Author

I built this page as requested from the instructions. I did not run into any issues. All the code for PHP, CSS, and HTML are placed within a single file, so the user can copy/paste the code into an index.php file and it works.

a. The HTML page was built according to requested structure.
b. On first page load the form is displayed in the content area.
c. Upon submission the name is saved as a cookie and 2 additional cookies are generated to store the CSS values used to hide or display the form and message paragraph tag.
d. Upon submission the page is refreshed and the form is hidden while the message is displayed.
e. The computer can be turned off.
f. The following day when the user returns the message is still displayed.

The cookies are set to expire in 2 days.

@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