<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="I create things.">
		<title>Emre Şanlı</title>
		<meta property="og:title" content="Emre Şanlı">
		<meta property="og:description" content="I create things.">
		<meta property="og:image" content="https://lh3.googleusercontent.com/OXUwqrLuwzECwloiAppyuOohh3oI_NpghAGmTq2Rx138VVXj_NLH020yFkDbgoPEaFD2vg6ArLr6V-huaA=w600-h314-c">
		<meta property="og:url" content="http://www.emresanli.com/feed">
		<meta property="og:type" content="website">
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@mes">
		<meta name="twitter:title" content="Emre Şanlı">
		<meta name="twitter:description" content="I create things.">
		<meta name="twitter:image" content="https://lh3.googleusercontent.com/OXUwqrLuwzECwloiAppyuOohh3oI_NpghAGmTq2Rx138VVXj_NLH020yFkDbgoPEaFD2vg6ArLr6V-huaA=w600-h314-c">
		<link rel="author" href="https://plus.google.com/106363389429225400725">
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			@import url('https://fonts.googleapis.com/css?family=Cinzel:700|Fjalla+One|Great+Vibes&subset=latin-ext');
			::selection {
				color: inherit;
				background: #0e0e0e;
			}
			a, a:hover, a:active {
				text-decoration: none;
			}
			h1 {
				font-family: 'Cinzel', serif;
				font-size: 50px;
				line-height: 50px;
				margin: 30px 0 10px;
				color: #3f3f3f;
			}
			h1 a, h1 a:link, h1 a:hover, h1 a:active {
				color: #3f3f3f !important;
			}
			h2 {
				font-family: 'Great Vibes', cursive;
				font-size: 50px;
				line-height: 50px;
				margin: 10px 0 30px;
				color: #7a7a7a;
			}
			h3 {
				font-family: 'Fjalla One', sans-serif;
				font-size: 30px;
				line-height: 36px;
				letter-spacing: 1px;
				margin: 40px 0;
				color: #f0f0f0;
				text-shadow: -1px 0 #3f3f3f, 0 1px #3f3f3f, 1px 0 #3f3f3f, 0 -1px #3f3f3f;
			}
			h4 {
				font-family: 'Fjalla One', sans-serif;
				font-size: 20px;
				line-height: 20px;
				margin: 40px 0;
				color: #f0f0f0;
				text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
			}
			.main, .footer {
				background: #f0f0f0;
			}
			.project {
				display: block;
				position: relative;
				overflow: hidden;
				width: 100%;
				padding-top: 66%;
				background-size: cover;
				background-position: top center;
				transition: all 2s ease;
				border-radius: 2px;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
			.project:hover {
				background-position: bottom center;
			}
			.project:before {
				position: absolute;
				top: 10%;
				left: 50%;
				content: '\f00e';
				font-family: 'FontAwesome';
				font-size: 50px;
				color: #e6e6e6;
				opacity: 0;
				z-index: 1;
				transition: all 0.5s ease;
				transform: translate(-50%, -50%);
			}
			.project:hover:before {
				top: 50%;
				opacity: 1;
			}
			.project:after {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				background: rgba(0, 0, 0, 0.5);
				content: '';
				opacity: 0;
				transition: all 0.5s ease;
			}
			.project:hover:after {
				opacity: 1;
			}
			.contact {
				padding: 50px 0;
				background: #3f3f3f;
			}
			.contact a {
				color: #f0f0f0;
			}
			.contact a .fa-stack-1x {
				color: #3f3f3f;
			}
			.contact a .fa {
				transition: all .5s ease;
				transform: rotate(0);
			}
			.contact a:hover .fa {
				transform: rotate(360deg);
			}
			@media (max-width: 360px) {
				h1 {
					font-size: 36px;
					line-height: 36px;
				}
				h2 {
					font-size: 32px;
					line-height: 32px;
				}
			}
			@media (max-width: 767px) {
				h4 {
					font-size: 16px;
					line-height: 16px;
				}
				.project {
					padding-top: 66% !important;
				}
				.contact a .fa-stack {
					width: 42px;
					height: 42px;
					line-height: 42px;
				}
				.contact a .fa-stack-2x {
					font-size: 42px;
				}
				.contact a .fa-stack-1x {
					font-size: 21px;
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="container">
				<div class="row">
					<div class="text-center">
						<h1><a href="/">Emre Şanlı</a></h1>
						<h2>I create things.</h2>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<a class="project" href="http://blog.emresanli.com/" style="background-image: url(https://lh3.googleusercontent.com/n_kJZOvl4-tOse6_hY6DZEa6sV3bO3blJslTMqt-gnfFxH1FWnXDR7KrK8j-oRhhSwRiJgG2siRNVDFlhw=s0);"></a>
						<h3 class="text-center">Cuteness</h3>
					</div>
					<div class="col-sm-6">
						<a class="project" href="/bob/" style="background-image: url(https://lh3.googleusercontent.com/eNgmoT4ZYcirL_P6d6Jc9O0-OWWTU33UvUCOmB5tH0X8f1gcbBi0mcYPFY6zdcF6Oan7BH8aRVUo5Fj99g=s0);"></a>
						<h3 class="text-center">SpongeBob SquarePants</h3>
					</div>
					<div class="col-sm-6">
						<a class="project" href="http://www.videoland.club/" style="background-image: url(https://lh3.googleusercontent.com/YVp155ix1qbfKurYq6F2Z-rJfN0rDGtD2mQPbcKQv5OFwKUHvNWdhWC7tPooCJUOKCYEbeBSxIROYhCqoQ=s0);"></a>
						<h3 class="text-center">Videoland</h3>
					</div>
					<div class="col-sm-6">
						<a class="project" href="/" style="background-image: url(https://lh3.googleusercontent.com/dzORm5RREGXH29T5ZP51FzjB3byYwa0X03dNJaY1QG6mfWkkPkucd5v3ZBLytFit0bUZJmInoMCd9lKJuA=s0);" onclick="javascript:alert('Film Archive website is being renovated&hellip;'); return false;"></a>
						<h3 class="text-center">Film Archive</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="contact">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="mailto:hello@emresanli.com"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-envelope fa-stack-1x"></i></span></a>
						</div>
					</div>
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="http://fb.me/memres"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x"></i></span></a>
						</div>
					</div>
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="http://github.com/memres"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-github fa-stack-1x"></i></span></a>
						</div>
					</div>
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="http://www.last.fm/user/memres"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-lastfm fa-stack-1x"></i></span></a>
						</div>
					</div>
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="http://twitter.com/mes"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span></a>
						</div>
					</div>
					<div class="col-xs-2 text-center">
						<div class="row">
							<a target="_blank" href="http://www.youtube.com/user/memres"><span class="fa-stack fa-3x"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-youtube-play fa-stack-1x"></i></span></a>
						</div>
					</div>
					<!--
						http://www.flickr.com/photos/memres
						http://plus.google.com/+emresanlicom
						http://www.imdb.com/user/ur38625998
						http://www.linkedin.com/in/memres
						http://paypal.me/memres
						http://www.pinterest.com/memres
						http://soundcloud.com/memres
						http://open.spotify.com/user/memres-tr
						http://cuteness.tumblr.com/
						http://vimeo.com/mes
						http://vk.com/memres
						http://memres.wordpress.com/
					-->
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="container">
				<div class="row">
					<div class="text-center">
						<h4><i class="fa fa-desktop"></i> <i class="fa fa-tablet"></i> <i class="fa fa-mobile-phone"></i> Home of device friendly design</h4>
					</div>
				</div>
			</div>
		</div>
		<script>var sc_invisible = 1, sc_project = 5408945, sc_security = "f75ba4c3";</script>
		<script src="http://statcounter.com/counter/counter.js"></script>
		<script>
			window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
			ga('create', 'UA-28085788-1', 'auto');
			ga('send', 'pageview');
		</script>
		<script async src="https://www.google-analytics.com/analytics.js"></script>
	</body>
</html>