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"> <div class="image"> <a href="http://www.afaweb.org/exhibitions/out-of-the-box/"> <img src="http://i.imgur.com/rCckuwO.jpg"/></a> <div class="text-box-1"> <center> <div id="head">Out of the Box:The Rise of Sneaker Culture</div> <div id="subhead">Featuring rare and iconic sneakers that tell the story of the athletic shoe as it evolved into a staple of casual style and an object of high design. </center></div></div> <div class="image"> <a href="http://www.afaweb.org/exhibitions/matisse-drawings/"> <img src="http://i.imgur.com/bxssoSv.jpg" arc=""/></a> <div class="text-box-2"> <center> <div id="head">Matisse Drawings</div> <div id="subhead">A unique exploration of Matisse’s drawings by one of America’s greatest abstract artists. A selection of Ellsworth Kelly’s botanical lithographs is shown in an adjacent gallery.</center></div></div> <div class="image"> <a href="http://www.afaweb.org/exhibitions/when-modern-was-contemporary/"> <img src="http://i.imgur.com/smpvkgh.jpg"/></a> <div class="text-box-3"> <center> <div id="head">When Modern Was Contemporary:</div> <div id="sub-head">Selections from the Roy R. Neuberger Collection<br> The first traveling exhibition in more than forty years of this extraordinary collection of American modern art.</center></div></div> <div class="image"> <a href="http://www.afaweb.org/exhibitions/kay-walkingstick/"> <img src="http://i.imgur.com/meQhocV.jpg"/></a> <div class="text-box-4"> <center> <div id="head">Kay WalkingStick</div> <div id="subhead">An American Artist A survey of the five-decade long career of one of today’s most accomplished Native American artists and a leading practitioner of contemporary landscape <painting class=""></painting></center></div> </div></div> <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; } .image { position: relative; width: 972px; } .text-box-1{ position: absolute; top: 480px; left: 130; margin-top:: 150xpx; background-color: #d3d3d3; opacity: 0.9; filter: alpha(opacity=60); width: 600px; padding-right: 5%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } #head { font-size: 20px; font-weight: bolder; } #sub-head { font-size: 15px; font-weight: lighter; } .text-box-2{ position: absolute; top: 460px; left: 130; margin-top:: 150xpx; background-color: #08132c; opacity: 0.9; filter: alpha(opacity=60); width: 600px; padding-right: 5%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: white; } .text-box-3{ position: absolute; top: 460px; left: 130; margin-top:: 150xpx; background-color: #604815; opacity: 0.9; filter: alpha(opacity=60); width: 600px; padding-right: 5%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: white; } .text-box-4{ position: absolute; top: 460px; left: 130; margin-top: 150xpx; background-color: #342408; opacity: 0.9; filter: alpha(opacity=60); width: 600px; padding-right: 5%; padding-left: 5%; padding-top: 2%; padding-bottom: 2%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: white; } .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: true, autoStart: true, pause: 4000 }); });