

<!-- class Upload
{
	public $filename;
	public $width = 800;
	public $height = 800;
	public $crop = false;
	public $thumb_crop = true;
	public $thumb_width = 100;
	public $thumb_height = 100;
	public $thumb = false;
	public $max_size = 6097152; // ~6MB

	private $dest_path;
	private $thumb_path;
	private $orig_path;
	private $resize = false;
	private $tmp_name;
	private $file = [];
	private $file_ok = false;

	function __construct($dest_path, $file)
	{
		$this->file = $file;

		$oldumask = umask(0);
		@mkdir($dest_path . "thumb/", 0777, true);
		@mkdir($dest_path . "orig/", 0777, true);
		umask($oldumask);

		$this->dest_path = $dest_path;
		$this->thumb_path = $dest_path . 'thumb/';
		$this->orig_path = $dest_path . 'orig/';

		$this->tmp_name = $this->file['tmp_name'];
		$this->filename = $this->get_filename($this->file['name']);

		if (in_array($this->file["type"], ["image/gif", "image/jpeg", "image/png", "image/webp"]) && ($this->file["size"] < $this->max_size)) {
			$this->file_ok = true;
			$this->save_original();
		}
	}

	private function get_filename($filename)
	{
		$name = pathinfo($filename, PATHINFO_FILENAME);
		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$temp_name = $name;
		$i = 1;
		while (file_exists($this->orig_path . $temp_name . "." . $extension)) {
			$temp_name = $name . '_' . $i;
			$i++;
		}

		return $temp_name . "." . $extension;
	}

	public function save_image()
	{
		if ($this->file_ok) {
			if ($this->resize) {
				$this->create_image($this->dest_path, $this->filename, $this->width, $this->height, $this->crop);
			} else {
				copy($this->orig_path . $this->filename, $this->dest_path . $this->filename);
			}

			if ($this->thumb) {
				$this->create_image($this->thumb_path, $this->filename, $this->thumb_width, $this->thumb_height, $this->thumb_crop);
			}
		}
	}

	private function create_image($path, $filename, $targetWidth, $targetHeight, $crop)
	{
		$file_path = $this->orig_path . $filename;
		list($origWidth, $origHeight) = getimagesize($file_path);

		$src_image = $this->image_create_from_file($file_path, $this->file['type']);
		if (!$src_image) {
			return false; // Failed to create image from file
		}

		// Calculate resize ratio respecting aspect ratio
		$ratio_orig = $origWidth / $origHeight;
		$ratio_target = $targetWidth / $targetHeight;

		// Initialize dimensions for resizing
		$resizeWidth = $targetWidth;
		$resizeHeight = $targetHeight;

		if ($crop) {
			if ($ratio_orig > $ratio_target) {
				// Original image is wider, fit height
				$resizeWidth = $targetHeight * $ratio_orig;
				$resizeHeight = $targetHeight;
			} else {
				// Original image is taller, fit width
				$resizeWidth = $targetWidth;
				$resizeHeight = $targetWidth / $ratio_orig;
			}
		} else {
			if ($ratio_orig > $ratio_target) {
				// Original image is wider, fit height
				$resizeWidth = $targetHeight * $ratio_orig;
				$resizeHeight = $targetHeight;
			} else {
				// Original image is taller, fit width
				$resizeWidth = $targetWidth;
				$resizeHeight = $targetWidth / $ratio_orig;
			}
		}

		// Create a new true color image with the calculated dimensions
		$resized_image = imagecreatetruecolor($resizeWidth, $resizeHeight);

		// Preserve transparency in PNG images
		if ($this->file['type'] == 'image/png') {
			imagecolortransparent($resized_image, imagecolorallocatealpha($resized_image, 0, 0, 0, 127));
			imagealphablending($resized_image, false);
			imagesavealpha($resized_image, true);
		}

		// Resize the original image
		imagecopyresampled($resized_image, $src_image, 0, 0, 0, 0, $resizeWidth, $resizeHeight, $origWidth, $origHeight);

		// Calculate cropping coordinates to center the image
		$crop_x = ($resizeWidth - $targetWidth) / 2;
		$crop_y = ($resizeHeight - $targetHeight) / 2;

		// Create the final image with the target dimensions
		$destination_image = imagecreatetruecolor($targetWidth, $targetHeight);

		// Preserve transparency in PNG images
		if ($this->file['type'] == 'image/png') {
			imagecolortransparent($destination_image, imagecolorallocatealpha($destination_image, 0, 0, 0, 127));
			imagealphablending($destination_image, false);
			imagesavealpha($destination_image, true);
		}

		// Crop the resized image to the target dimensions
		imagecopyresampled($destination_image, $resized_image, 0, 0, $crop_x, $crop_y, $targetWidth, $targetHeight, $targetWidth, $targetHeight);

		// Save the image in the original format
		$this->image_save_to_file($destination_image, $path . $filename, $this->file['type']);

		// Save the image in WebP format
		$this->image_save_to_webp($destination_image, $path . pathinfo($filename, PATHINFO_FILENAME) . '.webp', 70); // Adjust quality as needed

		// Cleanup
		imagedestroy($src_image);
		imagedestroy($resized_image);
		imagedestroy($destination_image);
	}


	private function image_create_from_file($filepath, $type)
	{
		switch ($type) {
			case 'image/jpeg':
				return imagecreatefromjpeg($filepath);
			case 'image/png':
				return imagecreatefrompng($filepath);
			case 'image/gif':
				return imagecreatefromgif($filepath);
			case 'image/webp':
				return imagecreatefromwebp($filepath);
			default:
				return false;
		}
	}

	private function image_save_to_file($image, $filepath, $type)
	{
		switch ($type) {
			case 'image/jpeg':
				imagejpeg($image, $filepath, 80); // Adjust quality as needed
				break;
			case 'image/png':
				imagepng($image, $filepath, 6); // Adjust compression level as needed
				break;
			case 'image/gif':
				imagegif($image, $filepath);
				break;
			case 'image/webp':
				imagewebp($image, $filepath, 85); // Adjust quality as needed
				break;
		}
	}

	private function image_save_to_webp($image, $filepath, $quality)
	{
		return imagewebp($image, $filepath, $quality);
	}

	private function save_original()
	{
		move_uploaded_file($this->tmp_name, $this->orig_path . $this->filename);
	}

	public function resize($width, $height)
	{
		$this->resize = true;
		$this->width = $width;
		$this->height = $height;
	}

	public function thumb($width = 100, $height = 100, $crop = true)
	{
		$this->thumb = true;
		$this->thumb_width = $width;
		$this->thumb_height = $height;
		$this->thumb_crop = $crop;
	}

	// Rotate Exif function omitted for brevity
} -->


<!DOCTYPE html>
<html lang="nl-NL">
<script async data-id="101409888" src="//static.getclicky.com/js"></script>

<head>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-HSFMQZ2TFM"></script>
	<script>
		window.dataLayer = window.dataLayer || [];

		function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());

		gtag('config', 'G-HSFMQZ2TFM');
	</script>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


			<title>Portfolio - Reclame | Vormgeving | Communicatie | Leeuwarden</title>
		<meta name="description" content="In het portfolio ziet u een selectie van de door Spinnerz uitgevoerde opdrachten." />
		<meta name="keywords" content="spinnerz, portfolio, opdrachtgevers" />
		<meta name="Rating" content="General" />
		<meta name="Robots" content="INDEX,FOLLOW" />
		<meta name="Revisit-after" content="3 Days" />
		<meta name="author" content="Spinnerz communicatie">
		<meta name="language" content="NL">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
<link rel="apple-touch-icon" sizes="57x57" href="https://www.spinnerz.nl/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://www.spinnerz.nl/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://www.spinnerz.nl/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://www.spinnerz.nl/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://www.spinnerz.nl/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://www.spinnerz.nl/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://www.spinnerz.nl/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://www.spinnerz.nl/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.spinnerz.nl/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="https://www.spinnerz.nl/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://www.spinnerz.nl/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="https://www.spinnerz.nl/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="https://www.spinnerz.nl/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="https://www.spinnerz.nl/favicons/manifest.json">
<link rel="shortcut icon" href="https://www.spinnerz.nl/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://www.spinnerz.nl/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="https://www.spinnerz.nl/favicons/browserconfig.xml">
<meta name="theme-color" content="#000000">

	<!-- Google Fonts -->
	<link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
	<link href='//fonts.googleapis.com/css?family=Raleway:300,500,600,700,800,900' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

	<link href="/css/bootstrap2.min.css" rel="stylesheet">
	<link href="/css/font-awesome.min.css" rel="stylesheet">
	<link href="/css/theme.css" rel="stylesheet">
	<link href="/css/colour.css" rel="stylesheet">
	<link href="/css/hover.css" rel="stylesheet" type="text/css" />
	<!-- <link href="/css/settings.css" rel="stylesheet" type="text/css"/> -->
	<link href="/css/owl.carousel.css" rel="stylesheet">
	<link rel="stylesheet" href="/css/mediaBoxes.css" />
	<link rel="stylesheet" type="text/css" href="/css/flaticon/flaticon.css">
	<link rel="stylesheet" type="text/css" href="/css/lightbox.css">

	<link href="/css/custom.css" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="/revolution/css/settings.css">
	<link rel="stylesheet" type="text/css" href="/revolution/css/layers.css">
	<link rel="stylesheet" type="text/css" href="/revolution/css/navigation.css">

	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
	<script defer data-domain="spinnerz.nl" src="https://tester.spinnerz.nl/js/script.js"></script>
</head>

<body>
	<!-- Navbar -->
	<header>
	<div class="navbar navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<!-- COLLAPSE BUTTON -->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<i class="fa fa-bars fa-2x"></i>
				</button>
				<!-- LOGO -->
				<a class="navbar-brand" href="/index.php"><img src="/img/logo.png" alt="Spinnerz Communicatie" /></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right"><li class=" "><a href="/Home">Home</a></li><li class=" "><a href="/Over+Spinnerz">Over Spinnerz</a></li><li class="active "><a href="/Portfolio">Portfolio</a></li><li class=" "><a href="/Contact">Contact</a></li></ul>
			</div><!-- /.navbar-collapse -->
		</div>
	</div>
</header>	<!-- //HEADER -->

	<!-- Pagina query -->
	
		<!-- einde pagina query -->

			<!-- PARALLAX HEADER -->

		<section id="project_parallax-full1" class="header">
			<div class="well" style="background-image: url('/img/bg/parallax_portfolio.jpg') !important;">
				<div id="overlay2">
					<div class="container">
						<div class="col-md-12">
							<h1 class="heavy red">Portfolio</h1>
							<h1 class="lead white x-light">De mogelijkheden zijn eindeloos</h1>
						</div>
					</div>
				</div>
			</div>
		</section>
	
	
		<!-- Weergave algmene tekst -->
		<!-- 				<h1 paginaheader>Portfolio</h1> -->
		<!-- 				<p>In het portfolio ziet u een selectie van de door Spinnerz uitgevoerde opdrachten. Klik op de afbeeldingen voor meer informatie.</p> -->
		<!-- end -->


	<div class="container pad45">
		<div class="col-xs-12">
			
				<h3 class="fadeinUp">Spinnerz @ work</h3>
				<p class="fadeInUp">In het portfolio ziet u een selectie van de door Spinnerz uitgevoerde opdrachten. Klik op de afbeeldingen voor meer informatie.</p>
					</div>

		<div class="col-md-12">
			<div id="grid">

									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Binnen-LateNight.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Binnen Eten | Drinken</div>
									<div class="box-text">
										Ontwerp promotie materiaal Binnen Late Night									</div>
									<div class="box-more"> <a href="/portfolio/1201/Ontwerp+promotie+materiaal+Binnen+Late+Night/Binnen+Eten+%7C+Drinken ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Portfolio-item-BeleefAmeland.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Beleef Ameland</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1052/Ontwerp+en+implementatie+website/Beleef+Ameland ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/BinnenFlyer-Boardingpass.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Binnen Eten | Drinken</div>
									<div class="box-text">
										Promotie Flight MS0757									</div>
									<div class="box-more"> <a href="/portfolio/1180/Promotie+Flight+MS0757/Binnen+Eten+%7C+Drinken ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Eringa-Site.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Jan Eringa kleding</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1282/Ontwerp+en+implementatie+website/Jan+Eringa+kleding ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/vanderhemDT.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">van der Hem</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1268/Ontwerp+en+implementatie+website/van+der+Hem ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/DeKokenDeWalvis1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">De Kok &amp; de Walvis</div>
									<div class="box-text">
										Ontwerp huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1093/Ontwerp+huisstijl/De+Kok+%26+de+Walvis ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Boomsma-Flyer.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Boomsma Distilleerderij - Wijnkoperij BV</div>
									<div class="box-text">
										Promotie materiaal Claerkampster									</div>
									<div class="box-more"> <a href="/portfolio/1166/Promotie+materiaal+Claerkampster/Boomsma+Distilleerderij+-+Wijnkoperij+BV ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/PortfolioItem-Soulvibration.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Soul Vibration</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1275/Ontwerp+en+implementatie+website/Soul+Vibration ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/ECO-portfolio-web.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">ECO inspections</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1318/Ontwerp+en+implementatie+website/ECO+inspections ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/logopedie-drachten1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Logopedie Drachten</div>
									<div class="box-text">
										Ontwerp huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1120/Ontwerp+huisstijl/Logopedie+Drachten ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Portfolio-item-VGN.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Vervoersgroep Noord</div>
									<div class="box-text">
										Ontwerp en ontwikkeling website en huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1227/Ontwerp+en+ontwikkeling+website+en+huisstijl/Vervoersgroep+Noord ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/LouisOptiek-promo.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Louis Optiek</div>
									<div class="box-text">
										Advertorial									</div>
									<div class="box-more"> <a href="/portfolio/1173/Advertorial/Louis+Optiek ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Lijffit-portfolio.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Lijf Fit</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1311/Ontwerp+en+implementatie+website/Lijf+Fit ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Skuthus1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">t Skuthus</div>
									<div class="box-text">
										Ontwerp huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1111/Ontwerp+huisstijl/t+Skuthus ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/LaProvenve-promo.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">La Provence</div>
									<div class="box-text">
										Ontwerp en vormgeving lunchkaart									</div>
									<div class="box-more"> <a href="/portfolio/1145/Ontwerp+en+vormgeving+lunchkaart/La+Provence ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/cc-def.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Orange Peak Company </div>
									<div class="box-text">
										Creatie Convenience Connected jaarrapport									</div>
									<div class="box-more"> <a href="/portfolio/1289/Creatie+Convenience+Connected+jaarrapport/Orange+Peak+Company+ ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/binnen1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Binnen Eten | Drinken</div>
									<div class="box-text">
										Ontwerp huisstijl Binnen Eten | Drinken									</div>
									<div class="box-more"> <a href="/portfolio/1075/Ontwerp+huisstijl+Binnen+Eten+%7C+Drinken/Binnen+Eten+%7C+Drinken ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/DePleats.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">De Pleats</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/1002/Ontwerp+en+implementatie+website/De+Pleats ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/jazzimpuls-hoofd.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Jazz Impuls</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/986/Ontwerp+en+implementatie+website/Jazz+Impuls ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/BlueJump-promo.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Blue Jump</div>
									<div class="box-text">
										Promotie Blue Jump event									</div>
									<div class="box-more"> <a href="/portfolio/1159/Promotie+Blue+Jump+event/Blue+Jump ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/kokendewalvis.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">de Kok &amp; de Walvis</div>
									<div class="box-text">
										Ontwerp en implementatie website									</div>
									<div class="box-more"> <a href="/portfolio/980/Ontwerp+en+implementatie+website/de+Kok+%26+de+Walvis ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/JanEringa-Koninklijkedagen.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Jan Eringa kleding</div>
									<div class="box-text">
										Ontwerp brochure									</div>
									<div class="box-more"> <a href="/portfolio/1296/Ontwerp+brochure/Jan+Eringa+kleding ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/BVH-group1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">BVH group</div>
									<div class="box-text">
										Ontwerp huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1084/Ontwerp+huisstijl/BVH+group ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/HSM-website-portfolio groot.jpeg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">HSM GROEP BV</div>
									<div class="box-text">
										Realisatie and implementatie webdesign									</div>
									<div class="box-more"> <a href="/portfolio/1349/Realisatie+and+implementatie+webdesign/HSM+GROEP+BV ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="huisstijl">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/14inDozijn1.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">14 in Dozijn</div>
									<div class="box-text">
										Ontwerp huisstijl									</div>
									<div class="box-more"> <a href="/portfolio/1102/Ontwerp+huisstijl/14+in+Dozijn ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Champino-Promo-Poster.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Champino</div>
									<div class="box-text">
										Ontwerp promotie KingsNight									</div>
									<div class="box-more"> <a href="/portfolio/1187/Ontwerp+promotie+KingsNight/Champino ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="grafisch">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Cultuur-in-de-Pleats-Brochure.jpg"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">Culturele Commissie De Pleats Burgum</div>
									<div class="box-text">
										Vormgeving brochure culturele seizoen 2015 - 2016									</div>
									<div class="box-more"> <a href="/portfolio/1138/Vormgeving+brochure+culturele+seizoen+2015+-+2016/Culturele+Commissie+De+Pleats+Burgum ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
									<div class="box" data-category="webdesign">
						<div class="box-image">
							<div data-thumbnail="/upload/custom_pages/portfolio/thumb/Bobtail.png"></div>
							<div class="thumbnail-caption">
								<div class="box-caption">
									<div class="box-title">de Bobtail</div>
									<div class="box-text">
										Ontwerp en implementatie one page responsive website									</div>
									<div class="box-more"> <a href="/portfolio/1258/Ontwerp+en+implementatie+one+page+responsive+website/de+Bobtail ">
											<span class="well well-sm">Lees meer <i class="fa fa-arrow-circle-o-right"></i></span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				
			</div>
		</div>
	</div>


				<!-- end -->


	<!-- weergave externe pagina -->
	
	<!-- FOOTER SECTION -->
	<section id="footer" class="ss-style-invertedrounded">
		<div class="container">
			<div class="hidden-xs col-md-12">
				<p class="copyright pad10">&copy; 2024					<!--
					<a href="https://www.facebook.com/SpinnerzCommunicatie" target="_blank"><i class="fa fa-facebook marg-left5 marg-right5"></i></a>
					<a href="https://twitter.com/spinnerzmedia" target="_blank"><i class="fa fa-twitter marg-right5"></i></a>
					<a href="https://www.linkedin.com/in/nannedijkstra" target="_blank"><i class="fa fa-linkedin marg-right5"></i></a>
-->
					- <a href="https://www.spinnerz.nl">Spinnerz Communicatie<br>Reclame | Vormgeving | Webdesign | Hosting</a>
					<!-- up to top -->
					<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				</p>
			</div>

			<div class="visible-xs col-xs-12">
				<p class="copyright pad10">&copy; 2024					<!--
					<a href="https://www.facebook.com/SpinnerzCommunicatie" target="_blank"><i class="fa fa-facebook marg-left5 marg-right5"></i></a>
					<a href="https://twitter.com/spinnerzmedia" target="_blank"><i class="fa fa-twitter marg-right5"></i></a>
					<a href="https://www.linkedin.com/in/nannedijkstra" target="_blank"><i class="fa fa-linkedin marg-right5"></i></a>
-->
					- <a href="https://www.spinnerz.nl">Spinnerz Communicatie<br>Reclame | Vormgeving | Webdesign | Hosting</a>
					<!-- up to top -->
					<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				</p>
			</div>

		</div>
	</section>
	<!-- //END -->


	<!-- CSS -->


	<!-- SCRIPTS -->
	<script src="/js/jquery.js"></script>
	<script src="/js/bootstrap.min.js"></script>

	<script src="/js/owl.carousel.min.js"></script>

	<script type="text/javascript" src="/revolution/js/jquery.themepunch.revolution.min.js"></script>
	<script type="text/javascript" src="/revolution/js/jquery.themepunch.tools.min.js"></script>


	<script type="text/javascript">
		/* https://learn.jquery.com/using-jquery-core/document-ready/ */
		jQuery(document).ready(function() {

			/* initialize the slider based on the Slider's ID attribute */
			jQuery('#rev_slider_1').show().revolution({

				/* options are 'auto', 'fullwidth' or 'fullscreen' */
				sliderLayout: 'auto',

				/* basic navigation arrows and bullets */
				navigation: {

					arrows: {
						enable: false,
						style: 'zeus',
						hide_onleave: false
					},

					bullets: {
						enable: true,
						style: 'hesperiden',
						hide_onleave: false,
						h_align: 'center',
						v_align: 'bottom',
						h_offset: 0,
						v_offset: 20,
						space: 5
					}
				}
			});
		});
	</script>


	<!-- <script src="/js/retina.js"></script> -->
	<script type="text/javascript" src="/js/scripts.js"></script>
	<script type="text/javascript" src="/js/parallax.js"></script>
	<script type="text/javascript" src="/js/waypoints.min.js"></script>
	<!-- <script type="text/javascript" src="/js/bars.ini.js"></script> -->
	<script type="text/javascript" src="/js/jquery.appear.js"></script>
	<script src="/js/mediaBoxes.min.js"></script>
	<script src="/js/lightbox.js"></script>
	<script src="/js/jquery.validate.js"></script>
	<script type="text/javascript" src="/js/gmap3.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW0UkddS8kwTeQ1vuAozTBOhypC7W5J84"></script>

</body>

</html>