Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
amur
committed
Aug 17, 2016
1 parent
c2cf131
commit 3bee46a
Showing
5 changed files
with
426 additions
and
0 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| /*************** | ||
| * | ||
| * DEMO PAGE STYLES | ||
| * | ||
| *************/ | ||
|
|
||
| * { | ||
| -webkit-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| font-family: 'Roboto Slab', serif; | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| margin: 0; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| h2 { | ||
| text-align: center; | ||
| } | ||
|
|
||
| @keyframes pump { | ||
| 0% { | ||
| transform: scale3d(0.5,0.5,5); | ||
| } | ||
| 50% { | ||
| transform: scale3d(1,1,1); | ||
| } | ||
| 100% { | ||
| transform: scale3d(0.5,0.5,5); | ||
| } | ||
| } | ||
|
|
||
| @keyframes blink { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 50% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| .container { | ||
| display: -webkit-flex; | ||
| display: -moz-flex; | ||
| display: -ms-flex; | ||
| display: -o-flex; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| width: 100%; | ||
| height: 100vh; | ||
| background: #f9f9f9; | ||
|
|
||
| padding: 32px; | ||
| border-bottom: 4px solid #FD1472; | ||
| } | ||
| .typethis, | ||
| .typethis__output { | ||
| display: inline-block; | ||
| position: relative; | ||
| } | ||
| .typethis__output { | ||
| z-index: 1; | ||
| } | ||
|
|
||
|
|
||
| .cursor { | ||
| display: block; | ||
| width: 2px; | ||
| height: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| z-index: 0; | ||
| background-color: #FD1472; | ||
| transition: all 200ms linear; | ||
| animation: blink 1s infinite forwards; | ||
| } | ||
| .cursor.is-done { | ||
| width: 100%; | ||
| animation: none; | ||
| } | ||
|
|
||
| .button__start { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| position: absolute; | ||
| top: 100px; | ||
| right: 100px; | ||
| color: #FD1472; | ||
| border: 2px solid currentColor; | ||
| border-radius: 4px; | ||
| background: transparent; | ||
| transition: all 200ms ease-in-out; | ||
| } | ||
| .button__start:hover, .button__start:focus { | ||
| color: #fafafa; | ||
| border-color: #FD1472; | ||
| background: #FD1472; | ||
| } | ||
|
|
||
|
|
||
| #svg-heart { | ||
| margin-top: 8px; | ||
| transition: all 200ms linear; | ||
| animation: pump 3s infinite forwards; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| .st0{ | ||
| fill:#FD1472; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | ||
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | ||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | ||
| <!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> | ||
| <!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]--> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <title>type-this|</title> | ||
|
|
||
| <meta name="copyright" content="© 2016 Mamutlove"> | ||
| <meta name="description" content="Type-this. A simple #Vanilla #JavaScript plugin that animates any message you want. No #jQuery is needed. No pretentions, just for fun"> | ||
| <meta name="keywords" content="CSS, Vanilla Javascript, JavaScript, type this"> | ||
| <meta name="robots" content="follow, all"> | ||
| <meta http-equiv="author" content="@alejandro_mur"> | ||
|
|
||
| <meta property="twitter:card" content="Type-this. An automatic Javascript writer"> | ||
| <meta property="twitter:url" content="http://www.mamutlove.es/projects/type-this/"> | ||
| <meta property="twitter:title" content="Type-this. A simple CSS helper for neat global HTML message"> | ||
| <meta property="twitter:description" content="Tip off. A simple #Vanilla #JavaScript plugin that animates any message you want to display"> | ||
| <meta property="twitter:image" content="http://www.mamutlove.es/img/logo-mamutlove.jpg" /> | ||
| <meta property="twitter:site" content="@mamutlove"> | ||
|
|
||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="css/normalize.min.css"> | ||
| <link rel="stylesheet" href="css/styles.css"> | ||
| <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
|
|
||
| <h1 class="typethis"></h1> | ||
|
|
||
| </div> | ||
|
|
||
| <script src="js/type-this-1.0.js"></script> | ||
| <script> | ||
|
|
||
| var t = new Typethis({ | ||
| autoWriting: true, | ||
| delay: 600, | ||
| loop: false, | ||
| speed : [200,600], | ||
| words: ["CSS", "SCSS", "JS", "UX", "Spare time"] | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.