Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"> </script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" /> <title>AFA</title> </head> <body> <div class="page-container"> <div class="top-header"> <a id="logo" href="www.afaweb.org"><img src="http://i.imgur.com/yacfiQS.jpg" height="50px"></a> <div class="top-header-right"> <ul> <li class="search"><a href="#">SEARCH</a></li> <li class="contact us"><a href="#">CONTACT US</a></li> <li class="mailing list"><a href="#">MAILING LIST</a></li> <li class="press"><a href="#">PRESS</a></li> </ul> </div> </div> <div class="navigation"> <ul class="sf-menu"> <li><a href="#">About</a> <ul> <li><a href="#">Overview</a></li> <li><a href="#">History</a></li> <li><a href="#">Staff List</a></li> <li><a href="#">Board of of Trustees</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Museum Patners</a></li> </ul></li> <li><a href="#">Exhibitions</a> <ul> <li><a href="#">On Tour</a></li> <li><a href="#">Upcoming</a></li> <li><a href="#">Past Highlishts</a></li> </ul></li> <li><a href="#">Events</a> <ul> <li><a href="#">Upcoming</a></li> <li><a href="#">Past Highlight</a></li> </ul></li> <li><a href="#">Publications</a></li> <li><a href="#">Membership</a> <ul> <li><a href="#">Individual</a></li> <li><a href="#">Museum</a></li> </ul></li> <li><a href="#">ART</a></li> <li><a href="#">Donate</a></li> </ul> </div> <div class="mid-container-1"> <headline><h1>Out of the Box: The Rise of Sneaker Culture</h1> </headline> <ul class="bxslider"> <li><img src="http://i.imgur.com/A5EC3Lv.jpg"/> <div class="caption">Thomas Dutton and Thorowgood <br> Running Shoe, 1860–65 <br> Northampton Museums and Art Gallery<br>Photo: Greg Washington</div></li> <li><img src="http://i.imgur.com/bgOz7do.jpg" /> <div class="caption">Converse Rubber Shoe Company <br>All Star/Non Skid, 1917<br>Converse Archives </div></li> <li><img src="http://i.imgur.com/7b1qrsd.jpg" /> <div class="caption">Dominion Rubber Company <br>Fleet Foot, ca. 1925 <br>Collection of the Bata Shoe Museum<br>Photo: Hal Roth</div></li> <li><img src="http://i.imgur.com/8NUXC7L.jpg" /> <div class="caption">Nike<br>Waffle Trainer, 1974<br>Northampton Museums and Art Gallery<br>Photo: Ron Wood </div></li> <li><img src="http://i.imgur.com/yHBXrKI.jpg" /> <div class="caption">adidas<br>Stan Smith, ca. 1980s<br>adidas AG<br>Photo: adidas AG studio waldeck</div></li> </ul></div> <div class="mid-contianer-2"> <div class="column-1"> <p> Sneakers have long been loved as a staple of casual fashion, transcending gender, age, and socioeconomic categories to become the footwear of choice for millions across the globe. Out of the Box: The Rise of Sneaker Culture tells the sneaker’s complex and fascinating story through approximately 150 pairs drawn from the collections of the Bata Shoe Museum; the Northampton Museums and Art Gallery; the archives of Adidas, Converse, Nike, and PUMA; and private collectors such as Dee Wells of Obsessive Sneaker Disorder and legendary hip-hop group Run-D.M.C. </p> <p> Organized into five sections, Out of the Box includes iconic sneakers ranging from an 1860 spiked running shoe, the replica track shoes worn by Olympian Jesse Owens in 1936, the Air Jordan </p> </div> <div class="column-2"> <p> series, and the original Air Force 1 and early Adidas Superstars, to contemporary examples designed by such prominent figures as Damien Hirst, Christian Louboutin, Kanye West, and Nike sneaker design legend Tinker Hatfield. </p> <p> From its historical origins in the recreational pastimes of the elite and the increasing importance of physical fitness to its role today at the vanguard of athletic performance and urban style, the sneaker has been a pivotal component of dress for more than 150 years. Out of the Box examines how the sneaker’s ever-evolving cultural significance offers insights into the world in which we live, work, and play. </p> </div> <img src="http://i.imgur.com/rdELSwP.jpg" height="20px" /> <div class="mid-contianer-3"> <headline><h2>VENUES</h2> </headline> <ul class="bxslider"> <li><a href="https://www.brooklynmuseum.org/"><img src="http://i.imgur.com/Hvb3SUL.jpg" /></a></li> <li><a href="http://www.toledomuseum.org/"><img src="http://i.imgur.com/u4gpwIC.jpg"/></a></li> <li><a href="http://www.high.org/"><img src="http://i.imgur.com/mfeg0Md.jpg" /></a></li> </ul> </div> <headline><h2>PUBLICATION</h2></headline> <a href="http://www.amfedarts.org/publications/out-of-the-box-2/"><img src="http://i.imgur.com/OG6xpwk.jpg" /></a> <div class="footer"> <a href="" class="footer-text">Back to Top</a> <footer> <ul> <h1>About Us</h1> <li>AFA</li> <li>History</li> <li>Join us</li> <li>Press</li> </ul> <ul> <h1>Find Us</h1> <li>FACEBOOK</li> <li>TWITTER</li> <li>INSTAGRAM</li> <li>GOOGLE +</li> </ul> <ul> <h1>Contact Us</h1> <li>212.988.7700</li> <li>1.800.232.0270</li> <li>info@amfedarts.org</li> <li> </li> </ul> <ul> <h1>Legal</h1> <li>Terms of Service</li> <li>Private Policy</li> </ul> <footer-bottom>2016 All rights reserved.</footer-bottom> </footer> </div> </div> </body> </html>
.page-container { width: 972px ; margin: 0 auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .top-header { width: 100%; background-color: black; } .top-header-right { width: 400px; float: right; color: white; font-size: 14px; } .top-header-right ul { list-style-type: none; padding: 0; padding-left: 10px; overflow: hidden; } .top-header-right li{ float:left; } .top-header-right a{ display: block; text-align: left; color: white; text-decoration: none; padding-top: 4px; padding-right: 25px; } .navigation { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 980px; } .mid-container-1{ width: 972px; margin-top: 50px; } headline { margin-bottom:0; padding-bottom: 0; text-align: center; } .caption { padding: 4; text-align: left; padding-left: 36%; font-size: 19px; line-height: 1.3em; } .mid-container-2{ border-style: dashed; margin: 0; padding: 0; font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; } .column-1 { font-family: TimesNewRoman; font-size: 20px; padding-left: 90px; float: left; width: 350px; height: 500px; padding-bottom: 0; } .column-2 { font-family: TimesNewRoman; font-size: 20px; float: left; padding-left: 100px; width: 350px; height: 500px; padding-bottom: 0; } .mid-container-3 { width: 972px; margin-top: 60px; } .footer { margin-top: 0; background: #151515; padding-top:20; font-size: 0.95em; font-weight: lighter; text-transform: uppercase; text-align: center; display: block; clear: both; } .footer-text { display: block; padding-top: 5px; padding-bottom: 20px; color: white; text-decoration: none; } footer { background-color: #2a2a2a; color: white; text-align: center; padding-left: 4% ; padding-bottom: 20px; display: talbe; } footer h1 { font-size: 18px; padding-top: 20%; padding-bottom: 20px; display: table-cell; } footer ul { width: 24%; display: table-cell; box-sizing: border-box; list-style-type: none; text-align: left; padding-bottom: 30px; } footer li{ margin: 8px 0; } footer-bottom { margin-bottom: 10%; font-size: 0.8em; font-weight: lighter; } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .sf-menu > li { float: left; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 100%; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 0; } .sf-menu ul { box-shadow: 2px 2px 6px rgba(0,0,0,.2); min-width: 12em; /* allow long menu items to determine submenu width */ width: 12em; /* no auto sub width for IE7, see white-space comment below */ } .sf-menu a { border-left: 1px solid #9c9c9c; border-top: 1px solid #3a3a3a;; /* fallback colour must use full shorthand */ border-top: 1px solid #3a3a3a; padding-top: .5em; padding-bottom: 1em; padding-left: 2.4em; padding-right: 2.4em; text-decoration: none; zoom: 1; /* IE7 */ } .sf-menu a { color: white; } .sf-menu li { background: #3a3a3a; white-space: nowrap; /* no need for Supersubs plugin */ *white-space: normal; /* ...unless you support IE7 (let it wrap) */ -webkit-transition: background .2s; transition: background .2s; } .sf-menu ul li { background: #7c7c7c; } .sf-menu ul ul li { background: #AABDE6; } .sf-menu li:hover, .sf-menu li.sfHover { background: #595959; /* only transition out, not in */ -webkit-transition: none; transition: none; } /*** arrows (for all except IE7) **/ .sf-arrows .sf-with-ul { padding-right: 2.5em; *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ } /* styling for both css and generated arrows */ .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; /* order of following 3 rules important for fallbacks to work */ border: 5px solid transparent; border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ border-top-color: rgba(255,255,255,.5); } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: white; /* IE8 fallback colour */ } /* styling for right-facing arrows */ .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ border-left-color: rgba(255,255,255,.5); } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: white; }
/** * hoverIntent is similar to jQuery's built-in "hover" method except that * instead of firing the handlerIn function immediately, hoverIntent checks * to see if the user's mouse has slowed down (beneath the sensitivity * threshold) before firing the event. The handlerOut function is only * called after a matching handlerIn. * * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+ * http://cherne.net/brian/resources/jquery.hoverIntent.html * * You may use hoverIntent under the terms of the MIT license. Basically that * means you are free to use hoverIntent as long as this header is left intact. * Copyright 2007, 2013 Brian Cherne * * // basic usage ... just like .hover() * .hoverIntent( handlerIn, handlerOut ) * .hoverIntent( handlerInOut ) * * // basic usage ... with event delegation! * .hoverIntent( handlerIn, handlerOut, selector ) * .hoverIntent( handlerInOut, selector ) * * // using a basic configuration object * .hoverIntent( config ) * * @param handlerIn function OR configuration object * @param handlerOut function OR selector for delegation OR undefined * @param selector selector OR undefined * @author Brian Cherne <brian(at)cherne(dot)net> **/ (function($) { $.fn.hoverIntent = function(handlerIn,handlerOut,selector) { // default configuration values var cfg = { interval: 100, sensitivity: 7, timeout: 0 }; if ( typeof handlerIn === "object" ) { cfg = $.extend(cfg, handlerIn ); } else if ($.isFunction(handlerOut)) { cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } ); } else { cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } ); } // instantiate variables // cX, cY = current X and Y position of mouse, updated by mousemove event // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval var cX, cY, pX, pY; // A private function for getting mouse position var track = function(ev) { cX = ev.pageX; cY = ev.pageY; }; // A private function for comparing current and previous mouse position var compare = function(ev,ob) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); // compare mouse positions to see if they've crossed the threshold if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { $(ob).off("mousemove.hoverIntent",track); // set hoverIntent state to true (so mouseOut can be called) ob.hoverIntent_s = 1; return cfg.over.apply(ob,[ev]); } else { // set previous coordinates for next time pX = cX; pY = cY; // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); } }; // A private function for delaying the mouseOut function var delay = function(ev,ob) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); ob.hoverIntent_s = 0; return cfg.out.apply(ob,[ev]); }; // A private function for handling mouse 'hovering' var handleHover = function(e) { // copy objects to be passed into t (required for event object to be passed in IE) var ev = jQuery.extend({},e); var ob = this; // cancel hoverIntent timer if it exists if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } // if e.type == "mouseenter" if (e.type == "mouseenter") { // set "previous" X and Y position based on initial entry point pX = ev.pageX; pY = ev.pageY; // update "current" X and Y position based on mousemove $(ob).on("mousemove.hoverIntent",track); // start polling interval (self-calling timeout) to compare mouse coordinates over time if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} // else e.type == "mouseleave" } else { // unbind expensive mousemove event $(ob).off("mousemove.hoverIntent",track); // if hoverIntent state is true, then call the mouseOut function after the specified delay if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} } }; // listen for mouseenter and mouseleave return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector); }; })(jQuery); /* * jQuery Superfish Menu Plugin * Copyright (c) 2013 Joel Birch * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ (function ($, w) { "use strict"; var methods = (function () { // private properties and methods go here var c = { bcClass: 'sf-breadcrumb', menuClass: 'sf-js-enabled', anchorClass: 'sf-with-ul', menuArrowClass: 'sf-arrows' }, ios = (function () { var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent); if (ios) { // tap anywhere on iOS to unfocus a submenu $('html').css('cursor', 'pointer').on('click', $.noop); } return ios; })(), wp7 = (function () { var style = document.documentElement.style; return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent)); })(), unprefixedPointerEvents = (function () { return (!!w.PointerEvent); })(), toggleMenuClasses = function ($menu, o, add) { var classes = c.menuClass, method; if (o.cssArrows) { classes += ' ' + c.menuArrowClass; } method = (add) ? 'addClass' : 'removeClass'; $menu[method](classes); }, setPathToCurrent = function ($menu, o) { return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels) .addClass(o.hoverClass + ' ' + c.bcClass) .filter(function () { return ($(this).children(o.popUpSelector).hide().show().length); }).removeClass(o.pathClass); }, toggleAnchorClass = function ($li, add) { var method = (add) ? 'addClass' : 'removeClass'; $li.children('a')[method](c.anchorClass); }, toggleTouchAction = function ($menu) { var msTouchAction = $menu.css('ms-touch-action'); var touchAction = $menu.css('touch-action'); touchAction = touchAction || msTouchAction; touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y'; $menu.css({ 'ms-touch-action': touchAction, 'touch-action': touchAction }); }, getMenu = function ($el) { return $el.closest('.' + c.menuClass); }, getOptions = function ($el) { return getMenu($el).data('sfOptions'); }, over = function () { var $this = $(this), o = getOptions($this); clearTimeout(o.sfTimer); $this.siblings().superfish('hide').end().superfish('show'); }, close = function (o) { o.retainPath = ($.inArray(this[0], o.$path) > -1); this.superfish('hide'); if (!this.parents('.' + o.hoverClass).length) { o.onIdle.call(getMenu(this)); if (o.$path.length) { $.proxy(over, o.$path)(); } } }, out = function () { var $this = $(this), o = getOptions($this); if (ios) { $.proxy(close, $this, o)(); } else { clearTimeout(o.sfTimer); o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay); } }, touchHandler = function (e) { var $this = $(this), o = getOptions($this), $ul = $this.siblings(e.data.popUpSelector); if (o.onHandleTouch.call($ul) === false) { return this; } if ($ul.length > 0 && $ul.is(':hidden')) { $this.one('click.superfish', false); if (e.type === 'MSPointerDown' || e.type === 'pointerdown') { $this.trigger('focus'); } else { $.proxy(over, $this.parent('li'))(); } } }, applyHandlers = function ($menu, o) { var targets = 'li:has(' + o.popUpSelector + ')'; if ($.fn.hoverIntent && !o.disableHI) { $menu.hoverIntent(over, out, targets); } else { $menu .on('mouseenter.superfish', targets, over) .on('mouseleave.superfish', targets, out); } var touchevent = 'MSPointerDown.superfish'; if (unprefixedPointerEvents) { touchevent = 'pointerdown.superfish'; } if (!ios) { touchevent += ' touchend.superfish'; } if (wp7) { touchevent += ' mousedown.superfish'; } $menu .on('focusin.superfish', 'li', over) .on('focusout.superfish', 'li', out) .on(touchevent, 'a', o, touchHandler); }; return { // public methods hide: function (instant) { if (this.length) { var $this = this, o = getOptions($this); if (!o) { return this; } var not = (o.retainPath === true) ? o.$path : '', $ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector), speed = o.speedOut; if (instant) { $ul.show(); speed = 0; } o.retainPath = false; if (o.onBeforeHide.call($ul) === false) { return this; } $ul.stop(true, true).animate(o.animationOut, speed, function () { var $this = $(this); o.onHide.call($this); }); } return this; }, show: function () { var o = getOptions(this); if (!o) { return this; } var $this = this.addClass(o.hoverClass), $ul = $this.children(o.popUpSelector); if (o.onBeforeShow.call($ul) === false) { return this; } $ul.stop(true, true).animate(o.animation, o.speed, function () { o.onShow.call($ul); }); return this; }, destroy: function () { return this.each(function () { var $this = $(this), o = $this.data('sfOptions'), $hasPopUp; if (!o) { return false; } $hasPopUp = $this.find(o.popUpSelector).parent('li'); clearTimeout(o.sfTimer); toggleMenuClasses($this, o); toggleAnchorClass($hasPopUp); toggleTouchAction($this); // remove event handlers $this.off('.superfish').off('.hoverIntent'); // clear animation's inline display style $hasPopUp.children(o.popUpSelector).attr('style', function (i, style) { return style.replace(/display[^;]+;?/g, ''); }); // reset 'current' path classes o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass); $this.find('.' + o.hoverClass).removeClass(o.hoverClass); o.onDestroy.call($this); $this.removeData('sfOptions'); }); }, init: function (op) { return this.each(function () { var $this = $(this); if ($this.data('sfOptions')) { return false; } var o = $.extend({}, $.fn.superfish.defaults, op), $hasPopUp = $this.find(o.popUpSelector).parent('li'); o.$path = setPathToCurrent($this, o); $this.data('sfOptions', o); toggleMenuClasses($this, o, true); toggleAnchorClass($hasPopUp, true); toggleTouchAction($this); applyHandlers($this, o); $hasPopUp.not('.' + c.bcClass).superfish('hide', true); o.onInit.call(this); }); } }; })(); $.fn.superfish = function (method, args) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || ! method) { return methods.init.apply(this, arguments); } else { return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish'); } }; $.fn.superfish.defaults = { popUpSelector: 'ul,.sf-mega', // within menu context hoverClass: 'sfHover', pathClass: 'overrideThisToUse', pathLevels: 1, delay: 800, animation: {opacity: 'show'}, animationOut: {opacity: 'hide'}, speed: 'normal', speedOut: 'fast', cssArrows: true, disableHI: false, onInit: $.noop, onBeforeShow: $.noop, onShow: $.noop, onBeforeHide: $.noop, onHide: $.noop, onIdle: $.noop, onDestroy: $.noop, onHandleTouch: $.noop }; })(jQuery, window); $(document).ready(function(){ $('.bxslider').bxSlider({ auto: false, autoStart: true, pause: 4000 }); });