diff options
| -rw-r--r-- | index.html | 163 |
1 files changed, 1 insertions, 162 deletions
@@ -38,164 +38,6 @@ </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;"> @@ -213,10 +55,7 @@ <script async="" src="js/index.js"></script> <section class="intro"> <div class="content"> - <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> + <h1>Hi!</h1> </section> <section> <div class="content"> |