Skip to content

Instantly share code, notes, and snippets.

@KristerV
Created October 15, 2015 14:03
Show Gist options
  • Save KristerV/dd3675f4ed97d24827ac to your computer and use it in GitHub Desktop.
Save KristerV/dd3675f4ed97d24827ac to your computer and use it in GitHub Desktop.
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);
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment