Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <!-- svg code -->
<svg style="display: none;">
	<g id="logo-svg">
		<g id="light">
			<path id="on-off" style="fill:none;" d="M147.554,8.535c-0.224,0-0.445,0.014-0.671,0.016c-0.224-0.002-0.446-0.016-0.671-0.016
				c-33.582,0-60.803,26.096-60.803,58.287c0,20.183,6.758,37.54,24.279,51.003c6.01,4.622,4.754,32.108,6.714,33.772
				c1.304,1.11,59.53,1.235,60.965,0c1.947-1.673,0.7-29.15,6.713-33.772c17.518-13.463,24.275-30.82,24.275-51.003
				C208.355,34.631,181.134,8.535,147.554,8.535z"/>
			<g id="line">
				<path style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" d="M148.259,161.304h25.862
					 M130.785,161.304h8.807 M152.033,174.98h19.711 M143.176,174.98h1.169 M191.496,49.184c-7.661-16.767-24.581-28.417-44.22-28.417
					 M195.635,64.575c-0.119-1.223-0.284-2.434-0.492-3.628"/>
			</g>
			<g id="base">
				<path style="fill:none;stroke:#FFFFFF;stroke-miterlimit:10;" d="M162.031,190.962h-30.31c-2.595,0-4.699-3.387-4.699-7.564
					h39.709C166.731,187.575,164.627,190.962,162.031,190.962z M177.614,174.984c0-2.598-1.953-4.7-4.359-4.7H120.5
					c-2.408,0-4.359,2.103-4.359,4.7c0,2.594,1.951,4.696,4.359,4.696h52.754C175.661,179.681,177.614,177.578,177.614,174.984z
					 M180.011,161.306c0-2.597-2.105-4.7-4.699-4.7h-56.869c-2.596,0-4.699,2.104-4.699,4.7c0,2.595,2.103,4.697,4.699,4.697h56.869
					C177.906,166.003,180.011,163.9,180.011,161.306z M147.554,8.535c-0.224,0-0.445,0.014-0.671,0.016
					c-0.224-0.002-0.446-0.016-0.671-0.016c-33.582,0-60.803,26.096-60.803,58.287c0,20.183,6.758,37.54,24.279,51.003
					c6.01,4.622,4.754,32.108,6.714,33.772c1.304,1.11,59.53,1.235,60.965,0c1.947-1.673,0.7-29.15,6.713-33.772
					c17.518-13.463,24.275-30.82,24.275-51.003C208.355,34.631,181.134,8.535,147.554,8.535z"/>
			</g>
		</g>
		<g id="trebol">
			<path style="fill:#95B634;" d="M143.207,148.052c0.33-1.933,3.691-12.021,4.037-39.265c0.272-21.457-3.261-33.398-2.919-34.598
				c1.362,1.152,5.262,12.211,6.332,37.182c1.017,23.727-1.47,35.389-1.819,37.064C148.003,152.44,142.73,150.846,143.207,148.052z
				 M117.252,85.896c10.43-8.502,24.253-11.782,24.253-11.782s3.895-1.041-2.273-3.208c-8.87-3.115-20.47-2.215-29.503,3.426
				c-9.031,5.637-7.865,20.056-1.884,19.262c1.5,2.051-2.873,9.02,10.01,10.046c10.437,0.833,26.5-20.884,25.099-29.135
				C142.954,74.506,130.826,76.976,117.252,85.896z M145.928,74.162c1.428,7.458,25.88,24.315,35.594,20.934
				c11.995-4.175,5.473-9.765,6.223-12.102c5.992-0.721,2.28-14.818-8.255-17.98c-10.539-3.163-21.951-1.153-29.401,4.027
				c-5.182,3.603-4.078,3.931-4.078,3.931s17.311-0.578,30.146,4.98C160.172,72.771,145.928,74.162,145.928,74.162z M145.4,71.164
				c8.437-2.869,17.081-20.129,9.508-28.588c-7.102-7.931-13.237-3.349-14.272-1.412c-3.779-3.534-15.915,1.992-16.095,10.107
				c-0.182,8.117,3.479,13.76,10.982,17.704c5.219,2.744,8.243,2.446,8.243,2.446s3.396-8.832-3.45-21.147
				C146.847,58.316,145.4,71.164,145.4,71.164z"/>
		</g>
		<g id="text">
			<path style="fill:#FFFFFF;" d="M7.957,140.303h14.137v24.908h10.088c1.326,0,2.315-0.227,2.966-0.681
				c0.651-0.454,0.977-1.135,0.977-2.043c0-1.86-1.126-3.795-3.375-5.806c-2.25-2.011-5.683-4.151-10.301-6.422
				c4.073-2.4,6.998-4.351,8.773-5.854c1.777-1.502,2.665-2.762,2.665-3.778c0-0.799-0.326-1.389-0.977-1.768
				c-0.651-0.378-1.688-0.567-3.108-0.567H5.435L8.703,127.2h23.8c5.682,0,9.963,0.92,12.841,2.757
				c2.877,1.838,4.316,4.573,4.316,8.206c0,2.161-0.557,4.173-1.67,6.031c-1.114,1.86-2.865,3.687-5.256,5.481
				c3.055,1.946,5.386,4.142,6.997,6.584c1.61,2.443,2.416,4.983,2.416,7.622c0,2.292-0.509,4.308-1.528,6.049
				c-1.017,1.74-2.521,3.15-4.511,4.231c-1.492,0.822-3.434,1.406-5.826,1.752s-6.228,0.519-11.508,0.519H7.957V140.303z
				 M81.096,176.433c-3.647,0-6.962-0.491-9.946-1.476c-2.984-0.984-5.565-2.438-7.744-4.362c-2.416-2.141-4.269-4.671-5.559-7.59
				c-1.291-2.918-1.937-6.032-1.937-9.34c0-5.06,1.511-8.752,4.53-11.075c3.019-2.324,7.797-3.486,14.332-3.486
				c5.992,0,10.313,0.799,12.966,2.4c2.651,1.6,3.978,4.183,3.978,7.75c0,3.093-1.167,6.011-3.5,8.758
				c-2.333,2.745-5.867,5.362-10.603,7.848c0.64,0.26,1.355,0.449,2.149,0.568c0.793,0.119,1.723,0.178,2.789,0.178h7.032
				l-2.984,9.827H81.096z M69.16,159.017c3.007-1.427,5.322-2.859,6.945-4.297c1.622-1.438,2.434-2.773,2.434-4.006
				c0-0.735-0.355-1.302-1.066-1.702s-1.717-0.601-3.019-0.601c-1.942,0-3.481,0.558-4.618,1.671
				c-1.138,1.113-1.705,2.632-1.705,4.556c0,0.735,0.082,1.454,0.248,2.157C68.544,157.498,68.805,158.238,69.16,159.017z
				 M237.485,176.433c-5.731,0-10.64-0.604-14.725-1.815c-4.084-1.212-7.572-3.081-10.461-5.611c-3.434-3.049-6.05-6.487-7.85-10.313
				c-1.8-3.827-2.7-7.881-2.7-12.162c0-3.287,0.58-6.212,1.74-8.773c1.161-2.562,2.865-4.708,5.115-6.437
				c1.919-1.449,4.192-2.498,6.82-3.147c2.63-0.648,6.099-0.973,10.408-0.973h17.121l3.41,11.254h-18.72
				c-4.12,0-7.063,0.703-8.827,2.108c-1.765,1.405-2.646,3.729-2.646,6.973c0,4.8,1.534,8.789,4.6,11.968
				c3.067,3.178,7.158,5.017,12.273,5.514v-11.352h-5.755v-10.897h19.716v33.665H237.485z M255.956,139.492h13.177v1.881
				c0.854-0.756,1.913-1.324,3.18-1.703c1.267-0.377,2.729-0.566,4.388-0.566h0.781v10.281c-1.942,0.043-3.606,0.377-4.991,1.005
				c-1.385,0.627-2.504,1.557-3.357,2.789v23.254h-13.177V139.492z M306.36,176.433c-3.647,0-6.963-0.491-9.946-1.476
				s-5.565-2.438-7.743-4.362c-2.417-2.141-4.269-4.671-5.559-7.59c-1.292-2.918-1.937-6.032-1.937-9.34
				c0-5.06,1.51-8.752,4.528-11.075c3.02-2.324,7.798-3.486,14.333-3.486c5.992,0,10.313,0.799,12.967,2.4
				c2.651,1.6,3.978,4.183,3.978,7.75c0,3.093-1.167,6.011-3.499,8.758c-2.333,2.745-5.867,5.362-10.604,7.848
				c0.64,0.26,1.356,0.449,2.148,0.568c0.794,0.119,1.724,0.178,2.79,0.178h7.032l-2.984,9.827H306.36z M294.426,159.017
				c3.006-1.427,5.321-2.859,6.943-4.297s2.434-2.773,2.434-4.006c0-0.735-0.354-1.302-1.065-1.702s-1.718-0.601-3.019-0.601
				c-1.942,0-3.481,0.558-4.617,1.671c-1.139,1.113-1.706,2.632-1.706,4.556c0,0.735,0.082,1.454,0.249,2.157
				C293.809,157.498,294.069,158.238,294.426,159.017z M344.759,176.433c-3.647,0-6.963-0.491-9.946-1.476s-5.564-2.438-7.742-4.362
				c-2.417-2.141-4.27-4.671-5.56-7.59c-1.291-2.918-1.938-6.032-1.938-9.34c0-5.06,1.511-8.752,4.53-11.075
				c3.019-2.324,7.797-3.486,14.332-3.486c5.992,0,10.314,0.799,12.967,2.4c2.65,1.6,3.978,4.183,3.978,7.75
				c0,3.093-1.167,6.011-3.499,8.758c-2.333,2.745-5.867,5.362-10.604,7.848c0.64,0.26,1.355,0.449,2.148,0.568
				c0.794,0.119,1.724,0.178,2.79,0.178h7.032l-2.984,9.827H344.759z M332.823,159.017c3.008-1.427,5.322-2.859,6.944-4.297
				s2.434-2.773,2.434-4.006c0-0.735-0.354-1.302-1.065-1.702s-1.717-0.601-3.019-0.601c-1.942,0-3.481,0.558-4.618,1.671
				c-1.138,1.113-1.705,2.632-1.705,4.556c0,0.735,0.083,1.454,0.248,2.157S332.468,158.238,332.823,159.017z M360.389,139.492h18.755
				c5.707,0,9.69,1.061,11.953,3.179c2.261,2.119,3.392,5.87,3.392,11.254v22.508h-12.93v-20.789c0-2.832-0.355-4.557-1.064-5.173
				c-0.711-0.616-2.039-0.924-3.979-0.924h-3.198v26.886h-12.929V139.492z"/>
		</g>
	</g>
	<!-- symbols -->
	<symbol  id="clouds-back" viewBox="-360.318 -89.013 720.637 178.025">
		<path style="fill:#EDD2B6;" d="M-116.231-54.054c0-19.309-16.434-34.959-36.707-34.959h-170.675v0.044
			c-20.425,0.916-36.706,17.76-36.706,38.41c0,21.238,17.217,38.455,38.456,38.455c7.508,0,14.511-2.162,20.431-5.882
			c2.832,32.403,30.018,57.828,63.158,57.828c33.516,0,60.941-26.007,63.241-58.938h22.096
			C-132.665-19.096-116.231-34.748-116.231-54.054z M184.409,21.342c0-13.913,11.844-25.193,26.454-25.193h123.002v0.032
			c14.72,0.659,26.453,12.799,26.453,27.681c0,15.307-12.407,27.714-27.713,27.714c-5.411,0-10.459-1.557-14.726-4.24
			c-2.04,23.353-21.632,41.676-45.517,41.676c-24.155,0-43.919-18.744-45.576-42.477h-15.924
			C196.253,46.536,184.409,35.257,184.409,21.342z"/>
	</symbol>
	<symbol  id="clouds-front" viewBox="-194.985 -131.474 389.969 262.948">
		<path style="fill:#EDD2B6;" d="M194.984-110.297c0,11.661-9.453,21.113-21.114,21.113v0.014h-6.325
			c0.29,2.146,0.451,4.332,0.451,6.557c0,26.984-21.875,48.858-48.859,48.858c-26.985,0-48.86-21.875-48.86-48.858
			c0-1.565,0.081-3.111,0.227-4.638c-4.287,12.737-16.316,21.915-30.498,21.915c-14.8,0-27.259-9.996-31.013-23.601
			c-4.331,3.928-10.079,6.324-16.388,6.324c-13.475,0-24.398-10.924-24.398-24.399s10.924-24.399,24.398-24.399H116.66
			c0.82-0.04,1.646-0.062,2.477-0.062s1.655,0.022,2.476,0.062h52.258l0,0C185.531-131.412,194.984-121.959,194.984-110.297z
			 M-181.384,68.57L-181.384,68.57h33.66c0.529-0.026,1.061-0.041,1.595-0.041s1.067,0.015,1.595,0.041h79.907
			c8.68,0,15.717,7.036,15.717,15.715c0,8.68-7.037,15.717-15.717,15.717c-4.063,0-7.766-1.542-10.557-4.073
			c-2.417,8.764-10.441,15.202-19.975,15.202c-9.136,0-16.883-5.912-19.645-14.117c0.093,0.984,0.145,1.979,0.145,2.988
			c0,17.381-14.09,31.471-31.471,31.471s-31.472-14.09-31.472-31.471c0-1.433,0.104-2.842,0.29-4.224h-4.073V95.77
			c-7.512,0-13.601-6.088-13.601-13.6S-188.896,68.57-181.384,68.57z"/>
	</symbol>
	<symbol  id="mounts" viewBox="-268.295 -157.145 536.59 314.289">
		<path style="fill:#833137;" d="M-28.28-157.145h-120.223h-119.792l119.792,257.61l0.214,0.461L-28.28-157.145z M122.144,157.144
			l-0.26-0.561L-24.004-157.145h145.888h146.411L122.144,157.144z"/>
		<path style="fill:#9F4544;" d="M-28.28-157.145h-120.223v257.61l0.214,0.461L-28.28-157.145z M122.144,157.144l-0.26-0.561
			v-313.728h146.411L122.144,157.144z"/>
		<path style="fill:#9A5049;" d="M-99.106-4.837l-27.856,13.098l-21.325-25.494l-0.215,0.215l-25.418,25.279l-24.408-14.945
			l49.826,107.15l0.214,0.461L-99.106-4.837z M122.144,157.144l-0.26-0.561L61.203,26.091l29.725,18.201l30.956-30.787l0.262-0.26
			l25.97,31.046l33.925-15.951L122.144,157.144z"/>
		<path style="fill:#AF6F56;" d="M-99.106-4.837l-27.856,13.098l-21.325-25.494l-0.215,0.215v117.484l0.214,0.461L-99.106-4.837z
			 M122.144,157.144l-0.26-0.561V13.505l0.262-0.26l25.97,31.046l33.925-15.951L122.144,157.144z"/>
	</symbol>
	<symbol  id="small-hills" viewBox="-280.679 -48.945 561.357 97.89">
		<path style="fill:#230000;" d="M-117.896-48.945h-81.392h-81.391C-261.541-19.616-246.262,3.768-245.71,4.5
			c10.59,14.089,27.441,23.203,46.422,23.203c18.981,0,35.833-9.114,46.423-23.203C-152.313,3.768-137.034-19.616-117.896-48.945z
			 M245.71,4.5c-10.59,14.089-27.441,23.203-46.423,23.203S163.455,18.589,152.864,4.5c-0.551-0.732-15.832-24.116-34.969-53.445
			h81.392h81.392C261.542-19.616,246.261,3.768,245.71,4.5z M37.205,25.743C26.614,39.831,9.764,48.945-9.218,48.945
			S-45.05,39.831-55.64,25.743c-0.68-0.904-23.747-36.232-48.826-74.688h95.248h95.249C60.949-10.489,37.885,24.839,37.205,25.743z"
			/>
		<path style="fill:#3F0B14;" d="M-199.288-48.945v76.648c18.981,0,35.833-9.114,46.423-23.203
			c0.552-0.732,15.831-24.116,34.969-53.445H-199.288z M280.679-48.945C261.542-19.616,246.261,3.768,245.71,4.5
			c-10.59,14.089-27.441,23.203-46.423,23.203v-76.648H280.679z M86.031-48.945C60.949-10.489,37.885,24.839,37.205,25.743
			C26.614,39.831,9.764,48.945-9.218,48.945v-97.891H86.031z"/>
	</symbol>
	<symbol  id="sun" viewBox="-228.044 -190.563 456.088 381.126">
		<path style="fill:#E1B284;" d="M-163.23-37.481c0,90.15,73.081,163.23,163.23,163.23c90.15,0,163.23-73.081,163.23-163.23
			c0-70.185-44.301-130.021-106.464-153.082h112.258c36.675,40.47,59.02,94.165,59.02,153.081
			c0,125.947-102.097,228.045-228.043,228.045c-125.945,0-228.045-102.098-228.045-228.045c0-58.916,22.346-112.611,59.021-153.081
			h112.258C-118.929-167.502-163.23-107.666-163.23-37.481z"/>
		<path style="fill:#DAA071;" d="M163.23-37.481c0,90.15-73.08,163.23-163.23,163.23c-90.149,0-163.23-73.081-163.23-163.23
			c0-70.185,44.301-130.021,106.464-153.082H56.767C118.93-167.502,163.23-107.666,163.23-37.481z M0-132.868
			c-52.68,0-95.386,42.708-95.386,95.387c0,52.681,42.706,95.386,95.386,95.386c52.68,0,95.385-42.705,95.385-95.386
			C95.385-90.16,52.68-132.868,0-132.868z"/>
		<path style="fill:#CD7746;" d="M0,57.904c-52.68,0-95.386-42.705-95.386-95.386c0-52.679,42.706-95.387,95.386-95.387
			c52.68,0,95.385,42.708,95.385,95.387C95.385,15.199,52.68,57.904,0,57.904z"/>
	</symbol>
	<symbol  id="trees" viewBox="-11.267 -16.899 22.532 33.798">
		<polygon style="fill:#772A29;" points="11.266,-9.993 6.415,-2.135 9.388,-2.135 4.894,5.148 7.251,5.148 0,16.898 -7.252,5.148 
			-4.895,5.148 -9.388,-2.135 -6.415,-2.135 -11.267,-9.993 -2.168,-9.993 -2.168,-16.899 2.167,-16.899 2.167,-9.993 	"/>
		<polygon style="fill:#BA6C3E;" points="6.415,-2.135 9.388,-2.135 4.894,5.148 7.251,5.148 0,16.898 0,-9.993 11.266,-9.993 	"/>
	</symbol>
</svg>

<!-- main body -->
<div class="site-header__top-menu">
		<div class="customized-select">
			<span class="[ select__placeholder ]  [ js-select ]">Background</span>
				<ul class="select__list">
					<li class="[ select__list__item ]  is-active  [ js-color ]" data-highlight="one" data-color="color--pink">pink light</li>
					<li class="[ select__list__item ]  [ js-color ]" data-highlight="two" data-color="color--green">green light</li>
					<li class="[ select__list__item ]  [ js-color ]" data-highlight="three" data-color="color--yellow">green yellow</li>
				</ul>
			<input type="hidden" />
		</div>
	</div>
<div class="site-header">
	<div class="site-header__logo">
		<svg class="svg-scalable" version="1.1" id="svg-animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200" style="enable-background:new 0 0 400 200;" xml:space="preserve">
			<use class="base" xlink:href="#base" x="0" y="0"/>
			<use class="on-off" xlink:href="#on-off" x="0" y="0"/>
			<use class="line" xlink:href="#line" x="0" y="0"/>
			<use class="trebol" xlink:href="#trebol" x="0" y="0"/>
			<use class="text" xlink:href="#text" x="0" y="0"/>
		</svg>
	</div>
	<div class="menu-bar-mobile">
		<div class="[ nav-icon ]  [ js-menu-nav ]">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="menu-bar-mobile__logo">
			<svg class="svg-scalable" id="svg-animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
				<use class="base" xlink:href="#base" x="-46" y="0"/>
				<use class="on-off" xlink:href="#on-off" x="-46" y="0"/>
				<use class="line" xlink:href="#line" x="-46" y="0"/>
				<use class="trebol" xlink:href="#trebol" x="-46" y="0"/>
			</svg>
		</div>
	</div>
	<div class="menu-bar">
		<ul class="[ nav-list ] [ nav-list--hide ]  [ display--row  display--col ]">
				<li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
					<span class="nav-link__text">item1</span>
					<ul class="nav-list__item--subnav">
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
					</ul>
				</li>
				<li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
					<span class="nav-link__text">item2</span>
					<ul class="nav-list__item--subnav">
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
					</ul>
				</li>
				<li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
					<span class="nav-link__text">item3</span>
					<ul class="nav-list__item--subnav">
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item3</span></a></li>
					</ul>
				</li>
				<li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
					<span class="nav-link__text">item4</span>
					<ul class="nav-list__item--subnav">
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item1</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item2</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item3</span></a></li>
						<li class="subnav__item"><a class="nav-links" href="#"><span class="nav-link__text">item4</span></a></li>
					</ul>
				</li>	
				<li class="[ nav-list__item ]  [ border--dark-b  border--light-t ]  [ js-show ]">
					<span class="nav-link__text">codepen</span>
					<ul class="nav-list__item--subnav">
						<li class="subnav__item"><a class="nav-links" href="https://codepen.io/druArt/" target="_blank">
								<span class="nav-link__text">profile</span>
							</a>
						</li>
						<li class="subnav__item"><a class="nav-links" href="https://codepen.io/druArt/pen/VbVjxx" target="_blank">
								<span class="nav-link__text">simple-bar</span>
							</a>
						</li>
						<li class="subnav__item"><a class="nav-links" href="http://codepen.io/druArt/pen/vxyKdY" target="_blank">
								<span class="nav-link__text">slide-bar</span>
							</a>
						</li>
						<li class="subnav__item"><a class="nav-links" href=""><span class="nav-link__text">item4</span></a></li>
						<li class="subnav__item"><a class="nav-links" href=""><span class="nav-link__text">item5</span></a></li>	
					</ul>
				</li>
				<li class="[ nav-list__item ]  [ align-to--right ]  [ border--dark-b  border--light-t ]">
					<span class="nav-link__text">login</span>
				</li>
			</ul>
	</div>
</div>

<section class="section">
	<div class="section__header">
		<h1 class="section__header__title  font-effect-3d-float">Climate</h1>
		<h1 class="section__header__title  font-effect-3d-float"><span class="first-letter">C</span><span>h</span><span>a</span><span>n</span><span>g</span><span>e</span></h1>	
	</div>
	<div class="section__body">
		<div class="wrap-planet">
			<div class="planet">
				<div class="planet-base">
					<div class="planet-base__shadow"></div>
				</div>
				<div class="spots">
					<span class="spot spot--one"></span>
					<span class="spot spot--two"></span>
					<span class="spot spot--three"></span>
					<span class="spot spot--four"></span>
					<span class="spot spot--five"></span>
					<span class="spot spot--six"></span>
					<span class="spot spot--seven"></span>
					<span class="spot spot--eigth"></span>
				</div>
				<div class="card  card-flip">
					<div class="card__content  card__content--flip">
						<div class="card-flip__panel  card-flip__panel--front">
							<h1>don't make the planet looks like a Cheese! put some green on.</h1>
						</div>
						<div class="card-flip__panel  card-flip__panel--back">
							<h1>it's better!</h1>
							<div class="wrap-tree">
								<div class="tree">
								  <div class="tree__stamb"></div>
								  <div class="tree__branch tree__branch--1"></div>
								  <div class="tree__branch tree__branch--2"></div>
								  <div class="tree__branch tree__branch--3"></div>
								  <div class="tree__branch tree__branch--4"></div>
								</div>
								<div class="tree">
								  <div class="tree__stamb"></div>
								  <div class="tree__branch tree__branch--1"></div>
								  <div class="tree__branch tree__branch--2"></div>
								  <div class="tree__branch tree__branch--3"></div>
								  <div class="tree__branch tree__branch--4"></div>
								</div>
								<div class="background">
									<svg class="svg-scalable" version="1.1" id="background-svg-druart.2018" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;"
									 xml:space="preserve">	
										<use xlink:href="#sun"  width="456.088" height="381.126" x="-228.044" y="-190.563" transform="matrix(1.2764 0 0 -1.2764 408.9678 355.8848)" style="overflow:visible;"/>
										<use xlink:href="#clouds-back"  width="720.637" height="178.025" x="-360.318" y="-89.013" transform="matrix(1 0 0 -1 404.79 209.6367)" style="overflow:visible;"/>
										<use xlink:href="#mounts"  width="536.59" height="314.289" x="-268.295" y="-157.145" transform="matrix(1.2764 0 0 -1.2764 401.3838 352.0635)" style="overflow:visible;"/>
										<use xlink:href="#small-hills"  width="561.357" height="97.89" x="-280.679" y="-48.945" transform="matrix(1.2764 0 0 -1.2764 393.7275 490.1719)" style="overflow:visible;"/>
										<line style="fill:none;stroke:#230000;stroke-width:60;stroke-linecap:round;stroke-miterlimit:10;" x1="31.874" y1="568.662" x2="767.897" y2="568.662"/>
										<use xlink:href="#clouds-front"  width="389.969" height="262.948" x="-194.985" y="-131.474" transform="matrix(1.2764 0 0 -1.2764 520.9424 219.7905)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.2764 0 0 -1.2764 640.5947 529.7734)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.448 0 0 -2.448 269.5283 517.6592)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.2962 0 0 -2.2962 426.2119 520.3477)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.8297 0 0 -1.8297 506.4404 520.4082)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(2.7513 0 0 -2.7513 45.2017 525.3652)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.8297 0 0 -1.8297 180.0029 520.4102)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 329.7656 529.7734)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 549.9863 529.7734)" style="overflow:visible;"/>
										<use xlink:href="#trees"  width="22.532" height="33.798" x="-11.267" y="-16.899" transform="matrix(1.1788 0 0 -1.1788 690.7686 534.0117)" style="overflow:visible;"/>
									</svg>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
!

CSS 

              
                /**
 *color
 */
$site-header-background-color: #222222;
$select-palceholder-background-color: #fff;
$select-palceholder-hover-background-color: #fdfdfd;
$body-background-color: #af425c;
$menu-bar-mobile-logo-background-color: #333;
$header-top-menu-background-color: #fff;
/**
 *@keyframes hidden color
 */
$keyframe-hidden-color: #fff;
//@keyframes lightOn color
$keyframes-lightOn-color: #e6fdc6;
/**
 *sizing
 */
$customized-selector-width: 220px;
$basis-spacing: 10px;
$half-spacing: $basis-spacing / 2;
$double-spacing: $basis-spacing * 2;
$body-height: 1100px;
$mobile-logo-width: 76px;
$mobile-logo-height: $mobile-logo-width;
$site-header-logo-fixed-width: 100px;
$site-header-logo-fixed-height: 60px;
/**
 *media query
 */
$screen-device--lg: 1000px;
$screen-device--md: 720px;
/**
 *typography
 */
$ff-openSans: 'Open Sans', sans-serif;
$ff-rommetto: 'Rammetto One', cursive;
$ff-montserrat: 'Montserrat', sans-serif;
$ff-oswald: 'Oswald', sans-serif;

/**
 *debug mode
 */
//svg {outline: 1px solid blue;}
//.site-header__logo {outline: 1px dotted red;}
//#be, #green {outline: 1px dotted green;}

/**external css
*https://codepen.io/druArt/pen/VbVjxx
*https://codepen.io/druArt/pen/YVMQNX
*/

/**
 *reset external css - https://codepen.io/druArt/pen/YVMQNX
 */
.customized-select,
.select__placeholder {
	width: $customized-selector-width;
	background-color: $select-palceholder-background-color;
}

.select__placeholder {
	
	&:hover {
		background-color: $select-palceholder-hover-background-color;
	}	
}

.select__placeholder,
.select__list {
	margin-right: 0;
	border-radius: 0;
}

.customized-select {
	margin-right: 0;
	font-family: $ff-openSans;
	font-weight: lighter;
	font-size: 1.2em;
}

.select__list {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
}

.select__list__item {
	&:hover,
	&.is-active {
		border-radius: 2px;
		color: #fff;
	}
	
	&:hover:nth-of-type(1),
	&:nth-of-type(1).is-active {
		width: 110%;
		margin-left: -5%;
		background-color: $body-background-color;
	}
	
	&:hover:nth-of-type(2),
	&:nth-of-type(2).is-active {
		width: 110%;
		margin-left: -5%;
		background-color: #7caf4b;
	}
	
	&:hover:nth-of-type(3),
	&:nth-of-type(3).is-active {
		width: 110%;
		margin-left: -5%;
		background-color: #c5cb45;
	}
}

/**
 *reset external css - https://codepen.io/druArt/pen/VbVjxx
 */
.nav-list__item {
	 
	 &--subnav {
		 display: block;
	 }
	
	.nav-link__text {
		font-family: $ff-montserrat;
		font-weight: bold;
	}
}

.nav-list__item--subnav { 
	width: 100%;
	
	@media screen and (max-width: $screen-device--lg - 1) {
		 position: static;
	}
}

.subnav__item {
	padding: 0;
	
	@media screen and (max-width: $screen-device--lg - 1) {
		
		&:first-of-type {
			margin-top: 10px;
		}
	
		&:last-of-type {
			margin-bottom: -10px;
		}
	}
	
	&.is-open {
		padding-bottom: 0;
		transition: all 0.8s ease;
	}
}

/**
 *reset external css - https://codepen.io/druArt/pen/eVOBgb
 */
.wrap-tree {
    background-color: transparent;
	z-index: -1;
}

.tree {
	&:nth-of-type(1) {
	    @include tree(37px, 120px, 0, 14px, 18px, 140px, 8px, darken(#3b8e42, 5%), darken(#8e763b, 5%));
	    animation: none;
	    z-index: 10;
	}
	
	&:nth-of-type(2) {
	    @include tree(33px, 180px, 0, 14px, 16px, 140px, 8px, #3b8e42, #8e763b);
	    animation: none;
	    z-index: 10;
	}
	
	.card-flip:hover & {
		animation: growup 3.3s 0s linear;
	}
	
}

/**
 *new css elements
 */
.nav-links {
	position: relative;
	display: block;
	padding: 0.8rem;
	padding-left: 0;
	padding-right: 0;
	color: #999;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	letter-spacing: 0.8px;
	z-index: 1;
  	overflow: hidden;
	transition: color 300ms;
	cursor: pointer;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: #999;
		z-index: -1;
		transition: width 300ms;
		opacity: 0.1;
	}
	
	&:hover {
		color: #fbfbfb;
	}
	
	&:hover::before {
		width: 100%;
	}
}


/**
 *basis
 */
body {
	height: $body-height;
	background-color: $body-background-color;
	-webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
	margin-top: 55px;
}

.color {
	&--green {
		background-color: #7caf4b;
	}
	
	&--yellow {
		background-color: #c5cb45;
	}
}

.svg-scalable {
	width: 100%;
	height: 100%;
}


/**
*fixed header
*/
.site-header {
	position: relative;
	width: 100%;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: $menu-bar-mobile-logo-background-color;
	transition: background 0.6s ease-in-out;
	
	@media screen and (max-width: $screen-device--lg - 1) {
		background-color: transparent !important;
	}
	
	&.is-fixed {
		position: fixed;
		top: 40px;
		left: 0;
		right: 0;
		animation: fadeInBottom 1s ease-in-out;
		z-index: 999;
		
		@media screen and (min-width: $screen-device--lg) {
			top: 0;
		}

		.site-header__logo {
			width: $site-header-logo-fixed-width;
			height: $site-header-logo-fixed-height;
			margin: $half-spacing;
			transition: all 0.6s ease-in-out;

			@media screen and (min-width: $screen-device--lg) {
				animation: zoomOut 3s ease alternate, size 5s ease forwards;
			}

			@media screen and (max-width: $screen-device--lg - 1) {
				height: 0;
				margin: 0;
			}
		}

		.text {
			@media screen and (min-width: $screen-device--lg) {
				animation: hidden 2s ease forwards;
			}
		}

		.on-off {
			@media screen and (min-width: $screen-device--lg) {
				animation: lightOn 1s ease forwards;
			}

			@media screen and (max-width: $screen-device--lg - 1) {
				animation: lightOn 1s ease forwards;
			}
		}
	}
}

.site-header__top-menu {
	position: absolute;
	top: 0;
	width: 100%;
	background-color: $header-top-menu-background-color;
	font-family: $ff-montserrat !important;
	opacity: 0.8;
	z-index: 9;
	
	&:hover {
		z-index: 999;
	}
	
	.site-header.is-fixed & {
		visibility: hidden;
	}
}

.menu-bar {
	font-weight: normal !important;
	z-index: 9;
}

.site-header__logo {
	display: inline-block;
	margin: $double-spacing;
	
	@media screen and (min-width: $screen-device--lg) {
		transition: all 0.6s ease-in-out;//smoothing element resizing when site header is fixed
		animation: zoomIn 2s ease alternate;
	}
	
	@media screen and (max-width: $screen-device--lg - 1) {
		margin: 0;
		padding: 0;
		
		.svg-scalable {
			display: none;
		}
		
		use.text {
			display: none;
		}
	}	
}

.menu-bar-mobile {
	@media screen and (max-width: $screen-device--lg - 1) {
		position: relative;
		
		.menu-bar-mobile__logo {
			position: absolute;
			top: 50%;
			left: calc(50% - #{$nav-icon-size});
			transform: translateX(-50%);
			width: $mobile-logo-width;
			height: $mobile-logo-height;
			padding: $basis-spacing;
			border-radius: 50%;
			background-image: linear-gradient(
				to right,
				lighten($menu-bar-mobile-logo-background-color, 1%) 50%,
				transparent 50%,
				darken($menu-bar-mobile-logo-background-color, 1%) 50%
			);
			animation: fadeInUp 1s ease forwards;
			cursor: pointer;
			z-index: 99 ;
			
			&:hover {
				z-index: 999;
			}
		}
	}

	@media screen and (min-width: $screen-device--lg) {
		.svg-scalable {
			display: none;
		}
	}
}

.on-off {
	fill: none;
}

/**
 *section
 */
.section {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 120px 580px;
	overflow: hidden;
	background-image: linear-gradient(86deg, #324575, darken(#324575, 10%));
	z-index: 0;
	opacity: 0.8;
	
	@media screen and (min-width: 480px) and (max-width: 600px - 1) {
		grid-template-rows: 140px 580px;
	}
	
	@media screen and (min-width: 600px) and (max-width: $screen-device--lg - 1) {
		grid-template-rows: 160px 580px;
	}
	
	@media screen and (min-width: $screen-device--lg) {
		grid-template-rows: 180px 580px;
	}
}

.section__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0;
	color: #fbfbfb;
}

$color-bottom: #4ca8f5;
$color-top: #1d3f5c;

.section__header__title {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	margin: 0;
	margin-top: 10px;
	padding: 0;
	padding-left: 5px;
	padding-right: 5px;
	word-break: none;
	font-family: $ff-rommetto; //'Sigmar One', cursive;
	letter-spacing: -2.6px;
	font-size: 4em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.8rem;
	
	//&:last-child {
	//	margin-top: 0;
	//}
	
	
	//.first-letter {
	//	font-size: 1.4em;
	//}
	
	@media screen and (min-width: 600px) and (max-width: $screen-device--lg - 1) {
		font-size: 4em;
		text-align: center;
	
		//&:first-child {
		//	text-align: right;
		//}
	}
	
	@media screen and (min-width: $screen-device--lg) {
		font-size: 6em;
		text-align: center;
	
		//&:first-child {
		//	text-align: right;
		//}
	}
	
	span {
		animation: bobbing 3s ease-in-out infinite alternate;
		display: inline-block;
		background-image: -webkit-linear-gradient(92deg, $color-bottom, $color-top);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transform-origin: 50% 100%;
		
		@for $i from 1 through 20 {
			&:nth-of-type(#{$i}) {
				animation-delay:#{$i / -1.5}s;
			}
		}
	}
}

.font-effect-3d-float {
	text-shadow: 0.03em 0.04em 0.01em rgba(0,0,0,0.2), 0 0.1em 0.2em rgba(0,0,0,0.05);
}

.section__body {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;
}
/*
 **planet
 */
$basis-size: 320px;
$planetColor: #f77035;//rgb(209, 70, 22)
$darkPlanetColor: darken($planetColor, 5%);
$darkerPlanetColor: darken($planetColor, 10%);
$darkestPlannetColor: darken($planetColor, 15%);//
.wrap-planet,
.planet {
	display: flex;
	justify-content: center;
}

.wrap-planet {
	margin: 0;
	pointer-event: none;
	z-index: -99;
}

.planet {
	align-items: center;
	position: relative;
	height: $basis-size;
	width: $basis-size;
	margin: 0;
	animation: bounce 2s infinite;
}

.planet-base {
	position: relative;
	height: $basis-size;
	width: $basis-size;
	border-radius: 100%;
	background-color: $planetColor;
	background-image: radial-gradient(
		circle at 0 20%,
		$planetColor 0%,
		transparent 65%,
		$darkPlanetColor 65%
	);
}

.planet-base__shadow {
	position: absolute;
	bottom: -20%;
	left: 50%;
	
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 40%;
		transform: translateX(-50%);
		width: $basis-size / 2;
		height: $basis-size / 8;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.1);
		animation: shadow 2s infinite;
	}
}

.spot {
	position: absolute;
	border-radius: 100%;
	background-color: $darkPlanetColor;
	background-image: radial-gradient(
		circle at 100% 80%,
		$darkerPlanetColor 0%,
		$darkerPlanetColor 65%,
		$darkestPlannetColor 65%
	);
	
	&--one {
		height: $basis-size / 8;
		width: $basis-size / 8;
		top: 15%;
		left: 40%;
	}
	
	&--two {
		height: $basis-size / 4;
		width: $basis-size / 4;
		top: 63%;
		left: 48%;
	}
	
	&--three {
		height: $basis-size / 4;
		width: $basis-size / 4;
		top: 28%;
		left: 14%;
	}
	
	&--four {
		height: $basis-size / 6;
		width: $basis-size / 6;
		top: 64%;
		left: 15%;
	}
	
	&--five {
		height: $basis-size / 7;
		width: $basis-size / 7;
		top: 38%;
		left: 73%;
	}
	
	&--six {
		height: $basis-size / 14;
		width: $basis-size / 14;
		top: 17%;
		left: 20%;
	}
	
	&--seven {
		height: $basis-size / 16;
		width: $basis-size / 16;
		top: 63%;
		left: 35%;
	}
	
	&--eigth {
		height: $basis-size / 16;
		width: $basis-size / 16;
		top: 48%;
		left: 56%;
	}
}

/**
 *card
 */
.card {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	left: -10%;
	width: 120%;
	height: 110%;
    margin: 0;
	padding: 1em;
	padding-top: 2em;
	color: #fbfbfb;
	font-family: $ff-oswald;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	animation: zoomIn 0.8s ease-in-out;
	overflow: hidden;
	transition: all 0.6s ease-in-out;
		
	@media screen and (min-width: 400px) and (max-width: 720px - 1) {
		width: 120%;
	}
		
	@media screen and (min-width: 720px) and (max-width: $screen-device--lg - 1) {
		width: 140%;
		top: 0;
		left: 28%;
	}
	
	@media screen and (min-width: $screen-device--lg) {
		width: 180%;
		top: 0;
		left: 36%;
		
		h1 {
			font-size: 2.2em;
		}
	}
		
	h1 {
		margin: 0;
		font-size: 1.6em;
	}
}

.card__content {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
	height: 100%;
    padding: 20px;
	
	&--flip {
		overflow: visible;
		position: relative;
		transform-style: preserve-3d;
		transition: 0.25s;
	}
	
	.card-flip:hover & {
		transform: rotateY(180deg);
		transition: transform 0.8s ease;
		overflow: visible;
		z-index: 99;
	}
}

.card-flip {
    //perspective: 1000;
}

.card-flip__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    border: 1px solid #ecf0f1;
    border-radius: 10px;
    color: #333;
    text-align: center;
    overflow: visible;
    backface-visibility: hidden;

	&--front {
		transform: rotateY(0deg);
		background-color: #f9eff6;
		opacity: 0.6;
		z-index: 2;
	}

	&--back {
		height: 80%;
		transform: rotateY(-180deg);
		background-color: #f9eff6;
	}
}

/**
 * animate
 */
@keyframes zoomIn {
	from {
		transform: scale3d(0.3,0.3,0.3);
		opacity: 0;	
	}
	50% {
		transform: none;
	}
}
.animation-zoomIn {
	animation-name: zoomIn;
}

@keyframes zoomOut {
	from {
		transform: none;
	}
	40% {
		transform: scale3d(0.3,0.3,0.3);
		opacity: 0;
	}
}
.animation-zoomOut {
	animation-name: zoomOut;
}

@keyframes hidden {
	from {
		fill: transparentize($keyframe-hidden-color, 0.8);
	}
	100% {
		fill: transparentize($keyframe-hidden-color, 1);
	}
}
.animation-hidden {
	animation-name: hidden;
}

@keyframes lightOn {
	from,
	to {
		fill: none;
	}
	
	80% {
		fill: transparentize($keyframes-lightOn-color, 1);
	}
	
	100% {
		fill: transparentize($keyframes-lightOn-color, 0.6);
	}
}
.animation-lightOn {
	animation-name: lightOn;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3,0.3,0.3);
	}
	50% {
		opacity: 1;
	}
}
.animate-zoomIn {
	animation-name: zoomIn;
}

@keyframes bobbing {
	0%{
		transform: translateY(10px) rotate(5deg);
	}
	50% {
		transform: translateY(0px) scale(0.8);
	}
	100%{
		transform: translateY(-10px) rotate(-5deg);
    }
}
.animate-bobbing {
	animation-name: bobbing;
}

@keyframes fadeInUp {
	from,
	30% {
		opacity: 0;
		transform: translate3d(0,0,0);
	}
	to {
		opacity: 1;
		transform: translate3d(0,-50%,0);
	}
}
.animate-fadeInUp {
	animation-name: fadeInUp;
}

@keyframes fadeInBottom {
	from,
	30% {
		opacity: 0;
		transform: translate3d(0,-20%,0);
	}
	to {
		opacity: 1;
		transform: translate3d(0,0,0);
	}
}
.animate-fadeInBottom {
	animation-name: fadeInBottom;
}

@keyframes bounce {
	0% {
		transform: translate3d(0,0,0);
	}
	50% {
		transform: translate3d(0,5px,0);
	}
	100% {
		transform: translate3d(0,0,0);
	}
}
.animate-bounce {
	animation-name: bounce;
}

@keyframes shadow {
	0% {
		transform: translate3d(0,0,0) scale(0.9);
	}
	50% {
		transform: translate3d(0,-5px,0) scale(1);
	}
	100% {
		transform: translate3d(0,0,0) scale(0.9);
	}
}
.animate-shadow {
	animation-name: shadow;
}
!

JS 

              
                /**
*it use external js
$https://codepen.io/druArt/pen/VbVjxx
$https://codepen.io/druArt/pen/YVMQNX
*/
//on scroll menu bar fixed
var amountScrolled = 10;
$(this).on('scroll',function() {    
	var scroll = $(this).scrollTop();
	if (scroll >= amountScrolled) {
		$(".site-header").addClass("is-fixed  is-animated");
		$(".customized-select").removeClass("is-open");
		$(".nav-list").removeClass("is-open");
		$('.js-menu-nav').removeClass('is-open');
	} else {
		$(".site-header").removeClass("is-fixed");
	}
});
	
//hamburger animate	
$('.js-menu-nav').click(function(e) {
	e.preventDefault();
	//animation nav icon
	$(this).toggleClass('is-open');
	//display nav-list
	$('.nav-list').toggleClass('is-open');
});
	
//display submenu acordion
$('.subnav__item').hide();
$('.js-show').on('click', function() {
	var navList = $(this);
	var showItems = navList.hasClass('is-open');
	$('.subnav__item').slideUp();
	$('.nav-list__item').removeClass('is-open');
	if (showItems) {
		navList.find('.subnav__item').slideUp();
	} else {
		navList.addClass('is-open');
		navList.find('.subnav__item').slideDown();
	}
	return false;
});

// change background color
$(".js-color").on("click", function() {
	var colorBackground = $("body");
	var selectOpen = $(this).closest(".customized-select");
	colorBackground.removeClass();
	colorBackground.addClass($(this).attr("data-color"));
	selectOpen
		.removeClass("is-open")
		.find(".select__placeholder")
		.text($(this).text());
	selectOpen.find("input[type=hidden]").attr("value", $(this).attr("data-value"));
	
	$(".select__list__item").removeClass("is-active");
	var color_id = $(this).attr('data-highlight');
	$('[data-highlight="' + color_id + '"]').toggleClass('is-active');
});
!
999px

Console