KristerV/index.css

## index.css
body {
	background-image: url(film1.jpg);
	background-size: cover;
	background-position: center;
	color: white;
	margin: 0;
	font-family: Verdana, Arial;
}

.film-wrapper {
	display: inline-block;
	margin: 20px;
	margin-right: 0;
	margin-bottom: 0;
}

.background {
	background-color: rgba(0,0,0, 0.7);
	width: 100%;
	min-height: 100%;
}

.titles {
	text-align: center;
	margin-top: 70px;
	padding: 50px;
}

.titles p {
	max-width: 400px;
	margin: auto;
}

.header {
	text-align: right;
	line-height: 70px;
	top: 0;
	height: 70px;
	background-color: #212121;
	position: fixed;
	width: 100%;
	z-index: 1;
}
.header a, .header input {
	margin: 10px;
	margin-left: 0;
}

a {
	color: #919191;
	text-decoration: none;
	-webkit-transition: color 500ms;
	-moz-transition: color 500ms;
	-o-transition: color 500ms;
	transition: color 500ms;
}

a:hover {
	color: white;
}

input {
	color: white;
	background-color: transparent;
	border: 2px solid #515151;
	border-radius: 20px;
	padding: 5px;
}

input:focus {
	outline: 0;
}

.image-wrapper {
	position: relative;
}
.image-wrapper .image {
}
.image-wrapper .overlay {
	position: absolute;
	top: 0;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}
.image-wrapper .overlay:hover {
	opacity: 1;
}

## index.html
<head>
	<title>ABC</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="jquery.min.js"></script>
	<script src="index.js"></script>
</head>
<body>
	<div class="header">
		<input id="search" placeholder="Otsing">
		<a href="#">Home</a>
		<a href="#">Browse movies</a>
		<a href="#">Login</a>
		<a href="#">Register</a>
	</div>
	<div class="background">
		<div class="titles">
			<h1>Downloed HD shizz</h1>
			<p>Welcome to the official YTS website. Here you will be able to browse and download movies in excellent 720p, 1080p and 3D quality, all at the smallest file size.</p>
		</div>
	</div>
</body>

## index.js
var andmebaas = {
	1999: 'Matrix',
	2000: 'Mingi film',
	2001: 'Kolmas film'
}

$(document).ready(function(){
	$('#search').on('keyup', function(event){
		var aasta = $(event.target).val();
		var filminimi = andmebaas[aasta];

		if (!filminimi) {
			$('.film-wrapper').remove();
			return;
		}

		var film = '<div class="film-wrapper">\
			<div class="image-wrapper">\
				<img class="image" src="film1.jpg">\
				<div class="overlay">\
					OVERLAY\
				</div>\
			</div>\
			<p><b>' + filminimi + '</b></p>\
			<p>' + aasta + '</p>\
		</div>';
		$('.film-wrapper').remove();
		$('.background').append(film);
	})
})
	body {
	background-image: url(film1.jpg);
	background-size: cover;
	background-position: center;
	color: white;
	margin: 0;
	font-family: Verdana, Arial;
	}

	.film-wrapper {
	display: inline-block;
	margin: 20px;
	margin-right: 0;
	margin-bottom: 0;
	}

	.background {
	background-color: rgba(0,0,0, 0.7);
	width: 100%;
	min-height: 100%;
	}

	.titles {
	text-align: center;
	margin-top: 70px;
	padding: 50px;
	}

	.titles p {
	max-width: 400px;
	margin: auto;
	}

	.header {
	text-align: right;
	line-height: 70px;
	top: 0;
	height: 70px;
	background-color: #212121;
	position: fixed;
	width: 100%;
	z-index: 1;
	}
	.header a, .header input {
	margin: 10px;
	margin-left: 0;
	}

	a {
	color: #919191;
	text-decoration: none;
	-webkit-transition: color 500ms;
	-moz-transition: color 500ms;
	-o-transition: color 500ms;
	transition: color 500ms;
	}

	a:hover {
	color: white;
	}

	input {
	color: white;
	background-color: transparent;
	border: 2px solid #515151;
	border-radius: 20px;
	padding: 5px;
	}

	input:focus {
	outline: 0;
	}

	.image-wrapper {
	position: relative;
	}
	.image-wrapper .image {
	}
	.image-wrapper .overlay {
	position: absolute;
	top: 0;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	}
	.image-wrapper .overlay:hover {
	opacity: 1;
	}
	<head>
	<title>ABC</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="jquery.min.js"></script>
	<script src="index.js"></script>
	</head>
	<body>
	<div class="header">
	<input id="search" placeholder="Otsing">
	<a href="#">Home</a>
	<a href="#">Browse movies</a>
	<a href="#">Login</a>
	<a href="#">Register</a>
	</div>
	<div class="background">
	<div class="titles">
	<h1>Downloed HD shizz</h1>
	<p>Welcome to the official YTS website. Here you will be able to browse and download movies in excellent 720p, 1080p and 3D quality, all at the smallest file size.</p>
	</div>
	</div>
	</body>
	var andmebaas = {
	1999: 'Matrix',
	2000: 'Mingi film',
	2001: 'Kolmas film'
	}

	$(document).ready(function(){
	$('#search').on('keyup', function(event){
	var aasta = $(event.target).val();
	var filminimi = andmebaas[aasta];

	if (!filminimi) {
	$('.film-wrapper').remove();
	return;
	}

	var film = '<div class="film-wrapper">\
	<div class="image-wrapper">\
	<img class="image" src="film1.jpg">\
	<div class="overlay">\
	OVERLAY\
	</div>\
	</div>\
	<p><b>' + filminimi + '</b></p>\
	<p>' + aasta + '</p>\
	</div>';
	$('.film-wrapper').remove();
	$('.background').append(film);
	})
	})