Anna Perkins

Website Layouts

Want a website like mine? Only without the fairy princess color scheme? You're in luck. I've streamlined my code and made some website layouts that are essentially the same as this website (including cross-browser and mobile compatibility), only with differents colors. With a basic knowledge of HTML and CSS, you can add your own content and modify these websites. If you use one of my layouts, I would love to see it, so please use the contact form to let me know!

For help on how to implement/use these layouts, please refer to the tutorials page.

Click on the preview to open the layout in a new tab.

CSS @charset "UTF-8"; html, body, div, span, objecy, iframe, h1, h2, h3, h4, p, blockquote, pre, a abbr, address, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, section { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font size: 100%; font-family: inherit; text-decoration: none; } header, nav, content, aside, footer, h1, section {display: block} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; width: 94%; } * html .clearfix { zoom: 1 } /* IE6 */ *:first-child+html .clearfix { zoom: 1 } /* IE7 */ @viewport { width: device-width ; zoom: 1.0 ; } @-ms-viewport { width: device-width ; } @media only screen and (min-width:500px) { .content { float: right; width: 74%;} #sidenav { width: 22.5%; float: left;} body { font: 2.2vmin/18px "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 3.2vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 3.7vw;} nav#global ul { height: 1.8em; font: 1.8vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; } nav#global ul li a { font-size: 1.8vw; line-height: 1.8em; } .title { font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.9em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 1.5vmin "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:10%;} .smtable {width:20%;} } @media only screen and (max-width:500px) { body { font: 0.8em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 1.2em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 1.1em;} nav#global ul { height: 0.9em; font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} nav#global ul li a { font-size: 0.9em; line-height: 0.9em; } .title { font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.6em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 0.7em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:40%;} .smtable {width:70%;} } html { width: 100%; background-color: #ffffff; background-image: -moz-linear-gradient(top, #ffffff 0%, #ffc4b3 90%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(0.9, #ffc4b3)); display: flex; } body { width: 92%; margin: 0 auto; color: #944351; text-align: justify; line-height: 150%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; display: -ms-flexbox; -ms-flex-direction: column; } .wrapper { flex: 1 1 auto; display: flex; flex-flow: column nowrap; } a { color: #FF6F91; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:hover { color: #FF9671; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:active { color: #FF9671; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} p {margin-bottom: 16px;} img { max-width:100%; height:auto; max-height:100%; } h1 { margin: 0px 0 0px } h1 { color: #FFC75F; text-align:center; background-color: #ff668a; } h1 a:hover { border: none } h2 { font: 1.25em "Gil Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #ffffff; text-align:center; } .hbar1 { height: 4px; background-color: #FFC75F; background-repeat: repeat-x; } .hbar2 { height: 8px; background-color: #ff668a; } .hbar3 { height: 8px; background-color: #ffc4b3; } nav#global { margin: 0px 0 20px; width: 100%; background-color: #ffc4b3; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 0 0 10px 10px; background-color: #ffc4b3; } nav#global ul { text-align: center; margin: 0 auto; display: table; } nav#global ul li { position: relative; display: inline; } nav#global ul li a { display: block; float: left; text-transform: lowercase; padding: 0 2vw; color: #ff668a; text-decoration: none; } nav#global ul li a:hover { border: none; color: #FFC75F; background-color: #ff668a; -moz-border-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-radius: 10 10 10px 10px; box-shadow: inset 0 0 0 4px #ff668a; -moz-box-shadow: inset 0 0 0 4px #ff668a; -webkit-box-shadow: inset 0 0 0 4px #ff668a; } #full { width: 99.3%; margin-left: 0.4%; margin-right: 0.5%; margin-bottom: 1.5%; margin-top: 0.8%; overflow:auto; background-color:#ffc4b3; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #ff668a; -moz-box-shadow: 0 0 0 4px #ff668a; -webkit-box-shadow: 0 0 0 4px #ff668a; flex: 1 0 100%; } .title { display: block; height: 100%; padding-top: 0%; margin-bottom: 1%; background-color: #FFC75F; color: #ff668a; text-align: center; position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; } @media screen\0, @media screen\9 { footer { position: absolute; bottom: 0; } } footer { clear: both; min-width: 99%; width: 99%; background-color: #ffc4b3; margin-bottom: 1%; margin-left: 0.5%; margin-right: 0.5%; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; z-index: 1; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #ff668a; -moz-box-shadow: 0 0 0 4px #ff668a; -webkit-box-shadow: 0 0 0 4px #ff668a; } .ftitle { height: 100%; padding-top: 0%; margin-bottom: 1%; font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #FFC75F; color: #ff668a; text-align: center; position: relative; } .read { display: inline; text-align: center; min-width: 12%; max-width: 100%; float: right; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; padding: 0.4% 1% 0.5%; margin-right: 3px; line-height: 150%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFC75F; color: #ff668a; } .read:hover { background-color: #ff668a; color: #FFC75F; border: none; } .author { float: left; padding-right: 15px; font-size: 13px; text-decoration: none; } .date { float: left; padding-left: 15px; font-size: 13px; text-decoration: none; } table { width: 90%; text-align: center; border-spacing: 5 px; margin-left: auto; margin-right: auto; } td { padding: 1%; } ul { padding-left: 0; } * { box-sizing: border-box; } main { -webkit-box-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-flex: 1 0 auto; } .sticky { margin: auto auto 0 auto; } figure { float: right; margin-left: 1%; margin-bottom: 1%; margin-right: 0%; padding-right: 0; display: block; overflow: hidden; }	HTML <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name="description" content="Website description"> <title>Website Title</title> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <!--[if IE]><link rel="shortcut icon" href="/anicon.ico"><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Replace with location of your stylesheet--!> <link rel="stylesheet" href="http://annaneo.com/weblayouts/web7style.css"> </head> <body> <div class=wrapper> <main> <header> <div id=hbar1></div> <div id=hbar1></div> <h1>website title</h1> <div class=hbar3></div> <div class=hbar2></div> <div class=hbar1></div> <nav id=global><ul> <li><a href="http://annaneo.com/">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul></nav> </header> <div id="full"> <p class=title>Header</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis. In non purus condimentum, luctus libero sed, mattis felis. Mauris neque nulla, pretium a condimentum at, rutrum eget sapien.</p> <p>Donec eget erat quis dolor varius porttitor vel nec risus. Phasellus sed turpis convallis, facilisis eros nec, imperdiet arcu. Morbi id erat gravida urna vehicula hendrerit nec sit amet tortor. Aenean id lorem non est tincidunt blandit nec eget massa. Duis nec semper ipsum. Duis a ex purus. Donec tincidunt venenatis eros. Pellentesque pellentesque mattis maximus. Aliquam blandit pharetra orci id facilisis.</p> <p>Duis dignissim orci sollicitudin dolor ultricies tempor. Nam in fringilla metus. Vestibulum et porttitor eros, sed aliquam orci. Ut et ipsum nec nibh pellentesque cursus. Sed nisl justo, commodo in sagittis sed, gravida in nulla. Vestibulum ultrices dui tellus. Aenean lacinia vehicula tellus nec bibendum. Aliquam placerat odio ac tortor rhoncus ullamcorper vel a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio purus, accumsan vel dignissim ut, pellentesque id lacus. Praesent enim ipsum, tincidunt et ultricies sed, varius vitae mi. Curabitur vel auctor lacus. Nullam mi lorem, congue id quam in, gravida lobortis eros. Duis cursus sollicitudin efficitur.</p> <p>In hac habitasse platea dictumst. Nam lacus orci, vulputate id velit vel, aliquet varius ligula. Duis aliquam placerat tristique. Sed viverra nisi ut odio euismod egestas. Nunc orci orci, ultrices vitae vestibulum feugiat, molestie vitae risus. Ut interdum ipsum ut pulvinar ullamcorper. Sed semper id enim nec ullamcorper. Maecenas aliquet euismod sagittis. Vivamus in ultricies turpis. Aliquam lobortis, orci ut imperdiet pellentesque, nisi nunc aliquet diam, id iaculis leo mauris sed nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sit amet magna venenatis, egestas quam a, pellentesque leo. Praesent tempor velit at nibh consequat, quis viverra nulla mattis. Sed sapien felis, dictum quis pellentesque eu, fermentum vel urna.</p> <p style="clear: both;"></p> <p class=author>Written by: <a href="#"><b>Your Name</b></a></p> <p class=date>Posted on: <a href="#"><b>Date</b></a></p> <a class=read href="#">Continue Reading</a> </div> </main> <br style="clear:both;" /> <div class=sticky> <footer> <p class=ftitle>Footer</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis.</p> <table class="smtable"><tr> <td> <a href="[full link to your Twitter]"> <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Pinterest]"> <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Facebook page]"> <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your LinkedIn]"> <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Instagram]"> <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" /> </a> </td> </tr></table> <p></p> </footer> <p style="text-align:center;"> Website Layout © 2018 <b><a href="http://annaperkinsart.com">AnnaPerkinsArt.com</a></b></p> </div> </div> </body> </html>
CSS @charset "UTF-8"; html, body, div, span, objecy, iframe, h1, h2, h3, h4, p, blockquote, pre, a abbr, address, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, section { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font size: 100%; font-family: inherit; text-decoration: none; } header, nav, content, aside, footer, h1, section {display: block} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; width: 94%; } * html .clearfix { zoom: 1 } /* IE6 */ *:first-child+html .clearfix { zoom: 1 } /* IE7 */ @viewport { width: device-width ; zoom: 1.0 ; } @-ms-viewport { width: device-width ; } @media only screen and (min-width:500px) { .content { float: right; width: 74%;} #sidenav { width: 22.5%; float: left;} body { font: 2.2vmin/18px "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 3.2vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 3.7vw;} nav#global ul { height: 1.8em; font: 1.8vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; } nav#global ul li a { font-size: 1.8vw; line-height: 1.8em; } .title { font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.9em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 1.5vmin "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:10%;} .smtable {width:20%;} } @media only screen and (max-width:500px) { body { font: 0.8em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 1.2em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 1.1em;} nav#global ul { height: 0.9em; font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} nav#global ul li a { font-size: 0.9em; line-height: 0.9em; } .title { font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.6em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 0.7em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:40%;} .smtable {width:70%;} } html { width: 100%; background-color: #ffffff; background-image: -moz-linear-gradient(top, #ffffff 0%, #85cfdc 90%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(0.9, #85cfdc)); display: flex; } body { width: 92%; margin: 0 auto; color: #3b7868; text-align: justify; line-height: 150%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; display: -ms-flexbox; -ms-flex-direction: column; } .wrapper { flex: 1 1 auto; display: flex; flex-flow: column nowrap; } a { color: #00A8CF; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:hover { color: #1DB4B3; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:active { color: #1DB4B3; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} p {margin-bottom: 16px;} img { max-width:100%; height:auto; max-height:100%; } h1 { margin: 0px 0 0px } h1 { color: #8DF8B7; text-align:center; background-color: #1090A2; } h1 a:hover { border: none } h2 { font: 1.25em "Gil Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #ffffff; text-align:center; } .hbar1 { height: 4px; background-color: #8DF8B7; background-repeat: repeat-x; } .hbar2 { height: 8px; background-color: #1090A2; } .hbar3 { height: 8px; background-color: #E0F2EC; } nav#global { margin: 0px 0 20px; width: 100%; background-color: #E0F2EC; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 0 0 10px 10px; background-color: #E0F2EC; } nav#global ul { text-align: center; margin: 0 auto; display: table; } nav#global ul li { position: relative; display: inline; } nav#global ul li a { display: block; float: left; text-transform: lowercase; padding: 0 2vw; color: #1090A2; text-decoration: none; } nav#global ul li a:hover { border: none; color: #8DF8B7; background-color: #1090A2; -moz-border-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-radius: 10 10 10px 10px; box-shadow: inset 0 0 0 4px #1090A2; -moz-box-shadow: inset 0 0 0 4px #1090A2; -webkit-box-shadow: inset 0 0 0 4px #1090A2; } #full { width: 99.3%; margin-left: 0.4%; margin-right: 0.5%; margin-bottom: 1.5%; margin-top: 0.8%; overflow:auto; background-color:#E0F2EC; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #1090A2; -moz-box-shadow: 0 0 0 4px #1090A2; -webkit-box-shadow: 0 0 0 4px #1090A2; flex: 1 0 100%; } .title { display: block; height: 100%; padding-top: 0%; margin-bottom: 1%; background-color: #8DF8B7; color: #1090A2; text-align: center; position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; } @media screen\0, @media screen\9 { footer { position: absolute; bottom: 0; } } footer { clear: both; min-width: 99%; width: 99%; background-color: #E0F2EC; margin-bottom: 1%; margin-left: 0.5%; margin-right: 0.5%; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; z-index: 1; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #1090A2; -moz-box-shadow: 0 0 0 4px #1090A2; -webkit-box-shadow: 0 0 0 4px #1090A2; } .ftitle { height: 100%; padding-top: 0%; margin-bottom: 1%; font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #8DF8B7; color: #1090A2; text-align: center; position: relative; } .read { display: inline; text-align: center; min-width: 12%; max-width: 100%; float: right; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; padding: 0.4% 1% 0.5%; margin-right: 3px; line-height: 150%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #8DF8B7; color: #1090A2; } .read:hover { background-color: #1090A2; color: #8DF8B7; border: none; } .author { float: left; padding-right: 15px; font-size: 13px; text-decoration: none; } .date { float: left; padding-left: 15px; font-size: 13px; text-decoration: none; } table { width: 90%; text-align: center; border-spacing: 5 px; margin-left: auto; margin-right: auto; } td { padding: 1%; } ul { padding-left: 0; } * { box-sizing: border-box; } main { -webkit-box-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-flex: 1 0 auto; } .sticky { margin: auto auto 0 auto; } figure { float: right; margin-left: 1%; margin-bottom: 1%; margin-right: 0%; padding-right: 0; display: block; overflow: hidden; }	HTML <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name="description" content="Website description"> <title>Website Title</title> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <!--[if IE]><link rel="shortcut icon" href="/anicon.ico"><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Replace with location of your stylesheet--!> <link rel="stylesheet" href="http://annaneo.com/weblayouts/web8style.css"> </head> <body> <div class=wrapper> <main> <header> <div id=hbar1></div> <div id=hbar1></div> <h1>website title</h1> <div class=hbar3></div> <div class=hbar2></div> <div class=hbar1></div> <nav id=global><ul> <li><a href="http://annaneo.com/">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul></nav> </header> <div id="full"> <p class=title>Header</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis. In non purus condimentum, luctus libero sed, mattis felis. Mauris neque nulla, pretium a condimentum at, rutrum eget sapien.</p> <p>Donec eget erat quis dolor varius porttitor vel nec risus. Phasellus sed turpis convallis, facilisis eros nec, imperdiet arcu. Morbi id erat gravida urna vehicula hendrerit nec sit amet tortor. Aenean id lorem non est tincidunt blandit nec eget massa. Duis nec semper ipsum. Duis a ex purus. Donec tincidunt venenatis eros. Pellentesque pellentesque mattis maximus. Aliquam blandit pharetra orci id facilisis.</p> <p>Duis dignissim orci sollicitudin dolor ultricies tempor. Nam in fringilla metus. Vestibulum et porttitor eros, sed aliquam orci. Ut et ipsum nec nibh pellentesque cursus. Sed nisl justo, commodo in sagittis sed, gravida in nulla. Vestibulum ultrices dui tellus. Aenean lacinia vehicula tellus nec bibendum. Aliquam placerat odio ac tortor rhoncus ullamcorper vel a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio purus, accumsan vel dignissim ut, pellentesque id lacus. Praesent enim ipsum, tincidunt et ultricies sed, varius vitae mi. Curabitur vel auctor lacus. Nullam mi lorem, congue id quam in, gravida lobortis eros. Duis cursus sollicitudin efficitur.</p> <p>In hac habitasse platea dictumst. Nam lacus orci, vulputate id velit vel, aliquet varius ligula. Duis aliquam placerat tristique. Sed viverra nisi ut odio euismod egestas. Nunc orci orci, ultrices vitae vestibulum feugiat, molestie vitae risus. Ut interdum ipsum ut pulvinar ullamcorper. Sed semper id enim nec ullamcorper. Maecenas aliquet euismod sagittis. Vivamus in ultricies turpis. Aliquam lobortis, orci ut imperdiet pellentesque, nisi nunc aliquet diam, id iaculis leo mauris sed nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sit amet magna venenatis, egestas quam a, pellentesque leo. Praesent tempor velit at nibh consequat, quis viverra nulla mattis. Sed sapien felis, dictum quis pellentesque eu, fermentum vel urna.</p> <p style="clear: both;"></p> <p class=author>Written by: <a href="#"><b>Your Name</b></a></p> <p class=date>Posted on: <a href="#"><b>Date</b></a></p> <a class=read href="#">Continue Reading</a> </div> </main> <br style="clear:both;" /> <div class=sticky> <footer> <p class=ftitle>Footer</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis.</p> <table class="smtable"><tr> <td> <a href="[full link to your Twitter]"> <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Pinterest]"> <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Facebook page]"> <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your LinkedIn]"> <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Instagram]"> <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" /> </a> </td> </tr></table> <p></p> </footer> <p style="text-align:center;"> Website Layout © 2018 <b><a href="http://annaperkinsart.com">AnnaPerkinsArt.com</a></b></p> </div> </div> </body> </html>
CSS @charset "UTF-8"; html, body, div, span, objecy, iframe, h1, h2, h3, h4, p, blockquote, pre, a abbr, address, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, section { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font size: 100%; font-family: inherit; text-decoration: none; } header, nav, content, aside, footer, h1, section {display: block} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; width: 94%; } * html .clearfix { zoom: 1 } /* IE6 */ *:first-child+html .clearfix { zoom: 1 } /* IE7 */ @viewport { width: device-width ; zoom: 1.0 ; } @-ms-viewport { width: device-width ; } @media only screen and (min-width:500px) { .content { float: right; width: 74%;} #sidenav { width: 22.5%; float: left;} body { font: 2.2vmin/18px "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 3.2vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 3.7vw;} nav#global ul { height: 1.8em; font: 1.8vw "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; } nav#global ul li a { font-size: 1.8vw; line-height: 1.8em; } .title { font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.9em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 1.5vmin "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:10%;} .smtable {width:20%;} } @media only screen and (max-width:500px) { body { font: 0.8em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif; } h1 { font: 1.2em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; height: 1.1em;} nav#global ul { height: 0.9em; font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} nav#global ul li a { font-size: 0.9em; line-height: 0.9em; } .title { font: 0.9em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;} footer { font: 0.6em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} .read { font-size: 1em;} figcaption { font: 0.7em "Trebuchet MS", Corbel, Arial, Helvetica, sans-serif;} figure { width:40%;} .smtable {width:70%;} } html { width: 100%; background-color: #ffffff; background-image: -moz-linear-gradient(top, #ffffff 0%, #B1CBD4 90%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(0.9, #B1CBD4)); display: flex; } body { width: 92%; margin: 0 auto; color: #395b8a; text-align: justify; line-height: 150%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; display: -ms-flexbox; -ms-flex-direction: column; } .wrapper { flex: 1 1 auto; display: flex; flex-flow: column nowrap; } a { color: #0000cc; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:hover { color: #B1CBD4; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} a:active { color: #B1CBD4; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;} p {margin-bottom: 16px;} img { max-width:100%; height:auto; max-height:100%; } h1 { margin: 0px 0 0px } h1 { color: #B1CBD4; text-align:center; background-color: #000099; } h1 a:hover { border: none } h2 { font: 1.25em "Gil Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #ffffff; text-align:center; } .hbar1 { height: 4px; background-color: #B1CBD4; background-repeat: repeat-x; } .hbar2 { height: 8px; background-color: #000099; } .hbar3 { height: 8px; background-color: #dee9ed; } nav#global { margin: 0px 0 20px; width: 100%; background-color: #dee9ed; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 0 0 10px 10px; background-color: #dee9ed; } nav#global ul { text-align: center; margin: 0 auto; display: table; } nav#global ul li { position: relative; display: inline; } nav#global ul li a { display: block; float: left; text-transform: lowercase; padding: 0 2vw; color: #000099; text-decoration: none; } nav#global ul li a:hover { border: none; color: #B1CBD4; background-color: #000099; -moz-border-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-radius: 10 10 10px 10px; box-shadow: inset 0 0 0 4px #000099; -moz-box-shadow: inset 0 0 0 4px #000099; -webkit-box-shadow: inset 0 0 0 4px #000099; } #full { width: 99.3%; margin-left: 0.4%; margin-right: 0.5%; margin-bottom: 1.5%; margin-top: 0.8%; overflow:auto; background-color:#dee9ed; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #000099; -moz-box-shadow: 0 0 0 4px #000099; -webkit-box-shadow: 0 0 0 4px #000099; flex: 1 0 100%; } .title { display: block; height: 100%; padding-top: 0%; margin-bottom: 1%; background-color: #B1CBD4; color: #000099; text-align: center; position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; } @media screen\0, @media screen\9 { footer { position: absolute; bottom: 0; } } footer { clear: both; min-width: 99%; width: 99%; background-color: #dee9ed; margin-bottom: 1%; margin-left: 0.5%; margin-right: 0.5%; padding-top: 1%; padding-bottom: 1%; padding-left: 1%; padding-right: 1%; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; z-index: 1; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; z-index: 1; box-shadow: 0 0 0 4px #000099; -moz-box-shadow: 0 0 0 4px #000099; -webkit-box-shadow: 0 0 0 4px #000099; } .ftitle { height: 100%; padding-top: 0%; margin-bottom: 1%; font: 3vmin "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #B1CBD4; color: #000099; text-align: center; position: relative; } .read { display: inline; text-align: center; min-width: 12%; max-width: 100%; float: right; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; padding: 0.4% 1% 0.5%; margin-right: 3px; line-height: 150%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #B1CBD4; color: #000099; } .read:hover { background-color: #000099; color: #B1CBD4; border: none; } .author { float: left; padding-right: 15px; font-size: 13px; text-decoration: none; } .date { float: left; padding-left: 15px; font-size: 13px; text-decoration: none; } table { width: 90%; text-align: center; border-spacing: 5 px; margin-left: auto; margin-right: auto; } td { padding: 1%; } ul { padding-left: 0; } * { box-sizing: border-box; } main { -webkit-box-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-flex: 1 0 auto; } .sticky { margin: auto auto 0 auto; } figure { float: right; margin-left: 1%; margin-bottom: 1%; margin-right: 0%; padding-right: 0; display: block; overflow: hidden; }	HTML <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name="description" content="Website description"> <title>Website Title</title> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <!--[if IE]><link rel="shortcut icon" href="/anicon.ico"><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Replace with location of your stylesheet--!> <link rel="stylesheet" href="http://annaneo.com/weblayouts/web9style.css"> </head> <body> <div class=wrapper> <main> <header> <div id=hbar1></div> <div id=hbar1></div> <h1>website title</h1> <div class=hbar3></div> <div class=hbar2></div> <div class=hbar1></div> <nav id=global><ul> <li><a href="http://annaneo.com/">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul></nav> </header> <div id="full"> <p class=title>Header</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis. In non purus condimentum, luctus libero sed, mattis felis. Mauris neque nulla, pretium a condimentum at, rutrum eget sapien.</p> <p>Donec eget erat quis dolor varius porttitor vel nec risus. Phasellus sed turpis convallis, facilisis eros nec, imperdiet arcu. Morbi id erat gravida urna vehicula hendrerit nec sit amet tortor. Aenean id lorem non est tincidunt blandit nec eget massa. Duis nec semper ipsum. Duis a ex purus. Donec tincidunt venenatis eros. Pellentesque pellentesque mattis maximus. Aliquam blandit pharetra orci id facilisis.</p> <p>Duis dignissim orci sollicitudin dolor ultricies tempor. Nam in fringilla metus. Vestibulum et porttitor eros, sed aliquam orci. Ut et ipsum nec nibh pellentesque cursus. Sed nisl justo, commodo in sagittis sed, gravida in nulla. Vestibulum ultrices dui tellus. Aenean lacinia vehicula tellus nec bibendum. Aliquam placerat odio ac tortor rhoncus ullamcorper vel a tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio purus, accumsan vel dignissim ut, pellentesque id lacus. Praesent enim ipsum, tincidunt et ultricies sed, varius vitae mi. Curabitur vel auctor lacus. Nullam mi lorem, congue id quam in, gravida lobortis eros. Duis cursus sollicitudin efficitur.</p> <p>In hac habitasse platea dictumst. Nam lacus orci, vulputate id velit vel, aliquet varius ligula. Duis aliquam placerat tristique. Sed viverra nisi ut odio euismod egestas. Nunc orci orci, ultrices vitae vestibulum feugiat, molestie vitae risus. Ut interdum ipsum ut pulvinar ullamcorper. Sed semper id enim nec ullamcorper. Maecenas aliquet euismod sagittis. Vivamus in ultricies turpis. Aliquam lobortis, orci ut imperdiet pellentesque, nisi nunc aliquet diam, id iaculis leo mauris sed nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sit amet magna venenatis, egestas quam a, pellentesque leo. Praesent tempor velit at nibh consequat, quis viverra nulla mattis. Sed sapien felis, dictum quis pellentesque eu, fermentum vel urna.</p> <p style="clear: both;"></p> <p class=author>Written by: <a href="#"><b>Your Name</b></a></p> <p class=date>Posted on: <a href="#"><b>Date</b></a></p> <a class=read href="#">Continue Reading</a> </div> </main> <br style="clear:both;" /> <div class=sticky> <footer> <p class=ftitle>Footer</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus, purus non faucibus laoreet, orci orci finibus nisi, sed suscipit eros purus quis ipsum. Suspendisse potenti. Mauris ut velit lectus. Nam convallis vitae ipsum nec mattis. Cras ullamcorper faucibus magna nec tincidunt. Ut molestie metus varius odio tempor, sed laoreet orci dignissim. Quisque dictum ipsum tortor. Praesent molestie orci mauris, sollicitudin tristique nulla ultrices at. In posuere sed turpis in facilisis.</p> <table class="smtable"><tr> <td> <a href="[full link to your Twitter]"> <img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Pinterest]"> <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Facebook page]"> <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your LinkedIn]"> <img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" /> </a></td> <td> <a href="[full link to your Instagram]"> <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" /> </a> </td> </tr></table> <p></p> </footer> <p style="text-align:center;"> Website Layout © 2018 <b><a href="http://annaperkinsart.com">AnnaPerkinsArt.com</a></b></p> </div> </div> </body> </html>

Back