1<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com --><!-- Last Published: Tue Apr 09 2019 20:11:11 GMT+0000 (UTC) --><html data-wf-domain="webflow-responsive-showcase.webflow.io" data-wf-page="5acc211b8bad99d304c68b84" data-wf-site="5acc211a8bad997ad9c68b7e"><head><meta charset="utf-8"/><title>Website Showcase - Blank</title><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/css/webflow-responsive-showcase.webflow.339c5a81a.css" rel="stylesheet" type="text/css"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({ google: { families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Shadows Into Light:regular"] }});</script>
1<!--[if lt IE 9]>
1<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
1<![endif]-->
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad99b166c68b97_favicon-Webflow-project.png" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad994d49c68b98_webclip-Webflow-project.png" rel="apple-touch-icon"/><style> 2 3/* textured text using clip */ 4.clipped { 5 /* -webkit-background-clip clips the background of the element to the text */ 6 -webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */ 7 -webkit-background-clip: text; 8 } 9.stroked { 10 -webkit-text-stroke-width: 1px; 11 -webkit-text-stroke-color: #2d7d4e; 12 } 13 14/* textured text */ 15.textured1 { -webkit-mask-image: url(http://vincent.polenordstudio.fr/snap/stripe-total-mask.png); 16 -moz-mask-image: url(http://vincent.polenordstudio.fr/snap/stripe-total-mask.png); 17 -o-mask-image: url(http://vincent.polenordstudio.fr/snap/stripe-total-mask.png); 18 mask-image: url(http://vincent.polenordstudio.fr/snap/stripe-total-mask.png); 19 } 20.textured1:before, .textured1:after { content: "Ã"; margin: 0 .125em; } 21 22/* CSS Vertical Parallax exp3 */ 23 24.parallax-e3 {-webkit-perspective: 100px; perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; left: 50%; right: 0; bottom: 0; margin-left: -50%; } 25.parallax-layer-e3 { } 26.parallax-layer-e3 svg { } 27.layer-p1-e3 { -webkit-transform: translateY(-1000px) translateZ(-600px) scale(7); transform: translateY(-1000px) translateZ(-600px) scale(7); } 28.layer-p2-e3 { -webkit-transform: translateY(-1200px) translateZ(-500px) scale(6); transform: translateY(-1200px) translateZ(-500px) scale(6); } 29.layer-p3-e3 { -webkit-transform: translateY(-50px) translateZ(-200px) scale(3); transform: translateY(-50px) translateZ(-200px) scale(3); } 30.layer-p4-e3 { -webkit-transform: translateY(210px) translateZ(-150px) scale(2.5); transform: translateY(210px) translateZ(-150px) scale(2.5); } 31.layer-p5-e3 { -webkit-transform: translateY(240px) translateZ(-100px) scale(2); transform: translateY(240px) translateZ(-100px) scale(2); } 32.layer-p6-e3 { -webkit-transform: translateY(54px) translateZ(-50px) scale(1.5); transform: translateY(54px) translateZ(-50px) scale(1.5); } 33.layer-p7-e3 { -webkit-transform: translateY(38px) translateZ(-25px) scale(1.25); transform: translateY(38px) translateZ(-25px) scale(1.25); } 34.parallax-front-e3 { } 35 36/* CSS Vertical Parallax exp2 */ 37.css-parallax { perspective: 1px; overflow-x: hidden; overflow-y: auto; perspective-origin-x: 100%; -webkit-perspective-origin-x: 100%; } 38.css-parallax-group { transform-style: preserve-3d; } 39.css-parallax-layer { background-position: top center; background-repeat: no-repeat; background-size: 100%; transform-origin-x: 100%; -webkit-transform-origin-x: 100%; } 40.css-parallax-layer-back { transform: translateZ(-5px) scale(6); } 41.css-parallax-layer-layer5 { transform: translateZ(-4px) scale(5); } 42.css-parallax-layer-layer4 { transform: translateZ(-3px) scale(4); } 43.css-parallax-layer-layer3 { transform: translateZ(-2px) scale(3); } 44.css-parallax-layer-layer2 { transform: translateZ(-1px) scale(2); } 45.css-parallax-layer-layer1 { transform: translateZ(0); } 46.css-parallax-layer-base { transform: translateZ(0); } 47 48/* frosted glass with CSS Filters */ 49.frosted { background: inherit; } 50.frosted:before { content: ''; position: absolute; top: 0; left:0; right:0; bottom:0; background: inherit; filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); } 51 52/* Metaballs with CSS Filters */ 53.grandparent {-webkit-filter: brightness(1.2) contrast(20);} 54.fatherdiv {-webkit-filter: blur(20px)} 55 56/* columns */ 57.columns3 { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } 58 59/* vertical center */ 60.centerme { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 61 62.int-blur5 { -webkit-filter: blur(5px); -moz-filter: blur(5px);-ms-filter: blur(5px); filter: blur(5px); } 63.int-blur5:hover { -webkit-filter: blur(50px); -moz-filter: blur(50px);-ms-filter: blur(50px); filter: blur(50px); } 64.int-blur3 { -webkit-filter: blur(3px); -moz-filter: blur(3px);-ms-filter: blur(3px); filter: blur(3px); } 65.int-blur3:hover { -webkit-filter: blur(15px); -moz-filter: blur(15px);-ms-filter: blur(15px); filter: blur(15px); } 66.int-blur8 { -webkit-filter: blur(8px); -moz-filter: blur(8px);-ms-filter: blur(8px); filter: blur8px); } 67.int-blur8:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px);-ms-filter: blur(0px); filter: blur0px); } 68 69 70/* CSS Filters modes */ 71.blur15 { -webkit-filter: blur(15px); -moz-filter: blur(15px);-ms-filter: blur(15px); filter: blur(15px); } 72.blur10 { -webkit-filter: blur(10px); -moz-filter: blur(10px);-ms-filter: blur(10px); filter: blur(10px); } 73.blur5 { -webkit-filter: blur(5px); -moz-filter: blur(5px);-ms-filter: blur(5px); filter: blur(5px); } 74.blur1 { -webkit-filter: blur(1px); -moz-filter: blur(1px);-ms-filter: blur(1px); filter: blur(1px); } 75.blur3 { -webkit-filter: blur(3px); -moz-filter: blur(3px);-ms-filter: blur(3px); filter: blur(3px); } 76.blur7 { -webkit-filter: blur(7px); -moz-filter: blur(7px);-ms-filter: blur(7px); filter: blur7px); } 77.blur8 { -webkit-filter: blur(8px); -moz-filter: blur(8px);-ms-filter: blur(8px); filter: blur8px); } 78 79.grayscale {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1);-ms-filter: grayscale(1);} 80 81.saturate500 {filter: saturate(500%);-webkit-filter: saturate(500%);-moz-filter: saturate(500%);-o-filter: saturate(500%);-ms-filter: saturate(500%);} 82.saturate100 {filter: saturate(100%);-webkit-filter: saturate(100%);-moz-filter: saturate(100%);-o-filter: saturate(100%);-ms-filter: saturate(100%);} 83.saturate50 {filter: saturate(50%);-webkit-filter: saturate(50%);-moz-filter: saturate(50%);-o-filter: saturate(50%);-ms-filter: saturate(50%);} 84 85.sepia {filter: sepia(1);-webkit-filter: sepia(1);-moz-filter: sepia(1);-o-filter: sepia(1);-ms-filter: sepia(1);} 86 87.invert {filter: invert(1);-webkit-filter: invert(1);-moz-filter: invert(1);-o-filter: invert(1);-ms-filter: invert(1);} 88 89.brightness10 {filter: brightness(10%);-webkit-filter: brightness(10%);-moz-filter: brightness(10%);-o-filter: brightness(10%);-ms-filter: brightness(10%);} 90.brightness20 {filter: brightness(20%);-webkit-filter: brightness(20%);-moz-filter: brightness(20%);-o-filter: brightness(20%);-ms-filter: brightness(20%);} 91.brightness50 {filter: brightness(50%);-webkit-filter: brightness(50%);-moz-filter: brightness(50%);-o-filter: brightness(50%);-ms-filter: brightness(50%);} 92 93.contrast10 {filter: contrast(10%);-webkit-filter: contrast(10%);-moz-filter: contrast(10%);-o-filter: contrast(10%);-ms-filter: contrast(10%);} 94.contrast50 {filter: contrast(50%);-webkit-filter: contrast(50%);-moz-filter: contrast(50%);-o-filter: contrast(50%);-ms-filter: contrast(50%);} 95 96.drop-shadow {filter: drop-shadow(50%);-webkit-filter: drop-shadow(50%);-moz-filter: drop-shadow(50%);-o-filter: drop-shadow(50%);-ms-filter: drop-shadow(50%);} 97 98.hue-rotate50 {filter: hue-rotate(50%);-webkit-filter: hue-rotate(50%);-moz-filter: hue-rotate(50%);-o-filter: hue-rotate(50%);-ms-filter: hue-rotate(50%);} 99 100 101/* PERPECTIVE EXPERIMENT BEGIN */ 102
103/* entire container, keeps perspective */ 104.flip-container { 105 perspective: 1000; 106} 107 /* flip the pane when hovered */ 108 .flip-container:hover .flipper, .flip-container.hover .flipper { 109 transform: rotateY(180deg); 110 } 111 112.flip-container, .recto, .verso { 113 width: 350px; 114 height: 350px; 115} 116 117 118/* flip speed goes here */ 119.flipper { 120 transition: 0.6s; 121 transform-style: preserve-3d; 122 123 position: relative; 124} 125 126/* hide back of pane during swap */ 127.recto, .verso { 128 backface-visibility: hidden; 129 130 position: absolute; 131 top: 0; 132 left: 0; 133} 134 135/* front pane, placed above back */ 136.recto { 137 z-index: 2; 138 /* for firefox 31 */ 139 transform: rotateY(0deg); 140} 141 142/* back, initially hidden pane */ 143.verso { 144 transform: rotateY(180deg); 145} 146 147/* PERSPECTIVE EXPERIMENT END */ 148 149/* Blend modes */ 150 151.mbm-normal{mix-blend-mode: normal;} 152.mbm-multiply{mix-blend-mode: multiply;} 153.mbm-screen{mix-blend-mode: screen;} 154.mbm-overlay{mix-blend-mode: overlay;} 155.mbm-darken{mix-blend-mode: darken;} 156.mbm-lighten{mix-blend-mode: lighten;} 157.mbm-color-dodge{mix-blend-mode: color-dodge} 158.mbm-color-burn{mix-blend-mode: color-burn;} 159.mbm-hard-light{mix-blend-mode: hard-light;} 160.mbm-soft-light{mix-blend-mode: soft-light;} 161.mbm-difference{mix-blend-mode: difference;} 162.mbm-exclusion{mix-blend-mode: exclusion;} 163.mbm-hue{mix-blend-mode: hue;} 164.mbm-saturation{mix-blend-mode: saturation;} 165.mbm-color{mix-blend-mode: color;} 166.mbm-luminosity{mix-blend-mode: luminosity;} 167 168/* Blinking fix */ 169 body { 170 171 -webkit-backface-visibility: hidden; 172 -webkit-font-smoothing: antialiased !important; 173 font-smoothing: antialiased !important; 174 } 175 176</style> 177 178 179 180 <meta charset="utf-8"> 181 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 182
182<script src="//code.jquery.com/jquery-1.10.2.js"></script>
182 183
183<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
183 184 <link rel="stylesheet" href="/resources/demos/style.css"> 185</head><body class="wrps-body"><div data-collapse="none" data-animation="default" data-duration="400" class="wrps-navbar w-nav"><div class="menu-container w-container"><a href="#" class="brand w-nav-brand"><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad99fd43c68b8f_avatar.svg" alt="" class="brand-image"/><div class="brand-name">Josh Head</div></a><nav role="navigation" class="nav-menu w-nav-menu"><a href="#" class="menu-gen-item follow-on-webflow w-nav-link">Josh's Designer page</a><a href="#" class="menu-gen-item twitter w-nav-link">FOLLOW @josh</a></nav><div class="w-nav-button"><div class="w-icon-nav-menu"></div></div></div></div><div class="wrps-title"><div class="w-container"><div class="showcase-projet-references">[project name] made with webflow</div><h1>HTML5 Responsive Website Showcase</h1><p class="showcase-chapo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam.</p></div></div><div class="devices-showcase-section"><div class="devices-showcase-relative-container w-container"><div class="device-desktop w-hidden-small w-hidden-tiny"><div class="device-screen-placeholder screen-desktop"></div><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad990167c68ba6_desktop.png" alt=""/></div><div class="device-tablet"><div class="device-screen-placeholder screen-tablet"></div><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad996362c68bab_tablet.png" alt=""/></div><div class="device-laptop"><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad99c5f1c68ba7_laptop.png" alt=""/><div class="device-screen-placeholder screen-laptop"></div></div><div class="device-smartwatch"><div class="device-screen-placeholder watch"></div><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad99afc6c68ba8_smatwatch.png" alt=""/></div><div class="device-smartphone"><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad99187cc68ba9_phone.png" alt=""/><div class="device-screen-placeholder screen-phone"></div></div></div></div><div class="wrps-title"><div class="actions-container w-container"><div class="showcase-projet-references">Desktop and smartphone full preview</div><p class="showcase-chapo">Preview a complete, but static screenshot below, in both desktop and smartphone version.</p><a href="#" class="action-button visit-site w-nav-link">VISIT THE LIVE SITE</a><a href="#" class="action-button duplicate w-nav-link">VIEW A DUPLICATE</a></div></div><div class="showcase"><div class="container-browsers w-container"><div class="browser-window-container"><div class="browser-window-outer"><div class="browser-window-header"><div class="bw-url"><div class="url">www.webflow.com/templates/Gallio</div></div><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad9950c6c68b92_refresh.svg" alt="" class="browser-icon refresh w-hidden-small w-hidden-tiny"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad990f67c68b89_arrow%20right.svg" alt="" class="browser-icon forward w-hidden-small w-hidden-tiny"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad991424c68b93_planet.svg" alt="" class="browser-icon browser"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad9950a8c68b91_menu.svg" alt="" class="browser-icon menu"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad991b70c68b90_close.svg" alt="" class="browser-icon close"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad9918f7c68b96_test.svg" alt="" class="browser-icon back w-hidden-small w-hidden-tiny"/></div><div class="browser-window-site-outer-container"><div class="browser-window-site-container"><div class="content"></div></div></div></div></div><div class="browser-window-container"><div class="browser-window-outer mobile"><div class="browser-window-header"><div class="bw-url mobile"><div class="url mobile">.../templates/Gallio</div></div><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5
185acc211b8bad991424c68b93_planet.svg" alt="" class="browser-icon browser mobile"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad9950a8c68b91_menu.svg" alt="" class="browser-icon menu mobile"/><img src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/5acc211b8bad991b70c68b90_close.svg" alt="" class="browser-icon close"/></div><div class="browser-window-site-outer-container"><div class="browser-window-site-container"><div class="content"></div></div></div></div></div></div></div>
185<script src="https://d1tdp7z6w94jbb.cloudfront.net/js/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
185<script src="https://assets.website-files.com/5acc211a8bad997ad9c68b7e/js/webflow.b2da432ed.js" type="text/javascript"></script>
185<!--[if lte IE 9]>
185<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
185<![endif]--></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.