index.html

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Coding the Curbs website.">
	<link rel="stylesheet" href="styles/style.css" />
	<!-- FONTS -->
	<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<title>Coding the Curbs | The smart city of tommorow</title>
</head>
<body>
	<header class="primary-header">
		<a class="links" href="index.html#hero">
			<img class="logo" src="assets/ctc-primary-logo-black.svg" alt="logo">
		</a>
		<nav>
			<ul class="primary-navigation">
				<li>
					<a class="links hover-color" href="index.html#use-cases">
						Use-cases
					</a>
				</li>
				<li>
					<a class="links hover-color" href="index.html#product">
					Product
					</a>
				</li>
				<li>
					<a class="links hover-color" href="index.html#services">
					Services
					</a>
				</li>
				<li>
					<a class="links hover-color" href="index.html#updates">
					Updates
					</a>
				</li>
				<li>
					<a class="links hover-color" href="index.html#about">
					Over ons
					</a>
				</li>
				<li>
					<a class="hover-color" href="contact.html">
					Contact
					</a>
				</li>
				<button class="cta-gradient">
					<a class="text-white" href="contact.html">
					Sluit je aan
					</a>
				</button>
					<select>
						<option lang="nl">NL</option>
						<option lang="en">EN</option>
						<!-- Andere talen opties -->
					</select>
			</ul>
		</nav>
	</header>
	<main>
		<section id="hero">
				<h1>Coding the Curbs</h1>
				<h2>De kracht van meervoudig ruimtegebruik</h2>
				<p>
					Een oplossing die een digitale laag over de fysieke infrastructuur <br> 
					legt en zo de stad klaarstoomt voor de toekomst.
				</p>
				<br>
				<button class="cta-gradient">
					<a href="contact.html">
					Sluit je aan
					</a>
				</button>
		</section>
		<article class="imagine">
			<div>
			<h2>Stel je voor...</h2>
			<h3>
				Dat met mooi weer de parkeerplaatsen op <br>
				zondag veranderen 
				<span class="type">
					<span>
						<span>in gezellige terassen.</span>
						<span>in parkeerplaatsen.</span>
						<span>voor laden en lossen.</span>
						<span>voor recreatie en horeca.</span>
					</span>
				</span>
			</h3>
			</div>
			<p>
				Door straten, buurten en wijken te digitaliseren kan de <br>
				ruimte in de stad slimmer worden gebruikt en ingedeeld. <br>
				Gedurende de week kan een straat verschillende functies <br>
				vervullen. Doordeweeks is er bijvoorbeeld plek voor laden <br>
				en lossen, in het weekend is er ruimte voor recreatie.
			</p>
		</article>
		<section id="use-cases">
			<h2>Use-cases</h2>
			<p>Vier verschillende voorbeelden waarvoor de ruimtes gebruikt kunnen worden.</p>
			<div class="use-cases-grid">
				<article class="use-case">
					<img src="assets/loading-bay.png" alt="" class="use-case-image">
					<div class="option-one">
						<button class="toggle cta-gradient-arrow">&#711;</button>
						<h3>Optie 1</h3>
						<h4>Laadperron</h4>
						<p>
							Een boekbare slimme zone voor laden en lossen
						</p>
					</div>
				</article>
				<article class="use-case">
					<img src="assets/parking-spots.jpg" alt="" class="use-case-image">
					<div class="option-two">
						<button class="toggle-two cta-gradient-arrow">&#711;</button>
						<h3>Optie 2</h3>
						<h4>Parkeerplaatsen</h4>
						<p>
							Een reserveerbare parkeerplaats voor privé en openbaar gebruik
						</p>
					</div>
				</article>
				<article class="use-case">
					<img src="assets/mobility-hubs.png" alt="" class="use-case-image">
					<div class="option-three">
						<button class="toggle-three cta-gradient-arrow">&#711;</button>
						<h3>Option 3</h3>
						<h4>Mobility hubs</h4>
						<p>
							Een creatie van digitale en fysieke gedeelde mobiliteitshubs.
						</p>
					</div>
				</article>
				<article class="use-case">
					<img src="assets/recreation.JPG" alt="" class="use-case-image">
					<div class="option-four">
						<button class="toggle-four cta-gradient-arrow">&#711;</button>
						<h3>Option 4</h3>
						<h4>Recreation</h4>
						<p>
							Een aantrekkelijke plaats voor recreatie en horeca
						</p>
					</div>
				</article>
			</div>
		</section>
		<section id="product">
			<h2>Product</h2>
			<video controls>
				<source src="assets/vooruit-met-de-stad.mov">
				Deze browser heeft geen HTML5 geluid
			</video>
		</section>
		<article class="animation">
			<img class="shelter" src="assets/shelter.svg" alt="">
			<svg class="car" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.03 83.03"><defs><style>.cls-1{fill:#aeaeae;}.cls-2{fill:#fefefe;}.cls-3{fill:none;stroke:#303030;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="cls-1" d="M1032.19,1272.65a47.56,47.56,0,0,1,13.41-.57c4.31.44,18.33,1.55,18.33,1.55a40.25,40.25,0,0,1,15.15-2.17s16.48.87,27.49,13.54c1.79,2.07,4.22,5.3,4.5,9.48.14,2.19-.65,2-.83,5.08-.31,5.19,1.55,7.54.12,10.67a7.38,7.38,0,0,1-2,2.59c-2.08,1.73-7.32,5.85-9.4,7.58l-19.34,5.1c-10.17,3.17-20.3,6.46-30.51,9.47-11.29,3.32-22.66,6.37-34,9.53l-1,.27a26.57,26.57,0,0,0-3.14,1.14l-17.36,4.91a21.8,21.8,0,0,1-12.57-1.27,18.12,18.12,0,0,1-6.42-4.52c-5.21-5.45-10.67-10.66-16-16-4.09-4.15-4.66-11.18-1.52-16.49,3.58-6,6.49-16.33,11.94-21.36,0,0,26.38-8.54,39.08-12.11,7.62-2.15,16.44-4.38,24.11-6.38" transform="translate(-954.55 -1270.91)"/><path class="cls-2" d="M1010.89,1345.91a11.18,11.18,0,0,1-4.21,5.55c-3.21,2.13-8.67,3.11-11.75,0s-1.52-8.64-1.34-9.19a10.82,10.82,0,0,1,7.69-7c1-.24,6.15-1.47,9,2.07a8.06,8.06,0,0,1,.61,8.56" transform="translate(-954.55 -1270.91)"/><path class="cls-2" d="M1097.89,1312.2c2.81,3.84.91,9.54-1.92,12.64-.5.56-4.17,4.46-9.32,3.64-.61-.1-4.72-.82-6.57-4.4-2.38-4.62,1.23-9.6,1.72-10.28s3.43-4.73,8.51-4.85C1091,1308.94,1095.47,1308.91,1097.89,1312.2Z" transform="translate(-954.55 -1270.91)"/><path class="cls-2" d="M1109.63,1289.42c-4,3.31-7.69,6.86-16.34,10.34l.09.24a16.81,16.81,0,0,0,16.51,1l.52-2.93a8.36,8.36,0,0,0-.08-7Z" transform="translate(-954.55 -1270.91)"/><path class="cls-2" d="M958.84,1309.11c3.33,2.83,9,8.42,12.19,11.43s6.09,3.09,9.59.53a84.45,84.45,0,0,1,9.44-5.44,67.87,67.87,0,0,1-20.79-24.49s-3.44,2.61-6.7,9.8Z" transform="translate(-954.55 -1270.91)"/><path class="cls-2" d="M1047.07,1295c-12.5,3.67-24.95,7.52-37.52,10.93-7,1.89-12,6.39-17,11,3.75,5,9.34,2.7,14,3.44,4.36.69,12-.06,16.48-.22,2.54-.71,5.76-1.62,9.5-2.69.29-.08,6.66-1.91,13.49-3.91q15.35-4.51,30.27-9.13a5.29,5.29,0,0,0,1.74-1.55,5.43,5.43,0,0,0,1-2.82c3.77-3.17,3.33-7.41.84-10.37-4.44-5.29-9.84-9.79-14.84-14.63l-.46-.39-1.26-.12c-9.19-.89-13.44-2-17.75-2.41a43,43,0,0,0-5.29-.33,39.81,39.81,0,0,0-8.12.9c6.06,4.25,13,14.63,14.88,22.35" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1079.57,1325.5c-10.17,3.17-20.3,6.46-30.51,9.47-11.29,3.32-22.66,6.37-34,9.53l-1,.27a26.57,26.57,0,0,0-3.14,1.14,11.18,11.18,0,0,1-4.21,5.55c-3.21,2.13-8.67,3.11-11.75,0s-1.52-8.64-1.34-9.19a10.82,10.82,0,0,1,7.69-7c1-.24,6.15-1.47,9,2.07a8.06,8.06,0,0,1,.61,8.56" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1098.91,1320.4c2.08-1.73,7.32-5.85,9.4-7.58a7.38,7.38,0,0,0,2-2.59c1.43-3.13-.43-5.48-.12-10.67.18-3.08,1-2.89.83-5.08-.28-4.18-2.71-7.41-4.5-9.48-11-12.67-27.49-13.54-27.49-13.54a40.25,40.25,0,0,0-15.15,2.17" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M969,1291.14c-5.45,5-8.36,15.32-11.94,21.36-3.14,5.31-2.57,12.34,1.52,16.49,5.29,5.38,10.75,10.59,16,16a18.12,18.12,0,0,0,6.42,4.52,21.8,21.8,0,0,0,12.57,1.27" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1032.19,1272.65c-7.67,2-16.49,4.23-24.11,6.38-12.7,3.57-26.14,8.44-38.81,12.11" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1023.08,1320.1q11.42-3.21,23-6.6,15.35-4.51,30.27-9.13a6.79,6.79,0,0,0,2.94-3.87" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1079.07,1309c-14.83,4.34-29.68,8.63-44.49,13-5.21,1.54-10.34,3.32-15.51,5" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1047.07,1295c-12.5,3.67-24.95,7.52-37.52,10.93-7,1.89-12,6.39-17,11,3.75,5,9.34,2.7,14,3.44,4.36.69,12-.06,16.48-.22" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1097.89,1312.2c2.81,3.84.91,9.54-1.92,12.64-.5.56-4.17,4.46-9.32,3.64-.61-.1-4.72-.82-6.57-4.4-2.38-4.62,1.23-9.6,1.72-10.28s3.43-4.73,8.51-4.85C1091,1308.94,1095.47,1308.91,1097.89,1312.2Z" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1065.07,1275c5,4.84,10.4,9.34,14.84,14.63,2.49,3,2.93,7.2-.84,10.37" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M959.21,1309.42c3.33,2.83,8.66,8.11,11.82,11.12s6.09,3.09,9.59.53a84.45,84.45,0,0,1,9.44-5.44,67.87,67.87,0,0,1-20.79-24.49s-3.44,2.61-6.7,9.8" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1010.07,1306.5c-1.17,4.84-2.46,9.64-3.46,14.51-.68,3.3.6,6.08,2.94,8.52,3.59,3.74,8.51,9.33,12,13.17" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1064.61,1274.61l-1.26-.12c-9.19-.89-13.44-2-17.75-2.41a47.56,47.56,0,0,0-13.41.57" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1032.19,1272.65c6.06,4.25,13,14.63,14.88,22.35" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1079.07,1300c-6-1-26.52-4.59-32.52-5.59" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1109.63,1289.42c-8,8.21-18.27,11-27.56,14.58" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1093.38,1300a16.81,16.81,0,0,0,16.51,1" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1040.07,1321c.17,4.67.42,11.72.59,16.39" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M961.07,1318l13.5,11.5" transform="translate(-954.55 -1270.91)"/><path class="cls-3" d="M1033.09,1299.15c1.57,3.14,5.62,12,6.54,15.67" transform="translate(-954.55 -1270.91)"/></svg>
			<img class="illustration" src="assets/Coding the Curbs - Illustratie.svg">
			<h2>Klik op deze switch om de animaties uit te zetten</h2>
			<div class="center-switch">
				<label class="switch">
				<input type="checkbox" checked>
				<span class="slider round"></span>
				</label>
			</div>
		</article>
		<article class="mission">
			<h2>Onze missie</h2>
			<h3>Samen de weg vrijmaken voor de <br> <span class="text_1">slimme stad</span> van morgen.</h3>
		</article>
		<div class="information">
			<article class="show">
				<div class="livability">
					<h3>
						De leefbaarheid van
						onze stad onder druk
					</h3>
					<p class="livability-margin">
						Door de groeiende verstedelijking, toenemende drukte en teruglopende bereikbaarheid van de stad staat de leefbaarheid
						in steden onder druk. Hoe gaan de steden en de bewoners om met de inrichting van de beperkt beschikbare ruimte?
					</p>
					<h3>
						De infrastructuur van morgen
					</h3>
					<p>
						Innovaties op het gebied van mobiliteit bieden grote kansen voor de stad en de bewoners. Mobility as a Service (MaaS),
						elektrisch vervoer en autonoom transport zijn de nieuwe werkelijkheid. Wat betekenen deze nieuwe mobiliteitsvormen voor
						het leven in de stad van de toekomst?
					</p>
					<button class="cta-gradient-information-two">
						<a>Lees meer over infrastructuur &#8250;</a> 
					</button>
				</div>
				<img class="livability-image" src="assets/leefbaarheid.jpg" alt="">
			</article>
			<article class="show-two">
				<div class="infrastructure">
				<h3>
					Slimme en flexibele infrastructuur
				</h3>
				<p>
					Nieuwe mobiliteit vraagt om nieuwe slimme infra-structuur. In deze systemen zijn het digitale en het fysieke met elkaar geïntegreerd. Welke kansen biedt slimme infrastructuur (fysiek en digitaal) voor de stad en haar bewoners?
				</p>
				<button class="cta-gradient-information">
					<a>&#8249; Terug naat leefbaarheid</a>
				</button>
				</div>
				<img class="infrastructure-image" src="assets/infrasctructuur.jpg" alt="">
			</article>
		</div>
		<article class="imagine-two">
				<div>
				<h2>Stel je voor...</h2>
				<h3>
					dat je een milieuzone dynamisch en flexibel kan inrichten.
				</h3>
				</div>
					<p>
						Op 1 januari 2025 zullen 30-40 gemeenten in Nederland een milieuzone invoeren. Waarom kan dat niet een digitale zone zijn waarbij afhankelijk van de locatie, het moment van de dag en het type voertuig de toegang wordt bepaald? Hiermee kan een gemeente veel gerichter gewenst gedrag stimuleren en experimenteren met nieuw beleid.
					</p>
		</article>
		<section id="services">
			<h2>Toekomstbestendige stad</h2>
			<p>
				Coding The Curbs heeft een co-creatieve aanpak die bestaat uit drie fases. In elke fase worden stakeholders actief in het <br>
				process betrokken - zoals de burgers, bedrijven en overheden.
			</p>
			<div class="services-articles">
				<article>
					<img src="https://static.wixstatic.com/media/21dd0d_0b48a2e99e46483d8b167dbd8818e473~mv2.png/v1/crop/x_50,y_56,w_284,h_276/fill/w_125,h_121,al_c,q_95/CTC_ICON_Opportunityscan.webp" alt="">
					<h3>Opportunity scan</h3>
					<p>
						Een scan van de stad waarin de grootste kansen 
						voor het programmeren van de straat in kaart 
						worden gebracht en door middel van co-creatie 
						met stakeholders use-cases worden gedefinieerd.
					</p>
					<br>
					<button class="cta-gradient">
						<a href="contact.html">Lees meer over opportunity scan</a>
					</button>
				</article>
				<article>
					<img src="https://static.wixstatic.com/media/21dd0d_5cf16e80055547c596c2408f4e1083e1~mv2.png/v1/crop/x_71,y_71,w_244,h_244/fill/w_125,h_121,al_c,q_95/CTC_ICON_Livinglab.webp" alt="">
					<h3>Living lab</h3>
					<p>
						Een straat als onderzoekslab
						voor de mogelijkheden van de digitalisatie en 
						aanbod van diensten waar bedrijven en 
						bewoners actief in worden betrokken.
					</p>
					<br>
					<button class="cta-gradient">
						<a href="contact.html">Lees meer over living lab</a>
					</button>
				</article>
				<article>
					<img src="https://static.wixstatic.com/media/21dd0d_6c618ad958164f6a833b3bd3efc3f55a~mv2.png/v1/crop/x_57,y_63,w_270,h_262/fill/w_125,h_121,al_c,q_95/CTC_ICON_Rolloutplan.webp" alt="">
					<h3>Roll-out plan</h3>
					<p>
						Na de pilot van de eerste digitale straat zal er 
						een strategie en roadmap met projecten voor 
						opschaling worden geformuleerd samen met 
						de coalitie van partijen en overheden.
					</p>
					<br>
					<button class="cta-gradient">
						<a href="contact.html">Lees meer over roll-out plan</a>
					</button>
				</article>
			</div>
		</section>
		<article class="imagine-three">
				<div>
				<h2>Stel je voor...</h2>
				<h3>
					dat je zelf kan bepalen waar je in de tram stapt of waar de bus voor jou stopt.
				</h3>
				</div>
					<p>
						Door straten, buurten en wijken te digitaliseren wordt de <br>
						ruimte in de stad dynamisch. Inzichten uit data zorgen ervoor <br> 
						dat de stad ingericht wordt op de behoeften van de bewoner. <br> 
						Zo kan een digitale verbinding met het openbaar vervoer de <br> 
						haltes dynamisch maken.
					</p>
				</article>
		<section id="updates">
			<h2>Updates</h2>
			<p>
				Wilt uw weten waar we op dit moment mee bezig zijn? Lees hieronder onze artikelen.
			</p>
			<div class="updates-horizontal-scroll">
				<article>
					<img src="assets/finalist-mobility-lab-award.jpg" alt="">
					<h3>Finalist Mobility Lab Award</h3>
					<p>Hoppaaa! Coding the Curbs is een van de finalisten van de Mobility Lab award! 🎉...</p>
				</article>
				<article>
					<img src="assets/demonstratie-in-amersfoort.jpg" alt="">
					<h3>Demonstratie in Amersfoort</h3>
					<p>Wij stellen onszelf een stad voor, die slim en adaptief is, zodat er flexibel met de...</p>
				</article>
				<article>
					<img src="assets/evenement-smart-thursday.jpg" alt="">
					<h3>Evenement: Smart Thursday</h3>
					<p>Free the city! Wij geloven dat slimme en adaptieve ruimtes bijdragen aan de...</p>
				</article>
				<article>
					<img src="assets/een-opportunity-scan-in-utrecht.jpg" alt="">
					<h3>Een opportunity scan in Utrecht</h3>
					<p>Van Statisch naar dynamisch ruimtegebruik De strategie Smart Mobility van de ...</p>
				</article>
				<article>
					<img src="assets/amersfoort.jpg" alt="">
					<h3>Amersfoort</h3>
					<p>In the municipality of Amersfoort we started as a partner in the "City of the future" project...</p>
				</article>
				<article>
					<img src="assets/opportunity-scan-van-rotterdam.jpg" alt="">
					<h3>Opportunity scan van Rotterdam</h3>
					<p>The Rotterdam of the future is compact, healthy and inclusive...</p>
				</article>
				<article>
					<img src="assets/van-wie-is-de-lucht.jpg" alt="">
					<h3>Van wie is de lucht?</h3>
					<p>Looking back to the start and motivation of Coding the Curbs...</p>
				</article>
			</div>
		</section>
		<div class="information-two">
			<article class="information-residents">
				<div class="residents-padding">
					<h3>Voor de bewoners van de stad</h3>
					<p>
						In de stad van de toekomst staat de bewoner centraal. Daarom richt Coding The Curbs zich tot hen. Zij zijn de belangrijkste stakeholders in het ontwerpen van de straten, mobiliteit en de digitale laag. In samenwerking met beleidsbepalers, overheden en bedrijven gaan we op zoek naar menselijke oplossingen.
					</p>
					<button class="cta-gradient-info-two">
						<a>Lees over onze ontwikkelingsdoelen &#8250;</a>
					</button>
				</div>
				<img class="image-residents" src="assets/bewoners.jpg" alt="">
			</article>
			<article class="information-goals">
				<div class="goals-padding">
					<h3>Sustainable Development Goals</h3>
					<p>Met ons werk streven wij ernaar om zo inclusief mogelijk te zijn. Onze oplossingen richten zich op iedere burger en dragen bij aan de Sustainable Development Goals:
						<br>
						<br>
						9 - Industry, innovation and infrastructure
						<br>
						10 - Reduced inequalities
						<br>
						11 - Sustainable cities and communities</p>
						<button class="cta-gradient-info">
							<a>&#8249; Terug naar bewoners</a>
						</button>
				</div>
				<img class="image-goals" src="assets/doelen.jpg" alt="">
			</article>
		</div>
		<article class="initiatief">
			<h2>Wil jij onderdeel uitmaken van dit initiatief?</h2>
			<p>Wij zijn altijd op zoek naar innovators en challengers. Wij zoeken mensen die vooruit durven te lopen en <br> 
				graag bouwen aan de slimme stad. Wij praten graag met je verder. Neem contact met ons op via het <br> 
				onderstaande formulier of vraag direct een opportunity scan aan.</p>
				<br>
			<button class="cta-gradient">
				<a href="contact.html">
				Sluit je aan
				</a>
			</button>
		</article>
		<section id="about">
			<h2>Over ons</h2>
			<div class="text-about">
				<p>
					In januari 2020 legde Alwin de volgende vraag bij Martijn en Iskandar neer: van wie is de lucht?
				</p>
				<p>
					De digitale drukte in de stad is groot en neemt alleen nog maar toe. Veel verschillende 
					diensten en producten maken aanspraak op de ruimte in de stad en werken allen in hun
					eigen digitale laag. Maar wie voert er nu eigenlijk de regie over het toelaten van digitale 
					functies in de stad? Wie zorgt dat de belangen van bewoners en bedrijven worden 
					behartigt? En hoe zorgen we ervoor dat toekomstige mobiliteit zoals zelfrijdende robot hun 
					weg in de digitale jungle kunnen vinden?
				</p>
				<p>
					Dit is het startpunt geweest voor de start-up Coding the Curbs, een samenwerking tussen 
					The Future Mobility Network en Fronteer waarbij techniek en gebruikers actief aan elkaar 
					verbonden worden. Het kernteam van Coding the Curbs bestaat momenteel uit 4 personen 
					met een verlengd team uit de twee bedrijven.
				</p>
				<p>
					Sinds de start zijn er meerdere demonstraties gedaan in Rotterdam, Amersfoort en 
					Eindhoven. In 2022 maken wij ons klaar voor de eerste pilots in grote Nederlandse steden. 
				</p>
			</div>
			<br>
			<div class="about-grid">
			<article class="fronteer">
				<img src="https://static.wixstatic.com/media/21dd0d_52e819d3195e480f9cf00e67cd161440~mv2.png/v1/crop/x_279,y_389,w_1104,h_258/fill/w_238,h_50,al_c,q_95/Logo%20Black%20RGB.webp" alt="">
				<p>
					Fronteer is een creatief strategiebureau uit Amsterdam, en zijn leider in co-creatie en 
					innovatie. Gespecialiseerd in het ontwikkelen van heldere strategieën, inspirerende 
					concepten en sterke coalities.
				</p>
				<br>
				<button class="cta-gradient">
					<a href="contact.html">
						Kom in contact &#8250;
					</a>
				</button>
			</article>
			<article class="future-mobility-network">
				<img src="https://static.wixstatic.com/media/21dd0d_67874960245e49819b67d34be12367c7~mv2.png/v1/crop/x_7,y_0,w_330,h_149/fill/w_248,h_111,al_c,q_95/Logo%20FMN%20black.webp" alt="">
				<p>
					Advies en realisatiebureau uit Delft, specialist in toekomstige mobiliteits-oplossingen. Smart 
					mobility en logistics: van advisering tot productontwikkeling en projectimplementatie.
				</p>
				<br>
				<button class="cta-gradient">
					<a href="contact.html">
						Kom in contact &#8250;
					</a>
				</button>
			</article>
			<article class="flex-fronteer">
				<div>
					<h3>Martijn Pater</h3>
					<p class="email-margin-bottom">martijn@fronteer.com</p>
					<img src="assets/martijn-pater.jpg" alt="">
				</div>
				<div>
					<h3>Iskandar Tange</h3>
					<p class="email-margin-bottom">iskandar@fronteer.com</p>
					<img src="assets/iskandar-tange.jpg" alt="">
				</div>
			</article>
			<article class="flex-future">
				<div>
					<h3>Alwin Bakker</h3>
					<p class="email-margin-bottom">alwin@thefuturemobility.network</p>
					<img src="assets/alwin-bakker.jpg" alt="">
				</div>
				<div>
					<h3>Redouan Bokhezzou</h3>
					<p class="email-margin-bottom">redouan@thefuturemobility.network</p>
					<img src="assets/redouan-bokhezzou.jpg" alt="">
				</div>
			</article>
		</div>
		</section>
	</main>
	<footer>
		<div class="footer-content">
		<a href="index.html#hero">
			<img class="logo-footer" src="assets/CTC_Primary_Logo_White.svg" alt="logo">
		</a>
			<p>All rights reserved © 2021&nbsp;</p>
			<a href="http://www.fronteer.com" target="_blank">fronteer</a>, 
			<a href="https://www.codingthecurbs.com/copy-of-roll-out-plan?lang=nl" target="_self">Privacy statement</a>
		</div>
		<ul class="footer-navigation">
			<li>
				<a class="footer-link" href="index.html#use-cases">
					Use-cases
				</a>
			</li>
			<li>
				<a class="footer-link" href="index.html#product">
				Product
				</a>
			</li>
			<li>
				<a class="footer-link" href="index.html#services">
				Services
				</a>
			</li>
			<li>
				<a class="footer-link" href="index.html#updates">
				Updates
				</a>
			</li>
			<li>
				<a class="footer-link" href="index.html#about">
				Over ons
				</a>
			</li>
			<li>
				<a class="footer-link" href="contact.html">
				Contact
				</a>
			</li>
			</ul>
			<div class="logos-footer">
				<img class="logo-fronteer" src="https://static.wixstatic.com/media/21dd0d_93ea25df766a4b708c7095e76057a346~mv2.png/v1/fill/w_118,h_25,al_c,q_95/Logo%20White%20RGB.webp" alt="">
				<img src="https://static.wixstatic.com/media/21dd0d_1cf6e7b130544d54ae553ea81a58257d~mv2.png/v1/fill/w_113,h_50,al_c,q_95/Logo%20FMN%20white.webp" alt="">
			</div>
		<button class="footer-button cta-gradient">
			<a href="contact.html">
			Sluit je aan
			</a>
		</button>
	</footer>
	<script src="scripts/main.js"></script>
</body>
</html>