<div id="cookie">
	<div id="cookie-text">Tyto stránky používají cookies k analýze návštěvnosti a bezpečnému provozování stránek. Používáním tohoto webu vyjadřujete souhlas. <a id="cookie-link" href="https://www.google.com/intl/cs/policies/technologies/cookies/">Další informace</a></div><a href="#" id="cookie-close" title="Souhlasím">Souhlasím</a>
</div>

<style>
	#cookie {
		-webkit-transition: all .2s;
		transition: all .2s;
		width: 100%;
		background-color: #1e1e1e;
		color: #828282;
		font-family: Arial, sans-serif;
		font-size: 14px;
		line-height: 18px;
		text-align: left;
		display: none;
		position: fixed;
		top: auto;
		left: 0;
		bottom: 0;
		z-index: 200;
	}

	#cookie-text {
		padding: 15px 46px 15px 20px;
	}

	#cookie-link {
		-webkit-transition: border .3s ease-in-out;
		transition: border .3s ease-in-out;
		text-decoration: none !important;
		display: inline;
		border-bottom: 1px solid #afafaf;
		color: #afafaf !important;
	}

	#cookie-link:hover {
		border-bottom-color: transparent;
	}

	#cookie-close {
		float: right;
		width: 46px;
		height: 46px;
		display: inline-block;
		overflow: hidden;
		text-indent: -999em;
		top: 0;
		right: 0;
		position: absolute;
	}

	#cookie-close::before,
	#cookie-close::after {
		content: '';
		cursor: pointer;
		width: 14px;
		height: 1px;
		display: block;
		background-color: #9E9E9E;
		position: absolute;
		top: 23px;
		left: 12px;
		-webkit-transition: background-color .2s;
		transition: background-color .2s;
	}

	#cookie-close::before {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#cookie-close::after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#cookie-close:hover::before,
	#cookie-close:hover::after {
		background-color: #e4e4e4;
	}
</style>

<script>
	var cms = document.querySelectorAll('#RubicusAdmin');
	var bar = document.getElementById('cookie');
	var barClose = document.getElementById('cookie-close');
	var website = document.location.hostname.split('.');
	var storageName = '';
	for (var i in website) {
		storageName += website[i];
	}
	var barView = localStorage.getItem(storageName);
	if (!cms[0] || barView == null) {
		bar.style.display = 'block';
	}
	if (barView == 'hide') {
		bar.style.display = 'none';
	}
	barClose.addEventListener('click', function(e) {
		e.preventDefault();
		localStorage.setItem(storageName, 'hide');
		bar.style.display = 'none';
	});
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.