Depuración y preparación de plantilla
This commit is contained in:
28
resources/public/vendor/hover3d/bower.json
vendored
28
resources/public/vendor/hover3d/bower.json
vendored
@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "hover3d",
|
||||
"version": "1.1.0",
|
||||
"homepage": "https://github.com/ariona/hover3d",
|
||||
"authors": [
|
||||
"\"Ariona",
|
||||
"Rian <rian@ariona.net> (http://ariona.net)\""
|
||||
],
|
||||
"description": "Simple jQuery Plugin for Creating 3d Tilt effect",
|
||||
"main": "\"dist/js/jquery.hover3d.min.js\"",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"hover",
|
||||
"hover",
|
||||
"effect",
|
||||
"3d",
|
||||
"hover",
|
||||
"tilt"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
File diff suppressed because one or more lines are too long
@ -1,34 +0,0 @@
|
||||
{
|
||||
"name": "hover3d",
|
||||
"title": "jQuery Hover3d",
|
||||
"description": "Simple jQuery plugin for creating 3d hover effect using CSS3 3d transform",
|
||||
"keywords": [
|
||||
"hover",
|
||||
"effect",
|
||||
"ui",
|
||||
"image",
|
||||
"animation"
|
||||
],
|
||||
"version": "1.1.0",
|
||||
"author": {
|
||||
"name": "Rian Ariona",
|
||||
"url": "http://ariona.net"
|
||||
},
|
||||
"maintainers": [{
|
||||
"name": "Rian Ariona",
|
||||
"email": "rian@ariona.net",
|
||||
"url": "http://ariona.net"
|
||||
}],
|
||||
"licenses": [{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/ariona/hover3d/blob/master/LICENSE"
|
||||
}],
|
||||
"demo": "http://ariona.github.io/hover3d/",
|
||||
"bugs": "https://github.com/ariona/hover3d/issues",
|
||||
"homepage": "https://github.com/ariona/hover3d/",
|
||||
"docs": "https://github.com/ariona/hover3d/",
|
||||
"download": "https://github.com/ariona/hover3d/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
BIN
resources/public/vendor/hover3d/hover3d.png
vendored
BIN
resources/public/vendor/hover3d/hover3d.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
140
resources/public/vendor/hover3d/index.html
vendored
140
resources/public/vendor/hover3d/index.html
vendored
@ -1,140 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>jQuery Hover3d</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/ariona/hover3d"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
||||
|
||||
<div class="site-content">
|
||||
<div class="align-center">
|
||||
<img src="dist/images/hover3d.png" width=150 height=121 alt="">
|
||||
<h1>jQuery Hover3d</h1>
|
||||
<div class="share">
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/ariona/hover3d" data-icon="octicon-star" data-count-href="/ariona/hover3d/stargazers" data-count-api="/repos/ariona/hover3d#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ariona/hover3d on GitHub">Star</a>
|
||||
<!-- Place this tag where you want the button to render. -->
|
||||
<a class="github-button" href="https://github.com/ariona/hover3d/fork" data-icon="octicon-repo-forked" data-count-href="/ariona/hover3d/network" data-count-api="/repos/ariona/hover3d#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ariona/hover3d on GitHub">Fork</a>
|
||||
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=jQuery Hover3d for creating 3d Hover effect">Tweet</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on <a href="http://codepen.io/ariona/pen/JopOOr">Codepen 3D hover plane effect.</a></p>
|
||||
|
||||
<p>The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value</p>
|
||||
|
||||
|
||||
<div class="demo demo-1">
|
||||
<h2 class="section-title">Demo #1 Awesome tilt effect</h2>
|
||||
|
||||
<p>Simple hover effect for your project</p>
|
||||
<div class="project-list">
|
||||
<div class="project">
|
||||
<div class="project__card">
|
||||
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
|
||||
<div class="project__detail">
|
||||
<h2 class="project__title"><a href="#">Project Name</a></h2>
|
||||
<small class="project__category"><a href="#">Photography</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<div class="project__card">
|
||||
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=129" width=600 height=400 alt=""></a>
|
||||
<div class="project__detail">
|
||||
<h2 class="project__title"><a href="#">Project Name</a></h2>
|
||||
<small class="project__category"><a href="#">Photography</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<div class="project__card">
|
||||
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=119" width=600 height=400 alt=""></a>
|
||||
<div class="project__detail">
|
||||
<h2 class="project__title"><a href="#">Project Name</a></h2>
|
||||
<small class="project__category"><a href="#">Photography</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<div class="project__card">
|
||||
<a href="" class="project__image"><img src="http://unsplash.it/600/400?image=89" width=600 height=400 alt=""></a>
|
||||
<div class="project__detail">
|
||||
<h2 class="project__title"><a href="#">Project Name</a></h2>
|
||||
<small class="project__category"><a href="#">Photography</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="demo demo-2">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2 class="section-title">Demo #2: AppleTv Icon</h2>
|
||||
<p>By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect</p>
|
||||
|
||||
<pre>
|
||||
$(".movie").hover3d({
|
||||
selector: ".movie__card",
|
||||
shine: true,
|
||||
sensitivity: 20,
|
||||
});</pre>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="movie">
|
||||
<div class="movie__card">
|
||||
<div class="layer-1"></div>
|
||||
<div class="layer-2"></div>
|
||||
<div class="layer-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.1.min.js"><\\/script>')</script>
|
||||
<!-- Place this tag right after the last button or just before your close body tag. -->
|
||||
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
||||
<script>window.twttr = (function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0],
|
||||
t = window.twttr || {};
|
||||
if (d.getElementById(id)) return t;
|
||||
js = d.createElement(s);
|
||||
js.id = id;
|
||||
js.src = "https://platform.twitter.com/widgets.js";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
|
||||
t._e = [];
|
||||
t.ready = function(f) {
|
||||
t._e.push(f);
|
||||
};
|
||||
|
||||
return t;
|
||||
}(document, "script", "twitter-wjs"));</script>
|
||||
<script src="dist/js/jquery.hover3d.js" ></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(".project").hover3d({
|
||||
selector: ".project__card"
|
||||
});
|
||||
|
||||
$(".movie").hover3d({
|
||||
selector: ".movie__card",
|
||||
shine: true,
|
||||
sensitivity: 20,
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
resources/public/vendor/hover3d/package.json
vendored
35
resources/public/vendor/hover3d/package.json
vendored
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "hover3d",
|
||||
"version": "1.0.0",
|
||||
"description": "jQuery Plugin for create 3d Hover Effect by utilizing CSS3 transform property",
|
||||
"main": "gulpfile.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/ariona/hover3d.git"
|
||||
},
|
||||
"keywords": [
|
||||
"jQuery",
|
||||
"3d",
|
||||
"Hover",
|
||||
"Effect"
|
||||
],
|
||||
"author": "Rian Ariona",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ariona/hover3d/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ariona/hover3d#readme",
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.11.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
"gulp-jshint": "^2.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.2.0",
|
||||
"gulp-uglify": "^1.5.3",
|
||||
"jshint": "^2.9.1"
|
||||
}
|
||||
}
|
||||
@ -1,270 +0,0 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before, &:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: karla, sans-serif;
|
||||
line-height: 1.8;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: Hind, sans-serif;
|
||||
color: var(--dark--200);
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: lighten(blue,30%);
|
||||
}
|
||||
|
||||
.site-content{
|
||||
width: 990px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 100px 0;
|
||||
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.align-center{
|
||||
text-align: center;
|
||||
h1{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.share{
|
||||
margin-bottom: 50px;
|
||||
span, a, iframe{
|
||||
vertical-align: middle;
|
||||
|
||||
span{
|
||||
vertical-align: middle!important;
|
||||
width: 130px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo{
|
||||
margin: 100px 0;
|
||||
|
||||
h2{
|
||||
margin-bottom: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
}
|
||||
.demo-1{
|
||||
text-align: center;
|
||||
}
|
||||
.demo-2{
|
||||
text-align: left;
|
||||
|
||||
.section-title{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.columns{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
|
||||
.column{
|
||||
width: 50%;
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
}
|
||||
h2{
|
||||
margin-bottom: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
pre{
|
||||
background-color: #fbfbfb;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
// Demo 1 : Project Hover Effect
|
||||
.project{
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 15px;
|
||||
|
||||
&-list{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
&__image{
|
||||
display : block;
|
||||
position : relative;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content : " ";
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
position : absolute;
|
||||
left : 0;
|
||||
top : 0;
|
||||
background : linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.4));
|
||||
transition : opacity .3s ease;
|
||||
opacity : 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
position : relative;
|
||||
transition : box-shadow .3s ease;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0);
|
||||
|
||||
&.hover-in{
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
&.hover-out{
|
||||
transition : transform .2s ease-in;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
|
||||
.project{
|
||||
|
||||
&__card{box-shadow: 0 10px 30px rgba(0,0,0,.4);}
|
||||
&__image:after{ opacity: 1; }
|
||||
&__detail{
|
||||
border-width : 10px;
|
||||
box-shadow : 0 10px 30px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
&__title, &__category{
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__title{
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__detail{
|
||||
position : absolute;
|
||||
left : 30px;
|
||||
right : 30px;
|
||||
top : 30px;
|
||||
bottom : 30px;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content : center;
|
||||
text-align : center;
|
||||
transform : translateZ(30px);
|
||||
border : 0 solid #00BCD4;
|
||||
transition : border .4s ease;
|
||||
}
|
||||
|
||||
&__title{
|
||||
margin : 0 0 10px;
|
||||
font-size : 36px;
|
||||
font-weight : 700;
|
||||
transition : .4s ease;
|
||||
opacity : 0;
|
||||
transform : translateY(40px) scale(0);
|
||||
will-change : transform;
|
||||
|
||||
a{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__category{
|
||||
opacity : 0;
|
||||
transition : .4s ease;
|
||||
transition-delay : .1s;
|
||||
transform : translateY(40px) scale(0);
|
||||
will-change : transform;
|
||||
a{
|
||||
color : rgba(white,.8);
|
||||
font-size : 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Demo 2 : AppleTV Icon Effect
|
||||
.movie{
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
|
||||
&-list{
|
||||
&:after{
|
||||
content :" ";
|
||||
display : block;
|
||||
clear : both;
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
[class*="layer"]{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.layer-1{
|
||||
background-image: url(dist/images/deadpool-bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
.layer-2{
|
||||
background-image: url(dist/images/deadpool.png);
|
||||
background-size: cover;
|
||||
transform: translateZ(30px);
|
||||
}
|
||||
.layer-3{
|
||||
background-image: url(dist/images/deadpool-title.png);
|
||||
background-size: cover;
|
||||
transform: translateZ(50px);
|
||||
}
|
||||
.shine{
|
||||
border-radius: 10px
|
||||
}
|
||||
}
|
||||
210
resources/public/vendor/hover3d/style.css
vendored
210
resources/public/vendor/hover3d/style.css
vendored
@ -1,210 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
*:before, *:after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: karla, sans-serif;
|
||||
line-height: 1.8;
|
||||
color: #666; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: Hind, sans-serif;
|
||||
color: #333;
|
||||
margin: 2em 0 1em; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #9999ff; }
|
||||
|
||||
.site-content {
|
||||
width: 990px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 100px 0; }
|
||||
.site-content:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: both; }
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
text-transform: uppercase; }
|
||||
|
||||
.align-center {
|
||||
text-align: center; }
|
||||
.align-center h1 {
|
||||
margin-top: 0; }
|
||||
|
||||
.share {
|
||||
margin-bottom: 50px; }
|
||||
.share span, .share a, .share iframe {
|
||||
vertical-align: middle; }
|
||||
.share span span, .share a span, .share iframe span {
|
||||
vertical-align: middle !important;
|
||||
width: 130px !important; }
|
||||
|
||||
.demo {
|
||||
margin: 100px 0; }
|
||||
.demo h2 {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1; }
|
||||
|
||||
.demo-1 {
|
||||
text-align: center; }
|
||||
|
||||
.demo-2 {
|
||||
text-align: left; }
|
||||
.demo-2 .section-title {
|
||||
text-align: left; }
|
||||
|
||||
.columns:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: both; }
|
||||
|
||||
.columns .column {
|
||||
width: 50%;
|
||||
float: left;
|
||||
min-height: 1px; }
|
||||
|
||||
.columns h2 {
|
||||
margin-bottom: 20px;
|
||||
line-height: 1; }
|
||||
|
||||
pre {
|
||||
background-color: #fbfbfb;
|
||||
padding: 10px; }
|
||||
|
||||
.project {
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 15px; }
|
||||
.project-list:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: both; }
|
||||
.project__image {
|
||||
display: block;
|
||||
position: relative; }
|
||||
.project__image img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block; }
|
||||
.project__image:after {
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
|
||||
transition: opacity .3s ease;
|
||||
opacity: 0; }
|
||||
.project__card {
|
||||
position: relative;
|
||||
transition: box-shadow .3s ease;
|
||||
box-shadow: 0 10px 30px transparent; }
|
||||
.project__card.hover-in {
|
||||
transition: -webkit-transform .2s ease-out;
|
||||
transition: transform .2s ease-out;
|
||||
transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
|
||||
.project__card.hover-out {
|
||||
transition: -webkit-transform .2s ease-in;
|
||||
transition: transform .2s ease-in;
|
||||
transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
|
||||
.project:hover .project__card {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
|
||||
.project:hover .project__image:after {
|
||||
opacity: 1; }
|
||||
.project:hover .project__detail {
|
||||
border-width: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
|
||||
.project:hover .project__title, .project:hover .project__category {
|
||||
-webkit-transform: translateY(0) scale(1);
|
||||
-ms-transform: translateY(0) scale(1);
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1; }
|
||||
.project:hover .project__title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
line-height: 1; }
|
||||
.project__detail {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
bottom: 30px;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
-webkit-transform: translateZ(30px);
|
||||
transform: translateZ(30px);
|
||||
border: 0 solid #00BCD4;
|
||||
transition: border .4s ease; }
|
||||
.project__title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
transition: .4s ease;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(40px) scale(0);
|
||||
-ms-transform: translateY(40px) scale(0);
|
||||
transform: translateY(40px) scale(0);
|
||||
will-change: transform; }
|
||||
.project__title a {
|
||||
color: white; }
|
||||
.project__category {
|
||||
opacity: 0;
|
||||
transition: .4s ease;
|
||||
transition-delay: .1s;
|
||||
-webkit-transform: translateY(40px) scale(0);
|
||||
-ms-transform: translateY(40px) scale(0);
|
||||
transform: translateY(40px) scale(0);
|
||||
will-change: transform; }
|
||||
.project__category a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.3em; }
|
||||
|
||||
.movie {
|
||||
margin: 0 auto;
|
||||
width: 250px; }
|
||||
.movie-list:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
clear: both; }
|
||||
.movie__card {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
transition: .2s ease-out; }
|
||||
.movie [class*="layer"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10px; }
|
||||
.movie .layer-1 {
|
||||
background-image: url(dist/images/deadpool-bg.png);
|
||||
background-size: cover; }
|
||||
.movie .layer-2 {
|
||||
background-image: url(dist/images/deadpool.png);
|
||||
background-size: cover;
|
||||
-webkit-transform: translateZ(30px);
|
||||
transform: translateZ(30px); }
|
||||
.movie .layer-3 {
|
||||
background-image: url(dist/images/deadpool-title.png);
|
||||
background-size: cover;
|
||||
-webkit-transform: translateZ(50px);
|
||||
transform: translateZ(50px); }
|
||||
.movie .shine {
|
||||
border-radius: 10px; }
|
||||
Reference in New Issue
Block a user