Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <!--
- Page tumblr by www.SuperSTYKA.fr
- Don't remove this credit, please!
- -->
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}"/>
- <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
- <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
- <style type="text/css">
- /* CSS reset */
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
- html,body{margin:0;padding:0;}
- table{border-collapse:collapse;border-spacing:0;}
- fieldset,img{border:0;}
- input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
- address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
- ol,ul{list-style:none;}
- caption,th{text-align:left;}
- h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
- q:before,q:after{content:'';}
- abbr,acronym{border:0;}
- /* General */
- body{
- background:#D5DED9;
- color: #333;
- font-family: 'Oswald', Arial, sans-serif;
- font-size: 13px;
- }
- .container{
- position:relative;
- }
- a{
- color: #000;
- text-decoration: none;
- }
- .clr{
- clear: both;
- }
- .main{
- position:relative;
- width:800px;
- margin: 0 auto;
- }
- h1{
- margin:0px;
- padding:20px 20px 10px 20px;
- font-size:34px;
- color:#99B2B7;
- text-shadow:1px 1px 1px #fff;
- text-align:left;
- font-weight:400;
- text-align:center;
- }
- h1 span a{
- display:block;
- font-size: 14px;
- font-family: Georgia, serif;
- font-style: italic;
- color:#99B2B7;
- padding-top:10px;
- }
- h1 span a:hover{
- display:block;
- font-size: 14px;
- font-family: Georgia, serif;
- font-style: italic;
- color:#948C75;
- padding-top:10px;
- }
- .view{
- width: 160px;
- height: 213px;
- margin: 10px;
- float: left;
- border: 10px solid #fff;
- overflow: hidden;
- position: relative;
- text-align: center;
- -webkit-box-shadow: 1px 1px 2px #e6e6e6;
- -moz-box-shadow: 1px 1px 2px #e6e6e6;
- box-shadow: 1px 1px 2px #e6e6e6;
- cursor: default;
- background: #fff;
- }
- .view .mask,.view .content{
- width: 160px;
- height: 213px;
- position: absolute;
- overflow: hidden;
- top: 0;
- left: 0;
- }
- .view img{
- display: block;
- position: relative;
- }
- .view h2{
- text-transform: uppercase;
- color: #fff;
- text-align: center;
- position: relative;
- font-size: 17px;
- padding: 10px;
- background: rgba(0, 0, 0, 0.8);
- margin: 20px 0 0 0;
- }
- .view p{
- font-family: Georgia, serif;
- font-size: 12px;
- position: relative;
- color: #fff;
- padding: 10px 20px 20px;
- text-align: center;
- }
- .view a.info{
- display: inline-block;
- text-decoration: none;
- padding: 7px 14px;
- background: #31343D;
- color: #fff;
- text-transform: none;
- }
- .view a.info:hover{
- border: 1px solid #99B2B7;
- }
- .view-second img{
- -webkit-transition: all 0.2s ease-in;
- -moz-transition: all 0.2s ease-in;
- -o-transition: all 0.2s ease-in;
- -ms-transition: all 0.2s ease-in;
- transition: all 0.2s ease-in;
- }
- .view-second .mask{
- background-color: rgba(115,146,184, 0.7);
- width: 300px;
- padding: 60px;
- height: 300px;
- -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: alpha(opacity=0);
- opacity: 0;
- -webkit-transform: translate(265px, 145px) rotate(45deg);
- -moz-transform: translate(265px, 145px) rotate(45deg);
- -o-transform: translate(265px, 145px) rotate(45deg);
- -ms-transform: translate(265px, 145px) rotate(45deg);
- transform: translate(265px, 145px) rotate(45deg);
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
- .view-second h2{
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- background: transparent;
- margin: 10px 10px 0px 10px;
- -webkit-transform: translate(200px, -200px);
- -moz-transform: translate(200px, -200px);
- -o-transform: translate(200px, -200px);
- -ms-transform: translate(200px, -200px);
- transform: translate(200px, -200px);
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
- .view-second p{
- -webkit-transform: translate(-200px, 200px);
- -moz-transform: translate(-200px, 200px);
- -o-transform: translate(-200px, 200px);
- -ms-transform: translate(-200px, 200px);
- transform: translate(-200px, 200px);
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
- .view-second a.info{
- -webkit-transform: translate(0px, 100px);
- -moz-transform: translate(0px, 100px);
- -o-transform: translate(0px, 100px);
- -ms-transform: translate(0px, 100px);
- transform: translate(0px, 100px);
- -webkit-transition: all 0.2s 0.1s ease-in-out;
- -moz-transition: all 0.2s 0.1s ease-in-out;
- -o-transition: all 0.2s 0.1s ease-in-out;
- -ms-transition: all 0.2s 0.1s ease-in-out;
- transition: all 0.2s 0.1s ease-in-out;
- }
- .view-second:hover .mask{
- -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: alpha(opacity=100);
- opacity: 1;
- -webkit-transform: translate(-80px, -125px) rotate(45deg);
- -moz-transform: translate(-80px, -125px) rotate(45deg);
- -o-transform: translate(-80px, -125px) rotate(45deg);
- -ms-transform: translate(-80px, -125px) rotate(45deg);
- transform: translate(-80px, -125px) rotate(45deg);
- }
- .view-second:hover h2{
- -webkit-transform: translate(0px,0px);
- -moz-transform: translate(0px,0px);
- -o-transform: translate(0px,0px);
- -ms-transform: translate(0px,0px);
- transform: translate(0px,0px);
- -webkit-transition-delay: 0.3s;
- -moz-transition-delay: 0.3s;
- -o-transition-delay: 0.3s;
- -ms-transition-delay: 0.3s;
- transition-delay: 0.3s;
- }
- .view-second:hover p{
- -webkit-transform: translate(0px,0px);
- -moz-transform: translate(0px,0px);
- -o-transform: translate(0px,0px);
- -ms-transform: translate(0px,0px);
- transform: translate(0px,0px);
- -webkit-transition-delay: 0.4s;
- -moz-transition-delay: 0.4s;
- -o-transition-delay: 0.4s;
- -ms-transition-delay: 0.4s;
- transition-delay: 0.4s;
- }
- .view-second:hover a.info{
- -webkit-transform: translate(0px,0px);
- -moz-transform: translate(0px,0px);
- -o-transform: translate(0px,0px);
- -ms-transform: translate(0px,0px);
- transform: translate(0px,0px);
- -webkit-transition-delay: 0.5s;
- -moz-transition-delay: 0.5s;
- -o-transition-delay: 0.5s;
- -ms-transition-delay: 0.5s;
- transition-delay: 0.5s;
- }
- #STYKA{
- font-size: 8px;
- float: left;
- position: fixed;
- bottom: 5px;
- right: 5px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>My Favorite Movies<span><a href="/">back</a></span></h1>
- <div class="main">
- <div class="view view-second">
- <img src="http://images.allocine.fr/r_160_240/b_1_d6d6d6/medias/nmedia/18/35/18/30/19253896.jpg" />
- <div class="mask"></div>
- <div class="content">
- <h2>fight club</h2>
- <p>A film that entertains dangerously. A brilliant masterpiece.</p>
- <a href="http://www.youtube.com/watch?v=M8PRC3HbWqo" class="info" target="_bank">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- <div class="view view-second">
- <img src="URL IMG HERE" />
- <div class="mask"></div>
- <div class="content">
- <h2>the film's title</h2>
- <p>Your little opinion about the movie here</p>
- <a href="URL TRAILER HERE" class="info">Trailer</a>
- </div>
- </div>
- </div>
- </div>
- <div id="STYKA"><a href="http://superstyka.tumblr.com" target="_bank">By STYKA</a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement