Phone Mockup With Login & Signup Form
close
Phone Mockup With Login & Signup Form

Phone Mockup With Login & Signup Form

Phone Mockup With Login & Signup Form

In this article I am going to share with you phone mockup with login and signup form. It is very attractive and useful specially in making your website responsive.

You can easily remove the makeup of a phone and have responsive sign in and sign up form.

What's happening programmers today we are going to design Phone Mockup With Login & Signup Form

As you know the HTML directory is essential for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.


Create New folder because we are going to work in that folder give it a name Phone Mockup With Login & Signup Form and save all the files in it as they are said in the steps below.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js


Save It As Phone Mockup With Login & Signup Form/index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="css/style.css"><div class="phone"><div class="screen"><div class="form"><div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div><form class="register-form"><input type="text" placeholder="name"/><input type="password" placeholder="password"/><input type="text" placeholder="email address"/><button>create</button><p class="message">Already registered? <a href="#">Sign In</a></p></form><form class="login-form"><input type="text" placeholder="username"/><input type="password" placeholder="password"/><button>login</button><p class="message">Not registered? <a href="#">Create an account</a></p></form></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script><script  src="js/index.js"></script> 

Make External Stylesheet

With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css folder.

The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href=' Phone Mockup With Login & Signup Form/css/style.css' />
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

Before going that I want to tell you something that I don't have bought hosting yet so I can't upload project files I usually do zippyshare but I am not sure that that files are available at that time when you reach this article or not.

If you face any difficulty please leave your comments in the comment section.
Without CSS our this script ( Phone Mockup With Login & Signup Form) will never look radiant. So here we are, our HTML directory is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Phone Mockup With Login & Signup Form/css/style.css :

body{background:#fff;font-family:'Helvetica Neue', sans-serif}.phone{position:relative;display:block;background:#fafafa;width:324px;height:624px;border:2px solid #e6e6e6;-webkit-border-radius:40px;-webkit-background-clip:padding-box;-moz-border-radius:40px;-moz-background-clip:padding;border-radius:40px;background-clip:padding-box;margin:100px auto;padding:50px 10px;box-sizing:border-box}.phone:before,
.phone:after{content:'';position:absolute;left:50%;display:block;background:rgba(0, 0, 0, 0.1);-webkit-border-radius:100px;-webkit-background-clip:padding-box;-moz-border-radius:100px;-moz-background-clip:padding;border-radius:100px;background-clip:padding-box}.phone:before{top:23px;width:100px;height:6px;margin-left:-50px}.phone:after{bottom:10px;width:60px;height:30px;margin-left:-30px}.phone .screen{background:rgba(0, 0, 0, 0.1);width:300px;height:520px;overflow:hidden;border:2px solid #e6e6e6;box-sizing:border-box}.form{position:relative;z-index:1;background:#FFFFFF;height:100%;padding:40px 30px;text-align:center;box-sizing:border-box}.form .thumbnail{background:#EF3B3A;width:150px;height:150px;margin:0 auto 30px;padding:50px 30px;border-top-left-radius:100%;border-top-right-radius:100%;border-bottom-left-radius:100%;border-bottom-right-radius:100%;box-sizing:border-box}.form .thumbnail img{display:block;width:100%}.form input{outline:0;background:#f2f2f2;width:100%;border:0;margin:0 0 15px;padding:15px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-sizing:border-box;font-size:14px}.form button{outline:0;background:#EF3B3A;width:100%;border:0;padding:15px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#FFFFFF;font-size:14px;transition:all 0.3 ease;cursor:pointer}.form .message{margin:15px 0 0;color:#b3b3b3;font-size:12px}.form .message a{color:#EF3B3A;text-decoration:none}.form .register-form{display:none}

In the CSS code provided by I have embedded the CSS code for more cup of mobile phone and responsiveness you can have a look on the code.


In the above code some color codes are used that are listed below you can change them as required.
  • #fff
  • #fafafa
  • #e6e6e6
  • rgba(0, 0, 0, 0.1)
  • rgba(0, 0, 0, 0.1)
  • #e6e6e6
  • #FFFFFF
  • #EF3B3A
  • #f2f2f2
  • #EF3B3A
  • #FFFFFF
  • #b3b3b3
  • #EF3B3A

  • So we have written HTML directory and customised it and now we will add some functionality in this project ( Phone Mockup With Login & Signup Form) to make it work as we want it to be.

    To make this project ( Phone Mockup With Login & Signup Form) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project ( Phone Mockup With Login & Signup Form) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Phone Mockup With Login & Signup Form/js/index.js :

    $(".message a").click(function(){
    $("form").animate({height: "toggle", opacity: "toggle"}, "slow");
    });
    To make this login and signup form work properly we need to have some jquery code so that we can toggle between login and signup forms on click and that can only be done using jQuery or JavaScript in this case we are using jQuery.

    Consequence :

    So here we are, We have done and our project Phone Mockup With Login & Signup Form is ready now you can save all the files as provided.

    Like CSS files in css folder and JavaScript files in a js folder name. Below is folder tree of the files and folders of this project.


    • Phone Mockup With Login & Signup Form
      • css
        • style.css
      • js
        • index.js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project ( Phone Mockup With Login & Signup Form) File :

    Phone Mockup With Login & Signup Form.zip
    File Size 4.31 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.
    Thank you !




    Disqus Codes

    No comments

    Notifications

    Disqus Logo