Created
October 15, 2015 14:03
-
-
Save KristerV/dd3675f4ed97d24827ac to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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