<commit_before><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head prefix="og: http://ogp.me/ns#">

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Home &middot; Alloy</title>
  <base href="/">
  <meta property="og:locale" content="nl_NL">
  <meta property="og:url" content="http:/index.html">
  
  <meta property="og:title" content="Alloy">
  
  <meta property="og:site_name" content="Alloy">
  <meta property="og:description" content="Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.">
  <meta property="og:image" content="/image.jpg">
  <meta property="og:image:width" content="640">
  <meta property="og:image:height" content="300">
  <meta name="twitter:card" content="/image.jpg">
  <meta name="twitter:site" content="@studioalloy">
  <meta name="twitter:creator" content="@studioalloy">

  
  <meta property="og:type" content="website" />
  

  <meta name="description" content="Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.">

  <link rel="shortcut icon" href="/img/favicon/alloy-16.ico" type="image/x-icon" sizes="16x16">
  <link rel="shortcut icon" href="/img/favicon/alloy-16.png" type="image/x-icon" sizes="16x16">
  <link rel="shortcut icon" href="/img/favicon/alloy-32.ico" type="image/x-icon" sizes="32x32">
  <link rel="shortcut icon" href="/img/favicon/alloy-32.png" type="image/x-icon" sizes="32x32">
  <link rel="apple-touch-icon-precomposed" href="/img/favicon/alloy-152.png">
  <link rel="icon" sizes="152x152" href="/img/favicon/alloy-152-android.png">

  <link rel="stylesheet" type="text/css" href="/css/main.css">
  <!--[if lte IE 9]>
  <link rel="stylesheet" type="text/css" href="/css/ie.css">
  <![endif]-->
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body class="default home index">
  <!--[if lt IE 7]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="main">
    <div id="header">
	<div class="container">
		<a href="/"><img class="logo" src="/img/alloy-logo.svg"></a>
		<input type="checkbox" id="toggle" />
		<div class="mobile-menu">
			<label for="toggle" class="toggle" data-open="Menu" data-close="Close" onclick></label>
			<ul class="menu">
				<li class="menu-item"><a href="/case">Case</a></li>
				<li class="menu-item"><a href="/team">Team</a></li>
				<!--<li class="menu-item"><a href="/blog">Blog</a></li>-->
				<li class="menu-item"><a href="/about">About</a></li>
				<li class="menu-item"><a href="/contact">Contact</a></li>
			</ul>
		</div>
	</div>
</div>

    <div class="wrapper">
      <section class="home flex end">
  <div class="svg-animation">
    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" class="alloy-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="710 0 1280 800" preserveAspectRatio="none">
<g class="background">
  <defs>
    <rect id="mask" x="710" width="1280" height="800"/>
  </defs>
  <clipPath id="mask_1_">
    <use xlink:href="#mask"  overflow="visible"/>
  </clipPath>
  <g class="rotate" clip-path="url(#mask_1_)">
    <g class="layers">
      <rect class="animated fadeIn layer" x="549.925" y="-399.82" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 2020.9464 1636.8861)" fill="#EE6644" width="1599.116" height="1599.423"/>
      <polygon class="animated bounceInDown layer" fill="#99FFFF" points="1349.592,-730.963 421.302,197.327 685.065,461.089 901.631,844.442
      1288.286,1064.31 1552.048,1328.072 2480.338,399.783 			"/>
      <path class="animated bounceInDown layer" fill="#85DADA" d="M1350.217-730.338L402.765,217.115l283.392,243.642l-0.466,0.957
      c0,0,2.914,1.935,7.878,5.416c18.603,13.041,67.774,49.056,116.946,98.228c62.293,62.293,121.422,28.647,204.208,111.433
      c81.706,81.706,52.309,95.796,155.593,200.222c1.361,1.376,2.646,2.706,4.052,4.111
      c95.937,95.952,162.076,141.474,175.884,150.595l268.531,230.872l862.183-862.183L1350.217-730.338z"/>
      <path class="animated bounceInDown layer" fill="#70B4B4" d="M1349.592-730.963L558.218,60.412L757.988,250.23c0,0,140.898,37.519,226.593,123.214
      c94.477,94.477,67.743,149.824,150.995,233.076c83.252,83.252,160.06,122.268,226.539,188.747
      c59.181,59.195,140.664,155.496,157.837,175.933c2.113,2.514,3.314,3.952,3.314,3.952l0.564-0.282l195.895,185.513
      l760.605-760.605L1349.592-730.963z"/>
      <path class="animated bounceInDown layer" fill="#5C8F8F" d="M1349.592-730.963L717.626-98.996L882.539,57.611l-0.051,0.112
      c0.006,0.006,112.799,125.451,186.71,199.362c16.546,16.546,43.123,32.918,74.358,48.387
      c108.291,53.635,272.981,96.226,272.981,96.226s136.023,197.992,166.648,228.617c30.41,30.41,135.347,219.965,136.794,222.568
      c0.012,0.012,0.062,0.122,0.062,0.122l0.042-0.017l157.498,149.563l602.762-602.762L1349.592-730.963z"/>
      <polygon class="animated bounceInDown layer" fill="#476969" points="1349.592,-730.963 785.757,-167.128 1287.212,7.783 1509.255,264.104
      1793.254,465.725 1916.503,963.618 2480.338,399.783 			"/>
      <polygon class="animated bounceInDown layer" fill="#334444" points="2480.746,399.375 1350,-731.371 1069.221,-450.592 1375.354,-194.844
      1374.776,-194.561 1620.836,160.931 2053.497,371.703 2053.481,371.658 2301.374,578.747 			"/>
    </g>
  </g>
</g>
</svg>

  </div>
  <div class="text-container">
    <h1><a href="/contact">Studio Alloy</a> wordt gevormd door een groep <a href="/team">creatieve ondernemers</a> die zich dagelijks bezighoudt met het maken van <a href="/case">verhalen voor op het beeldscherm</a>. Wij maken impact met pixels. Of het een <a href="#">website</a>, <a href="#">game</a>, <a href="#">mobiele app</a>, <a href="#">video</a> of <a href="#">animatie</a> is, of dit alles gecombineerd. Onze kracht is het realiseren van digitale producties van concept tot en met uitvoering.</h1>
    <img class="logo" src="/img/alloy-logo.svg" alt="Alloy">
  </div>
</section>

<section class="about flex start">
  <div class="text-container">
    <p><p>Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.</p><p>Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.</p></p>
  </div>
</section>

<section class="cases flex">
  <div class="item-container flex wrap">
    
    
    

<a class="post no-touch" href="/case/de-grote-volksverhuizing/">
  <div class="featured-image cover" style="background: url(/img/case/de-grote-volksverhuizing-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/de-grote-volksverhuizing-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>De Grote Volksverhuizing</h3>
    <p>Interactieve lespakketen basisonderwijs over de Atlantikwall</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/diabetestrefpunt/">
  <div class="featured-image cover" style="background: url(/img/case/diabetestrefpunt-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/diabetestrefpunt-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>Diabetestrefpunt</h3>
    <p>Online community voor diabetespatiënten en deskundigen</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/hero-of-humanity/">
  <div class="featured-image cover" style="background: url(/img/case/hero-of-humanity-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/hero-of-humanity-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>Hero of Humanity</h3>
    <p>Online game voor het Rode Kruis over behulpzaamheid onder jongeren</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/ipad-detailer-animal-health/">
  <div class="featured-image cover" style="background: url(/img/case/ipad-detailer-animal-health-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/ipad-detailer-animal-health-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>iPad Detailer Animal Health</h3>
    <p>iPad detailer serie voor interactieve productbrochures</p>
  </div>
</a>



    
  </div>
</section>

<section class="flex">
  <div class="center" style="padding: 5% 10% 10%;">
    <a href="/case"><button>Bekijk hier alle cases.</button></a>
  </div>
</section>

<section class="flex">
  <div class="title-container sub center">
    <h2 class="center">Alloy diensten</h2>
  </div>
</section>
<section class="flex">
  <div class="text-container">
    <p>Bij Alloy streven wij ernaar om het meeste uit jouw product of dienst te halen door het inzetten van het juiste medium. Wij verdiepen ons grondig in jouw situatie om vervolgens met een frisse blik oplossingen aan te dragen voor uitdagingen en we helpen je met het maken van de vertaalslag naar perfecte, visuele communicatie.</p>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <h3>Web &amp; Interactief Design</h3>
      <p>Alloy heeft een sterke affiniteit met zowel technische ontwikkelingen voor web, als voor visueel aantrekkelijk en communicatief sterk ontwerp. Het geheim van een succesvolle website is, naast de gebruiksvriendelijkheid en technische vereisten voor optimale vindbaarheid (SEO / SEA), een aansprekend design. Wie wil je aanspreken? En wat is jouw boodschap? Wij stellen de juiste vragen om een beeld te vormen over wat aansprekend design moet zijn specifiek voor jouw publiek en dat jouw publiek je online weet te vinden.</p>
    </div>
    <div class="col mobile-first">
      <img src="/img/alloy-dienst-illustratie-design.svg" alt="design" class="overflow-right"/>
    </div>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <img src="/img/alloy-dienst-illustratie-development.svg" alt="development" class="overflow-left">
    </div>
    <div class="col">
      <h3>Development</h3>
      <p>Door de flexibele schil van Alloy developers adviseren wij welke techniek het beste werkt voor jouw project. Wij kiezen uitsluitend voor open en bewezen technieken, die innovatief zijn en ondersteund worden door een brede developers community. Of het project nu een complexe systeemarchitectuur behoeft of eerder een bekende omgeving wenselijk is, zoals Wordpress; wij adviseren welke oplossing het beste is voor jouw situatie. Dit leveren wij inclusief service en volle verantwoordelijkheid of indien gewenst netjes overgedragen aan jouw eigen technische specialisten.</p>
    </div>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <h3>Film &amp; Animatie</h3>
      <p>Motion design, oftewel aantrekkelijke animatievideo’s zijn een trend op het moderne web. Aan de hand van uitlegvideo’s met geanimeerde beelden ben je beter in staat om een complexe boodschap in een korte tijd over te brengen aan je publiek. Door de nieuwste online technieken is animatie ook erg goed in te zetten binnen de interactie van je website. Denk aan interactieve infographics of een timeline met een verhaal waar je als bezoeker zelf van begin tot eind doorheen kan scrollen. Wij vertellen jouw verhaal met goed gevulde pixels.</p>
    </div>
    <div class="col mobile-first">
      <img src="/img/alloy-dienst-illustratie-animatie.svg" alt="animatie" class="overflow-right"/>
    </div>
  </div>
</section>

<section class="clients half-vh fixed flex end" style="background: url(/img/clients.jpg);">

  <div class="title-container end-min-vh">
    <h4 class="center no-margin sub-color">Past jouw organisatie hier ook tussen?</h4>
  </div>
</section>
<section class="team flex custom-padding">
  <div class="title-container sub">
    <h2 class="center">Ontmoet het team</h2>
  </div>
</section>
<section class="team flex">
  <div class="text-container">
    <div class="flex wrap overflow">

      <div id="owl-example" class="owl-carousel">
        
        
        <a href="/team/mitchel-van-eijgen/" class="team-member center">
  <img src="/img/team/mitchel-van-eijgen.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/david-hager/" class="team-member center">
  <img src="/img/team/david-hager.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/ruben-daas/" class="team-member center">
  <img src="/img/team/ruben-daas.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/jaap-redeker/" class="team-member center">
  <img src="/img/team/jaap-redeker.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/daniel-lim/" class="team-member center">
  <img src="/img/team/daniel-lim.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/wilsun-cheung/" class="team-member center">
  <img src="/img/team/wilsun-cheung.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/wouter-hager/" class="team-member center">
  <img src="/img/team/wouter-hager.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
      </div>

    </div>
    <p>Ben jij een creatieve ondernemer en op zoek naar een mooie werkruimte in Haarlem? Wij ontmoeten je graag en misschien pas je perfect bij het team!</p>
  </div>
</section>

<section class="pletterij half-vh" style="background: url(/img/pletterij.jpg) no-repeat center bottom; background-size: 100%;"></section>

<section class="contact-info flex">
  <div class="title-container sub min-vh">
    <h2 class="center">Contact</h2>
  </div>
</section>
<section class="contact-info flex">
  <div class="text-container">
    <div class="inner flex">
      <div class="col">
        <address>
          Gasthuistvest 47 <br /> 2011EV Haarlem
        </address>
        <p><EMAIL></p>
        <p>+31 6 10 11 41 79</p>
      </div>
      <div class="col">
        <form action="https://getsimpleform.com/messages?form_api_token=17785a99c890b5ed234623b44589c226" method="post">
  <div id="bedankt" class="hide">
    Bedankt voor uw bericht, en we komen snel bij uw terug.
  </div>
  <h3>Contact</h3>
  <div class="form-row">
    <input type='hidden' name='redirect_to' value='/#bedankt' />
    <input type="text" name="email" required>
    <label alt="Label Text" data-placeholder="Email"></label>
  </div>
  <div class="form-row">
    <input type="text" name="phone" required>
    <label alt="Label Text" data-placeholder="Telefoon"></label>
  </div>
  <div class="form-row">
    <textarea type="text" name="message" required></textarea>
    <label alt="Label Text" data-placeholder="Bericht"></label>
  </div>
  <input type='submit' value='Verzend' />
</form>

      </div>
    </div>
  </div>
</section>

      <footer class="flex">
	<div class="inner flex start">
		<div class="col">
			<h4>Het team</h4>
			<ul>
				
				
				<li><a href="/team/mitchel-van-eijgen/"><NAME></a></li>
				
				<li><a href="/team/david-hager/"><NAME></a></li>
				
				<li><a href="/team/ruben-daas/"><NAME></a></li>
				
				<li><a href="/team/jaap-redeker/"><NAME></a></li>
				
				<li><a href="/team/daniel-lim/"><NAME></a></li>
				
				<li><a href="/team/wilsun-cheung/"><NAME></a></li>
				
				<li><a href="/team/wouter-hager/"><NAME>ager</a></li>
				
			</ul>
		</div>
		<div class="col">
			<h4>Contact</h4>
			<ul>
				<li><a href="mailto:<EMAIL>"><EMAIL></a></li>
				<li><a href="tel:+31 6 10 11 41 79">+31 6 10 11 41 79</a></li>
				<li><address>Gasthuistvest 47 <br /> 2011EV Haarlem</address></li>
			</ul>
		</div>
		<div class="col">
			<img src="/img/alloy-logo-bw.svg">
		</div>
	</div>
	<div class="copy-bar flex">
		<div class="inner">
			<ul>
				<li>
					<p>&copy; 2015 Alloy</p>
				</li>
				<li>
					<a href="/copyright">Design & development Alloy</a>
				</li>
				<li>
					<a href="/assets/legal/alloy-algemene-voorwaarden.pdf" download="Alloy Algemene voorwaarden" target="_blank">Algemene voorwaarden</a>
				</li>
			</ul>
		</div>
	</div>
</footer>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var owl = $('.owl-carousel');
	owl.owlCarousel({
		loop:true,
		margin:60,
		nav:false,
		center:true,
		startPosition: 1,
		responsive:{
			0:{
				items:1
			},
			600:{
				items:2
			},
			1024:{
				items:4
			},
		}
	});
});
</script>
<script>
//Disable hover on mobile
var touch=window.ontouchstart||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0;if(touch)try{for(var si in document.styleSheets){var styleSheet=document.styleSheets[si];if(styleSheet.rules)for(var ri=styleSheet.rules.length-1;ri>=0;ri--)styleSheet.rules[ri].selectorText&&styleSheet.rules[ri].selectorText.match(":hover")&&stylesheet.deleteRule(ri)}}catch(ex){}
//Contact form
jQuery(function(){"#bedankt"==window.location.hash&&jQuery("#bedankt").removeClass("hide")});
</script>


    </div>
  </div>
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '', 'auto');
  ga('send', 'pageview');
</script>

</body>

</html>
<commit_msg>more IE fixes<commit_after><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head prefix="og: http://ogp.me/ns#">

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Home &middot; Alloy</title>
  <base href="/">
  <meta property="og:locale" content="nl_NL">
  <meta property="og:url" content="http:/index.html">
  
  <meta property="og:title" content="Alloy">
  
  <meta property="og:site_name" content="Alloy">
  <meta property="og:description" content="Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.">
  <meta property="og:image" content="/image.jpg">
  <meta property="og:image:width" content="640">
  <meta property="og:image:height" content="300">
  <meta name="twitter:card" content="/image.jpg">
  <meta name="twitter:site" content="@studioalloy">
  <meta name="twitter:creator" content="@studioalloy">

  
  <meta property="og:type" content="website" />
  

  <meta name="description" content="Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.">

  <link rel="shortcut icon" href="/img/favicon/alloy-16.ico" type="image/x-icon" sizes="16x16">
  <link rel="shortcut icon" href="/img/favicon/alloy-16.png" type="image/x-icon" sizes="16x16">
  <link rel="shortcut icon" href="/img/favicon/alloy-32.ico" type="image/x-icon" sizes="32x32">
  <link rel="shortcut icon" href="/img/favicon/alloy-32.png" type="image/x-icon" sizes="32x32">
  <link rel="apple-touch-icon-precomposed" href="/img/favicon/alloy-152.png">
  <link rel="icon" sizes="152x152" href="/img/favicon/alloy-152-android.png">

  <link rel="stylesheet" type="text/css" href="/css/main.css">
  <!--[if lte IE 9]>
  <link rel="stylesheet" type="text/css" href="/css/ie.css">
  <![endif]-->
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body class="default home index">
  <!--[if lt IE 7]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="main">
    <div id="header">
	<div class="container">
		<a href="/"><img class="logo" src="/img/alloy-logo.svg"></a>
		<input type="checkbox" id="toggle" />
		<div class="mobile-menu">
			<label for="toggle" class="toggle" data-open="Menu" data-close="Close" onclick></label>
			<ul class="menu">
				<li class="menu-item"><a href="/case">Case</a></li>
				<li class="menu-item"><a href="/team">Team</a></li>
				<!--<li class="menu-item"><a href="/blog">Blog</a></li>-->
				<li class="menu-item"><a href="/about">About</a></li>
				<li class="menu-item"><a href="/contact">Contact</a></li>
			</ul>
		</div>
	</div>
</div>

    <div class="wrapper">
      <section class="home flex end">
  <div class="svg-animation">
    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" class="alloy-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="710 0 1280 800" preserveAspectRatio="none">
<g class="background">
  <defs>
    <rect id="mask" x="710" width="1280" height="800"/>
  </defs>
  <clipPath id="mask_1_">
    <use xlink:href="#mask"  overflow="visible"/>
  </clipPath>
  <g class="rotate" clip-path="url(#mask_1_)">
    <g class="layers">
      <rect class="animated fadeIn layer" x="549.925" y="-399.82" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 2020.9464 1636.8861)" fill="#EE6644" width="1599.116" height="1599.423"/>
      <polygon class="animated bounceInDown layer" fill="#99FFFF" points="1349.592,-730.963 421.302,197.327 685.065,461.089 901.631,844.442
      1288.286,1064.31 1552.048,1328.072 2480.338,399.783 			"/>
      <path class="animated bounceInDown layer" fill="#85DADA" d="M1350.217-730.338L402.765,217.115l283.392,243.642l-0.466,0.957
      c0,0,2.914,1.935,7.878,5.416c18.603,13.041,67.774,49.056,116.946,98.228c62.293,62.293,121.422,28.647,204.208,111.433
      c81.706,81.706,52.309,95.796,155.593,200.222c1.361,1.376,2.646,2.706,4.052,4.111
      c95.937,95.952,162.076,141.474,175.884,150.595l268.531,230.872l862.183-862.183L1350.217-730.338z"/>
      <path class="animated bounceInDown layer" fill="#70B4B4" d="M1349.592-730.963L558.218,60.412L757.988,250.23c0,0,140.898,37.519,226.593,123.214
      c94.477,94.477,67.743,149.824,150.995,233.076c83.252,83.252,160.06,122.268,226.539,188.747
      c59.181,59.195,140.664,155.496,157.837,175.933c2.113,2.514,3.314,3.952,3.314,3.952l0.564-0.282l195.895,185.513
      l760.605-760.605L1349.592-730.963z"/>
      <path class="animated bounceInDown layer" fill="#5C8F8F" d="M1349.592-730.963L717.626-98.996L882.539,57.611l-0.051,0.112
      c0.006,0.006,112.799,125.451,186.71,199.362c16.546,16.546,43.123,32.918,74.358,48.387
      c108.291,53.635,272.981,96.226,272.981,96.226s136.023,197.992,166.648,228.617c30.41,30.41,135.347,219.965,136.794,222.568
      c0.012,0.012,0.062,0.122,0.062,0.122l0.042-0.017l157.498,149.563l602.762-602.762L1349.592-730.963z"/>
      <polygon class="animated bounceInDown layer" fill="#476969" points="1349.592,-730.963 785.757,-167.128 1287.212,7.783 1509.255,264.104
      1793.254,465.725 1916.503,963.618 2480.338,399.783 			"/>
      <polygon class="animated bounceInDown layer" fill="#334444" points="2480.746,399.375 1350,-731.371 1069.221,-450.592 1375.354,-194.844
      1374.776,-194.561 1620.836,160.931 2053.497,371.703 2053.481,371.658 2301.374,578.747 			"/>
    </g>
  </g>
</g>
</svg>

  </div>
  <div class="text-container">
    <h1><a href="/contact">Studio Alloy</a> wordt gevormd door een groep <a href="/team">creatieve ondernemers</a> die zich dagelijks bezighoudt met het maken van <a href="/case">verhalen voor op het beeldscherm</a>. Wij maken impact met pixels. Of het een <a href="#">website</a>, <a href="#">game</a>, <a href="#">mobiele app</a>, <a href="#">video</a> of <a href="#">animatie</a> is, of dit alles gecombineerd. Onze kracht is het realiseren van digitale producties van concept tot en met uitvoering.</h1>
    <img class="logo" src="/img/alloy-logo.svg" alt="Alloy">
  </div>
</section>

<section class="about flex start">
  <div class="text-container">
    <p><p>Alloy staat bij ons voor het samensmelten van verschillende talenten om een sterker geheel te vormen. Wij zijn een nieuwe generatie ondernemers die geloven in de slagkracht van het individu en binnen ons collectief hebben we elkaar nodig om te kunnen excelleren.</p><p>Of het nu voor een startende ondernemer is of voor gevestigde multinationals, wij richten ons niet op een specifieke sector of type onderneming. Wij zijn opzoek naar mensen die hun verhaal willen overbrengen. Wij verstaan ons vak en proberen ons in te leven in de doelgroep om zodoende het verhaal op de juiste manier over te brengen. Wij doen ons werk met veel enthousiasme en toewijding. Dat straalt af op onze opdrachtgevers.</p></p>
  </div>
</section>

<section class="cases flex">
  <div class="item-container flex wrap">
    
    
    

<a class="post no-touch" href="/case/corpus-de-anatomische-les/">
  <div class="featured-image cover" style="background: url(/img/case/corpus-de-anatomische-les-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/corpus-de-anatomische-les-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>CORPUS 'De Anatomische Les'</h3>
    <p>Game & touch table CORPUS 'De Anatomische Les'</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/de-grote-volksverhuizing/">
  <div class="featured-image cover" style="background: url(/img/case/de-grote-volksverhuizing-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/de-grote-volksverhuizing-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>De Grote Volksverhuizing</h3>
    <p>Interactieve lespakketen basisonderwijs over de Atlantikwall</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/diabetestrefpunt/">
  <div class="featured-image cover" style="background: url(/img/case/diabetestrefpunt-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/diabetestrefpunt-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>Diabetestrefpunt</h3>
    <p>Online community voor diabetespatiënten en deskundigen</p>
  </div>
</a>



    
    

<a class="post no-touch" href="/case/hero-of-humanity/">
  <div class="featured-image cover" style="background: url(/img/case/hero-of-humanity-thumb.jpg)">
    <div class="hover">
      <img class="logo" src="/img/case/hero-of-humanity-logo.png" alt="klant logo">
    </div>
  </div>
  <div class="meta">
    <h3>Hero of Humanity</h3>
    <p>Online game voor het Rode Kruis over behulpzaamheid onder jongeren</p>
  </div>
</a>



    
  </div>
</section>

<section class="flex">
  <div class="center" style="padding: 5% 10% 10%;">
    <a href="/case"><button>Bekijk hier alle cases.</button></a>
  </div>
</section>

<section class="flex">
  <div class="title-container sub center">
    <h2 class="center">Alloy diensten</h2>
  </div>
</section>
<section class="flex">
  <div class="text-container">
    <p>Bij Alloy streven wij ernaar om het meeste uit jouw product of dienst te halen door het inzetten van het juiste medium. Wij verdiepen ons grondig in jouw situatie om vervolgens met een frisse blik oplossingen aan te dragen voor uitdagingen en we helpen je met het maken van de vertaalslag naar perfecte, visuele communicatie.</p>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <h3>Web &amp; Interactief Design</h3>
      <p>Alloy heeft een sterke affiniteit met zowel technische ontwikkelingen voor web, als voor visueel aantrekkelijk en communicatief sterk ontwerp. Het geheim van een succesvolle website is, naast de gebruiksvriendelijkheid en technische vereisten voor optimale vindbaarheid (SEO / SEA), een aansprekend design. Wie wil je aanspreken? En wat is jouw boodschap? Wij stellen de juiste vragen om een beeld te vormen over wat aansprekend design moet zijn specifiek voor jouw publiek en dat jouw publiek je online weet te vinden.</p>
    </div>
    <div class="col mobile-first">
      <img src="/img/alloy-dienst-illustratie-design.svg" alt="design" class="overflow-right"/>
    </div>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <img src="/img/alloy-dienst-illustratie-development.svg" alt="development" class="overflow-left">
    </div>
    <div class="col">
      <h3>Development</h3>
      <p>Door de flexibele schil van Alloy developers adviseren wij welke techniek het beste werkt voor jouw project. Wij kiezen uitsluitend voor open en bewezen technieken, die innovatief zijn en ondersteund worden door een brede developers community. Of het project nu een complexe systeemarchitectuur behoeft of eerder een bekende omgeving wenselijk is, zoals Wordpress; wij adviseren welke oplossing het beste is voor jouw situatie. Dit leveren wij inclusief service en volle verantwoordelijkheid of indien gewenst netjes overgedragen aan jouw eigen technische specialisten.</p>
    </div>
  </div>
</section>

<section class="services flex">
  <div class="inner flex">
    <div class="col">
      <h3>Film &amp; Animatie</h3>
      <p>Motion design, oftewel aantrekkelijke animatievideo’s zijn een trend op het moderne web. Aan de hand van uitlegvideo’s met geanimeerde beelden ben je beter in staat om een complexe boodschap in een korte tijd over te brengen aan je publiek. Door de nieuwste online technieken is animatie ook erg goed in te zetten binnen de interactie van je website. Denk aan interactieve infographics of een timeline met een verhaal waar je als bezoeker zelf van begin tot eind doorheen kan scrollen. Wij vertellen jouw verhaal met goed gevulde pixels.</p>
    </div>
    <div class="col mobile-first">
      <img src="/img/alloy-dienst-illustratie-animatie.svg" alt="animatie" class="overflow-right"/>
    </div>
  </div>
</section>

<section class="clients half-vh fixed flex end" style="background: url(/img/clients.jpg);">

  <div class="title-container end-min-vh">
    <h4 class="center no-margin sub-color">Past jouw organisatie hier ook tussen?</h4>
  </div>
</section>
<section class="team flex custom-padding">
  <div class="title-container sub">
    <h2 class="center">Ontmoet het team</h2>
  </div>
</section>
<section class="team flex">
  <div class="text-container">
    <div class="flex wrap overflow">

      <div id="owl-example" class="owl-carousel">
        
        
        <a href="/team/mitchel-van-eijgen/" class="team-member center">
  <img src="/img/team/mitchel-van-eijgen.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/david-hager/" class="team-member center">
  <img src="/img/team/david-hager.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/ruben-daas/" class="team-member center">
  <img src="/img/team/ruben-daas.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/jaap-redeker/" class="team-member center">
  <img src="/img/team/jaap-redeker.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/daniel-lim/" class="team-member center">
  <img src="/img/team/daniel-lim.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/wilsun-cheung/" class="team-member center">
  <img src="/img/team/wilsun-cheung.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
        <a href="/team/wouter-hager/" class="team-member center">
  <img src="/img/team/wouter-hager.jpg" class="clip" alt="<NAME>">
  <div class="meta">
    <h4><NAME></h4>
  </div>
</a>

        
      </div>

    </div>
    <p>Ben jij een creatieve ondernemer en op zoek naar een mooie werkruimte in Haarlem? Wij ontmoeten je graag en misschien pas je perfect bij het team!</p>
  </div>
</section>

<section class="pletterij half-vh" style="background: url(/img/pletterij.jpg) no-repeat center bottom; background-size: 100%;"></section>

<section class="contact-info flex">
  <div class="title-container sub min-vh">
    <h2 class="center">Contact</h2>
  </div>
</section>
<section class="contact-info flex">
  <div class="text-container">
    <div class="inner flex">
      <div class="col">
        <address>
          Gasthuistvest 47 <br /> 2011EV Haarlem
        </address>
        <p><EMAIL></p>
        <p>+31 6 10 11 41 79</p>
      </div>
      <div class="col">
        <form action="https://getsimpleform.com/messages?form_api_token=<PASSWORD>" method="post">
  <div id="bedankt" class="hide">
    Bedankt voor uw bericht, en we komen snel bij uw terug.
  </div>
  <h3>Contact</h3>
  <div class="form-row">
    <input type='hidden' name='redirect_to' value='/#bedankt' />
    <input type="text" name="email" required>
    <label alt="Label Text" data-placeholder="Email"></label>
  </div>
  <div class="form-row">
    <input type="text" name="phone" required>
    <label alt="Label Text" data-placeholder="Telefoon"></label>
  </div>
  <div class="form-row">
    <textarea type="text" name="message" required></textarea>
    <label alt="Label Text" data-placeholder="Bericht"></label>
  </div>
  <input type='submit' value='Verzend' />
</form>

      </div>
    </div>
  </div>
</section>

      <footer class="flex">
	<div class="inner flex start">
		<div class="col">
			<h4>Het team</h4>
			<ul>
				
				
				<li><a href="/team/mitchel-van-eijgen/"><NAME></a></li>
				
				<li><a href="/team/david-hager/"><NAME></a></li>
				
				<li><a href="/team/ruben-daas/"><NAME></a></li>
				
				<li><a href="/team/jaap-redeker/"><NAME></a></li>
				
				<li><a href="/team/daniel-lim/"><NAME></a></li>
				
				<li><a href="/team/wilsun-cheung/"><NAME></a></li>
				
				<li><a href="/team/wouter-hager/"><NAME></a></li>
				
			</ul>
		</div>
		<div class="col">
			<h4>Contact</h4>
			<ul>
				<li><a href="mailto:<EMAIL>"><EMAIL></a></li>
				<li><a href="tel:+31 6 10 11 41 79">+31 6 10 11 41 79</a></li>
				<li><address>Gasthuistvest 47 <br /> 2011EV Haarlem</address></li>
			</ul>
		</div>
		<div class="col">
			<img src="/img/alloy-logo-bw.svg">
		</div>
	</div>
	<div class="copy-bar flex">
		<div class="inner">
			<ul>
				<li>
					<p>&copy; 2015 Alloy</p>
				</li>
				<li>
					<a href="/copyright">Design & development Alloy</a>
				</li>
				<li>
					<a href="/assets/legal/alloy-algemene-voorwaarden.pdf" download="Alloy Algemene voorwaarden" target="_blank">Algemene voorwaarden</a>
				</li>
			</ul>
		</div>
	</div>
</footer>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var owl = $('.owl-carousel');
	owl.owlCarousel({
		loop:true,
		margin:60,
		nav:false,
		center:true,
		startPosition: 1,
		responsive:{
			0:{
				items:1
			},
			600:{
				items:2
			},
			1024:{
				items:4
			},
		}
	});
});
</script>
<script>
//Disable hover on mobile
var touch=window.ontouchstart||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0;if(touch)try{for(var si in document.styleSheets){var styleSheet=document.styleSheets[si];if(styleSheet.rules)for(var ri=styleSheet.rules.length-1;ri>=0;ri--)styleSheet.rules[ri].selectorText&&styleSheet.rules[ri].selectorText.match(":hover")&&stylesheet.deleteRule(ri)}}catch(ex){}
//Contact form
jQuery(function(){"#bedankt"==window.location.hash&&jQuery("#bedankt").removeClass("hide")});
</script>


    </div>
  </div>
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '', 'auto');
  ga('send', 'pageview');
</script>

</body>

</html>

{'fraction_non_alphanumeric': 0.1757647413966593, 'fraction_numerical': 0.06865063393036828, 'mean_word_length': 3.9193169162232397, 'pattern_counts': {'":': 2, '<': 1006, '<?xml version=': 2, '>': 1010, 'https://': 4, 'lorem ipsum': 0, 'www.': 6, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5583324', 'n_tokens_mistral': 16977, 'n_tokens_neox': 14770, 'n_words': 3425}