Registration Form - Login Form Marketing Style
close
Registration Form - Login Form Marketing Style

Registration Form - Login Form Marketing Style

Registration Form - Login Form Marketing Style

Hello guys today in this article I am going to share with you a registration form with a marketing style.

This is full with registration form which will provide you a functionality of login and signup.

Using this form user can sign up and login to your website.

One thing that I want to tell you is that it is full weight and looks amazing and beautiful than you have a look on it.

I created it and I think that you will like it that's why I am sharing it with you.

Good day people today we are going to design Registration Form Login Form Marketing Style

As you know the HTML directory is necessary 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.

Preview Of Registration Form - Login Form Marketing Style

Registration Form - Login Form Marketing Style


Create New folder because we are going to work in that folder give it a name Registration Form Login Form Marketing Style 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://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


Save It As Registration Form Login Form Marketing Style/index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"><div class="hero"><div class="container"><div class="column"><h1>Welcome to Softweb Tuts!</h1><p>Do you want blogger widgets <a href="#">Click Here</a> and get any widget you want for blogger free.</p></div><div class="column"><div class="wv-tabs"><div class="wv-tabs-header"><div class="wv-tabs-header__tab wv-tabs-header__tab--active" data-tab="1">User</div><div class="wv-tabs-header__tab" data-tab="2">Developer</div></div><div class="wv-tabs-content"><div class="wv-tabs-content__panel wv-tabs-content__panel--active" data-tab="1"><div class="wv-button-group"><button class="wv-button wv-button--facebook"><i class="fa fa-facebook"></i><span>Facebook</span></button><button class="wv-button wv-button--twitter"><i class="fa fa-twitter"></i><span>Twitter</span></button><button class="wv-button wv-button--github"><i class="fa fa-github-alt"></i><span>Github</span></button><button class="wv-button wv-button--google"><i class="fa fa-google"></i><span>Google</span></button></div><div class="wv-divider"></div><form class="wv-form"><input class="wv-input" type="email" placeholder="Email Address"/><input class="wv-input" type="password" placeholder="Password"/><button class="wv-button" type="submit"><span>Sign In</span></button></form></div><div class="wv-tabs-content__panel" data-tab="2"><div class="wv-button-group wv-button-group--developer"><button class="wv-button wv-button--github"><i class="fa fa-github-alt"></i><span>Github</span></button><button class="wv-button wv-button--facebook"><i class="fa fa-facebook"></i><span>Facebook</span></button><button class="wv-button wv-button--twitter"><i class="fa fa-twitter"></i><span>Twitter</span></button><button class="wv-button wv-button--google"><i class="fa fa-google"></i><span>Google</span></button></div><div class="wv-divider"></div><form class="wv-form"><input class="wv-input" type="email" placeholder="Email Address"/><input class="wv-input" type="password" placeholder="Password"/><button class="wv-button" type="submit"><span>Sign In</span></button></form></div></div></div></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.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='Registration Form Login Form Marketing Style/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.

In the above markup I have written a code for HTML form that is login and signup form and also the others that are required for this registration form.
Without CSS our this script (Registration Form Login Form Marketing Style) will never look magnificent. So here we are, our HTML directory is ready now we have to customize 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 Registration Form Login Form Marketing Style/css/style.css :

body{background:#F3F3F3;width:100%;height:100%;font-family:"Montserrat";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wv-tabs{z-index:1;position:relative;background:#FFF;width:400px;border-radius:4px;overflow:hidden}.wv-tabs-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.wv-tabs-header__tab{background:#DD3E48;width:100%;padding:20px;color:#FFF;font-size:16px;text-align:center;cursor:pointer}.wv-tabs-header__tab--active{background:#FFF;color:#F0525C}.wv-tabs-content__panel{display:none;background:#FFF}.wv-tabs-content__panel--active{display:block}.wv-button-group{display:flex;flex-wrap:wrap;padding:13px 23px}.wv-button-group .wv-button{width:calc(50% - 14px);margin:7px;padding:12px 20px;text-align:left}.wv-button-group--developer .wv-button{width:calc(33% - 14px);text-align:center}.wv-button-group--developer .wv-button .fa{margin:0}.wv-button-group--developer .wv-button span{display:none}.wv-button-group--developer .wv-button--github{width:100%}.wv-button-group--developer .wv-button--github .fa{margin:0 10px 0 0}.wv-button{display:block;background:#41BB93;width:100%;border:0;border-radius:4px;padding:15px 20px;box-sizing:border-box;color:#FFF;font-family:"Montserrat";font-size:14px;line-height:normal;text-align:center;cursor:pointer}.wv-button .fa{background:#FFF;width:24px;height:24px;border-radius:100%;margin:0 10px 0 0;line-height:24px;text-align:center}.wv-button--facebook{background:#3B5998}.wv-button--facebook .fa{color:#3B5998}.wv-button--github{background:#333333}.wv-button--github .fa{color:#333333}.wv-button--google{background:#DB4437}.wv-button--google .fa{color:#DB4437}.wv-button--twitter{background:#55ACEE}.wv-button--twitter .fa{color:#55ACEE}.wv-divider{position:relative;background:rgba(0, 0, 0, 0.1);width:100%;height:1px;margin:20px 0}.wv-divider:before{content:"OR";position:absolute;left:50%;top:-50%;background:#FFF;padding:0 15px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#7E7E7E;font-size:14px}.wv-form{margin:-10px 0 0;padding:30px}.wv-input{display:block;background:#F3F3F3;width:100%;border:0;border-radius:4px;margin:0 0 14px;padding:15px 20px;box-sizing:border-box;color:#212121;font-family:"Montserrat";font-size:14px;line-height:normal;text-align:center}.hero{z-index:1;position:relative;background:#F0525C;min-width:440px;margin:20px 20px 100px;padding:40px 0;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row;flex-wrap:no-wrap;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 20px;box-sizing:border-box}.container .column{height:100%;padding:20px}h1{margin:0 0 20px;color:#FFF;font-size:48px;font-weight:700;line-height:1.4em}p{color:#FFF;font-family:'Roboto';font-weight:400;line-height:1.4em}p a{color:#FFD800;font-weight:600;text-decoration:none}.wv-tabs{margin:0 0 -160px}@media (max-width:980px){.container{flex-direction:column;flex-wrap:wrap}}@media (max-width:760px){h1, p{text-align:center}h1{font-size:40px}p{width:80%;margin:0 auto}}

There are particularly several things in the above CSS code that you can change according to your requirements. You can only do that if you are a web designer or web developer.

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

I have used @media rule in the above css code for making this project responsive for all kind of devices.


In the above code some color codes are used that are added in the above code you can change them as required.

So we have written HTML directory and customised it and now we will add some functionality in this project (Registration Form Login Form Marketing Style) to make it work as we want it to be.

To make this project (Registration Form Login Form Marketing Style) work properly for that we will use JavaScript.

So here is a JavaScript code for our project (Registration Form Login Form Marketing Style) 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 Registration Form Login Form Marketing Style/js/index.js :

(function() {
$(".wv-tabs-header__tab").on("click", function(e) {
var tabId;
e.preventDefault();
$(".wv-tabs-header__tab").removeClass("wv-tabs-header__tab--active");
$(this).addClass("wv-tabs-header__tab--active");
tabId = $(this).attr("data-tab");
$(".wv-tabs-content__panel").removeClass("wv-tabs-content__panel--active");
return $(".wv-tabs-content__panel[data-tab="" + tabId + ""]").addClass("wv-tabs-content__panel--active");
});
}).call(this);
I have used a little bit of jQuery code to transform between login and signup forms I haven't added or functionality of user registration using PHP you can do that if you want.

For that you will have to game in depth knowledge of PHP programming language but you can find tutorials about that on internet.

To Sum Up :

So here we are, We have done and our project Registration Form Login Form Marketing Style 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.


  • Registration Form Login Form Marketing Style
    • 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 (Registration Form Login Form Marketing Style) File :

Registration Form Login Form Marketing Style.zip
File Size 5.67 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 you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.
Thank you !




Disqus Codes

No comments

Notifications

Disqus Logo