css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              div(class="box-contain")
  div(id="blue-border")
    div(class="form-info")
      h3 thank you for watching! <br> you may also watch <br> my other pens.<br>see you next time.
  div(class="form-contain")
    div(class="title-contain")
      h2 Try the Form
      p sign up and see the magic
    div(class="input-contain")
      form(id="form")
        input(type="text" placeholder="Email" id="Email" pattern="[a-z]{1,15}" title="Username should only contain lowercase letters. e.g. john")
      input(placeholder="Password" id="password")
      p by signing up, i agree the Terms of Service and Privacy Policy.
    div(class="confirm-btn")
      button
        | create my account
    div(class="blog-container")
      div(class="blockarea")
        | or
      a(href="http://lichin.me")
        button
          | visit my study blog

            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,300italic,400italic,700italic,900,900italic);
*
  margin 0
  padding 0
  -webkit-touch-callout none /* iOS Safari */
  -webkit-user-select none  /* Chrome/Safari/Opera */
  -moz-user-select none      /* Firefox */
  -ms-user-select none      /* IE/Edge */
  user-select none
input
  -webkit-user-select auto
  user-select auto
span
  color black
h2,p
  color #F1FAFB
  font-weight 700
::-webkit-input-placeholder/* WebKit, Blink, Edge */
  color #F1FAFB
  font-weight 400
  font-size 1.4em
:-moz-placeholder /* Mozilla Firefox 4 to 18 */
  color #F1FAFB
  font-weight 400
::-moz-placeholder/* Mozilla Firefox 19+ */
  color #F1FAFB
  font-weight 400
  
body
  background #FFEF9C
  display flex
  flex-direction column
  -webkit-justify-content center
  justify-content center
  align-items center
  font-family "Lato"
  padding 0
  margin 0
  .box-contain
    position relative
    margin 50px 0
    width 560px
    height 400px
    background #0EA8EC
    #blue-border
      position absolute
      border 5px solid #0E39FE
      top -13px
      left -13px
      width calc(100% - 17px)
      height calc(100% - 17px)
      background transparent
      transition all .5s ease
      pointer-events none
      .form-info
        transition all .5s ease
        padding 50px
        opacity 0
        visibility hidden
        &.info-disappear
          opacity 1
          visibility visible
          transition all .5s ease
        h3
          font-size 3em
          letter-spacing 1px
          color #F1FAFB
          display none
    .form-contain
      position relative
      margin 30px auto
      width 70%
      height 100%
      text-align center
      transition all .5s ease
      opacity 1
      visibility visible
      &.form-disappear
        opacity 0
        visibility hidden
      .title-contain
        h2
          font-size 2em
          letter-spacing 1.5px
        p
          font-size 1em
          font-weight 300
      .input-contain
        margin-top 50px
        input[type="text"],input[type="password"],#password 
          margin 0 auto
          display block
          width 340px
          height 40px
          font-size 1em
          font-weight 700
          padding 5px 10px
          line-height 35px
          letter-spacing 1px
          margin-bottom 15px
          border 3px solid #F1FAFB
          border-radius 0px
          color #0E39FE
          background transparent
          outline none
          z-index 1
          transition border-color .35s ease,color .35s ease
          &:invalid
            border-color #ff4d4d
        #password
          letter-spacing 1px
          font-size 16px
          &.square
            letter-spacing: 0.01em
            -webkit-text-security square !important
            -moz-text-security square !imporant
            -o-text-security square !imporant
            text-security square !important
          &.circle
            -webkit-text-size-adjust 2
            letter-spacing 0.2em
            font-size 20px
            -webkit-text-security circle !important
            -moz-text-security circle !imporant
            -o-text-security circle !imporant
            text-security circle !important
          &.disc
            letter-spacing 0.2em
            font-size 20px
            -webkit-text-security disc !important
            -moz-text-security disc !imporant
            -o-text-security disc !imporant
            text-security disc !important
        p
          font-weight 300
    .confirm-btn
      position absolute
      bottom 10px
      left calc(50% - 125px)
      cursor pointer 
      button
        border 5px solid transparent
        background #0E39FE
        width 250px
        height 45px
        color #F1FAFB
        font-size .7em
        font-family "Lato"
        letter-spacing 1px
        text-transform uppercase
        cursor pointer
        outline none
        transition all .3s ease
        &:hover,&:focus
          transition all .5s ease
          border 5px solid #6C85FF
    span
      margin-top 30px
    .blog-container
      margin-top 100px
      padding-top 10px
      .blockarea
        margin-bottom 10px
        color #50514f
      a
        text-decoration none
      button 
        cursor pointer
        overflow hidden
        outline none
        text-transform uppercase
        color white
        background #FE938C 
        letter-spacing 0.1em 
        font-weight 400
        padding 0.5rem 1.5rem 0.5rem 1.5rem
        border none
        position relative
        -webkit-transition all .7s ease
        transition all .7s ease
        &:hover
          background transparent
          color #FE938C 
          &:before , &:after
            -webkit-transition all .7s ease
            transition all .7s ease
            width 100%
        &:before , &:after
          content ''
          position absolute
          top 0
          left 0px
          width 0px
          height 2px
          background #FE938C 
          transition all .4s ease
        &:after
          top inherit
          left inherit
          bottom 0
          right 0
@media(max-width:560px)
  body
    .box-contain
      width 300px
      height 400px
      #blue-border
        top -13px
        left -13px
        height calc(95% + 3px)
        width calc(95% + 3px)
        .form-info
          padding 50px
          h3
            font-size 1.8em
            letter-spacing 1px
      .form-contain
        width 80%
        .input-contain
          margin-top 30px
          input[type="text"],input[type="password"],#password 
            width 200px
            height 35px
            padding 5px 10px
            line-height 40px
        .confirm-btn
          left calc(50% - 100px)
          button
            width 200px
      .blog-container
        margin-top 130px

            
          
!
            
              checkSize();
function checkSize() {
    if ($(window).width() > 560) {
        countt = 0;
        $("#Email").focus(function() {
            $('#Email').css("color", "#0E39FE");
            $('#password').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "355px",
                height: "45px",
                top: "135px",
                left: "95px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("Type your email");
            $(".title-contain p").html("new?");
        });
      
        $("#password").focus(function() {
            $('#password').css("color", "#0E39FE");
            $('#Email').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "355px",
                height: "45px",
                top: "205px",
                left: "95px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("choose you password");
            $(".title-contain p").html("feel the magic");
        });

        $(".confirm-btn button").focus(function() {
            $("#blue-border").css({
                width: "250",
                height: "45px",
                top: "95%",
                left: "calc(50% - 125px)",
                "border-color": "transparent",
                "border-width": "1px",
                "z-index": "-1",
            });
        });

        $(".confirm-btn button").click(function() {
            $("#blue-border").css({
                width: "calc(100% - 17px)",
                height: "calc(100% - 17px)",
                top: "-13px",
                left: "-13px",
                "border-color": "#0E39FE",
                "border-width": "5px",
                "z-index": "0",
            });
        });
    } else {

        $("#Email").focus(function() {
            $('#Email').css("color", "#0E39FE");
            $('#password').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "215px",
                height: "40px",
                top: "155px",
                left: "35px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("Type your email");
            $(".title-contain p").html("first time?");
        });
      
        $("#password").focus(function() {
            $('#password').css("color", "#0E39FE");
            $('#Email').css("color", "#F1FAFB");
            $("#blue-border").css({
                width: "215px",
                height: "40px",
                top: "220px",
                left: "35px",
                "border-color": "#0E39FE",
                "border-width": "8px",
                "z-index": "5",
            });
            $(".title-contain h2").html("choose you password");
            $(".title-contain p").html("feel the magic");
        });

        $(".confirm-btn button").click(function() {
            $("#blue-border").css({
                width: "calc(95% + 3px)",
                height: "calc(95% + 3px)",
                top: "-13px",
                left: "-13px",
                "border-color": "#0E39FE",
                "border-width": "5px",
                "z-index": "0",
            });
        });
    }
}

$(".confirm-btn button").click(function() {

    $(".form-contain").addClass("form-disappear");
    $(".form-info h3").delay(300).fadeIn(700);
    $('#password').removeClass('disc');
    if ($(window).width() < 560) {
        $(".form-info h3").css("font-size", "1.8em");
    }else{
        $(".form-info h3").css("font-size", "3em");
    }
    $(".form-info").delay(500).addClass("info-disappear");

    setTimeout(function() {
        $("#Email").val("");
        $("#password").val("");

        $(".title-contain h2").html("Try the Form");
        $(".title-contain p").html("sign up and see the magic");

        $(".form-contain").removeClass("form-disappear");
        $(".form-info").removeClass("info-disappear");
        $(".form-info h3").hide();

    }, 4000);

});

(function() {

    var input = document.getElementById('Email');
    var blue = document.getElementById('blue-border');
    var form = document.getElementById('form');
    var elem = document.createElement('div');
    elem.id = 'notify';
    elem.style.display = 'none';

    form.appendChild(elem);

    input.addEventListener('invalid', function(event) {
        event.preventDefault();
        if (!event.target.validity.valid) {
            input.className = 'invalid animated shake';
            blue.className = 'invalid animated shake';
            $("#blue-border").css("border-color", "#ff4d4d");
            $('#Email').css("color", "#ff4d4d");

            setTimeout(function() {
                input.className = "";
                blue.className = "";
                $("#blue-border").css("border-color", "#0E39FE");
                $('#Email').css("color", "#0E39FE");
            }, 1000);
        }
    });

    input.addEventListener('input', function(event) {
        if ('block' === elem.style.display) {
            input.className = '';
            elem.style.display = 'none';
        }
    });

})();

var x = document.getElementById("password");
document.getElementById
var style = window.getComputedStyle(x);

if (style.webkitTextSecurity){}else{
    x.setAttribute("type", "password");
}

$('#password').on('keyup', function() {
    if (this.value.length == 0) {
        $('#password').removeClass('disc');
        $('#password').removeClass('circle');
        $('#password').removeClass('square');
        $(".title-contain p").html("feel the magic");
    } else if (this.value.length < 4) {
        $('#password').removeClass('disc');
        $('#password').removeClass('square');
        $('#password').addClass('circle');
        $(".title-contain p").html("keep going.");
    } else if (this.value.length < 7) {
        $('#password').removeClass('circle');
        $('#password').removeClass('square');
        $('#password').addClass('disc');
        $(".title-contain p").html("almost!");
    } else if (this.value.length < 10) {
        $('#password').removeClass('disc');
        $('#password').removeClass('circle');
        $('#password').addClass('square');
        $(".title-contain p").html("great!");
    }
});
window.addEventListener('resize', checkSize);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console