diff options
| author | Navan Chauhan <navanchauhan@gmail.com> | 2018-01-22 18:12:40 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-01-22 18:12:40 +0530 |
| commit | 8e3a77a5383569a8a8905fd8f1ddb102af8865f3 (patch) | |
| tree | 5db64c1ff0ef138878e08bc63a568979aee377e9 | |
| parent | 164626b8c1850dc63e31026def8063d0356d4e02 (diff) | |
Update index.html
| -rw-r--r-- | index.html | 163 |
1 files changed, 162 insertions, 1 deletions
@@ -38,6 +38,164 @@ </head> <body data-gr-c-s-loaded="true"> + <style> + * { + box-sizing: border-box + } + + body { + margin: 0; + font-weight: 500; + font-family: HelveticaNeue + } + + section { + width: 100%; + padding: 0 7%; + display: table; + margin: 0; + max-width: none; + background-color: #373b44; + height: 100vh + } + + section:nth-of-type(2n) { + background-color: #3498db + } + + .intro { + height: 90vh + } + + .content { + display: table-cell; + vertical-align: middle + } + + h1 { + font-size: 3em; + display: block; + color: #fff; + font-weight: 300 + } + + p { + font-size: 1.5em; + font-weight: 500; + color: #c3cad9 + } + + a { + font-weight: 700; + color: #373b44; + position: relative + } + + a:hover { + opacity: .8 + } + + a:active { + top: 1px + } + + footer { + padding: 1% 5%; + text-align: center; + background-color: #373b44; + color: #fff + } + + footer a { + color: #fe4b74; + font-weight: 500; + text-decoration: none + } + + @-webkit-keyframes letter-in { + 0% { + top: 1.2em + } + 100% { + top: 0 + } + } + + @keyframes letter-in { + 0% { + top: 1.2em + } + 100% { + top: 0 + } + } + + @-webkit-keyframes letter-out { + 0% { + top: 0 + } + 100% { + top: -1.2em + } + } + + @keyframes letter-out { + 0% { + top: 0 + } + 100% { + top: -1.2em + } + } + + div.changing-title { + font-size: 8vw; + height: 1.2em; + position: relative; + width: 100%; + overflow-y: hidden; + margin-left: 1em; + transform: translate3d(0, 0, 0) + } + + div.changing-title h1 { + font-size: 1em; + position: absolute; + left: 0; + top: 0; + margin: 0 + } + + div.changing-title h1 .letter { + position: relative; + top: 1.2em + } + + div.changing-title h1 .letter.in { + -webkit-animation-name: letter-in; + animation-name: letter-in; + -webkit-animation-duration: .3s; + animation-duration: .3s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards + } + + div.changing-title h1 .letter.out { + top: 0; + -webkit-animation-name: letter-out; + animation-name: letter-out; + -webkit-animation-duration: .3s; + animation-duration: .3s; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards + } + + #cssmenu, + </style> <div id="cssmenu"> <div id="menu-button">Menu</div> <ul style="display: block;"> @@ -55,7 +213,10 @@ <script async="" src="js/index.js"></script> <section class="intro"> <div class="content"> - <h1>Hi!</h1> + <div class="changing-title"> + <h1 class=""><span class="letter out" style="animation-delay: 0s;">H</span><span class="letter out" style="animation-delay: 0.1s;">i</span><span class="letter out" style="animation-delay: 0.2s;">!</span><span class="letter out" style="animation-delay: 0.3s;"> </span><span class="letter out" style="animation-delay: 0.4s;">I</span><span class="letter out" style="animation-delay: 0.5s;"> </span><span class="letter out" style="animation-delay: 0.6s;">a</span><span class="letter out" style="animation-delay: 0.7s;">m</span><span class="letter out" style="animation-delay: 0.8s;"> </span><span class="letter out" style="animation-delay: 0.9s;">न</span><span class="letter out" style="animation-delay: 1s;">व</span><span class="letter out" style="animation-delay: 1.1s;">न</span></h1> + <h1 class="current"><span class="letter in" style="animation-delay: 0.5s;">H</span><span class="letter in" style="animation-delay: 0.6s;">i</span><span class="letter in" style="animation-delay: 0.7s;">!</span><span class="letter in" style="animation-delay: 0.8s;"> </span><span class="letter in" style="animation-delay: 0.9s;">I</span><span class="letter in" style="animation-delay: 1s;"> </span><span class="letter in" style="animation-delay: 1.1s;">a</span><span class="letter in" style="animation-delay: 1.2s;">m</span><span class="letter in" style="animation-delay: 1.3s;"> </span><span class="letter in" style="animation-delay: 1.4s;">न</span><span class="letter in" style="animation-delay: 1.5s;">व</span><span class="letter in" style="animation-delay: 1.6s;">न</span></h1></div> + </div> </section> <section> <div class="content"> |