ihk24/templates/source/includes/section-search.html

<section class="search" data-type="artwork">
	<div class="artwork">
		<span class="background"></span>
		<span class="foreground"></span>
	</div>
	<div class="image-box">
		<picture>
			<source media="(max-width: 999px)" srcset="dummy/ballons-small.jpg">
			<img src="dummy/ballons.jpg" alt="Cover Bild">
		</picture>
	</div>
	<div class="container small">
		<div class="row">
			<div class="col">
				<h1 class="like-h2">Willkommen bei Ihrer IHK. <br>Wie können wir Ihnen helfen?</h1>
				<form action="#">
					<label for="searchterm" class="visually-hidden">IHK durchsuchen</label>
					<input type="text" id="searchterm" class="search-field typeahead" name="searchterm" placeholder="Hier Ihr Thema finden" data-api="./services/search/{SEARCHTERM}.json" data-swapi="https://swapi.dev/api/people/?search={SEARCHTERM}&format=json" autocomplete="off">
					<button type="submit" class="search-submit" aria-label="Suche starten"></button>
				</form>
				<div class="tiles">
					<div class="tile"><a href="#">Beratung und Service</a></div>
					<div class="tile"><a href="#">Interessen&shy;ver&shy;tre&shy;tung</a></div>
					<div class="tile"><a href="#">Aus- und Weiterbildung</a></div>
					<div class="tile"><a href="#">Unsere Region</a></div>
					<div class="tile"><a href="#">Handelskammer vor Ort</a></div>
					<div class="tile"><a href="#">Veranstaltungen</a></div>
				</div>
			</div>
		</div>
	</div>
</section>