Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

animations

Browse Source
This commit is contained in:
Kyle
2020-12-23 12:12:30 -08:00
parent d79187db9f
commit b49ba36450
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
css/style-1.css
View File

@@ -398,6 +398,31 @@ textarea.input {
/*Animated cards*/
.animated-scene {
perspective: 100rem;
}
.animated-card-1 {
animation: animatedcardone 3s ease-in-out 0s alternate infinite;
-moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
-webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
-o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
transform-style: preserve-3d;
}
.animation-delay-2 {
animation-delay: 2s !important;
}
.animation-delay-4 {
animation-delay: 4s !important;
}
@keyframes animatedcardone {
0% {transform: rotateY(15deg);}
100% {transform: rotateY(-15deg);}
}
/*Home Page only*/ /*Home Page only*/
.sample-grid { .sample-grid {
display: grid; display: grid;
@@ -405,9 +430,11 @@ textarea.input {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.sample-grid > img { .sample-grid > img {
display: block;
max-width: 375px; max-width: 375px;
width: 100%; width: 100%;
height: auto; height: auto;
margin: 1rem auto;
} }
@media only screen and (min-width: 750px) { @media only screen and (min-width: 750px) {
.sample-grid { .sample-grid {

6
index.php
View File

@@ -8,7 +8,7 @@
<div class='layer center'></div> <div class='layer center'></div>
<div class='layer readable-background center'> <div class='layer readable-background center'>
<div class='sample-grid'> <div class='sample-grid'>
<img src='/img/samples/sample1.png'> <div class='animated-scene'><img src='/img/samples/sample1.png' class='animated-card-1'></div>
<div class='vertical-center'> <div class='vertical-center'>
<h1 class='padding margin-bottom'>Choose from a Variety of Card Frames</h1> <h1 class='padding margin-bottom'>Choose from a Variety of Card Frames</h1>
<h3 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href='/creator/'>Take a look</a>!</h3> <h3 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href='/creator/'>Take a look</a>!</h3>
@@ -21,12 +21,12 @@
<h1 class='padding margin-bottom'>Customize to Your Heart's Content</h1> <h1 class='padding margin-bottom'>Customize to Your Heart's Content</h1>
<h3 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href='/creator/'>Try it out</a>!</h3> <h3 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href='/creator/'>Try it out</a>!</h3>
</div> </div>
<img src='/img/samples/sample2.png'> <div class='animated-scene'><img src='/img/samples/sample2.png' class='animated-card-1 animation-delay-2'></div>
</div> </div>
</div> </div>
<div class='layer readable-background center'> <div class='layer readable-background center'>
<div class='sample-grid'> <div class='sample-grid'>
<img src='/img/samples/sample3.png'> <div class='animated-scene'><img src='/img/samples/sample3.png' class='animated-card-1 animation-delay-4'></div>
<div class='vertical-center'> <div class='vertical-center'>
<h1 class='padding margin-bottom'>Bling Out Existing Favorites</h1> <h1 class='padding margin-bottom'>Bling Out Existing Favorites</h1>
<h3 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href='/creator/'>Go on, do it</a>!</h3> <h3 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href='/creator/'>Go on, do it</a>!</h3>