Create a five page website with a common theme
example 2/images/bats.gif
example 2/images/cat1.jpg
example 2/images/dino_dino_pattern_by_pronouncedyou.jpg
example 2/images/pumpkin.gif
example 2/images/Thumbs.db
example 2/index.html
The New Halloween Store
For the little Goblin in all of us!
Put your text here Please come in and stay awhile.
I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
Product of the week
My guarantee
If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. No questions asked!
© 2016 Ben Murach
example 2/js/jquery.slicknav.min.js
/*! SlickNav Responsive Mobile Menu (c) 2013 Josh Cope licensed under GPL and MIT */ (function(e,t,n){var r={label:"MENU",duplicate:true,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",parentTag:"a",closeOnClick:false,allowParentLinks:false},i="slicknav",s="slicknav";e.fn[i]=function(n){return this.each(function(){function h(e){var t=e.data("menu");if(!t){t={};t.arrow=e.children("."+s+"_arrow");t.ul=e.next("ul");t.parent=e.parent();e.data("menu",t)}if(e.parent().hasClass(s+"_collapsed")){t.arrow.html(o.openedSymbol);t.parent.removeClass(s+"_collapsed");p(t.ul,true)}else{t.arrow.html(o.closedSymbol);t.parent.addClass(s+"_collapsed");p(t.ul,true)}}function p(e,t){var n=v(e);var r=0;if(t)r=o.duration;if(e.hasClass(s+"_hidden")){e.removeClass(s+"_hidden");e.slideDown(r,o.easingOpen);e.attr("aria-hidden","false");n.attr("tabindex","0");d(e,false)}else{e.addClass(s+"_hidden");e.slideUp(r,o.easingClose,function(){e.attr("aria-hidden","true");n.attr("tabindex","-1");d(e,true);e.hide()})}}function d(t,n){var r=t.children("li").children("ul").not("."+s+"_hidden");if(!n){r.each(function(){var t=e(this);t.attr("aria-hidden","false");var r=v(t);r.attr("tabindex","0");d(t,n)})}else{r.each(function(){var t=e(this);t.attr("aria-hidden","true");var r=v(t);r.attr("tabindex","-1");d(t,n)})}}function v(e){var t=e.data("menu");if(!t){t={};var n=e.children("li");var r=n.children("a");t.links=r.add(n.children("."+s+"_item"));e.data("menu",t)}return t.links}function m(t){if(!t){e("."+s+"_item, ."+s+"_btn").css("outline","none")}else{e("."+s+"_item, ."+s+"_btn").css("outline","")}}var i=e(this);var o=e.extend({},r,n);if(o.duplicate){var u=i.clone();u.removeAttr("id");u.find("*").each(function(t,n){e(n).removeAttr("id")})}else var u=i;var a=s+"_icon";if(o.label==""){a+=" "+s+"_no-text"}if(o.parentTag=="a"){o.parentTag='a href="#"'}u.attr("class",s+"_nav");var f=e('<div class="'+s+'_menu"></div>');var l=e("<"+o.parentTag+' aria-haspopup="true" tabindex="0" class="'+s+'_btn"><span class="'+s+'_menutxt">'+o.label+'</span><span class="'+a+'"><span class="'+s+'_icon-bar"></span><span class="'+s+'_icon-bar"></span><span class="'+s+'_icon-bar"></span></span></a>');e(f).append(l);e(o.prependTo).prepend(f);f.append(u);var c=u.find("li");e(c).each(function(){var t=e(this);data={};data.children=t.children("ul").attr("role","menu");t.data("menu",data);if(data.children.length>0){var n=t.contents();var r=[];e(n).each(function(){if(!e(this).is("ul")){r.push(this)}else{return false}});var i=e(r).wrapAll("<"+o.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+s+'_item"/>').parent();t.addClass(s+"_collapsed");t.addClass(s+"_parent");e(r).last().after('<span class="'+s+'_arrow">'+o.closedSymbol+"</span>")}else if(t.children().length==0){t.addClass(s+"_txtnode")}t.children("a").attr("role","menuitem").click(function(){if(o.closeOnClick)e(l).click()})});e(c).each(function(){var t=e(this).data("menu");p(t.children,false)});p(u,false);u.attr("role","menu");e(t).mousedown(function(){m(false)});e(t).keyup(function(){m(true)});e(l).click(function(e){e.preventDefault();p(u,true)});u.on("click","."+s+"_item",function(t){t.preventDefault();h(e(this))});e(l).keydown(function(e){var t=e||event;if(t.keyCode==13){e.preventDefault();p(u,true)}});u.on("keydown","."+s+"_item",function(t){var n=t||event;if(n.keyCode==13){t.preventDefault();h(e(t.target))}});if(o.allowParentLinks){e("."+s+"_item a").click(function(e){e.stopImmediatePropagation()})}})}})(jQuery,document,window)
example 2/styles/main.css
html { background-image: url("../images/bats.gif"); } body { font-family: Verdana, Arial, Helvetica, sans-serif; width: 800px; background-color: white; margin: 0 auto; padding: 0; border: 3px solid black; box-shadow: 0 9px 18px 9px; } h1, h2, h3, p { margin: 0; padding: 0; } /* Header */ header { background-image: -webkit-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: -moz-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: -o-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%); padding: 15px; } header img { float: left; padding-right: 15px; } header h2 { font-size: 230%; } header h3 { font-size: 125%; padding-bottom: 15px; } /* Navigation menu */ #nav_menu { clear: left; } #nav_menu ul { list-style: none; position: relative; } #nav_menu ul li { float: left; } #nav_menu ul ul { display: none; position: absolute; top: 100%; } #nav_menu ul ul li { float: none; } #nav_menu ul li:hover > ul { display: block; } #nav_menu > ul::after { content: ""; clear: both; display: block; } #nav_menu ul { margin: 0; padding: 0; } #nav_menu ul li a { text-align: center; display: block; width: 160px; padding: .7em 0; text-decoration: none; background-color: black; color: white; } #nav_menu ul li a.current { color: orange; } #nav_menu ul li a:hover, #nav_menu ul li a:focus { background-color: gray; } /* Sidebar */ aside { float: left; width: 160px; padding: 20px 0; } #nav_list ul { list-style: none; padding-left: 1.5em; } #nav_list ul li { width: 110px; margin-bottom: .5em; border: 2px solid black; } #nav_list ul li a { display: block; font-weight: bold; text-decoration: none; background-color: orange; padding: .5em 0 .5em .5em; color: black; } /* Section */ section { width: 580px; float: right; padding: 20px 40px 20px 20px; } section h1 { font-size: 140%; margin-bottom: .5em; } section h1:first-letter { font-size: 240%; } section h2 { font-size: 125%; margin: .8em 0 .5em 0; } section h3 { font-size: 110%; margin: .8em 0 .5em 0; } section p { margin-bottom: .5em; } section a { font-weight: bold; color: orange; } section a:link, main a:visited { color: orange; } section a:hover, main a:focus { color: green; } /* Footer */ footer { clear: both; border-top: 2px solid black; padding: 15px; background-image: -webkit-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: -moz-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: -o-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: linear-gradient(45deg, black 0%, orange 25%, white 100%); } footer p { font-size: 90%; text-align: center; }
example 2/styles/main_rwd.css
html { background-image: url("../images/dino_dino_pattern_by_pronouncedyou.jpg"); } body { font-family: Verdana, Arial, Helvetica, sans-serif; max-width: 960px; width: 95%; /* fixed width was 800 */ background-color: white; margin: 0 auto; padding: 0; border: 3px solid black; box-shadow: 0 9px 18px 9px; } h1, h2, h3, p { margin: 0; padding: 0; } /* Header */ header { background-image: -webkit-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: -moz-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: -o-linear-gradient(45deg, white 0%, orange 75%, black 100%); background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%); padding: .9375em 1.875% .9375em 1.875%; /* 15 / 16; 15 / 800 x 100 */ } header img { float: left; padding-right: 1.875%; /* 15 / 800 x 100 */ width: 10.6%; max-width: 85px; min-width: 40px; } header h2 { font-size: 230%; } header h3 { font-size: 125%; padding-bottom: .75em; /* 15 / (1.25 x 16) */ } /* Navigation menu */ #nav_menu { clear: left; } #nav_menu ul { list-style: none; position: relative; } #nav_menu ul li { float: left; width: 20%; /* 160 / 800 x 100 */ } #nav_menu ul ul { display: none; position: absolute; top: 100%; } #nav_menu ul ul li { float: none; } #nav_menu ul li:hover > ul { display: block; } #nav_menu > ul::after { content: ""; clear: both; display: block; } #nav_menu ul { margin: 0; padding: 0; } #nav_menu ul li:hover ul { width: 100%; } #nav_menu ul li a { text-align: center; display: block; padding: .7em 0; text-decoration: none; background-color: black; color: white; } #nav_menu ul li a.current { color: orange; } #nav_menu ul li a:hover, #nav_menu ul li a:focus { background-color: gray; } /* Sidebar */ aside { float: left; width: 20%; /* 160 / 800 x 100 */ padding: 1.25em 0; /* 20 / 16 */ } #nav_list ul { width: 68.75%; /* 110 / 160 x 100 */ list-style: none; padding-left: 15%; /* (1.5 x 16) / 160 x 100 */ } #nav_list ul li { margin-bottom: .5em; border: 2px solid black; } #nav_list ul li a { display: block; font-weight: bold; text-decoration: none; background-color: orange; padding: .5em 0 .5em 7.27272%; /* .5 x 16 / 110 x 100 */ color: black; } /* Section */ section { width: 72.5%; /* 580 / 800 x 100 */ padding: 1.25em 5% 1.25em 2.5%; /* top and bottom: 20 / 16; right: 40 / 800 x 100; left: 20 / 800 x 100 */ float: right; } section h1 { font-size: 140%; margin-bottom: .5em; } section h1:first-letter { font-size: 240%; } section h2 { font-size: 125%; margin: .8em 0 .5em 0; } section h3 { font-size: 110%; margin: .8em 0 .5em 0; } section p { margin-bottom: .5em; } section a { font-weight: bold; color: orange; } section a:link, main a:visited { color: orange; } section a:hover, main a:focus { color: green; } section img { width: 30%; max-width: 150px; } /* Footer */ footer { clear: both; border-top: 2px solid black; padding: .9375em 1.875% .9375em 1.875%; /* top and bottom: 15 / 16; right and left: 15 / 800 x 100 */ background-image: -webkit-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: -moz-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: -o-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: linear-gradient(45deg, black 0%, orange 25%, white 100%); } footer p { font-size: 90%; text-align: center; } #mobile_menu { display: none; } @media only screen and (max-width: 800px) { html { background-image: none; } body { font-size: 90%; box-shadow: none; } } @media only screen and (max-width: 767px) { #nav_menu { display: none; } #mobile_menu { display: block; } header h2 { font-size: 200%; } section { width: 90%; float: none; padding-left: 5%; padding-bottom: .5em; } aside { width: 90%; float: none; padding: 0 5% 1em 5%; } #nav_list ul { width: 50%; padding-left: 25%; text-align: center; } #nav_list ul li a { padding-left: 0; } } @media only screen and (max-width: 479px) { header h2 { font-size: 180%; } header h3 { font-size: 115%; } section h1 { font-size: 130%; } section h1:first-letter { font-size: 180%; } }
example 2/styles/normalize.css
/*! normalize.css v2.1.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Set default font family to sans-serif. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { /*background: #fff; */ color: #000; /* 2 */ font-family: sans-serif; /* 3 */ -ms-text-size-adjust: 100%; /* 4 */ -webkit-text-size-adjust: 100%; /* 4 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; }
example 2/styles/slicknav.css
/* Mobile Menu Core Style */ .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_no-text { margin: 0 } .slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em } .slicknav_nav { clear: both } .slicknav_nav ul, .slicknav_nav li { display: block } .slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { display: block; cursor: pointer; } .slicknav_nav a { display: block } .slicknav_nav .slicknav_item a { display: inline } .slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; } .slicknav_menu:after { clear: both } /* IE6/7 support */ .slicknav_menu { *zoom: 1 } /* User Default Style Change the following styles to modify the appearance of the menu. */ .slicknav_menu { font-size: 16px; } /* Button */ .slicknav_btn { margin: 5px 5px 6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #222222; } /* Button Text */ .slicknav_menu .slicknav_menutxt { color: #FFF; font-weight: bold; text-shadow: 0 1px 3px #000; } /* Button Lines */ .slicknav_menu .slicknav_icon-bar { background-color: #f5f5f5; } .slicknav_menu { background: #4c4c4c; padding: 5px; } .slicknav_nav { color: #fff; margin: 0; padding: 0; font-size: 0.875em; } .slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; } .slicknav_nav ul { padding: 0; margin: 0 0 0 20px; } .slicknav_nav .slicknav_item { padding: 5px 10px; margin: 2px 5px; } .slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #fff; } .slicknav_nav .slicknav_item a { padding: 0; margin: 0; } .slicknav_nav .slicknav_item:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #fff; } .slicknav_nav a:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav .slicknav_txtnode { margin-left: 15px; }