Scribd Logo
Upload

Welcome to Scribd!

  • Form 1

    Uploaded by

    rajgurjar2606
    6 views3 pages
    Yeah

    Original Title

    form1

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Yeah

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views3 pages

    Form 1

    Uploaded by

    rajgurjar2606
    Yeah

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <html>

    <style type="text/css">
    $background-color: #F15A5C
    $easing-function: cubic-bezier(.06,.63,0,1)
    $animation-duration: 1s
    *
    margin: 0
    padding: 0
    box-sizing: border-box
    html, body
    height: 100%
    background-color: $background-color
    font-family: 'Roboto Slab', serif
    color: white
    // see http://css-tricks.com/transitions-only-after-page-load/
    .preload *
    transition: none !important
    label
    display: block
    font-weight: bold
    font-size: small
    text-transform: uppercase
    font-size: 0.7em
    margin-bottom: 0.35em
    input[type="text"], input[type="password"]
    width: 100%
    border: none
    padding: 0.5em
    border-radius: 2px
    margin-bottom: 0.5em
    color: #333
    &:focus
    outline: none
    box-shadow: inset -1px -1px 3px rgba(0, 0, 0, .3)
    button
    padding-left: 1.5em
    padding-right: 1.5em
    padding-bottom: 0.5em
    padding-top: 0.5em
    border: none
    border-radius: 2px
    background-color: #7E5AF1
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25)
    color: white
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45)
    small
    font-size: 1em
    .login--login-submit
    float: right

    .login--container
    width: 600px
    background-color: $background-color
    margin: 0 auto
    position: relative
    top: 25%
    .login--toggle-container
    position: absolute
    background-color: $background-color
    right: 0
    line-height: 2.5em
    width: 50%
    height: 120px
    text-align: right
    cursor: pointer
    transform: perspective(1000px) translateZ(1px)
    transform-origin: 0% 0%
    transition: all $animation-duration $easing-function
    backface-visibility: hidden
    //border: 1px solid black
    .js-toggle-login
    font-size: 4em
    text-decoration: underline
    .login--active &
    transform: perspective(1000px) rotateY(180deg)
    background-color: darken($background-color, 25%)
    .login--username-container, .login--password-container
    float: left
    background-color: $background-color
    width: 50%
    height: 120px
    padding: .5em

    .login--username-container
    transform-origin: 100% 0%
    transform: perspective(1000px) rotateY(180deg)
    transition: all $animation-duration $easing-function
    background-color: darken($background-color, 25%)
    backface-visibility: hidden
    .login--active &
    transform: perspective(1000px) rotateY(0deg)
    background-color: $background-color
    footer
    position: absolute
    bottom: 12px
    left: 20px
    </style>
    <body>

    <div class='preload login--container'>


    <div class='login--form'>
    <div class='login--username-container'>
    <label>Username</label>
    <input autofocus placeholder='Username' type='text'>
    </div>
    <div class='login--password-container'>
    <label>Password</label>
    <input placeholder='Password' type='password'>
    <button class='js-toggle-login login--login-submit'>Login</button>
    </div>
    </div>
    <div class='login--toggle-container'>
    <small>Hey you,</small>
    <div class='js-toggle-login'>Login</div>
    <small>already</small>
    </div>
    </div>
    <footer>
    <a class='twitter-follow-button' data-show-count='false' href='https://twitter
    .com/code_dependant'>
    Follow @code_dependant
    </a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.t
    est(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);j
    s.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefor
    e(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </footer>
    </body>
    <script type="text/javascript">
    $ ->
    $(".login--container").removeClass("preload")
    @timer = window.setTimeout =>
    $(".login--container").toggleClass("login--active")
    , 2000
    $(".js-toggle-login").click =>
    window.clearTimeout(@timer)
    $(".login--container").toggleClass("login--active")
    $(".login--username-container input").focus()
    </script>
    </html>

    You might also like