cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              			<main role="main" class="wrapper-main">
				<section class="rc-main">
					
					<h1 class="rc-main-head">Web Calendar</h1>
					<p class="rc-year">2017</p>
					
					<!--1-->
					<div class="lucka" data-lucka="lucka-1">
						<div class="lucka-front">
							<span class="lucka-nr">1</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">1</span><span class="content">The Dark Side</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-1" title="Visit The Dark Side">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/confirmshaming140.jpg 480w,
									https://internaldesk.com/img/codepen/confirmshaming257.jpg 768w,
									https://internaldesk.com/img/codepen/confirmshaming550.jpg 1600w"
								alt="Darth Vader">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--2-->
					<div class="lucka" data-lucka="lucka-2">
						<div class="lucka-front">
							<span class="lucka-nr">2</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">2</span><span class="content">From Idea to App</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-2" title="From Idea of App">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/microphone140.jpg 480w,
									https://internaldesk.com/img/codepen/microphone257.jpg 768w,
									https://internaldesk.com/img/codepen/microphone550.jpg 1600w"
								alt="Microphone">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--3-->
					<div class="lucka" data-lucka="lucka-3">
						<div class="lucka-front">
							<span class="lucka-nr">3</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">3</span><span class="content">Stay Safe<br>with SSL</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-3" title="Stay Safe">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/padlocks140.jpg 480w,
									https://internaldesk.com/img/codepen/padlocks257.jpg 768w,
									https://internaldesk.com/img/codepen/padlocks550.jpg 1600w"
								alt="Padlocks">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--4-->
					<div class="lucka lucka-4" data-lucka="lucka-4">
						<div class="lucka-front">
							<span class="lucka-nr">4</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">4</span><span class="content">Publishing Images</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-4" title="Publishing Images">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/camera140.jpg 480w,
									https://internaldesk.com/img/codepen/camera257.jpg 768w,
									https://internaldesk.com/img/codepen/camera550.jpg 1600w"
								alt="Camera">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--5-->
					<div class="lucka" data-lucka="lucka-5">
						<div class="lucka-front">
							<span class="lucka-nr">5</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">5</span><span class="content">The Right Font</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-5" title="The Right Font">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/gosling140.jpg 480w,
									https://internaldesk.com/img/codepen/gosling257.jpg 768w,
									https://internaldesk.com/img/codepen/gosling550.jpg 1600w"
								alt="Ryan Gosling">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--6-->
					<div class="lucka" data-lucka="lucka-6">
						<div class="lucka-front">
							<span class="lucka-nr">6</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">6</span><span class="content">PWA</span></p>
							</div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-6" title="Progressive Web Apps">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/mobile140.jpg 480w,
								https://internaldesk.com/img/codepen/mobile257.jpg 768w,
								https://internaldesk.com/img/codepen/mobile550.jpg 1600w"
							alt="Mobile Phone">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--7-->
					<div class="lucka" data-lucka="lucka-7">
						<div class="lucka-front">
							<span class="lucka-nr">7</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">7</span><span class="content">Stay Updated</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-7" title="Stay Updated">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/email140.png 480w,
								https://internaldesk.com/img/codepen/email257.png 768w,
								https://internaldesk.com/img/codepen/email550.png 1600w"
							alt="Email">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--8-->
					<div class="lucka" data-lucka="lucka-8">
						<div class="lucka-front">
							<span class="lucka-nr">8</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">8</span><span class="content">The Notch</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-8" title="The Notch">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/iphone140.png 480w,
								https://internaldesk.com/img/codepen/iphone257.png 768w,
								https://internaldesk.com/img/codepen/iphone550.png 1600w"
							alt="iPhone X">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--9-->
					<div class="lucka" data-lucka="lucka-9">
						<div class="lucka-front">
							<span class="lucka-nr">9</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">9</span><span class="content">AMP</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-9" title="Accelerated Mobile Pages">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/amp140.png 480w,
								https://internaldesk.com/img/codepen/amp257.png 768w,
								https://internaldesk.com/img/codepen/amp550.png 1600w"
							alt="AMP lightning bolt icon">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--10-->
					<div class="lucka" data-lucka="lucka-10">
						<div class="lucka-front">
							<span class="lucka-nr">10</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">10</span><span class="content">Stepping Up</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-10" title="Stepping Up">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/firefox140.jpg 480w,
								https://internaldesk.com/img/codepen/firefox257.jpg 768w,
								https://internaldesk.com/img/codepen/firefox550.jpg 1600w"
							alt="Mozilla Firefox Icon">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--11-->
					<div class="lucka" data-lucka="lucka-11">
						<div class="lucka-front">
							<span class="lucka-nr">11</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">11</span><span class="content">GDPR</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-11" title="GDPR">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/gdpr140.png 480w,
								https://internaldesk.com/img/codepen/gdpr257.png 768w,
								https://internaldesk.com/img/codepen/gdpr550.png 1600w"
							alt="Judge Club">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--12-->
					<div class="lucka" data-lucka="lucka-12">
						<div class="lucka-front">
							<span class="lucka-nr">12</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">12</span><span class="content">Animating the Web</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-12" title="Animating the Web">
							<img 
								sizes="100vw"
								srcset="https://internaldesk.com/img/codepen/luna140.gif 480w,
									https://internaldesk.com/img/codepen/luna257.gif 768w,
									https://internaldesk.com/img/codepen/luna500.gif 1600w"
								alt="Spinning Moon">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--13-->
					<div class="lucka" data-lucka="lucka-13">
						<div class="lucka-front">
							<span class="lucka-nr">13</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">13</span><span class="content">Guides &amp;<br> Patterns</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-13" title="Style Guides and Design Patterns">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/pattern140.jpg 480w,
								https://internaldesk.com/img/codepen/pattern257.jpg 768w,
								https://internaldesk.com/img/codepen/pattern550.jpg 1600w"
							alt="Color Swatches">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--14-->
					<div class="lucka" data-lucka="lucka-14">
						<div class="lucka-front">
							<span class="lucka-nr">14</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">14</span><span class="content">Accessibility</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-14" title="Accessibility">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/accessibility140.png 480w,
								https://internaldesk.com/img/codepen/accessibility257.png 768w,
								https://internaldesk.com/img/codepen/accessibility550.png 1600w"
							alt="Handicap Symbol">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--15-->
					<div class="lucka" data-lucka="lucka-15">
						<div class="lucka-front">
							<span class="lucka-nr">15</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">15</span><span class="content">Web Podcasts</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-15" title="Web Podcasts">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/headset140.jpg 480w,
								https://internaldesk.com/img/codepen/headset257.jpg 768w,
								https://internaldesk.com/img/codepen/headset550.jpg 1600w"
							alt="Headphones">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--16-->
					<div class="lucka" data-lucka="lucka-16">
						<div class="lucka-front">
							<span class="lucka-nr">16</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">16</span><span class="content">Performance</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-16" title="Performance">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/gepard140.jpg 480w,
								https://internaldesk.com/img/codepen/gepard257.jpg 768w,
								https://internaldesk.com/img/codepen/gepard550.jpg 1600w"
							alt="Cheetah">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--17-->
					<div class="lucka" data-lucka="lucka-17">
						<div class="lucka-front">
							<span class="lucka-nr">17</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">17</span><span class="content">Perceived<br>Performance</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-17" title="Perceived Performance">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/shoe140.jpg 480w,
								https://internaldesk.com/img/codepen/shoe257.jpg 768w,
								https://internaldesk.com/img/codepen/shoe550.jpg 1600w"
							alt="Shoe with wing">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--18-->
					<div class="lucka" data-lucka="lucka-18">
						<div class="lucka-front">
							<span class="lucka-nr">18</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">18</span><span class="content">The Fold</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-18" title="The Fold">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/tail140.jpg 480w,
								https://internaldesk.com/img/codepen/tail257.jpg 768w,
								https://internaldesk.com/img/codepen/tail550.jpg 1600w"
							alt="Whale Tail">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--19-->
					<div class="lucka" data-lucka="lucka-19">
						<div class="lucka-front">
							<span class="lucka-nr">19</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">19</span><span class="content">SEO Myths</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-19" title="SEO Myths">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/dragon140.jpg 480w,
								https://internaldesk.com/img/codepen/dragon257.jpg 768w,
								https://internaldesk.com/img/codepen/dragon550.jpg 1600w"
							alt="Firebreathing Dragon">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--20-->
					<div class="lucka" data-lucka="lucka-20">
						<div class="lucka-front">
							<span class="lucka-nr">20</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">20</span><span class="content">Raster &amp; <br>Vector</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-20" title="Raster and Vector Images">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/onion140.jpg 480w,
								https://internaldesk.com/img/codepen/onion257.jpg 768w,
								https://internaldesk.com/img/codepen/onion550.jpg 1600w"
							alt="Red Onion and Red Onion Logo">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--21-->
					<div class="lucka" data-lucka="lucka-21">
						<div class="lucka-front">
							<span class="lucka-nr">21</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">21</span><span class="content">UI &amp; UX</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-21" title="UI and UX">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/game140.jpg 480w,
								https://internaldesk.com/img/codepen/game257.jpg 768w,
								https://internaldesk.com/img/codepen/game550.jpg 1600w"
							alt="Game Console">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--22-->
					<div class="lucka" data-lucka="lucka-22">
						<div class="lucka-front">
							<span class="lucka-nr">22</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">22</span><span class="content">Following</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-22" title="Following">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/twitter140.png 480w,
								https://internaldesk.com/img/codepen/twitter257.png 768w,
								https://internaldesk.com/img/codepen/twitter550.png 1600w"
							alt="Twitter Logo">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--23-->
					<div class="lucka lucka-23" data-lucka="lucka-23">
						<div class="lucka-front">
							<span class="lucka-nr">23</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">23</span><span class="content">Design Tools</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-23" title="Web Design Tools">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/paint140.jpg 480w,
								https://internaldesk.com/img/codepen/paint257.jpg 768w,
								https://internaldesk.com/img/codepen/paint550.jpg 1600w"
							alt="Paintbrush dipped in apricot color">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--24-->
					<div class="lucka lucka-24" data-lucka="lucka-24">
						<div class="lucka-front">
							<span class="lucka-nr">24</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">24</span><span class="content">The Future</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-24" title="The Future of the Web">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/robot140.jpg 480w,
								https://internaldesk.com/img/codepen/robot257.jpg 768w,
								https://internaldesk.com/img/codepen/robot550.jpg 1600w"
							alt="Face of a Robot">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

					<!--25-->
					<div class="lucka lucka-25" data-lucka="lucka-25">
						<div class="lucka-front">
							<span class="lucka-nr">25</span>
							<div class="lucka-inside"><p class="lucka-inside-content"><span class="number">25</span><span class="content">Treat Yourself</span></p></div>
						</div><!--lucka-front-->

						<figure class="lucka-bottom" data-lucka="lucka-25" title="Treat Yourself">
							<img 
							sizes="100vw"
							srcset="https://internaldesk.com/img/codepen/fika140.jpg 480w,
								https://internaldesk.com/img/codepen/fika257.jpg 768w,
								https://internaldesk.com/img/codepen/fika550.jpg 1600w"
							alt="Cup of Hot Choclate with Wipped Cream and Mini Marshmallows in different pastel colours">
						</figure><!--lucka-bottom-->
					</div><!--lucka-->

				</section><!--main-->

				<!--LUCKA-CONTENT-->
				<section class="lucka-content" data-lucka="lucka-1">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
								<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/confirmshaming550.jpg" width="550" height="550" alt="Darth Vader">
						</figure>

						<span class="lucka-content-article-nr">1</span>
						<h1><span class="lucka-content-article-topsc">Confirmshaming:</span> Stay away from the Dark Side</h1>
						<p>Confirmshaming is a very aggressive type of marketing, where the general idea seems to be that if the carrot doesn’t do the job, the stick will.</p>
						<p>Using web design and web content in this negative way is called “confirmshaming”.</p>
						<p>Confirmshaming is done by adding short texts that shames, blames or are just simply rude to the website visitor. Sometimes the effort of confirmshaming is enhanced by deliberately creating a web design and UI that makes it difficult for users to decline an offer or close a pop up window.</p>
						<p>Even though click-rates and other metrics might get boosted by using these manipulative patterns, confirmshaming is in our opinion basically bullying, and should not be used.</p>
						<p>Read an <a href="http://redonion.se/en/the-dark-side-of-web-design-confirmshaming/" target="_blank" title="Read the Dark Side of Web Design">in-depth article</a> about the phenomenon on <a href="http://redonion.se/en/blog/" title="Visit our blog" target="_blank">our blog</a>.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-2">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/microphone550.jpg" width="550" height="550" alt="Microphone">
						</figure>
						<span class="lucka-content-article-nr">2</span>
						<h1><span class="lucka-content-article-topsc">Getting from</span> Idea to App</h1>
						<p>Have a listen to this podcast episode if you want to know what the most common pitfalls are when trying to realizing your application ideas, and how to best avoid making those mistakes.</p>

						<p>Listen to the whole episode: <a href="https://boagworld.com/season/18/episode/1804/" title="Listen to the podcast episode" target="_blank">How to go from a great idea to a reliable application</a></p>

						<p><a href="https://boagworld.com/show" target="_blank" title="Check out the Boagworld Show">Boagworld Show</a> is an industry leading UI, UX and web design podcast. When season 18 was opened to the public, we immediately decided to contribute.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-3">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/padlocks550.jpg" width="550" height="550" alt="Padlocks">
						</figure>
						<span class="lucka-content-article-nr">3</span>
						<h1><span class="lucka-content-article-topsc">Staying</span> Safe with SSL</h1>
						<p>Have you ever noticed that some website addresses start with “https” and not just “http”? The extra “s” stands for Secure and indicates that the website has a so-called SSL certificate installed.</p>
						<p>Just like <a href="https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html" title="Moving towards a more secure web" target="_blank">Google announced in 2016</a>, the browser Google Chrome will from now on show a warning on web pages that handles logins or credit card information and not using SSL.</p>
						<p>WordPress has also been moving towards SSL during 2017, which adds yet another incentive to get the “s” in your “http”.</p>
						<p><a href="http://redonion.se/en/what-is-ssl-why-is-the-website-not-safe-anymore/" title="What is SSL, whi si the website not safe anymore" target="_blank">Learn more</a> about this on our blog.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-4">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/camera550.jpg" width="550" height="550" alt="Camera">
						</figure>
						<span class="lucka-content-article-nr">4</span>
						<h1><span class="lucka-content-article-topsc">Checklist for</span> Publishing Images on the Web</h1>
						<ul>
							<li>Make sure you have the right to use the image!</li>
							<li>Choose the appropriate image size. Adjust the image size to how much space it will occupy on your website.</li>
							<li>Choose the appropriate image format based on the motif of your image.</li>
							<li>Compress your image before publishing it on the web.</li>
						</ul>
						<p>Read more about publishing image online on our blog: <a href="http://redonion.se/en/guide-to-publishing-images-on-the-web/" title="Guide to publishing images on the web" target="_blank">Guide to publishing images on the web</a></p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-5">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/gosling550.jpg" width="550" height="550" alt="Ryan Gosling">
						</figure>
						<span class="lucka-content-article-nr">5</span>
						<h1><span class="lucka-content-article-topsc">Choosing</span> the Right Font</h1>
						<p>If you haven’t already seen the Saturday Night Live sketch where Ryan Gosling freaks out over the choice of using the typeface Papyrus on a movie poster, you’re in for a treat. Apart from Papyrus, check out <a href="http://www.comicsanscriminal.com/" target="_blank" title="Comic Sans Criminal">this site</a> before deciding on using another (in)famous font, Comic Sans.</p>

						<p>Guide to picking a font:</p>
						<ul>
							<li>Make sure the font mirrors the message of the text it will be used for. If you are going to use it for a comic book, by all means, go ahead and use Comic Sans if you must.</li>
							<li>Make sure to pick a font that makes it easy to read where it is used. Headings often use bolder and more decorative fonts, compared to fonts used for large, dense blocks of texts. For longer text sections it is better to use fonts that are designed for legibility rather than pure aesthetics.</li>
							<li>Don’t limit yourself to the fonts that happen to be installed by default on your computer. There are millions of fonts to choose from, and some are even available for free.</li>
							<li>Fonts, just like any other designed products, are influenced by the time and context when they are created. When trying to find matching fonts is to look for fonts that represent roughly the same historical period, although they have different features. Think of it like pairing an outfit with the appropriate attire – you generally don’t want to wear a 1980s Hawaii shirt with a pair of medieval hosen.</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-6">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/mobile550.jpg" width="550" height="550" alt="Mobile Phone">
						</figure>
						<span class="lucka-content-article-nr">6</span>
						<h1><span class="lucka-content-article-topsc">What are</span> Progressive Web Apps</h1>
						<p>Progressive Web Apps (PWAs) can be seen as a mix of native and web applications.</p>
						<p>PWAs can make use of some of the technologies that previously have been available only to native apps, and most importantly – they can function without being connected to the Internet.</p>
						<p>PWAs can programmatically be created using technologies that are used for building websites, which makes them cost efficient compared to creating multiple native apps for different platforms.</p>
						<p>With that said, the big drawback is that the technology is not yet fully available on all platforms. <!--However, the most important parts of the technology needed are said to be implemented in Safari in the future.--></p>
						<p>On Edge and Safari at the moment of writing (late 2017), parts of the most crucial technology are available only if you actively change the settings. <!--behind developer flags in Edge and Safari.--></p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-7">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/email550.png" width="550" height="550" alt="Email">
						</figure>
						<span class="lucka-content-article-nr">7</span>
						<h1>Stay Updated</h1>
						<p>Tech and the web are fast-moving businesses. An easy and lazy way of keeping tabs on what’s going on is subscribing to curated newsletters, that bring the latest and hottest news right to your inbox.</p>
						<p>A few suggestions are:</p>
						<ul>
							<li><a href="https://sidebar.io/" title="Sidebar" target="_blank">Sidebar</a>: 5 daily links about web technologies, UI, UX and digital design</li>
							<li><a href="https://www.smashingmagazine.com/" title="Smashing Magazine" target="_blank">Smashing Magazine</a>: web design, UI, UX and development articles, focusing mostly on front-end. The magazine itself is one of the most reputable publications in the web business, and the newsletter content is of equal quality.</li>
							<li><a href="https://tympanus.net/codrops/collective/" title="Codrops Collective" target="_blank">Codrops</a>: links to the most popular articles, highlighting things that have been trending in the community. In spite of always offering a free font or iconset each email, the content leans more towards the tech than design.</li>
							<li><a href="https://www.sitepoint.com/versioning/" title="Versioning Newsletter" target="_blank">Versioning</a>: a mix of tech, design and business articles focusing on the latest in the web business.</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-8">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/iphone550.png" width="550" height="550" alt="iPhone X">
						</figure>
						<span class="lucka-content-article-nr">8</span>
						<h1>The Controversial Notch</h1>
						<p>When Apple launched the new iPhone X, the “notch” at the top of the screen caused a lot of discussions and upset amongst designers.</p>
						<p>The reason for the upset was that the notch pushed website content around awkwardly. This lead to the question of whether or not the behavior should be specifically targeted in code and dealt with, or if the idea of creating a different set of rules just to handle one device was mal-practice and backward thinking.</p>
						<p>If you’ve splurged on the iPhone X and want to hide the notch, our tip is to use one of these <a href="http://notchless.space/" title="Visit notchless.space" target="_blank">screensavers</a> to hide it – at least until you need a <a href="https://blog.usejournal.com/the-iphone-x-notch-is-brilliant-three-pictures-that-show-you-why-3c58b3059143" title="The iPhone X Notch is Brilliant" target="_blank">topic for conversation</a>.</p>
						<p>Read more about the notch discussion:</p>
						<ul>
							<li><a href="https://blog.prototypr.io/notch-crazy-iphone-x-mad-475f43d6ee26" target="_blank" title="Notch Craxy iPhone X Mad">‘Notch’ crazy, iPhone X mad: What designers think of iPhone X</a></li>
							<li><a href="https://medium.com/swlh/the-iphone-x-notch-is-all-about-branding-aef4f34c365b" title="The iPhone X Notch is All About Branding" target="_blank">The iPhone X Notch is All About Branding</a></li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-9">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/amp550.png" width="550" height="550" alt="AMP logo depicted as a yellow flash">
						</figure>
						<span class="lucka-content-article-nr">9</span>
						<h1><span class="lucka-content-article-topsc">What about</span> AMP</h1>
						<p>AMP stands for Accelerated Mobile Pages and is a new format for serving websites to mobiles invented by Google. Maybe you’ve seen “AMP” next to a small icon of a lightning bolt in Google searches (on mobile) that indicates that this is a link to an AMP site.</p> <p>Google actively promotes AMP sites to end up higher in their search results.</p>
						<p>The supporters of AMP claims that the technology behind AMP sites makes them much faster to be viewed on mobile devices. That will, in turn, lead to happier visitors and companies making more money because shorter wait times lead to higher conversion.</p>
						<p>AMP critics are concerned about Google gaining too much control over which sites search results show, as well as not being happy with where Google claims the AMP pages are really hosted.</p>
						<p>Read and decide for yourself:</p>
						<ul>
							<li><a href="https://www.ampproject.org/" title="Visit AMP Project" target="_blank">www.ampproject.org</a></li>
							<li><a href="https://ethanmarcotte.com/wrote/ampersand/" target="_blank" title="AMPersand">AMPersand</a> by Ethan Marcotte</li>
							<li><a href="https://adactio.com/journal/13035" title="The meaning of AMP" target="_blank">The meaning of AMP</a> by Jeremy Keith</li>
							<li><a href="https://www.w3.org/blog/TAG/2017/07/27/distributed-and-syndicated-content-whats-wrong-with-this-picture/" target="_blank" title="Distributed and syndicated content: what's wrong with this picture?">Distributed and syndicated content: what’s wrong with this picture?</a> by Hadley Beeman, W3C</li>
							<li><a href="https://dennisforbes.ca/index.php/2017/09/05/embrace-amp-or-amp-wins/" title="Embrace AMP or AMP wins" target="_blank">Embrace AMP or AMP wins</a> by Dennis Forbes</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-10">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/firefox550.jpg" width="550" height="550" alt="Mozilla Firefox Logo">
						</figure>
						<span class="lucka-content-article-nr">10</span>
						<h1>Firefox Quantum &amp; Send</h1>
						<p>Mozilla Firefox is challenging Google Chrome with the latest version called Firefox Quantum, which is impressing users with its speed.</p>
						<p>The Firefox dev tools are already considered the best option for inspecting the newly added CSS Grid, and rumor has it the Firefox team will be dedicating even more time on browser dev tools in 2018.</p>
						<p>As icing on the cake, Firefox just launched a new service called <a href="https://send.firefox.com/" title="Try Firefox Send" target="_blank">Send</a>, which creates a secure, private and encrypted download link to files that, for exampe, are too large for being emailed.</p>
						<p>The service is a Test Pilot Experiement, and should work in all modern web browsers.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-11">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/gdpr550.png" width="550" height="550" alt="Judge Club">
						</figure>
						<span class="lucka-content-article-nr">11</span>
						<h1>GDPR</h1>
						<p>The General Data Protection Regulation is a new law, affecting all EU nations from May 25, 2018. The purpose of the law is to secure and protect the personal data of EU citizens. Companies or organizations failing to meet the new regulations risk substantial fines.</p>

						<p>The new rules for handling personal data concern both how data is stored, how it is protected, routines for handling security issues, users being able to access their data and to have it deleted. It is also required to be able to report what the data should be used for, and why it is collected.</p>
						
						<h2>TL;DR</h2>
						<p>There are a lot of new rules that lead to a lot of extra work for anyone who is handling any form of user data.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-12">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/luna500.gif" width="550" height="550" alt="Spinning moon">
						</figure>
						<span class="lucka-content-article-nr">12</span>
						<h1>Animating the Web</h1>
						<p>There are different ways of adding movement to your websites.</p>					
						<ul>
							<li><strong>Animated GIF:</strong> an image that acts as a small video loop in itself. The drawback is that the loop should be kept short not to make the file size too heavy. Also, the image itself should not be too large in terms of width and height to keep the file size down. These types of images are often perceived as a little bit choppy. Animated gifs are often found in emails, as signatures in forums and on social media.</li>
							<li><strong>Video:</strong> apart from embedding YouTube or Vimeo videos, you can also use videos that you host yourself. For some time, large video backgrounds were very popular on landing sites. Just remember to keep an eye on the file size of your videos. For best result in different browsers, make sure to upload the different file formats needed.</li>
							<li><strong>Code animations using CSS</strong> on texts, images or other web elements. Especially useful for micro animations when you want to draw a little extra attention to for example updating the shopping basket or clicking a button. These types of animation work in modern browsers.</li>
							<li><strong>Code animations using canvas or SVG animation libraries</strong>. Using these types of techniques make it possible to add more complex animations. See this <a href="https://codepen.io/fridanyvall/pen/zBLpAg" title="Animated Olympic Rings" target="_blank">example of animated olympic rings</a>. Browser compatibility depends on which technique is used.</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-13">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/pattern550.jpg" width="550" height="550" alt="Color Swatches">
						</figure>
						<span class="lucka-content-article-nr">13</span>
	          <h1>Style Guides<br> &amp; Pattern Libraries</h1>
                        <p>Style Guides or Pattern Libraries are collections of design rules that help designers and developers create consistent experiences for users. This documentation also helps consolidate branding.</p>
                        <p>The difficulties of not deviating from the decided look and feel grow with a project. Creating this type of documentation is, therefore, more important for large web applications or brands, who also have the resources to make serious efforts.</p>
                        <p>Some examples of public Style Guides / Pattern Libraries from large organizations:</p>
						<ul class="wrapper ul-50">
							<li><a href="http://www.audi.com/ci/en/renewed-brand.html" title="Visit Audi's Design Guide" target="_blank">Audi</a></li>
							<li><a href="http://www.bbc.co.uk/programmes/styleguide" title="Visit BBC's Style Guide" target="_blank">BBC</a></li>
							<li><a href="http://ux.mailchimp.com/patterns/" title="Visit Mailchimp's Design Patterns" target="_blank">Mailchimp</a></li>
							<li><a href="https://www.lightningdesignsystem.com/" title="Check out Salesforce's Deign System" target="_blank">Salesforce</a></li>
							<li><a href="https://www.yelp.com/styleguide" title="Visit Yelp's Style Guide" target="_blank">Yelp</a></li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-14">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/accessibility550.png" width="550" height="550" alt="Handicap Icon">
						</figure>
						<span class="lucka-content-article-nr">14</span>
						<h1>Accessibility</h1>
						<p>Accessibility on the web is about making web content available to people with different kinds of disabilities. The most obvious handicaps for accessing web content are perhaps different kinds of <strong>sight impairments</strong>. Color-blindness, impaired sight as well as blindness needs to be taken into account. Colors and contrasts need to be adjusted to make content easier to see, and special code needs to be added to make the site even better for screen readers.</p>
						<p>The growing possibilities of adding movement to websites – like the popular parallax effects – can also cause problems for people who are sensitive to <strong>motion sickness</strong>. Sites with these types of effects should, therefore, have a way of accessing the content with the effects turned off.</p>
						<p>Some visitors could also have <strong>dyslexia</strong>, or be handicapped in ways that limit their <strong>cognitive skills</strong>. It would therefore be important not to use too complicated language or too long sections on websites that expect parts of their visitors have these disabilities.</p>
						<p>Visitors could also have <strong>motor impairments</strong>, meaning they could find filling in forms or moving the cursor challenging.</p>
						<p>The more people need to be able to use your site, the higher are the accessibility requirements. The toughest requirements are often placed on government websites that need to be accessible to all citizens.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-15">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/headset550.jpg" width="550" height="550" alt="Headphones">
						</figure>
						<span class="lucka-content-article-nr">15</span>
						<h1><span class="lucka-content-article-topsc">Tune in To</span> Web Podcasts</h1>
						<p>Multitask like a pro and make chores less boring with a good podcast in your headphones. Stay updated with our pick of newbie-friendly, web focused podcasts:</p>
						<ul>
							<li><a href="https://boagworld.com/" title="Boagworld Show" target="_blank">Boagworld Show</a>: focusing on marketing, UX and the business side of both freelance and running an agency. One of the very first web focused podcasts, and still going strong. A very easily digestible podcast which we are happy to have <a href="https://boagworld.com/season/18/episode/1804/" title="Listen to our guest episode" target="_blank">participated on</a>.</li>
							<li><a href="https://ctrlclickcast.com/" title="Visit CTRL+CLICK CAST" target="_blank">CTRL+CLICK CAST</a>: bringing up topics that are important to both agencies as well as their clients. Example of topics is branding, Google Analytics, and Web Maintenance.</li>
							<li><a href="https://syntax.fm/" title="Visit Syntax" target="_blank">Syntax</a>: More tech-oriented, focusing on the latest in web development.</li>
						</ul>
						<p>While there are certainly many more high-quality web focused podcasts out there, a lot of them are quite deep-diving and require that the audience already have significant technical knowledge.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-16">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/gepard550.jpg" width="550" height="550" alt="Cheetah">
						</figure>
						<span class="lucka-content-article-nr">16</span>
						<h1>Performance</h1>
						<p>Web performance is how fast websites are downloaded and displayed in a browser. Faster websites have shown to increase user happiness as they provide a better user experience.</p>

						<p>How fast a visitor reaches a page is also important when it comes to so-called bounce rate, meaning that visitors leave the site almost instantly, in this case presumably because it takes too long to load.</p>
						<p>If visitors leave an e-commerce website, they will not make a purchase. If the site is instead loaded really fast, they might stay and buy something. Might sound trivial and simple, but to e-commerce companies this is vital, and to engineers, performance has grown into an area of expertise in itself.</p>
						<p>Several case studies have been done on the topic, for example by e-commerce giant Wal-Mart. See the <a href="https://www.slideshare.net/devonauerswald/walmart-pagespeedslide" title="Wal-Mart Performance Presentation Slides" target="_blank">slides from a presentation by Cliff Crocker</a>, Wal-Mart Senior Engineering Manager at the time.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-17">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/shoe550.jpg" width="550" height="550" alt="Shoe with wing">
						</figure>
						<span class="lucka-content-article-nr">17</span>
						<h1>Perceived Performance</h1>
						<p>Perceived Performance is how fast visitors think your site is, which can differ from how fast the site is in reality. Since it is the user who will determine when loading a webpage takes too long, how long waiting times are perceived is really what matters.</p>
						<p>Some tricks to keep user attention while waiting (more effective than hold music):</p>
						<ul>
							<li>Loading animations, spinners or progress bars help tell the user that a short wait time is expected and that nothing has gone wrong.</li>
							<li>Use images that will show the entire image right away, but only load some of the data. The image will look a little blurry until all of the data is loaded, but it will be a better user experience because it will prepare the user to expect the content. To achieve this with JPEGs, use progressive format.</li>
							<li>Skeleton placeholders on load: When the page loads, show indications of what content to expect. Examples of this are the light grey boxes replacing images and text on Facebook while the page loads (on a slow connection).</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-18">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/tail550.jpg" width="550" height="550" alt="Whale tail">
						</figure>
						<span class="lucka-content-article-nr">18</span>
						<h1><span class="lucka-content-article-topsc">Above</span> The Fold</h1>
						<p>Above the fold is a graphic design term, referring to the area of a website that is instantly visible to the user, without having to scroll down. The general rule has been to put the most important content in this area so that it is instantly available and becomes easy to find.</p>

						<p>With different screen sizes as well as screen orientations (landscape and portrait modes on phones and tablets), it becomes increasingly difficult to determine what content will actually be displayed in this highly desired space.</p>

						<p>UX experts however have concluded that there are a lot more things deciding if a call to action button gets clicked apart from if it is placed in the golden “above the fold” area or not.*</p>

						<p><strong>TL;DR:</strong> Just putting important content in the very variable area that might be “above the fold” on some devices might not automatically improve the result in the obvious way people often expect.</p>

						<p class="smallprint">*Joe Leech on <a href="https://vimeo.com/223432696" title="How to Design with Science Without Losing the Magic" target="_blank">“How to Design with Science Without Losing the Magic”</a> at SmashingConf, Barcelona 2017, around 5.40</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-19">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/dragon550.jpg" width="550" height="550" alt="Firebreathing Dragon">
						</figure>
						<span class="lucka-content-article-nr">19</span>
						<h1>SEO Myths</h1>
						<h2>h1 tags</h2>
						<p>I once had a prospective client request no more than one h1 tag on each HTML page because he had heard it was otherwise bad for SEO. Since the arrival of HTML5 in 2014, <!--this is no longer the case.</p>
						<p>T-->the desired way of adding h1 tags per HTML5 specification is to only have one h1 tag for each section (like article, aside and so on).</p>
						<p>In fact, what matters most for search engines is not as much which specific tag is used for your content, but that your page contains relevant and useful information that addresses the needs of your visitors.</p>

						<h2>The More the Merrier</h2>
						<p>The more times a keyword occurs on the site, the better? Just stuffing keywords on the website for the sake of it, or posting duplicate content to your site might actually get recognized by search engines and effect your ranking negatively.</p>

						<h2>Race To the Top</h2>
						<p>Top search engine ranks are not a quick fix. A site does not go from a low ranking to being number 1 on Google in a day. You will need to build credibility by creating relevant, useful content around your keywords, as well as getting other (relevant) sites to link to your (relevant) content.</p>

						<h2>Why Metatags are Important</h2>
						<p>Metatags live in the head section of your webpages. They are used for previewing some of the webpage content in search results. In that way, they are important for getting people to understand what content will be on your site, but they will not alone boost your search rankings and are not used in the ranking algorithm*.</p>
						<p class="smallprint">*Read the article <a href="https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html" title="Google Does Not Use Keywords Meta Tag" target="_blank">Google Does Not Use Keywords Meta Tag</a></p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-20">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/onion550.jpg" width="550" height="550" alt="Red Onion and Red Onion Logo">
						</figure>
						<span class="lucka-content-article-nr">20</span>
						<h1>Raster &amp; Vector Graphic</h1>
						<p>That images can have different file formats is perhaps something most people already know, however on the web, there is an important distinction between so-called raster and vector images.</p>
						<p>Raster images are typically photographs (.png, .jpg), whereas vector images are usually simpler and smaller, like logos and icons (.svg).</p>
						<p>What makes vector graphics so useful on the web is the fact that they can be shown at any size without becoming fuzzy or pixelated. With the increasing number of high-resolution screens, this becomes an even bigger advantage.</p>
						<p>To have a raster image look as sharp on a high-resolution screen as on a regular screen, the image itself needs to be bigger. Bigger images lead to bigger file sizes which in turn leads to longer load times, which might lead to unhappy users.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-21">
					<article class="lucka-content-article">
						<span class="lucka-content-article-nr">21</span>
						<h1><span class="lucka-content-article-topsc">The Difference Between</span> UI &amp; UX</h1>
						<p>UI stands for User Interface. UX stands for User Experience. Since disciplines often are intertwined and have a great impact on each other, lines can become blurred.</p>

						<p>In the case of UI and UX, one has a hard time existing without the other. One of the simplest and most to the point examples of what UI and UX are and do is depicted below by Jennifer Aldrich, UX & Content Strategist at InVision:</p>

						<blockquote class="twitter-tweet" data-lang="sv" style="margin-left:auto;margin-right:auto;"><p lang="en" dir="ltr">And then my kiddo asked, &quot;What&#39;s the difference between UX and UI?&quot; <a href="https://twitter.com/hashtag/ux?src=hash&amp;ref_src=twsrc%5Etfw">#ux</a> <a href="https://twitter.com/hashtag/design?src=hash&amp;ref_src=twsrc%5Etfw">#design</a> <a href="https://twitter.com/hashtag/ui?src=hash&amp;ref_src=twsrc%5Etfw">#ui</a> <a href="http://t.co/p2st4sG7NB">pic.twitter.com/p2st4sG7NB</a></p>&mdash; Jennifer Aldrich (@jma245) <a href="https://twitter.com/jma245/status/440946484167864320?ref_src=twsrc%5Etfw">4 mars 2014</a></blockquote>
						<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

						<p>UI is the way of interacting with the app/website/product. UX describes the user's experinece of handling the app/website/product using its UI.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-22">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/twitter550.png" width="550" height="550" alt="Twitter Logo">
						</figure>
						<span class="lucka-content-article-nr">22</span>
						<h1>Follow the Crowd</h1>
						<p>Following influencers in social media is another way of staying updated on what’s happening.</p> <p>Currently, Twitter seems to be the professional social media channel of choice for people in the web business. Here are a few suggestions of web celebs mainly from the front-end area of expertise to follow on twitter. While there of course are a lot of other noteworthy people that you could also follow, we decided to try and keep the list fairly short.</p>
						<ul>
							<li><a href="https://twitter.com/rachelandrew" title="Rachel Andrew" target="_blank">Rachel Andrew</a>: web developer, entrepreneur, Editor in Chief at Smashing Magazine, CSS Grid expert</li>
							<li><a href="https://twitter.com/wesbos" title="Wes Bos" target="_blank">Wes Bos</a>: web developer, online instructor, podcaster</li>
							<li><a href="https://twitter.com/chriscoyier" title="Chris Coyier" target="_blank">Chris Coyier</a>: entrepreneur, web developer, podcaster</li>
							<li><a href="https://twitter.com/sarah_edo" title="Sarah Drasner" target="_blank">Sarah Drasner</a>: Sr. Developer at Microsoft, VUE, SVG and animation expert</li>
							<li><a href="https://twitter.com/brad_frost" title="Brad Frost" target="_blank">Brad Frost</a>: web designer/developer, the mind behind atomic design patterns</li>
							<li><a href="https://twitter.com/scottjehl" title="Scott Jehl" target="_blank">Scott Jehl</a>: web designer/developer, performance expert</li>
							<li><a href="https://twitter.com/addyosmani" title="Addy Osmani" target="_blank">Addy Osmani</a>: developer working on Google Chrome</li>
							<li><a href="https://twitter.com/heydonworks" target="_blank" title="Heydon Pickering">Heydon Pickering</a>: web accessibility expert</li>
							<li><a href="https://twitter.com/jensimmons" title="Jen Simmons" target="_blank">Jen Simmons</a>: web designer &amp; developer advocate at Mozilla, member of CSS Working Group, CSS layout expert</li>
							<li><a href="https://twitter.com/SaraSoueidan" title="Sara Soueidan" target="_blank">Sara Soueidan</a>: freelance front-end UI/UX developer, SVG expert</li>
							<li><a href="https://twitter.com/zeldman" title="Jeffrey Zeldman" target="_blank">Jeffrey Zeldman</a>: entrepreneur, publisher, a web business institution</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-23">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/paint550.jpg" width="550" height="550" alt="Paintbrush dipped in apricot color">
						</figure>
						<span class="lucka-content-article-nr">23</span>
						<h1>Web Design Tools</h1>
						<p>Pixel-perfect design mock-ups in Photoshop are the becoming obsolete. New technology like high-resolution screens, responsive websites and web animations open up for new possibilities and new work-flows.</p>
						<p>Which will become the next dominating digital web design app is yet to be decided. A few of the most interesting alternatives are listed below:</p>

						<ul>
							<li><a href="https://www.sketchapp.com/" title="Sketch" target="_blank">Sketch</a>: vector graphics program, and perhaps the most widely known alternative to Adobe Illustrator. The program addresses some of the most common pains for web designers, at a pay-once license. The big drawback is that Sketch is only available for Mac, making it difficult to rely solely on Sketch if you plan to work with people on different platforms.</li>
							<li><a href="https://www.figma.com/" title="Figma" target="_blank">Figma</a>: UI design tool, available both as a web app in the browser and as a desktop program for Mac, Windows, and Linux. Apart from design capabilities, there are also features for collaboration, importing assets as well as prototyping. Free to try a limited version, otherwise a monthly subscription.</li>
							<li><a href="https://www.invisionapp.com/studio" title="InVision Studio" target="_blank">InVision Studio</a>: is being marketed as “the world’s most powerful screen design tool”, and from the previews, it looks like that might actually come true. InVision previously bought the Macaw app, which was similar to Figma, and with all features and resources already at InVision’s disposal, expectations for Studio are high. Collaboration, animation, prototyping and responsive designs are just some of the promised features.</li>
							<li><a href="http://www.adobe.com/se/products/xd.html" title="Adobe XD" target="_blank">Adobe XD</a>: UI design program, built to complement Photoshop and Illustrator for designing UI. Has been in beta until recently, and Adobe is continuously adding features. An alternative to Sketch for PC users, however more advanced graphics programs (like Illustrator/Photoshop) are probably also needed to create all parts of a design. One can only speculate if that is a deliberate business strategy, since the program is part of Adobe CC.</li>
						</ul>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-24">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover-center" src="https://internaldesk.com/img/codepen/robot550.jpg" width="550" height="550" alt="Face of a robot">
						</figure>
						<span class="lucka-content-article-nr">24</span>
						<h1><span class="lucka-content-article-topsc">AI, VR &amp; AR</span> The Future</h1>
						<h2>Artificial Intelligence, AI</h2>
						<p>AI is being used to learn consumer behavior, as support chatbots and to provide better search results.</p>
						<p>An excellent example of using AI for good is <a href="https://www.rescam.org/" title="Visit Rescam" target="_blank">rescam.org</a>. Forward your scam emails to me@rescam.org to keep scammers occupied in endless, meaningless conversations with a bot.</p>
						<h2>Virtual Reality, VR</h2>
						<p>VR on the web is possible with a VR headset and a browser that can use the WebVR API. The WebVR standards are a collaboration between the leading big companies within the field. Building these types of immersive VR experiences leads to higher UI and UX demands, taking into account different types controllers, headsets, and platforms.</p>
						<h2>Augmented Reality, AR</h2>
						<p>AR is mixing digital objects with the real world. A typical example is how Pokémons suddenly appear in your living room when playing Pokémon Go on your mobile phone. Using an array of different javascript libraries (like <a href="https://aframe.io/" title="a-frame" target="_blank">a-frame</a>, <a href="https://github.com/jeromeetienne/ar.js" title="AR.js" target="_blank">AR.js</a> and <a href="https://threejs.org/" title="three.js" target="_blank">three.js</a>), it is possible to create these types of experiences with web technologies.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->

				<section class="lucka-content" data-lucka="lucka-25">
					<article class="lucka-content-article">
						<figure class="lucka-content-coverwrap">
							<img class="lucka-content-cover" src="https://internaldesk.com/img/codepen/fika550.jpg" width="550" height="550" alt="Cup of Hot Choclate with Wipped Cream and Mini Marshmallows in different pastel colours">
						</figure>
						<span class="lucka-content-article-nr">25</span>
						<h1>Treat Yourself</h1>
						<p>All work and no play is not a recipe for happiness, but this is pretty close:</p>
						<h2>Red Onion Signature Hot Chocolate<br><span class="subtwo">without Onion</span></h2>
						<p>1 cup of milk (not the light kind)<br>
							2 teaspoons of sugar<br>
							2 teaspoons of cocoa<br>
							4 cl Xanté Cognac &amp; Pear Liqueur<br>
							a pinch of sugar for the cream<br>
							a generous amount of whipped cream<br>
							mini marshmallows</p>

						<p>Add a pinch of sugar to the cream and whisk in a mixing bowl until it has a nice consistency.</p>
						<p>Heat the milk on a stove (no microwave shortcuts), and add sugar and cocoa whilst stirring slowly with a beater to prevent buildup in the bottom of the cauldron. Pour the cognac into a cup, and add the warm chocolate milk.</p>
						<p>Add the whipped cream on top, and sprinkle with mini marshmallows. Optional extra toppings to suit your personal tastes can be added, for example, grated white or dark chocolate, caramel and/or chocolate sauce.</p>

						<a class="lucka-close" title="Close"><figure><img src="https://internaldesk.com/img/codepen/close.svg" alt="Close icon" width="24" height="24"></figure><span class="helper-hide">Close</span></a>
					</article>
				</section><!--lucka-content-->
			</main>

			<footer>
				<figure class="ro-img">
					<img 
						sizes="100vw"
						srcset="https://internaldesk.com/img/codepen/snowglobe480x150.png 480w,
							https://internaldesk.com/img/codepen/snowglobe640x193.png 640w,
							https://internaldesk.com/img/codepen/snowglobe960x290-edited.png 960w"
						alt="Red Onions in snow">
				</figure><!--ro-img-->

				<p><a href="http://redonion.se/" target="_blank" title="Red Onion">www.redonion.se</a></p>
			</footer>
            
          
!
            
              .helper-hide {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;  
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
  }
  
  .relative {
    position: relative;
  }
  
  .wrapper:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .col-50 {
    width: 100%;
   }
  
  @media only screen and (min-width: 40em) {
    .col-50 {
      width: 50%;
      float: left;
    }
  }
  
  p, ul, ol {
    font-size: 16px;
    font-size: 1rem;
    font-family: "HelveticaNeue", "Roboto", Arial, Verdana, "Trebuchet MS", sans-serif;
    font-weight: 400;
  }
  
  html {
    overflow-y: scroll;
  }
  
  body {
    font-size: 16px;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Jacques Francois', serif;
  }  
  
  .rc-main {
    padding: 2em 4% 8.25em 4%;
    border: 0.25em solid rgba(255, 255, 255, 0.58);
    border-bottom: none;
    margin: 1em 1em 0 1em;
    position: relative;
    width: 100%;
    position: relative;
    
  }
  
  @media only screen and (min-width: 60em) {
    .rc-main {
      padding-bottom: 3em;
    }
  }
  
  .rc-main:after, .rc-main:before {
    content: '';
    display: block;
    position: absolute;
  }
  
  .rc-main:after {
    top: -1.25em;
    left: -1.25em;
    width: -webkit-calc(100% + 2.5em);
    width: calc(100% + 2.5em);
    height: -webkit-calc(100% + 1.25em);
    height: calc(100% + 1.25em);
    z-index: -1;
    background: #afdfff;
    background: -moz-linear-gradient(top, #afdfff 0%, #59aeff 100%);
    background: -webkit-linear-gradient(top, #afdfff 0%, #59aeff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#afdfff), to(#59aeff));
    background: linear-gradient(to bottom, #afdfff 0%, #59aeff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afdfff', endColorstr='#59aeff',GradientType=0 );
    background: -webkit-radial-gradient(bottom circle, #59aeff 0%, #afdfff 100%);
    background: radial-gradient(circle at bottom, #59aeff 0%, #afdfff 100%);
  }
  
  .rc-main:before {
    top: 0.75em;
    left: 0.75em;
    width: -webkit-calc(100% - 1.5em);
    width: calc(100% - 1.5em);
    height: -webkit-calc(100% - 0.6875em);
    height: calc(100% - 0.6875em);
    border: 1px solid #FFF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 0;
    border-bottom: none;
  }
  
  .no-flexbox .rc-main {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #AFDFFF;
    width: -webkit-calc(100% - 2em);
    width: calc(100% - 2em);
  }
  
  .no-flexbox .rc-main:after {
    display: table;
    clear: both;
    position: static;
  }
  
  .rc-year {
    color: rgba(255, 255, 255, 0.63);
    font-family: "HelveticaNeue-Bold", "HelveticaNeue", "Roboto", Arial, Verdana, "Trebuchet MS", sans-serif;
    font-weight: 700;
    font-weight: 800;
    font-size: 48px;
    font-size: 3rem;
    letter-spacing: 2px;
    text-align: center;
    margin: auto;
    line-height: 1;
    width: 100%;
  }
  
  @media only screen and (min-width: 48em) {
    .rc-year {
      margin: 0 auto auto auto;
    }
  }
  
  @media only screen and (min-width: 81.25em) {
    .rc-year {
      font-size: 68px;
      font-size: 4.25rem;
    }
  }
  
  .rc-main-head {
    font-family: 'Great Vibes', Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    font-size: 58px;
    font-size: 3.625rem;
    color: #FFFFFF;
    line-height: 1;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    font-weight: normal;
    width: 100%;
  }
  
  @media only screen and (min-width: 48em) {
    .rc-main-head {
      font-size: 100px;
      font-size: 6.25rem;
    }
  }
  
  @media only screen and (min-width: 71.25em) {
    .rc-main-head {
      font-size: 148px;
      font-size: 9.25rem;
    }
  }
  
  footer {
    padding: 1.0625em;
    border: 0.25em solid #AFDFFF;
    border-top: none;
    margin: 0 1em 1em 1em;
    position: relative;
    text-align: center;
    margin: auto 1em 1em 1em;
  }
  
  @media only screen and (min-width: 71.25em) {
    footer {
      text-align: right;
    }
  }
  
  footer:after, footer:before {
    content: '';
    display: block;
    position: absolute;
  }
  
  footer:after {
    top: -1.25em;
    left: -1.25em;
    width: -webkit-calc(100% + 2.5em);
    width: calc(100% + 2.5em);
    height: -webkit-calc(100% + 1.25em);
    height: calc(100% + 1.25em);
    z-index: -1;
  }
  
  footer:before {
    top: 0;
    left: 0.75em;
    width: -webkit-calc(100% - 1.5em);
    width: calc(100% - 1.5em);
    height: -webkit-calc(100% - 0.6875em);
    height: calc(100% - 0.6875em);
    border: 1px solid #AFDFFF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 0;
    border-top: none;
  }
  
  footer a {
    padding-bottom: 3em;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    position: relative;
    bottom: -2em;
    text-decoration: none;
    color: #7a8fa5;
  }
  
  @media only screen and (min-width: 71.25em) {
    footer a {
      padding-bottom: 0;
      bottom: 0.5em;
      right: 0.5em;
    }
  }
  
  footer p {
    margin: 0;
  }
  
  .lucka {
    font-family: 'Spectral SC', serif;
    font-variant: normal;
    border: 1px dashed #FFF;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: 1px 0 2px 1px #7aa6d0;
            box-shadow: 1px 0 2px 1px #7aa6d0;
    border-left: none;
    -webkit-perspective: 1200px;
            perspective: 1200px;
    position: relative;
    min-height: 6.25em;
    float: left;
    margin: 0.5em;
    width: -webkit-calc(25% - 1em);
    width: calc(25% - 1em);
    min-height: 8.125em;
  }
  
  .lucka-front {
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition-duration: 1.3333s;
            transition-duration: 1.3333s;
    z-index: 2;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .lucka-nr {
    text-align: center;
    color: #FFF;
    font-size: 28px;
    font-size: 1.75rem;
    display: block;
    margin: auto;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  @media only screen and (min-width: 30em) {
    .lucka-nr {
      font-size: 48px;
      font-size: 3rem;
    }
  }
  
  .lucka-front {
    background-color: #97d1ff;
  }
  
  .lucka:hover, .lucka-open {
    z-index: 1;
  }
  
  .lucka:hover .lucka-front,
  .lucka-open .lucka-front {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  
  .lucka:hover .lucka-bottom img,
  .lucka-open .lucka-bottom img {
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
  }
  
  .lucka-inside {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1861a5;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    color: #FFF;
    text-align: center;
  }
  
  .lucka-inside p {
    display: none;
  }
  
  .lucka-bottom {
    margin: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    background-color: #425f7b;
  }
  
  .lucka-bottom img {
    margin: 0;
    width: 100%;
    cursor: pointer;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    -webkit-transition: -webkit-filter 0.66667s 0.3333s;
    transition: -webkit-filter 0.66667s 0.3333s;
    transition: filter 0.66667s 0.3333s;
    transition: filter 0.66667s 0.3333s, -webkit-filter 0.66667s 0.3333s;
    height: auto;
    overflow: hidden;
    display: block;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
    position: relative;
    top: 50%;
    left: 50%;
  }
  
  .lucka-bottom:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    -webkit-box-shadow: inset 0 0 1em 0.25em #100f2d;
            box-shadow: inset 0 0 1em 0.25em #100f2d;
    z-index: 1;
  }
  
  .lucka-content {
    display: none;
  }
  
  .lucka-content-open {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
  }
  
  .lucka-content-open:before {
    content: '';
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 0.75);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
  }
  
  .lucka-content-article {
    max-width: 40em;
    margin: auto;
    border: 0.5em solid #AFC0D1;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 2em;
    background-color: #FFF;
    z-index: 1;
    position: relative;
  }
  
  .lucka-content-article:after {
    content: '';
    width: 100%;
    width: -webkit-calc(100% - 1em);
    width: calc(100% - 1em);
    height: 100%;
    height: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    padding: 0.5em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    border: 1px solid #AFC0D1;
    position: absolute;
    top: 0;
    top: -webkit-calc(1em - 0.5em);
    top: calc(1em - 0.5em);
    left: 0;
    left: -webkit-calc(1em - 0.5em);
    left: calc(1em - 0.5em);
    z-index: -1;
  }
  
  .lucka-content-article h1 {
    text-align: center;
    font-weight: 400;
    font-family: 'Great Vibes', cursive;
    color: #002c56;
    font-size: 48px;
    font-size: 3rem;
    margin: 0 auto;
  }
  
  @media only screen and (min-width: 48em) {
    .lucka-content-article h1 {
      font-size: 48px; /*64px;*/
      font-size: 3rem; /*3rem*/
    }
  }
  
  .lucka-content-article p, .lucka-content-article ol, .lucka-content-article ul {
    font-size: 16px;
    font-size: 1rem;
    font-family: 'Jacques Francois', serif;
    color: #253a4e;
    line-height: 1.4444;
  }
  
  .lucka-content-article ol, .lucka-content-article ul {
    padding: 0;
    margin: 1em auto;
    list-style-type: none;
  }
  
  .lucka-content-article ol li, .lucka-content-article ul li {
    padding: 0 0 0 1.5em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    margin: 0 0 0.75em 0;
  }
  
  .lucka-content-article ol li:before, .lucka-content-article ul li:before {
    content: '\25CF';
    display: inline-block;
    margin-right: -0.66667em;
    position: relative;
    left: -1.5em;
  }
  
  .lucka-content-article p.smallprint {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  .lucka-content-article h2 {
    font-size: 14px;
    font-size: 0.875rem;
    margin: 1.5em 0 -0.5em 0;
    text-align: center;
    text-transform: uppercase;
    color: #7a8fa5;
    font-weight: normal;
    line-height: 1.75;
  }
  
  .lucka-content-article h2 .subtwo {
    font-style: italic;
    text-transform: none;
  }
  
  .lucka-content-article h1 + h2 {
    margin-top: 1.5em;
  }
  
  .lucka-content-article a {
    color: #b51b7d;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b51b7d), to(#b51b7d));
    background-image: -webkit-linear-gradient(#b51b7d, #b51b7d);
    background-image: linear-gradient(#b51b7d, #b51b7d);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center bottom 6%;
    text-shadow: 3px 0 #fff, 2px 0 #FFF, 1px 0 #FFF, -1px 0 #FFF, -2px 0 #FFF, -3px 0 #FFF;
  }
  
  .lucka-content-article figure {
    margin: 0;
    padding: 0;
  }
  
  .lucka-content-article figure.lucka-content-coverwrap {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20% 0;
    position: relative;
    width: 100%;
    width: -webkit-calc(100% + 3em);
    width: calc(100% + 3em);
    top: -webkit-calc(-2em + 0.5em);
    top: calc(-2em + 0.5em);
    left: -webkit-calc(-2em + 0.5em);
    left: calc(-2em + 0.5em);
    overflow: hidden;
  }
  
  .lucka-content-article .lucka-content-cover,
  .lucka-content-article .lucka-content-cover-center {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    position: absolute;
    overflow: hidden;
    top: -12%;
  }
  
  .lucka-content-article .lucka-content-cover-center {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .lucka-content-article .twitter-tweet.twitter-tweet-rendered {
    margin-left: auto;
    margin-right: auto;
  }
    
  @media (-webkit-min-device-pixel-ratio: 1), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .lucka-content-article p,
    .lucka-content-article ol,
    .lucka-content-article ul {
      font-size: 18px;
      font-size: 1.125rem;
    }
    
    .lucka-content-article p.smallprint {
      font-size: 15px;
      font-size: 0.9375rem;
    }
    
    .lucka-content-article h2 {
      font-size: 16px;
      font-size: 1rem;
    }
  }
  
  .lucka-content-article a.lucka-close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    margin: 0;
    display: inline-block;
    background-image: none;
    text-shadow: none;
    cursor: pointer;
    background-color: white;
    padding: 0.5em;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
  }
  
  .lucka-content-article-nr {
    display: block;
    margin: 0 auto;
    background-color: #AFC0D1;
    color: #FFF;
    border-radius: 50%;
    font-family: 'Spectral SC', serif;
    font-variant: normal;
    
    font-size: 24px;
    font-size: 1.5rem;
    width: 2em;
    height: 2em;
    line-height: 2.166667;
    margin: 0 auto 1em;
    text-align: center;
    margin-top: -2em;
    position: relative;
  }
  
  .lucka-content-article-topsc {
    font-family: 'Spectral SC', serif;
    font-variant: normal;
    font-size: 18px;
    font-size: 1.125rem;
    display: block;
    margin: 2em auto 0.88889em;
    color: #7a8fa5;
  }
  
  .ro-img {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    max-width: 30em;
    bottom: 4em;
    position: absolute;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 50%;
    
  }
  
  .ro-img img {
    width: 100%;
    height: auto;
  }
  
  @media only screen and (min-width: 71.25em) {
    .ro-img {
      max-width: 40em;
      bottom: 9px;
    }
  }
  
  .ul-50 li {
    width: 50%;
    float: left;
  }
  
  @supports (object-fit: cover) {
    .lucka-bottom img {
      object-fit: cover;
      object-position: 50% 50%;
      height: 100%;
    }
  }
  
  @supports (display: flex) or (display: -moz-flex) or (display: -ms-flex) or (display: -o-flex) {      
    body {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        min-height: 100vh;
    }
    
    .lucka {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      float: none;
    }
    
    .lucka-nr {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    
    .lucka-content-open {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    
    .wrapper-main {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 auto;
          -ms-flex: 1 0 auto;
              flex: 1 0 auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    }
    
    .rc-main {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    }
    
    .ro-img {
      z-index: -1;
    }
    
    .lucka-inside {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    
    .lucka-inside p {
      display: block;
      margin: auto;
      color: rgba(255, 255, 255, 0.64);
      font-size: 28px;
      font-size: 1.75rem;
      font-family: 'Spectral SC', serif;
      font-variant: normal;
    }
    
    .lucka-inside-content {
      font-size: 11px;
      font-size: 0.6875rem;
      line-height: 1.5;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      padding: 0 10%;
    }
    
    .lucka-inside-content .number {
      display: inline-block;
      background-color: rgba(255, 255, 255, 0.64);
      width: 2.2857em;
      height: 2.2857em;
      color: #1861a5;
      padding: 0.3571em 0 0 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      border-radius: 1.142857em;
      border-radius: 50%;
      text-align: center;
      font-size: 18px;
      font-size: 1.125rem;
    }
    
    .lucka-inside-content .content {
      display: none;
    }
    
    .lucka-inside-content .rc-year {
      line-height: 1;
    }
    
    @media only screen and (min-width: 30em) {
      .lucka-inside p {
        font-size: 48px;
        font-size: 3rem;
      }
      
      .lucka-inside p.lucka-inside-content {
        font-size: 11px;
        font-size: 0.6875rem;
      }
    }

    @media only screen and (min-width: 100em) {
      .lucka-inside p.lucka-inside-content {
        font-size: 14px;
        font-size: 0.875rem;
      }
      
      .lucka-inside-content .content {
        display: block;
      }
      
      .lucka-inside-content .number {
        margin-bottom: -2.2857em;
        position: absolute;
        -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
        left: 50%;
        top: 20%;
        font-size: 14px;
        font-size: 0.875rem;
      }
    }
  }
  
  @supports (display: grid) {
    .rc-main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 1em;
      grid-template-rows: repeat(4, auto);
      grid-row-gap: 1em;
    }
    
    .rc-year {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      width: auto;
      line-height: 0.5;
    }
    
    .rc-main-head {
      grid-row: 3 / 4;
      grid-column: 1 / -1;
      width: auto;
    }
    
    .lucka {
      margin: 0;
      width: auto;
      /*min-height: auto;*/
    }
    
    @media only screen and (min-width: 48em) {
      .rc-main {
        grid-template-columns: repeat(6, 1fr);
      }
      
      .rc-year {
        grid-column: 3 / 5;
      }
      
      .rc-main-head {
        grid-column: 2 / 6;
      }
      
      .lucka-4 {
        grid-column: 3 / 5;
        position: absolute;
        width: 100%;
        -webkit-align-self: self-end;
            -ms-flex-item-align: self-end;
                align-self: self-end;
        bottom: 0;
        grid-row: 1 / 2;
        height: 56%;
      }
      
      .lucka.lucka-4 {
        min-height: auto;
      }
    }
    
    @media only screen and (min-width: 60em) {
      .rc-main {
        grid-template-columns: repeat(8, 1fr);
        grid-column-gap: 2em;
        grid-row-gap: 2em;
      }
      
      .rc-main-head {
        grid-column: 3 / 7;
      }
      
      .rc-year, .lucka-4 {
        grid-column: 4 / 6;
      }
      
      .lucka-23 {
        grid-column: 6 / 7;
      }
      
      .lucka-24 {
        grid-column: 7 / 8;
      }
      
      .lucka-25 {
        grid-column: 8 / 9;
      }
    }
    
    @media only screen and (min-width: 71.25em) {
      
      .rc-main-head {
        grid-row: 3 / 5;
      }
      
      .lucka-23, .lucka-24 {
        grid-column: auto;
      }
      
      
      .lucka-25 {
        grid-column: 8 / 9;
      }
      
      .rc-year {
        line-height: 0.5;
      }
    }
    @media only screen and (min-width: 81.25em) {
      
      .rc-main-head {
        grid-row: 3 / 4;
      }
      
      .lucka-23 {
        grid-column: 6 / 7;
      }
      
      .lucka-24 {
        grid-column: 7 / 8;
      }
      
      .lucka-25 {
        grid-column: 8 / 9;
      }
      
      .rc-year {
        line-height: 1;
      }
    }
  }
  
            
          
!
            
              'use strict';

$(document).ready(function () {

    //polyfill, filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    if (!Array.prototype.filter)
    Array.prototype.filter = function(func, thisArg) {
      'use strict';
      if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
          throw new TypeError();
      
      var len = this.length >>> 0,
          res = new Array(len), // preallocate array
          t = this, c = 0, i = -1;
      if (thisArg === undefined)
        while (++i !== len)
          // checks to see if the key was set
          if (i in this)
            if (func(t[i], i, t))
              res[c++] = t[i];
      else
        while (++i !== len)
          // checks to see if the key was set
          if (i in this)
            if (func.call(thisArg, t[i], i, t))
              res[c++] = t[i];
      
      res.length = c; // shrink down array to proper size
      return res;
    };

    // Check for IE10
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);

    if ($('.no-svg').length > 0) {
        $('img[src$=".svg"]').each(function (index, element) {
            element.src = element.src.replace('.svg', '.png');
        });
    }

    $('.lucka').on('click', function () {
        var thisis = $(this);
        var dataLucka = thisis.data("lucka");
        thisis.addClass('lucka-open');
        var nodesArray = [].slice.call(document.querySelectorAll('.lucka-content'));

        var mymatch = nodesArray.filter(function (divnode) {
            var contentLucka = divnode.getAttribute("data-lucka");

            if (dataLucka === contentLucka) {
                $(divnode).addClass('lucka-content-open');
            }
        });
    });

    $('.lucka-close').on('click', function () {
        $(this).closest('.lucka-content').removeClass('lucka-content-open');
        var luckaContent = $(this).closest('.lucka-content');
        var contentLucka = luckaContent['0'].getAttribute("data-lucka");
        var nodesArray = [].slice.call(document.querySelectorAll('.lucka'));

        var mymatch = nodesArray.filter(function (divnode) {
            var dataLucka = divnode.getAttribute("data-lucka");            

            if (dataLucka === contentLucka) {
                $(divnode).removeClass('lucka-open');
            }
        });
    });

    $(document).on('click', function(event) {
        if( $('.lucka-content-open').length ) {
            if(!$(event.target).closest('.lucka-content-article').length
            && !$(event.target).closest('.lucka-close').length ) {

                $(event.target).closest('.lucka-content').removeClass('lucka-content-open');
                var luckaContent = $(event.target).closest('.lucka-content').context;
                var contentLucka = luckaContent.getAttribute("data-lucka");
                var nodesArray = [].slice.call(document.querySelectorAll('.lucka'));
            
                var mymatch = nodesArray.filter(function(divnode) {
                    var dataLucka = divnode.getAttribute("data-lucka");
        
                    if (dataLucka === contentLucka) {
                        $(divnode).removeClass('lucka-open');
                    }
                });
            }
        }
    });
});
            
          
!
999px
Loading ..................

Console