Skip to content

Instantly share code, notes, and snippets.

@mjau-mjau

mjau-mjau/index.html

Created September 20, 2018 05:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjau-mjau/946e476c3ad2b0449fc2c91eea0402d0 to your computer and use it in GitHub Desktop.
Save mjau-mjau/946e476c3ad2b0449fc2c91eea0402d0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- INTRO -->
<div class="index-intro">
<div class='index-intro-text'>
<h1>The Ultimate Photo Gallery Website</h1>
<h2>X3 is a complete photo gallery website for photographers and artists. Designed to look amazing on all devices, X3 comes loaded with features!</h2>
</div>
<div class="index-intro-image">
<picture>
<source srcset="{{files}}/images/x3-photo-gallery.webp 1x, {{files}}/images/x3-photo-gallery-2x.webp 2x" media="(max-width: 535px)" type="image/webp">
<source srcset="{{files}}/images/x3-photo-gallery-wide.webp 1x, {{files}}/images/x3-photo-gallery-wide-2x.webp 2x" media="(min-width: 536px)" type="image/webp">
<source srcset="{{files}}/images/x3-photo-gallery.png 1x, {{files}}/images/x3-photo-gallery-2x.png 2x" media="(max-width: 535px)">
<source srcset="{{files}}/images/x3-photo-gallery-wide.png 1x, {{files}}/images/x3-photo-gallery-wide-2x.png 2x" media="(min-width: 536px)">
<img src="{{files}}/images/x3-photo-gallery-wide.png" alt="X3 Photo Gallery" />
</picture>
</div>
</div>
<!-- STYLES & LAYOUTS -->
<section class="index-section section-styles">
<div class="arrowr"></div>
<div class="row section-left">
<div class="medium-6 columns">
<h2 style="padding-bottom:.2em; line-height:130%;"><span class="bigger">Beautiful Design</span><br><span class="thinner">Loaded with styles and layouts</span></h2>
<p>The X3 website is highly customizable, with hundreds of style combinations to choose from. Select from a variety of skins, colors, layouts and fonts to create a truly unique website design. X3 also comes loaded with image gallery layouts including slideshow, columns, grids and carousels.</p>
<a class="button button-link" href="https://demo.photo.gallery/" target="_blank">X3 Website Demo<i class="fa fa-arrow-right"></i></a>
<p class="smaller">* Use the <a href="https://demo.photo.gallery/galleries/style/?styler" target="_blank">Styler interface</a> to preview X3 style combinations.</p>
</div>
<div class="medium-6 columns">
<picture>
<source srcset="{{files}}/images/x3-styles.webp 1x, {{files}}/images/x3-styles-2x.webp 2x" type="image/webp">
<source srcset="{{files}}/images/x3-styles.jpg 1x, {{files}}/images/x3-styles-2x.jpg 2x">
<img src="{{files}}/images/x3-styles.jpg" alt="X3 Styles" />
</picture>
</div>
</div>
</section>
<!-- PANEL -->
<section class="index-section section-panel">
<div class="arrowr"></div>
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.006 63.984"><path d="M60.307.003c-.004 0-.007-.003-.01-.003H3.71c-.004 0-.007.003-.01.003C1.654.01 0 1.613 0 3.593v56.682c0 2.048 1.66 3.71 3.71 3.71h56.586c2.05 0 3.71-1.662 3.71-3.71V3.593c0-1.98-1.655-3.584-3.7-3.59z" class="light-grey" ></path><path d="M58.006 11.993h-54v46c0 1.105.896 2 2 2h52c1.104 0 2-.895 2-2v-46h-2z" fill="#FFF"></path><path d="M43.357 44.565l-7.072-7.074 5.97-3.647c.41-.283.898-.61.898-1.176 0-.554-.366-1.008-.867-1.17l-21.065-7.39c-.347-.118-.758-.204-1.044.082-.285.285-.2.697-.082 1.046l7.382 21.09c.16.5.614.868 1.167.868.565 0 .893-.487 1.175-.9l3.645-5.977 7.065 7.082c.782.78 2.05.78 2.83 0 .782-.782.782-2.05 0-2.835z" class="light-green"></path><path d="M46.006 3.993l-.02.002H6.006c-1.104 0-2 .896-2 2s.896 2 2 2h40c1.104 0 2-.896 2-2 0-1.106-.896-2.002-2-2.002zm6 0c-1.104 0-2 .896-2 2.002 0 1.104.896 2 2 2s2-.897 2-2c0-1.106-.896-2.002-2-2.002zm6 0c-1.104 0-2 .896-2 2.002 0 1.104.896 2 2 2s2-.897 2-2c0-1.106-.896-2.002-2-2.002z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"></path></svg>
<div class="row section-left">
<div class="medium-6 medium-push-6 columns">
<h2 style="padding-bottom:.2em; line-height:130%;"><span class="bigger">X3 Control Panel</span><br><span class="thinner">Content Management System</span></h2>
<p>Use the Control Panel to setup and manage your X3 website.</p>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Create pages</li>
<li><i class="fa-li fa fa-check"></i>Upload image galleries</li>
<li><i class="fa-li fa fa-check"></i>Manage settings</li>
</ul>
<a class="button button-link" href="https://demo.photo.gallery/panel/" target="_blank">X3 Panel Demo<i class="fa fa-arrow-right"></i></a>
</div>
<div class="medium-6 medium-pull-6 columns panel-svg-column">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.006 63.984"><path d="M60.307.003c-.004 0-.007-.003-.01-.003H3.71c-.004 0-.007.003-.01.003C1.654.01 0 1.613 0 3.593v56.682c0 2.048 1.66 3.71 3.71 3.71h56.586c2.05 0 3.71-1.662 3.71-3.71V3.593c0-1.98-1.655-3.584-3.7-3.59z" class="light-grey" ></path><path d="M58.006 11.993h-54v46c0 1.105.896 2 2 2h52c1.104 0 2-.895 2-2v-46h-2z" fill="#FFF"></path><path d="M43.357 44.565l-7.072-7.074 5.97-3.647c.41-.283.898-.61.898-1.176 0-.554-.366-1.008-.867-1.17l-21.065-7.39c-.347-.118-.758-.204-1.044.082-.285.285-.2.697-.082 1.046l7.382 21.09c.16.5.614.868 1.167.868.565 0 .893-.487 1.175-.9l3.645-5.977 7.065 7.082c.782.78 2.05.78 2.83 0 .782-.782.782-2.05 0-2.835z" class="light-green"></path><path d="M46.006 3.993l-.02.002H6.006c-1.104 0-2 .896-2 2s.896 2 2 2h40c1.104 0 2-.896 2-2 0-1.106-.896-2.002-2-2.002zm6 0c-1.104 0-2 .896-2 2.002 0 1.104.896 2 2 2s2-.897 2-2c0-1.106-.896-2.002-2-2.002zm6 0c-1.104 0-2 .896-2 2.002 0 1.104.896 2 2 2s2-.897 2-2c0-1.106-.896-2.002-2-2.002z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"></path></svg>
</div>
</div>
</section>
<!-- DEVICES -->
<section class="index-section section-devices">
<div class="arrowr"></div>
<div class="section-centered">
<h2 style="padding-bottom:.2em;"><span class="bigger">Looks Amazing</span><br><span class="thinner">All Screens and Devices</span></h2>
<p>Designed to respond gracefully on all screens, X3 displays in a beautiful interface for all visitors.</p>
<picture>
<source srcset="{{files}}/images/x3-devices-phone.webp 1x, {{files}}/images/x3-devices-phone-2x.webp 2x" type="image/webp">
<source srcset="{{files}}/images/x3-devices-phone.jpg 1x, {{files}}/images/x3-devices-phone-2x.jpg 2x">
<img src="{{files}}/images/x3-devices-phone.jpg" alt="X3 Devices" />
</picture>
</div>
</section>
<!-- PERFORMANCE -->
<section class="index-section section-performance">
<div class="arrowr"></div>
<div class="section-centered">
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M38 36l-6 6 -4 4v6l-6 10 4 2 14-14L38 36zM28 26l-14-2 -14 14 2 4 10-6h6l4-4L28 26z" fill="#CCC"></path><path d="M10 44c-3.9 5.7-10 12.8-10 16 0 2.4 1.6 4 4 4 3.2 0 10-6 16-10L10 44z" fill="#FC6"></path><path d="M16 42c-3.9 5.7-12 12.8-12 16 0 2.1 0.2 2 2 2 3.2 0 10-8 16-12L16 42z" fill="#ED7161"></path><path d="M60 0c-6.3 0.4-17.1 1.1-30 14 -9.5 9.5-17.8 23.2-21.7 32.3l9.4 9.4C26.8 51.9 40.5 43.6 50 34c12.8-12.8 13.5-23.7 14-30C64.2 1.2 62.6-0.1 60 0z" class="dark-green"></path><path d="M60 0c-6.3 0.4-17.1 1.1-30 14 -7.7 7.7-14.7 18.3-19.1 26.9l12.2 12.2C31.7 48.8 42.2 41.8 50 34c12.8-12.8 13.5-23.7 14-30C64.2 1.2 62.6-0.1 60 0z" class="light-green"></path><circle cx="48" cy="16" r="8" fill="#4D4D4D"></circle><circle cx="48" cy="16" r="4" fill="#FFF"></circle></svg>
<h2 class="big">Extreme Performance</h2>
<p>To satisy visitors, we believe it is critical that your website and it's contents display as fast as possible. Navigate our <a href="https://demo.photo.gallery/" target="_blank">X3 Demo</a> to experience how fast X3 performs.</p>
</div>
<div class="row link-styles-no-underline collapse">
<div class="medium-6 columns">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Pages and resized images are cached on server.</li>
<li><i class="fa-li fa fa-check"></i>Fast page navigation with Ajax and HTML5 Pushstate.</li>
<li><i class="fa-li fa fa-check"></i>Gallery images "lazy-loaded" on scroll.</li>
</ul>
</div>
<div class="medium-6 columns">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>All Javascripts, CSS and plugins served from <a href="https://www.jsdelivr.com/" target="_blank" rel="nofollow">JSDelivr</a> CDN.</li>
<li><i class="fa-li fa fa-check"></i>Smart website preload option for instant page navigation.</li>
<li><i class="fa-li fa fa-check"></i><a href="https://moz.com/learn/seo/page-speed" target="_blank" rel="nofollow">Boost your SEO</a> with a fast-loading website.</li>
</ul>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="index-section section-features">
<div class="arrowr"></div>
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="46" viewBox="0 0 64 46"><path d="M53.952 18.6c.007-.203.03-.4.03-.606C53.982 8.056 45.922 0 35.978 0c-7.438 0-13.82 4.51-16.565 10.94-1.352-.593-2.842-.928-4.412-.928-6.07 0-10.99 4.926-10.99 11 0 .388.02.77.06 1.146C1.554 24.686 0 28.168 0 32.013 0 39.738 6.266 46 13.995 46h36.008C57.733 46 64 39.738 64 32.013c0-6.354-4.242-11.71-10.048-13.413z" fill-rule="evenodd" clip-rule="evenodd" class="light-green"></path><path d="M41.393 20.568c-.788-.79-2.065-.79-2.854 0l-8.522 8.52-4.51-4.516c-.806-.81-2.113-.81-2.92 0s-.807 2.117 0 2.926l5.84 5.85c.208.21.45.36.706.462.746.344 1.656.215 2.27-.4l9.99-9.987c.787-.79.787-2.068 0-2.855z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"></path></svg>
<div class="row">
<div class="small-12 columns">
<h2 class="big">Features</h2>
<p class="bigger">A few highlights from X3's extensive list of features.</p>
<ul class='small-block-grid-1 medium-block-grid-2 section-left features-grid'>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#ED7161"></circle><path d="M22 20h-7.3l0.6 8h0l0.6 6h23.3l-0.8 9.5 -6.4 2v-0.1l-8.5-2.2 -0.5-5.2h-7.1l1 9.6v0.4l15.1 4 12.6-4h0.2l0-0.1 0 0v-0.3l1.1-13.7h0l0.6-6H22.6L22 20zM13.9 14.1l0.7 6h33.4l0.6-6H13.9z" fill="#FFF"></path></svg>
<h3>HTML5</h3>
<p>X3 Photo Gallery is built on latest technologies for modern browsers, including HTML5, Javascript and CSS3.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="64" viewBox="0 0 56 64">
<path d="M52 0H4C1.8 0 0 1.8 0 4v56C0 62.2 1.8 64 4 64h34l18-18V4C56 1.8 54.2 0 52 0z" class="light-green"></path>
<path d="M42 46c-2.2 0-4 1.8-4 4v14l18-18H42z" class="dark-green"></path>
<path d="M15 25.9l4.5-4.4c0.8-0.8 0.8-2.1 0-2.9 -0.8-0.8-2.1-0.8-2.9 0l-5.9 5.8c-0.6 0.6-0.8 1.5-0.5 2.2 0.1 0.3 0.2 0.6 0.5 0.8l5.8 5.9c0.8 0.8 2.1 0.8 2.9 0 0.8-0.8 0.8-2.1 0-2.9L15 25.9zM45.8 25.3c-0.1-0.3-0.2-0.6-0.5-0.8l-5.8-5.9c-0.8-0.8-2.1-0.8-2.9 0 -0.8 0.8-0.8 2.1 0 2.9l4.4 4.5 -4.4 4.4c-0.8 0.8-0.8 2.1 0 2.9s2.1 0.8 2.9 0l5.8-5.8C46 27 46.1 26.1 45.8 25.3zM32.7 14.2c-1-0.4-2.2 0.1-2.6 1.1l-8 20c-0.4 1 0.1 2.1 1.1 2.5 1 0.4 2.2-0.1 2.6-1.1l8-20C34.2 15.7 33.7 14.6 32.7 14.2z" fill="#FFF"></path>
</svg>
<h3>Semantical Code</h3>
<p>X3 is made with semantical HTML5 to ensure best integration with modern browsers and optimal SEO.</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<path d="M60.3 0C60.3 0 60.3 0 60.3 0H3.7C3.7 0 3.7 0 3.7 0 1.7 0 0 1.6 0 3.6v6.4 50.3c0 2.1 1.7 3.7 3.7 3.7h56.6c2 0 3.7-1.7 3.7-3.7V10 3.6C64 1.6 62.4 0 60.3 0z" fill="#CCC"></path><path d="M58 12h-52 -2v2V26v32c0 1.1 0.9 2 2 2h52c1.1 0 2-0.9 2-2V26 14v-2H58z" fill="#FFF"></path>
<path d="M26.4 22h-4.9c-2 0-3.6 1.6-3.6 3.6v8.9c0 2 1.6 3.6 3.6 3.6h4.9c2 0 3.6-1.6 3.6-3.6v-8.9C30 23.6 28.4 22 26.4 22z" class="dark-green"></path>
<path d="M42.4 22h-4.9c-2 0-3.6 1.6-3.6 3.6v8.9c0 2 1.6 3.6 3.6 3.6h4.9c2 0 3.6-1.6 3.6-3.6v-8.9C46 23.6 44.4 22 42.4 22z" class="dark-green"></path>
<rect x="14" y="26" width="36" height="24" class="light-green"></rect>
<path d="M46 4c-0.1 0-0.1 0-0.2 0H6c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2 0 0 0 0 0 0s0 0 0 0C48 4.9 47.1 4 46 4zM52 4c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2s2-0.9 2-2C54 4.9 53.1 4 52 4zM58 4c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2s2-0.9 2-2C60 4.9 59.1 4 58 4z" fill="#FFF"></path>
</svg>
<h3>Plugins</h3>
<p>Chat, fotomoto, disqus comments, comparison slider, carousel, video intro, font icons and much more.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0C14.3 0 0 14.3 0 32c0 17.7 14.3 32 32 32S64 49.7 64 32C64 14.3 49.7 0 32 0zM32 60C16.5 60 4 47.5 4 32 4 16.5 16.5 4 32 4S60 16.5 60 32C60 47.5 47.5 60 32 60z" fill="#CCC"></path><path d="M42.2 20.6L27.8 18c-1-0.2-1.8 0.5-1.8 1.5V22v1.2 10.9C25.7 34 25.3 34 25 34c-2.8 0-5 1.8-5 4 0 2.2 2.2 4 5 4 2.6 0 4.7-1.6 4.9-3.5C30 38.3 30 38.2 30 38V25.8l10 1.8v10.5C39.7 38 39.3 38 39 38c-2.8 0-5 1.8-5 4s2.2 4 5 4c2.6 0 4.7-1.6 4.9-3.5C44 42.3 44 42.2 44 42V26.5 26v-3.2C44 21.8 43.2 20.8 42.2 20.6z" class="light-green"></path></svg>
<h3>Audio Player</h3>
<p>X3 features a beautiful audio player plugin, which allows you to compliment your website with music.</p>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M60 0H4C1.8 0 0 1.8 0 4v56c0 2.2 1.8 4 4 4h56c2.2 0 4-1.8 4-4V4C64 1.8 62.2 0 60 0z" fill="#CCC"></path><path d="M58 52H6c-1.1 0-2 0.9-2 2V58c0 1.1 0.9 2 2 2h52c1.1 0 2-0.9 2-2v-4C60 52.9 59.1 52 58 52zM58 4H6C4.9 4 4 4.9 4 6v4c0 1.1 0.9 2 2 2h52c1.1 0 2-0.9 2-2V6C60 4.9 59.1 4 58 4zM58 40H6c-1.1 0-2 0.9-2 2v4c0 1.1 0.9 2 2 2h52c1.1 0 2-0.9 2-2V42C60 40.9 59.1 40 58 40zM58 28H6c-1.1 0-2 0.9-2 2v4c0 1.1 0.9 2 2 2h52c1.1 0 2-0.9 2-2V30C60 28.9 59.1 28 58 28z" fill="#FFF"></path><path d="M58 16H6c-1.1 0-2 0.9-2 2v4C4 23.1 4.9 24 6 24h52c1.1 0 2-0.9 2-2v-4C60 16.9 59.1 16 58 16z" class="light-green"></path></svg>
<h3>Advanced Menu</h3>
<p>X3 comes with several menu layouts, including sidebar, slidemenu and topbar with mega-menu.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="44" viewBox="0 0 64 44"><path d="M60 0H4C1.8 0 0 1.8 0 4v36c0 2.2 1.8 4 4 4h56c2.2 0 4-1.8 4-4V4C64 1.8 62.2 0 60 0z" fill="#CCC"></path><path d="M58 4H6C4.9 4 4 4.9 4 6v32C4 39.1 4.9 40 6 40h52c1.1 0 2-0.9 2-2V6C60 4.9 59.1 4 58 4z" fill="#FFF"></path><path d="M50 8c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2s2-0.9 2-2V10C52 8.9 51.1 8 50 8z" fill="#666"></path><path d="M22.1 13.4C21.7 12.3 20.8 12 20 12s-1.7 0.3-2.1 1.4l-5.8 15.8c-0.4 1.1 0.2 2.3 1.3 2.7 1.1 0.4 2.3-0.2 2.7-1.3L16.3 30h7.4l0.2 0.6c0.4 1.1 1.6 1.6 2.7 1.3 1.1-0.4 1.7-1.6 1.3-2.7L22.1 13.4zM17.8 26l2.2-6.1L22.2 26H17.8zM41.2 20.9C41.7 20.1 42 19.1 42 18c0-3.3-2.7-6-6-6h-4c-1.1 0-2 0.9-2 2v16c0 1.1 0.9 2 2 2h6c3.3 0 6-2.7 6-6C44 23.9 42.9 22 41.2 20.9zM34 16h2c1.1 0 2 0.9 2 2s-0.9 2-2 2h-2V16zM38 28h-4v-4h4c1.1 0 2 0.9 2 2S39.1 28 38 28z" class="light-green"></path></svg>
<h3>Custom Forms</h3>
<p>Create your own contact form with any form elements, and X3 will forward all data appropriately.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0C14.3 0 0 14.3 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32C64 14.3 49.7 0 32 0zM32 60C16.5 60 4 47.5 4 32 4 16.5 16.5 4 32 4s28 12.5 28 28C60 47.5 47.5 60 32 60z" fill="#CCC"></path><path d="M40 32V28c0-4.4-3.6-8-8-8s-8 3.6-8 8v4c-1.1 0-2 0.9-2 2v8C22 43.1 22.9 44 24 44h16c1.1 0 2-0.9 2-2V34C42 32.9 41.1 32 40 32zM32 40c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2S33.1 40 32 40zM36 32h-8V28c0-2.2 1.8-4 4-4S36 25.8 36 28V32z" fill="#ED7161"></path></svg>
<h3>Password Protection</h3>
<p>Easily protect folders or entire sections of your website, with a simple-to-use password-protection manager.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" viewBox="0 0 68 68"><path d="M47.4 55.9l-1.6-1.6c-2.4-2.4-2.4-6.2 0-8.5 2.4-2.4 6.2-2.4 8.5 0l1.6 1.6 1.7-1.7c1.7-1.7 4.2-2.2 6.4-1.4V10v-6.4c0-2-1.7-3.6-3.7-3.6C60.3 0 60.3 0 60.3 0H3.7C3.7 0 3.7 0 3.7 0 1.7 0 0 1.6 0 3.6v6.4 50.3c0 2 1.7 3.7 3.7 3.7h40.5c-0.8-2.1-0.3-4.6 1.4-6.3L47.4 55.9z" fill="#CCC"></path><path d="M58 4h-52c-1.1 0-2 0.9-2 2v6 2 12 18 6 2h56v-2 -6V32v-2 -12 -12C60 4.9 59.1 4 58 4z" fill="#FFF"></path><path d="M45.8 45.8c2.4-2.4 6.2-2.4 8.5 0l1.6 1.7 0 0L38 24l-10 16 -8-10 -14 20h38.1C44.1 48.5 44.6 46.9 45.8 45.8z" class="light-green"></path><circle cx="18" cy="18" r="6" fill="#FC6"></circle><path d="M63.4 60.7l-4.7-4.7 4.7-4.7c0.7-0.7 0.7-1.9 0-2.7 -0.7-0.7-1.9-0.7-2.7 0l-4.7 4.7 -4.8-4.8c-0.7-0.7-2-0.7-2.7 0 -0.7 0.7-0.7 2 0 2.7l4.8 4.8 -4.7 4.7c-0.7 0.7-0.7 1.9 0 2.7 0.7 0.7 1.9 0.7 2.7 0l4.7-4.7 4.7 4.7c0.7 0.7 2 0.7 2.7 0C64.2 62.7 64.2 61.5 63.4 60.7z" fill="#ED7161"></path></svg>
<h3>Download Protection</h3>
<p>Prevent visitors from easily downloading images with X3's built-in image-protection plugin.</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="44" viewBox="0 0 64 44"><path d="M22 0H10C7.8 0 6 1.8 6 4v8c0 2.2 1.8 4 4 4h12c2.2 0 4-1.8 4-4V4C26 1.8 24.2 0 22 0z" fill="#666"></path><path d="M60 0h-4c-2.2 0-4 1.8-4 4v32c0 2.2 1.8 4 4 4h4c2.2 0 4-1.8 4-4V4C64 1.8 62.2 0 60 0z" fill="#333"></path><path d="M48 4H38h-2c-1.1 0-2 0.9-2 2v2 24 2c0 1.1 0.9 2 2 2h2 10 4V4H48z" fill="#4D4D4D"></path><path d="M30 10v20c0 2.2 1.8 4 4 4V6C31.8 6 30 7.8 30 10z" fill="#666"></path><path d="M42 10h4c1.1 0 2-0.9 2-2 0-1.1-0.9-2-2-2h-4c-1.1 0-2 0.9-2 2C40 9.1 40.9 10 42 10zM46 14h-4c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2h4c1.1 0 2-0.9 2-2C48 14.9 47.1 14 46 14zM46 22h-4c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2h4c1.1 0 2-0.9 2-2C48 22.9 47.1 22 46 22zM46 30h-4c-1.1 0-2 0.9-2 2s0.9 2 2 2h4c1.1 0 2-0.9 2-2S47.1 30 46 30z" fill="#666"></path><rect x="56" width="4" height="40" class="light-green" ></rect><rect x="26" y="10" width="4" height="20" fill="#333"></rect><path d="M10 8H4c-2.2 0-4 1.8-4 4v6c0 2.2 1.8 4 4 4h6c2.2 0 4-1.8 4-4v-6C14 9.8 12.2 8 10 8z" fill="#333"></path><path d="M22 8H8 4v4 2 26c0 2.2 1.8 4 4 4h14c2.2 0 4-1.8 4-4V14v-2V8H22z" fill="#4D4D4D"></path><path d="M24 12h-2 -6c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h6 2 2v-2V14v-2H24z" fill="#666"></path></svg>
<h3>EXIF, IPTC and GPS Data</h3>
<p>X3 can display meta data from your photos, including captions, camera settings and GPS map links.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M40 4h8V0h-8V4zM40 64h8v-4h-8V64zM0 24h4v-8H0V24zM16 4h8V0h-8V4zM28 4h8V0h-8V4zM60 36h4v-8h-4V36zM60 24h4v-8h-4V24zM60 48h4v-8h-4V48zM60 0h-8v4h6c1.1 0 2 0.9 2 2v6h4v-8C64 1.8 62.2 0 60 0zM60 58c0 1.1-0.9 2-2 2h-6v4h8c2.2 0 4-1.8 4-4v-8h-4V58zM0 4v8h4V6c0-1.1 0.9-2 2-2h6V0H4C1.8 0 0 1.8 0 4z" fill="#CCC"></path><path d="M52.3 10c-0.3-0.1-0.6-0.1-0.9 0H44c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2h2.9l-8.3 8.3c-0.8 0.8-0.8 2.2 0 3.1 0.8 0.8 2.2 0.8 3.1 0L50 17v3c0 1.1 0.9 2 2 2 1.1 0 2-0.9 2-2v-8C54 11 53.3 10.2 52.3 10z" class="light-green"></path><path d="M32 28H4c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4v-28C36 29.8 34.2 28 32 28z" class="light-green"></path></svg>
<h3>Smart Image-Resizing</h3>
<p>X3's smart image-resizer serves best image to visitors browser based on current layout, screen size and density.</p></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0C14.3 0 0 14.3 0 32 0 49.7 14.3 64 32 64c17.7 0 32-14.3 32-32C64 14.3 49.7 0 32 0zM32 60C16.5 60 4 47.5 4 32s12.5-28 28-28 28 12.5 28 28S47.5 60 32 60z" fill="#CCC"></path><path d="M40 34c-1.6 0-3 0.6-4.1 1.6l-6-2.9C30 32.5 30 32.2 30 32s0-0.5 0-0.7l6-2.9c1.1 1 2.5 1.6 4.1 1.6 3.3 0 6-2.7 6-6 0-3.3-2.7-6-6-6 -3.3 0-6 2.7-6 6 0 0.2 0 0.5 0 0.7l-5.9 2.9c-1.1-1-2.5-1.6-4.1-1.6 -3.3 0-6 2.7-6 6 0 3.3 2.7 6 6 6 1.6 0 3-0.6 4.1-1.6l5.9 2.9C34 39.5 34 39.8 34 40c0 3.3 2.7 6 6 6 3.3 0 6-2.7 6-6S43.3 34 40 34z" class="light-green"></path></svg>
<h3>Sharing</h3>
<p>X3 has a built-in sharing toolbar, which allows visitors to share your pages and images on popular social media.</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M62.5 55.2L49.7 42.3l-7.3 7.3 12.8 12.8c2 2 5.3 2 7.3 0C64.5 60.5 64.5 57.2 62.5 55.2z" class="dark-green"></path><circle cx="28" cy="28" r="28" fill="#CCC"></circle><circle cx="28" cy="28" r="24" fill="#FFF"></circle><path d="M22 14h-6c-0.7 0-1.3 0.4-1.7 0.9 0 0 0 0 0 0 -0.1 0.1-0.1 0.2-0.2 0.3 0 0 0 0 0 0C14.1 15.5 14 15.7 14 16v0 0 6c0 1.1 0.9 2 2 2 1.1 0 2-0.9 2-2v-4h4c1.1 0 2-0.9 2-2C24 14.9 23.1 14 22 14zM41.4 14.6c-0.4-0.4-0.9-0.6-1.4-0.6h-6c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2h4v4c0 1.1 0.9 2 2 2 1.1 0 2-0.9 2-2v-6C42 15.5 41.8 15 41.4 14.6zM40 32c-1.1 0-2 0.9-2 2v4h-4c-1.1 0-2 0.9-2 2s0.9 2 2 2h6c0.6 0 1.1-0.2 1.4-0.6 0 0 0.1-0.1 0.1-0.1 0.1-0.1 0.1-0.1 0.2-0.2 0.2-0.3 0.3-0.7 0.3-1.1v-6C42 32.9 41.1 32 40 32zM22 38h-4v-4c0-1.1-0.9-2-2-2s-2 0.9-2 2v6c0 0.3 0.1 0.5 0.1 0.7 0 0 0 0 0 0 0.3 0.7 1 1.2 1.8 1.2h6c1.1 0 2-0.9 2-2S23.1 38 22 38z" class="light-green"></path></svg>
<h3>Beautiful Popup</h3>
<p>Images in X3 galleries display in a beautiful popup, which loads images at best size, and allows zoom and swipe.</p></li>
</ul>
</div>
</div>
</section>
<!-- FLAMEPIX -->
<section class="index-section section-flamepix">
<div class="section-centered">
<div class="arrowr"></div>
<a class="button-link" href="https://www.flamepix.com/" target="_blank">
<h2>Flamepix X3 Hosting <i class="fa fa-arrow-right"></i></h2><p><strong>Flamepix.com</strong> high-performance X3 website hosting. Includes <strong>FREE</strong> X3 license!</p></a>
</div>
</section>
<!-- FAQ -->
<section class="index-section section-faq">
<div class="arrowr"></div>
<div class="section-centered">
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0C14.3 0 0 14.3 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32C64 14.3 49.7 0 32 0zM32 60C16.5 60 4 47.5 4 32c0-15.5 12.5-28 28-28s28 12.5 28 28C60 47.5 47.5 60 32 60z" class="light-grey"></path><path d="M32 20c-4.4 0-8 3.6-8 8 0 1.1 0.9 2 2 2s2-0.9 2-2c0-2.2 1.8-4 4-4S36 25.8 36 28c0 4.1-6 2.9-6 10h4c0-3.8 6-3.3 6-10C40 23.6 36.4 20 32 20zM32 40c-1.1 0-2 0.9-2 2 0 1.1 0.9 2 2 2s2-0.9 2-2C34 40.9 33.1 40 32 40z" class="light-green"></path></svg>
<h2 class="big">Questions & Answers</h2>
</div>
<div class="row section-left">
<div class="medium-6 columns">
<h3>Who is X3 for?</h3>
<p>X3 is for photographers, artists, web-designers and anyone who is looking for a beautiful, modern website tool.</p>
</div>
<div class="medium-6 columns">
<h3>Is X3 easy to setup and use?</h3>
<p>Yes. Simply upload X3 to your website, and start creating pages and galleries from the control panel.</p>
</div>
</div>
<div class="row section-left">
<div class="medium-6 columns">
<h3>What do I need to run X3?</h3>
<p>You need a domain name and web-hosting, unless you use our own dedicated X3 hosting at <a href="https://www.flamepix.com/" target="_blank">flamepix.com</a>.</p>
</div>
<div class="medium-6 columns">
<h3>What are the server requirements for X3?</h3>
<p>X3 requires PHP 5.3+ on any server Apache/Microsoft IIS/NGINX/Lighttpd.</p>
</div>
</div>
<div class="row section-left">
<div class="medium-6 columns">
<h3>Do you offer a trial version?</h3>
<p>Yes. Please go to the <a href="/downloads/">downloads</a> page.</p>
</div>
<div class="medium-6 columns">
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<div data-carousel data-carousel-shuffle=true data-carousel-items=1 data-carousel-attach=footer data-carouselz-autoplayz=5000 data-carousel-selector="quote" class="index-section section-testimonials">
<div class="arrowr"></div>
<div class="section-centered">
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="60" viewBox="0 0 64 60"><path d="M32 0C14.3 0 0 11.6 0 26c0 10.1 7.2 18.9 17.6 23.2L14 60l18-8 0 0c0 0 0 0 0 0 17.7 0 32-11.6 32-26C64 11.6 49.7 0 32 0z" fill="#ed7161" class="light-green"></path><path d="M42 23.5c0-3-2.4-5.5-5.3-5.5 -2 0-3.8 1.2-4.7 2.9 -0.9-1.7-2.7-2.9-4.7-2.9 -2.9 0-5.3 2.4-5.3 5.5 0 1.7 0.7 3.2 1.9 4.2l0 0c0 0 6.8 7.4 7.2 8 0.5 0.5 1.3 0.5 1.8 0s7.2-8 7.2-8l0 0C41.3 26.6 42 25.1 42 23.5z" fill="#FFF"></path></svg>
<h2>What others are saying about X3</h2>
<p class="show-for-small-only">* Swipe to view more quotes.</p>
</div>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Thank you for your great responsiveness and availability. X3 is a great product, both in terms of adaptability, look and ease of use once we understand how to do it. Great big bravo ...
<cite>Luc Nadaud</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
I'm going to use X3 for my main website. Bye Bye Wordpress! Love X3 product! ;-)
<cite>Anthony Beenen</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Thank you so much for all the help, and the new software is great.
<cite>Adam Curtis</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Great product, X3 is working fine on my NAS and I am discovering new features minute after minute, well done!
<cite>Marco Brivio</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
You created an amazing and easy way to manage it!! Thank you very much for your vision, it is a fantastic tool!!!
<cite>Thierry Bignolet / photographybythierry.com</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Big supporter of yours and Imagevue! Great job on refining X2, hoping for the best of X3.
<cite>Yuan & Mark</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Compliment for your big work for this x3. The clients are very happy, cool website and also cool support from you.
<cite>Andreas Avanzini / avanzini.ch</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Wow!!!!! ImagevueX is amazing!!!! I love it. Its so easy to use and looks awesome!!! Job well done guys.
<cite>Pieter van Wyk</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
I will probably be changing a few of my Clients Website to X3 over the next few Months … Just so easy to use …. Love it!!
<cite>Jay Legge</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
I recently move hosting and it works and i LOVE IT!!! Thanks so much and i love Imagevue is the best have a great weekend :D
<cite>Ismael Rac</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Very much appreciated. This CMS is a credit to you. Thanks for your excellent work.
<cite>Glen Vause</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
And thanks for a very nice gallery :) keep up the good work that you and your freinds are doing to make this the most user freindly gallery on the net :) :)
<cite>Michael Birkbak</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Your work on X3 is amazing. I'm trying it for few days and I'm really impressed. For your incredible work, for the time you spend answering emails, answering forum questions ...
<cite>Kivlov</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
You have developed something very beautiful and highly dynamic. I tip my hat to you and also to your commitment to support! Awesomeness!!!
<cite>JK4U</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
PS.... your new X3 is a great product! Thanks.
<cite>Chris Miller</cite>
</blockquote>
<blockquote class="quote"><i class="fa fa-quote-left"></i>
Wonderful work on Imagevue X3!
<cite>Alexander Brodesser</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
You make such a fantastic job - love your software ♥
<cite>Rokuda Merlin</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
Thanks so much for the quick reply and thank you so much for this amazing gallery!
<cite>DeezJee</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
The more I work on Imagevuex the more I fall in love with it!!! I think X3 is worth every cent and the support you provide is the best in the business.
<cite>Pieter / Epicmotion</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
You've created a wonderful gallery package and I am eternally grateful.
<cite>Stewart / twomoocows</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
Just almost finish the new site !! I have to tell you that imagevue is simply amazing by the rapidity, options and all the features. Congratulations.
<cite>Mat Semiond / teamlescollets.com</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
Genious! Many thanks! I love the new design. Congrats!
<cite>Federico Peletti / fpedroletti.com</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
The only one Photo Gallery, dedicated for photographers. Improvements, support, easy way to manage......Ever the best!
<cite>Gérard / gerardpastorelli.fr</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
Thanks for the great work! You have created a truly fine product, and you're great to work with. Although intended primarily for photographers and artists I find it perfect for architects as well.
<cite>Daniel / thecadannex.com</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
Thank you SOOOOO MUCH!!! I've honestly never come across such helpful and adorable customer service! http://www.elphiewhizan.net
<cite>Elphie / elphiewhizan.net</cite>
</blockquote>
<blockquote class="quote">
<i class="fa fa-quote-left"></i>
When I look at all them great websites that are made with X3, i think I'm going to have a lot of fun developing my website further. X3 is really a powerful tool with so many possibilities. Thanks for making a truly great product :-)
<cite>Christian Mørdre / levendebilder.com</cite>
</blockquote>
</div>
<!-- showcase -->
<section class="index-section section-showcase">
<svg class="intro-icon" xmlns="http://www.w3.org/2000/svg" width="64" height="60" viewBox="0 0 64 60"><path d="M60 4H24c0-2.21-1.79-4-4-4H4C1.79 0 0 1.79 0 4v12c0 2.21 1.79 4 4 4h56c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4z" fill-rule="evenodd" clip-rule="evenodd" class="dark-green" ></path><path d="M56 8H8c-2.21 0-4 1.79-4 4v4c0 2.21 1.79 4 4 4h48c2.21 0 4-1.79 4-4v-4c0-2.21-1.79-4-4-4z" fill="#FFF"></path><path d="M60 12H4c-2.21 0-4 1.79-4 4v40c0 2.21 1.79 4 4 4h56c2.21 0 4-1.79 4-4V16c0-2.21-1.79-4-4-4z" class="light-green" ></path><path d="M36 30l-6 10-6-6-8 12h32L36 30zm-17 0c1.656 0 3-1.344 3-3 0-1.657-1.344-3-3-3-1.657 0-3 1.343-3 3 0 1.656 1.343 3 3 3z" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"></path></svg>
<div class="arrowr"></div>
<div class="row">
<div class="small-12 columns">
<h2 class="big">X3 Showcase</h2>
<p>See other X3 photo gallery websites.</p>
<div class="hide-for-medium-up"><em>* Swipe to view galleries.</em></div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment