---
title: Card
tags:
- demoExample
---
{% assign pageClass = "html_card" %}
{% layout 'hippie-view/simple.liquid' %}

{% block body %}
<div class="card_bkg">
	<div id="dither"></div>
	{% render 'hippie-view/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
	{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
</div>
<div class="card_box">
	<main>
		<p>Titel<br/>und Beschreibung</p>
		<h1>{% text hippie.placeholders.name %}</h1>
		<p>
			{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
			{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
			&middot;
			{% text hippie.placeholders.address, '', 'decent' %}</p>
	</main>
</div>
{% endblock %}

{% block script %}
<script>
	const flag = document.getElementById('flag');
	let colors = new Array();
	let iId = undefined;
	let position = 0;

	for (let i = 1; i <= flag.childElementCount; i++) {
		colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
	}

	document
		.querySelector('main')
		.addEventListener('mouseenter', () => {
			iId = setInterval(() => {
				for (let i = 1; i <= colors.length; i++) {
					position++;

					if (position >= colors.length) {
						position = 0;
					}

					document
						.getElementById('triangle-' + i)
						.setAttribute('fill', colors[position]);
				}

				position++;

				if (position >= colors.length) {
					position = 0;
				}
			}, 600);
		});

	document
		.querySelector('main')
		.addEventListener('mouseleave', () => {
			iId && clearInterval(iId);
		});
</script>
{% endblock %}