Learn Web Development Now - BEST WAYS TO LEARN HOW TO CODE

login and registration form in html and css

2021-05-07T13:17:00.001+05:30

login and registration form in html and css

In this video you are going to learn how to create the onlick login and registration form using the html and css........First you are going to create the navigation menu and then you are going to create the login and registration form. After creating these two we are going to connect the login and registration form to the login button in the navigation bar then you can see the beautiful click event

Note: Guys you all can download the image used in this tutorial from the below link given......

https://drive.google.com/drive/folders/1EkkBfouQDhzZY2A2PP9tnStd0vau8DF2

Guys You all please follow this point then only you will get correct output......

1. first create a folder with any name

2. now create text file with any name and place it in the above folder.

3. now create another text file with the name "style.css" (for css file you give "style.css" only do not give any other name) and place it in the same folder where html file is kept......

4. now download the image from the link given above and place it in the same folder where html and css files are kept........

Follow these four steps to get correct and similar output as i got....

source code

Html file

<!DOCTYPE html>

<head>

<title>seek coding</title>

</head>

<body>

<div>

<a href='website.html'>Seek Coding</a>

</div>

<nav>

<li><a href='#'>About Us</a></li>

<li><a href='#'>Services</a></li>

<li><a href='#'>Contact</a></li>

<li><button class='loginbtn' onclick="document.getElementById('login- form').style.display='block'" style="width:auto;">Login</button></li>

</ul>

</nav>

</div>

<button type='button'onclick='register()'class='toggle-btn'>Register</button>

</div>

<input type='checkbox'class='check-box'><span>Remember Password</span>

</form>

<input type='checkbox'class='check-box'><span>I agree to the terms and conditions</span>

<button type='submit'class='submit-btn'>Register</button>

</form>

</div>

var x=document.getElementById('login');

var y=document.getElementById('register');

var z=document.getElementById('btn');

function register()

{

x.style.left='-400px';

y.style.left='50px';

z.style.left='110px';

}

function login()

{

x.style.left='50px';

y.style.left='450px';

z.style.left='0px';

}

</script>

var modal = document.getElementById('login-form');

window.onclick = function(event)

{

if (event.target == modal)

{

modal.style.display = "none";

}

</script>

</body>

</html>

Css file

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

.full-page

{

height: 100%;

width: 100%;

background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(bg-2.jpg);

background-position: center;

background-size: cover;

position: absolute;

}

.navbar

{

display: flex;

align-items: center;

padding: 20px;

padding-left: 50px;

padding-right: 30px;

padding-top: 50px;

}

nav

{

flex: 1;

text-align: right;

}

nav ul

{

display: inline-block;

list-style: none;

}

nav ul li

{

display: inline-block;

margin-right: 70px;

}

nav ul li a

{

text-decoration: none;

font-size: 20px;

color: white;

font-family: sans-serif;

}

nav ul li button

{

font-size: 20px;

color: white;

outline: none;

border: none;

background: transparent;

cursor: pointer;

font-family: sans-serif;

}

nav ul li button:hover

{

color: aqua;

}

nav ul li a:hover

{

color: aqua;

}

{

text-decoration: none;

color: palevioletred;

font-size: 28px;

}

#login-form

{

display: none;

}

.form-box

{

width:380px;

height:480px;

position:relative;

margin:2% auto;

background:rgba(0,0,0,0.3);

padding:10px;

overflow: hidden;

}

.button-box

{

width:220px;

margin:35px auto;

position:relative;

box-shadow: 0 0 20px 9px #ff61241f;

border-radius: 30px;

}

.toggle-btn

{

padding:10px 30px;

cursor:pointer;

background:transparent;

border:0;

outline: none;

position: relative;

}

#btn

{

top: 0;

left:0;

position: absolute;

width: 110px;

height: 100%;

background: #F3C693;

border-radius: 30px;

transition: .5s;

}

.input-group-login

{

top: 150px;

position:absolute;

width:280px;

transition:.5s;

}

.input-group-register

{

top: 120px;

position:absolute;

width:280px;

transition:.5s;

}

.input-field

{

width: 100%;

padding:10px 0;

margin:5px 0;

border-left:0;

border-top:0;

border-right:0;

border-bottom: 1px solid #999;

outline:none;

background: transparent;

}

.submit-btn

{

width: 85%;

padding: 10px 30px;

cursor: pointer;

display: block;

margin: auto;

background: #F3C693;

border: 0;

outline: none;

border-radius: 30px;

}

.check-box

{

margin: 30px 10px 34px 0;

}

span

{

color:#777;

font-size:12px;

bottom:68px;

position:absolute;

}

#login

{

left:50px;

}

#login input

{

color:white;

font-size:15;

}

#register

{

left:450px;

}

#register input

{

color:white;

font-size: 15;

}

Please Subscribe to seek coding Youtube channel for more interesting projects .........
In future I am going to do projects on python and going to keep in the youtube. so please do subscribe to my channel and get ready......................
Channel link is given below...........

https://www.youtube.com/channel/UCygS6M-U3vYA8nAZNc8SETw

Thank You......Guys for more source code file please follow the blog.

Login and Registration Form with HTML5 and CSS3

2021-05-05T15:57:00.025+05:30

Here In this tutorial you are going to learn how to create a login and registration form using the HTML, CSS, PHP, MYSQL for the websites. Three Major Things You Are Going to Learn

You are going to learn how to create beautiful hover effect for the websites

And also you are going to learn onclick event for the login and register forms. And also connecting the Login and Registration form to the MySQL database server

If you want to watch the full video of the tutorial please click on the below link or please click on the image show above

https://www.youtube.com/watch?v=EOeBcQkwjGk

Description of the project:

In the above project you are going to learn how to create the navigation bar as shown in the above image. After creating the beautiful navigation bar you are going to learn how to add the color as the beautiful background. After adding color as the background you are going to learn how to create the subpage in the full page. After creating the subpage you are going to learn how to add the image in the sub page as the background image. After adding the image as background image to the sub page you are going to learn how to write the text on the image. After adding text you are going to learn how to add beautiful hover effect so that when you take your cursor over the image then the text appears.

After creating the hover effect you are going to learn how to create the login form and registration form separately and connecting the login form to the login button and registration form to the registration button. After connecting the login form to the login button and registration form to the registration button you are going to observe that when you click on the login button login form appears and when you click on the register button registration form appears. This is because of the onlick effect of the button. We have one challenge here after login or registration appears on clicking the login or register buttons how to close that, so here you are also going to learn how to remove the login and registration form using the cross button when you click on the cross button then again the login or registration form gets disappears.

After the html, css, javascript part is done you are going to learn how to connect the login and registration form to the mysql database server using the php and mysql queries.....

So please do not miss out the video you are going to learn a lot in this video....

Do not forget to follow this blog for more interesting content provided on this blog.

Note: If you have any doubt or any problem in creating the folder structure and running the program please watch this video completely, why because if you miss one step also you will get error ---the video link is given below---------

How to create #login and #registration #form using #HTML #CSS #PHP #MYSQL - YouTube

Note: You can download the image from the link given below ----

https://drive.google.com/drive/folders/1IasNYtQ96hXZ828vMtcqsRkR1m7ysr-V?usp=sharing

Note: please read each and every line in the registration.php and validate.php every one has to edit one line then only your database will work, i have mentioned a comment as a hint for you(//$connection=mysqli_connect('localhost','root','write your password here')) ------- if you have any doubt please comment under the video, the video link is given above.............

loginandregister.php

<!DOCTYPE html>

<head>

<title>Connecting Login and Registration Form to Database-----SeekCoding</title>

</head>

<body>

<a href='#'><h1>AwesomeWare</h1></a>

</div>

<nav>

<li><a href='#'>About us</a></li>

<li><a href='#'>Products</a></li>

<li><a href='#'>Offers</a></li>

<li><button class='loginbtn'onclick="document.getElementById('login-form').style.display='block'" style="width:auto;">Login</button></li>

<li><button class='loginbtn'onclick="document.getElementById('register-form').style.display='block'" style="width:auto;">Register</button></li>

</ul>

</nav>

</div>

<p>awesomeware was born at the intersection of style and technology. Thanks to our inspiring collections and our<br> impeccable customer service, we have been highly <br>successful since day one. Browse through our site <br>and check out the latest additions to our collection,<br> and feel free to get in touch with our team if <br>you need any assistance.<br> Happy shopping!</p>

</div>

<center><h1 class="main-heading">Login Form</h1></center>

<button>LOGIN</button>

</form>

</div>

<center><h1 class="main-heading">Register Form</h1></center>

<button>REGISTER</button>

</form>

</div>

</body>

</html>

style.css

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

.full-page

{

height: 100vh;

width: 100%;

background: linear-gradient(white,rgba(0,0,0,0.9));

position: absolute;

}

.navbar

{

display: flex;

align-items: center;

padding: 20px;

padding-left: 50px;

padding-right: 30px;

padding-top: 10px;

}

.logo a

{

text-decoration: none;

color: coral;

font-size: 20px;

font-family: 'Dancing Script', cursive;

}

nav

{

flex: 1;

text-align: right;

padding-top: 6px;

}

nav ul

{

display: inline-block;

list-style: none;

}

nav ul li

{

display: inline-block;

margin-right: 70px;

}

nav ul li a

{

text-decoration: none;

font-size: 20px;

color: coral;

font-family: sans-serif;

}

nav ul li button

{

font-size: 20px;

color: coral;

outline: none;

border: none;

background: transparent;

cursor: pointer;

font-family: sans-serif;

}

.sub-page

{

width: 1266px;

height: 550px;

position: absolute;

background: url(abc.png);

background-size: cover;

background-position: center;

left: 50px;

top: 70px;

}

.overlay

{

width: 100%;

height: 100%;

background: linear-gradient(rgba(0,0,0,0.5),white);

opacity: 0;

transition: 1s;

}

.sub-page:hover .overlay

{

opacity: 1;

}

.text

{

text-align: center;

color: white;

padding-right: 350px;

padding-left: 350px;

font-size: 20px;

font-family: 'Chilanka', cursive;

transform: translateY(-220%);

opacity: 0;

transition: 1s;

}

.sub-page:hover .text

{

opacity: 1;

}

#login-form

{

display: none;

}

.form-box

{

width: 300px;

height: 400px;

position: relative;

top: 90px;

left: 210px;

background: rgba(0,0,0,0.6);

}

.close

{

position: relative;

left: 270px;

bottom: 0;

top: 0;

color: #000;

font-size: 35px;

font-weight: bold;

}

.close:hover,.close:focus

{

color: red;

cursor: pointer;

}

.main-heading

{

color: orangered;

padding-bottom: 20px;

}

.form

{

position: relative;

margin: 0 auto 100px;

padding: 45px;

text-align: center;

bottom: 20px;

}

.form input, .form1 input

{

font-family: sans-serif;

outline: none;

border: none;

border-bottom: 1px solid black;

width: 100%;

margin: 0 0 15px;

padding: 15px;

font-size: 14px;

}

.form button, .form1 button

{

font-family: sans-serif;

width: 100%;

color: white;

font-size: 14px;

cursor: pointer;

padding: 15px;

border: none;

background: coral;

}

.form .asking

{

font-size: 12px;

margin: 15px 0 0;

color: white;

}

.form .asking a

{

color: orangered;

text-decoration: none;

}

#register-form

{

display: none;

}

.form-box1

{

width: 300px;

height: 400px;

position: absolute;

bottom: 90px;

left: 860px;

background: rgba(0,0,0,0.6);

}

.main-heading

{

color: orangered;

padding-bottom: 20px;

}

.form1

{

position: relative;

margin: 0 auto 100px;

padding: 45px;

text-align: center;

bottom: 20px;

}

registration.php

<?php

session_start();

header('location:loginandregister.php');

$connection=mysqli_connect('localhost','root','shivakesh2');

//$connection=mysqli_connect('localhost','root','write your password here')

mysqli_select_db($connection,'loginandregistrationform');

$name=$_POST['user'];

$email=$_POST['emailid'];

$password=$_POST['password'];

$select="select * from register_table where email_id='$email'";

$result=mysqli_query($connection,$select);

$num=mysqli_num_rows($result);

if($num==1)

{

echo" user already exists";

}

else

{

$reg="insert into register_table(name,email_id,password) values('$name','$email','$password')";

mysqli_query($connection,$reg);

}

validate.php

<?php

session_start();

$connection=mysqli_connect('localhost','root','shivakesh2');

//$connection=mysqli_connect('localhost','root','write your password here')

mysqli_select_db($connection,'loginandregistrationform');

$email=$_POST['emailid'];

$password=$_POST['password'];

$select="select * from register_table where email_id='$email' && password='$password'";

$result=mysqli_query($connection,$select);

$num=mysqli_num_rows($result);

if($num==1)

{

header('location:app.php');

}

else

{

header('location:loginandregister.php');

}

app.php

<!DOCTYPE html>

<head>

<title>app screen</title>

</head>

<body>

<a href="logout.php"><button>logout</button></a>

<h1>Hi! Guys welcome to Seek Coding Youtube Channel<br>If You Are New to my channel, please do Subscribe to my channel and <br> like, share video if you found the tutorial is interesting...

<br>Thankyou.....</h1>

</body>

</html>

logout.php

<?php

session_start();

session_destroy();

header('location:loginandregister.php');

sql file.sql

create database loginandregistrationform;

use loginandregistrationform;

create table register_table(name varchar(30),email_id varchar(50) primary key,password varchar(20));

How to create a website using html and css step by step in Hindi in 2021

2021-05-04T15:16:00.006+05:30

In this video i am going to show how to create a website using Html, Css and little bit Javascript. We are going to build this website step by step. You will learn many things in this video. You will learn how to position elements in the header, How to create utility classes, How to use css variables, how to use css flexbox for creating awesome layouts like this one. Please make sure you watch this video till the end.

Before Starting to watch the video make sure that you can download the images, fonts from the below link mentioned

https://drive.google.com/file/d/1JYp0vFY1XGRH0aPAPAi6gHGhJvfYnAc8/view

Part-1

Part 2 How to create a responsive website using html and css step by step in Hindi in 2021 🔥🔥

If you want to subscribe to channel link is given below

https://www.youtube.com/c/CodersGyan/featured

Html website with multiple pages

2021-05-03T22:46:00.009+05:30

Hi guys!!!

In this video you are going to learn how to create a website with the beautiful slider using Html, Css, Javascript and Bootstrap.

And also you are going to learn how to create Multiple pages using the Html and Css.

Main.html

Tv.Html

Movies.html

Sports.html

Login.html

To watch full video please click the below link you will be redirected to the video page.

https://www.youtube.com/watch?v=3nx9l_TeMvE

Source Codes

Main.html

<!DOCTYPE html>

<head>

<title>seekcoding</title>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="Movies.html">Movies</a>

</li>

<a class="nav-link" href="sports.html">Sports</a>

</li>

</li>

<a class="nav-link" href="premium.html">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<h4>Movies</h4>

</div>

</div>

</div>

</div>

</div>

</section>

<h4>Popular Shows</h4>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

TV.html

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="Movies.html">Movies</a>

</li>

<a class="nav-link" href="sports.html">Sports</a>

</li>

</li>

<a class="nav-link" href="premium.html">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<h4>TV Shows</h4>

</div>

</div>

</div>

</div>

</div>

</section>

<h4>Popular Shows</h4>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

Movies.html

<!DOCTYPE html>

<head>

<title>Movies Page</title>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="#">Movies</a>

</li>

<a class="nav-link" href="sports.html">Sports</a>

</li>

</li>

<a class="nav-link" href="premium.html">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<h4>Movies</h4>

</div>

</div>

</div>

</div>

</div>

</section>

<h4>Popular Movies</h4>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

Sports.html

<!DOCTYPE html>

<head>

<title>Sports Page</title>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="Movies.html">Movies</a>

</li>

<a class="nav-link" href="#">Sports</a>

</li>

</li>

<a class="nav-link" href="premium.html">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

News.html

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="Movies.html">Movies</a>

</li>

<a class="nav-link" href="sports.html">Sports</a>

</li>

</li>

<a class="nav-link" href="premium.html">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<h4>Latest News</h4>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

Premium.html

<!DOCTYPE html>

<head>

<title>Premium Page</title>

</head>

<body>

<a class="navbar-brand" href="Main.html">Video Player</a>

</button>

</li>

</li>

<a class="nav-link" href="Movies.html">Movies</a>

</li>

<a class="nav-link" href="sports.html">Sports</a>

</li>

</li>

<a class="nav-link" href="#">Premium</a>

</li>

<a class="nav-link" href="Login.html">Login</a>

</li>

</ul>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="visually-hidden">Previous</span>

</button>

</button>

</div>

<h4>Premium Shows</h4>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

Login.html

<!DOCTYPE html>

<head>

<title>Login Page</title>

</head>

<body>

<a href='Main.html'><h1>Video Player</h1></a>

</div>

<nav>

<li><a href='Movies.html'>Movies</a></li>

<li><a href='sports.html'>Sports</a></li>

<li><a href='premium.html'>Premium</a></li>

<li><button class='loginbtn'onclick="document.getElementById('login-form').style.display='block'" style="width:auto;">Login</button></li>

<li><button class='loginbtn'onclick="document.getElementById('register-form').style.display='block'" style="width:auto;">Register</button></li>

</ul>

</nav>

</div>

<p>Video Player is an online video streaming platform owned by Seek Coding. Video Player currently offers over zero hours of TV content and movies across 0 languages, and every major sport covered live. Highly evolved video streaming technology and a high attention to quality of experience across devices and platforms, make Video Player the most complete video destination for Over The Top (OTT) video consumers.</p>

</div>

<center><h1 class="main-heading">Login Form</h1></center>

<button>LOGIN</button>

</form>

</div>

<center><h1 class="main-heading">Register Form</h1></center>

<button>REGISTER</button>

</form>

</div>

</body>

</html>

Learn Web Development Now - BEST WAYS TO LEARN HOW TO CODE

login and registration form in html and css

login and registration form in html and css

Note: Guys you all can download the image used in this tutorial from the below link given......

Guys You all please follow this point then only you will get correct output......

source code

Html file

Css file

Please Subscribe to seek coding Youtube channel for more interesting projects .........In future I am going to do projects on python and going to keep in the youtube. so please do subscribe to my channel and get ready......................Channel link is given below...........

Thank You......Guys for more source code file please follow the blog.

Login and Registration Form with HTML5 and CSS3

Here In this tutorial you are going to learn how to create a login and registration form using the HTML, CSS, PHP, MYSQL for the websites. Three Major Things You Are Going to Learn

You are going to learn how to create beautiful hover effect for the websites

And also you are going to learn onclick event for the login and register forms. And also connecting the Login and Registration form to the MySQL database server

If you want to watch the full video of the tutorial please click on the below link or please click on the image show above

Description of the project:

Do not forget to follow this blog for more interesting content provided on this blog.

Note: If you have any doubt or any problem in creating the folder structure and running the program please watch this video completely, why because if you miss one step also you will get error ---the video link is given below---------

How to create #login and #registration #form using #HTML #CSS #PHP #MYSQL - YouTube

Note: You can download the image from the link given below ----

https://drive.google.com/drive/folders/1IasNYtQ96hXZ828vMtcqsRkR1m7ysr-V?usp=sharing

loginandregister.php

style.css

registration.php

validate.php

app.php

logout.php

sql file.sql

How to create a website using html and css step by step in Hindi in 2021

Before Starting to watch the video make sure that you can download the images, fonts from the below link mentioned

https://drive.google.com/file/d/1JYp0vFY1XGRH0aPAPAi6gHGhJvfYnAc8/view

Part-1

Part 2

How to create a responsive website using html and css step by step in Hindi in 2021 🔥🔥

If you want to subscribe to channel link is given below

https://www.youtube.com/c/CodersGyan/featured

Html website with multiple pages

Hi guys!!!

In this video you are going to learn how to create a website with the beautiful slider using Html, Css, Javascript and Bootstrap.

And also you are going to learn how to create Multiple pages using the Html and Css.

Main.html

Tv.Html

Movies.html

Sports.html

Login.html

To watch full video please click the below link you will be redirected to the video page.

https://www.youtube.com/watch?v=3nx9l_TeMvE

Source Codes

Main.html

TV.html

Movies.html

Sports.html

News.html

Premium.html

Login.html

For CSS files Please Visit Youtube video.....link is given below

https://www.youtube.com/watch?v=3nx9l_TeMvE

Thank you..............................

Please Subscribe to seek coding Youtube channel for more interesting projects .........
In future I am going to do projects on python and going to keep in the youtube. so please do subscribe to my channel and get ready......................
Channel link is given below...........