index.html

---
layout: homepage
---
<div role="main" class="grid">

<div id="banner" class="block block-hero"> 
	<div class="b-thumb">
		<img src="{{site.baseurl}}/img/hero_bg.jpg" width="100%" />
	</div>
	<div class="b-text"> 
		<h1>Europeana Labs</h1>
		<div class="byline">
			<p>A playground for remixing and using your cultural and scientific heritage.<br />A place for inspiration, innovation and sharing.</p>
			<p>This is your code, this is your heritage, these are your labs.</p>
			<div class="startBtn">
				<a href="http://labs.europeana.eu/blog/welcome-to-the-new-europeana-labs/">GET STARTED</a>
			</div>
		</div>
	</div> 
</div>

<br><br>

<div  class="block">
	<div id="apikey-block" >
	<div class="grid--center">
		<table id="tblKey">
			<tr>
				<td class="key-image"><img src="{{site.baseurl}}/img/key.png"></td>
				<td class="key-form">
					<h3>Get your API key.</h3>
					<p>Sign up for your free API key and start developing!
						{% include api-registration.html %}
				</td>
			</tr>
		</table>
	<div style="padding-left: 20%; padding-right: 20%; text-align: center;">
		<img id="loadingIcon" src="{{site.baseUrl}}/img/ajax-loader.gif" alt="Loading..."/>	
		<div id="messageContainer" class="alert"> </div>
	</div>
	</div>
	</div>
	<div id="beinspired" class="block">
		<div class="grid--center" style="text-align: left;">
			<h3 style="font-weight: bold;">Be inspired &hellip;</h3>
		</div>
	</div>
	<div class="grid__item one-whole palm--one-whole grid--center">
	    <ul id="homepage-postsl-list" class="post-list grid">
	        {% for post in site.categories.apps %}
			{% if post.featured %}<!--
	        --><li class="grid__item three-eighths desk--three-eighths">
	            <div class="block block-thumb">

	                <div class="b-thumb">
	                    <a href="{{site.baseurl}}{{post.url}}">
	                        <img src="{{site.baseurl}}{{post.imageurl.first}}" alt="{{post.title}}">
	                    </a>
	                </div>

	                <div class="b-text">

	                    {%if post.featured %}
		                    <h1 class="headline gamma"><a href="{{site.baseurl}}{{post.url}}">{{post.title}}</a></h1>
		                    <div class="description">
		                        {{post.excerpt}}                        
		                    </div>
						{% else %}
							<h5><a href="{{site.baseurl}}{{post.url}}">{{post.title}}</a></h5>
	                    {% endif %}
						<a href="{{site.baseurl}}{{post.url}}" title="{{post.title}}" class="text-btn-homepage">Find out more</a>
	                </div>
	            </div>
	        </li>
			{% endif %}
			{% endfor %}
	    </ul>
	</div>

<div class="grid--center">
	<div class="grid__item palm--one-whole one-third">
		<hr class="top-no-margin">
		<p class="text-btn" align="center"><a href="{{site.baseurl}}/apps" class="seemoreapi" title="Application Gallery"><strong>See more examples in the Application Gallery&nbsp;&rarr;</strong></a></p>
	</div>
	<br/><br/><br/><br/>
</div>
</div>