Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
dmd-web-two/animated-card.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
110 lines (102 sloc)
4.69 KB
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
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="manifest" href="site.webmanifest"> | |
| <link rel="apple-touch-icon" href="icon.png"> | |
| <!-- Place favicon.ico in the root directory --> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/animated-card.css"> | |
| <script src="https://use.fontawesome.com/d4e127e2d0.js"></script> | |
| <script src="https://kit.fontawesome.com/9c045b0ca9.js" crossorigin="anonymous"></script> | |
| <meta name="theme-color" content="#fafafa"> | |
| </head> | |
| <body> | |
| <!--[if IE]> | |
| <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
| <![endif]--> | |
| <!-- Add your site or application content here --> | |
| <div id='wrap'> | |
| <input type='checkbox'> | |
| <div class='back'> | |
| <b>←</b> | |
| </div> | |
| <div class='frame'> | |
| <input checked='checked' id='rad1' name='rad' type='radio'> | |
| <input id='rad2' name='rad' type='radio'> | |
| <input id='rad3' name='rad' type='radio'> | |
| <div class='nav'></div> | |
| <div class='nav'></div> | |
| <div class='nav'></div> | |
| <div class='indicator'></div> | |
| <div class='inner'> | |
| <div class='content'> | |
| <h1 data-splitting='chars'>Awesome CSS Animation</h1> | |
| <p>This animation consists of a lot of transition and transform properties as discussed on "Defining CSS Animations". For example:(On next tab)</p> | |
| </div> | |
| <div class='content'> | |
| <h1 data-splitting='chars'>Awesome CSS Animation</h1> | |
| <p>body #wrap { | |
| -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| -webkit-transition-delay: 2.16s; | |
| transition-delay: 2.16s; | |
| -webkit-transform: scale(1) rotate(0deg); | |
| transform: scale(1) rotate(0deg); | |
| }</p> | |
| </div> | |
| <div class='content'> | |
| <h1 data-splitting='chars'>Awesome CSS Animation</h1> | |
| <p>Hi again, its me!</p> | |
| </div> | |
| <div class='more'> | |
| <b>→</b> | |
| <b>→</b> | |
| <b>→</b> | |
| </div> | |
| <div class='images'> | |
| <div> | |
| <div class='image'></div> | |
| </div> | |
| <div> | |
| <div class='image'></div> | |
| </div> | |
| <div> | |
| <div class='image'></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='box'> | |
| <div class='internal'> | |
| <p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Cras varius. Vivamus laoreet. Donec vitae sapien ut libero venenatis faucibus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p> | |
| <div class='image'></div> | |
| </div> | |
| <div class='internal'> | |
| <p>Phasellus viverra nulla ut metus varius laoreet. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Duis lobortis massa imperdiet quam. Aenean vulputate eleifend tellus. Morbi mollis tellus ac sapien.</p> | |
| <div class='image'></div> | |
| </div> | |
| <div class='internal'> | |
| <p>Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Aenean commodo ligula eget dolor. Vestibulum fringilla pede sit amet augue. Fusce convallis metus id felis luctus adipiscing. Ut id nisl quis enim dignissim sagittis.</p> | |
| <div class='image'></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/vendor/modernizr-3.8.0.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script> | |
| <script src="js/plugins.js"></script> | |
| <script src="js/main.js"></script> | |
| <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> | |
| <script> | |
| window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; | |
| ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview') | |
| </script> | |
| <script src="https://www.google-analytics.com/analytics.js" async></script> | |
| </body> | |
| </html> |