|
|
| <html> |
| <head> |
| <meta charset="UTF-8"> |
|
|
|
|
| |
| |
| |
| |
|
|
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
|
|
| <title>EDIT YOUR TITLE HERE</title> |
| <link rel="shortcut icon" href="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/114/movie-camera_1f3a5.png"> |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'> |
| <style type="text/css"> |
|
|
| body{ |
| font-family: calibri; |
| margin:0px; |
| padding:0px; |
| font-size: 12px; |
| line-height: 110%; |
| background-color: #fff; |
| color: #000; |
| overflow-x: hidden;} |
|
|
| a {text-decoration: none; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| a:-webkit-any-link {text-decoration: none;} |
|
|
| img {margin-bottom: -2px;} |
|
|
| ::-webkit-scrollbar-thumb:vertical {background-color: #000; border: 3px solid #fff; height: 10px;} |
| ::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;} |
| ::-webkit-scrollbar {background-color: #fff; height:10px; width:12px;} |
|
|
| #s-m-t-tooltip{ |
| position:absolute; |
| z-index:90000; |
| display:inline-block; |
| background-color: #fff; |
| color: #fff; |
| padding: 6px 10px; |
| font-size: 8px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| word-wrap: break-word; |
| word-break: break-all; |
| line-height: 120%;} |
|
|
| img {display: block;} |
|
|
| .container {width: 1040px; margin: auto; margin-top: 108px;} |
|
|
| .top {width: 990px; |
| padding: 20px; |
| background-color: #111; /* change topbar background color */ |
| position: fixed; |
| border-bottom: 10px solid #fff; |
| border-top: 20px solid #fff; |
| z-index: 5; |
| top: 0px; |
| color: #fff; |
| font-size: 8px; |
| letter-spacing: 1px;} |
|
|
| .tti {font-family: 'Open Sans'; font-size: 26px;} |
|
|
| .tli {border: 1px solid #fff; padding: 10px; display: inline-block; float: right;} |
|
|
| .tli a {color:#fff; font-family: 'Open Sans'; font-size: 10px; letter-spacing: 2px;} |
| .tli a:hover {color: #f4e909;} |
|
|
| #sb {border: 1px solid #111; color: #111;} |
| #sb:hover {background-color: #111; color: #fff;} |
|
|
| .tent {width: 250px; |
| height: 250px; |
| font-family: 'Open Sans'; |
| font-size: 16px; |
| background-color: #f1f1f1; |
| font-weight: 700; |
| display: table; |
| float: left; |
| margin-right: 10px; |
| margin-bottom: 10px; |
| position: relative; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| .tsub {color: #222; |
| text-align: center; |
| letter-spacing: 2px; |
| width: 250px; |
| display: table-cell; |
| vertical-align: middle;} |
|
|
| .ti {background-color: #fff; |
| text-align: center; |
| padding: 10px; |
| line-height: 110%; |
| text-transform: uppercase; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| .tent:hover .ti {opacity: 0.0; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| .hhover {opacity: 0.0; |
| position: absolute; |
| width: 230px; |
| height: 230px; |
| padding: 10px; |
| left: 0px; |
| color:#fff; |
| text-align: center; |
| display: table; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| .tent:hover .hhover {background-color: rgba(0,0,0,0.6); |
| opacity: 1.0; |
| transition-duration: 0.6s; |
| -moz-transition-duration: 0.6s; |
| -webkit-transition-duration: 0.6s; |
| -o-transition-duration: 0.6s;} |
|
|
| .htent {display: table-cell; |
| vertical-align: middle; |
| font-size: 10px; |
| font-family: calibri; |
| color: #ddd;} |
|
|
| .hti {letter-spacing: 2px; |
| width: 90%; |
| margin: auto; |
| border-bottom: 1px solid #fff; |
| margin-bottom: 4px; |
| font-size: 16px; |
| font-family: 'Open Sans'; |
| padding: 4px 0px; |
| color: #fff; |
| line-height: 110%; |
| text-transform: uppercase;} |
|
|
| .dat {font-family: times; font-style: italic; letter-spacing: 1px;} /* change date font family */ |
|
|
| .dat strong {font-weight: normal; color: #e4c519;} /* change gold text color */ |
|
|
| </style> |
| </head> |
| <body> |
| <div class="container"> |
|
|
| <div class="top"> |
|
|
|
|
| <div class="tti" style="margin: 5px 0px;">YOUR TITLE GOES HERE</div> |
| SOME MORE TEXT CAN GO HERE |
| </div> |
|
|
| |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub"> |
| <div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">kiss kiss bang bang (2005)</div> |
| <span class="dat"><strong>watched</strong> february 23<br></span> |
| ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub"> |
| <span class="ti">monsters inc.</span></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">monsters inc. (2001)</div> |
| <span class="dat"><strong>watched</strong> january 02<br></span> |
| ★ ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub"> |
| <div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">kiss kiss bang bang (2005)</div> |
| <span class="dat"><strong>watched</strong> february 23<br></span> |
| ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub"> |
| <span class="ti">monsters inc.</span></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">monsters inc. (2001)</div> |
| <span class="dat"><strong>watched</strong> january 02<br></span> |
| ★ ★ ★ |
| </div></div></div> |
|
|
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub"> |
| <div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">kiss kiss bang bang (2005)</div> |
| <span class="dat"><strong>watched</strong> february 23<br></span> |
| ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub"> |
| <span class="ti">monsters inc.</span></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">monsters inc. (2001)</div> |
| <span class="dat"><strong>watched</strong> january 02<br></span> |
| ★ ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/7a2c7f92b6296d9760ad3a43afb43487/tumblr_inline_mobc4d0wCl1qz4rgp.png');"><div class="tsub"> |
| <div class="ti" style="margin: 0px 20px;">long film title<br> goes here</div></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">kiss kiss bang bang (2005)</div> |
| <span class="dat"><strong>watched</strong> february 23<br></span> |
| ★ ★ |
| </div></div></div> |
|
|
| |
|
|
|
|
| <div class="tent" style="background-image: url('http://media.tumblr.com/1b2640a5e503e366060803adcf8f652a/tumblr_inline_mocakjrUQm1qz4rgp.png');"><div class="tsub"> |
| <span class="ti">monsters inc.</span></div> |
| <div class="hhover"><div class="htent"> |
| <div class="hti">monsters inc. (2001)</div> |
| <span class="dat"><strong>watched</strong> january 02<br></span> |
| ★ ★ ★ |
| </div></div></div> |
|
|
| </div> |
| </body> |
| </html> |