D3 Examples - Simple Web Page

xxxxxxxxxx
 
<?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>
    