How create beautiful login page using html css and php - Learn With Riwash

Breaking

Learn With Riwash

learn with riwash learn with riwash is the personal blog/youtube channel that provide best knowledge of software development. Here we give complate trainning of techonology as will as build software. We teach you related to web developing and programming in html,javascript,php,python,c++, c#, java programming ect. It is not a complate teaching siti like W3schools but it it a blog where we give code that help you to become better programmer.

ads

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

Saturday, March 10, 2018

How create beautiful login page using html css and php


How create beautiful login page using html css and php
Hello friends here i am teach you how to create beautiful cool login page using html css and php

now 1st we use html to make a login table
<html>

<head>
<link rel="stylesheet" href="css/style.css">
<title> a cool place to hang out have a fun  </title>

</head>
<body>
<div class="header">
<img src="logo.jpg" alt="logo" id="logo"/>
<p id="headicon">
<a href="index.php">Home </a>
<a href="About.php" >About </a>
<a href="blog.php">Blog </a>
<a href="login.php">Login </a>
<a href="signup.php">Signup </a>
</p>
</div>

<div class="cointener">
<h1 style="color:red"> login page for you </h1>
<form action="index.php" method="post">
//here we use image
<img src="img/img1.jpeg" alt="logo" id="loginimg"/> <br>
username <br>
<input type="username" name="username" id="text" required/> <br>
//what is required ???
/* required is html tag that define the empty text bot. It mean if username and password is empty
then that need to required fields*/
password<br>
<input type="password" name="password" id="text" required/><br>

<input type="submit" name="login" value="login" id="login"/> <br>
 <a href="signup.php"> <input type="button" value="Signup" id="submit"/></a>
</form>
</div>
</body>
</html>
now here we write css code
your css code is in side css folder and name is style.css
/*this is stylesheet design by riwash */


.header{
background:#6495ED;
height:60px;
}


#logo{
width:100px;
height:40px;
}
#headicon{
text-align:right;

}
a:link{
color:#6495ED;
text-decoration:none;
}
a:visited{
color:blue;
text-decoration:none;
}
a:hover{
background:hotpink;
color:black;
text-decoration:none;
}
a:active{
background:red;
color:hotpink;
text-decoration:none;
}
.cointener{

width:300px;
height:350px;
text-align:center;
margin-top:50px;
margin-left:300px;



}
#loginimg{
width:200px;
height:190px;
}
#whatis{
margin-top:150px;
color:#6495ED;
}
.error{
color:red;
}
#submit{
color:white;
background:#6495ED;
width:100px;
}
#login{
color:white;
background:green;
width:100px;
}
so this are the html and css script for php and sql script you have to view next post

No comments:

Post Top Ad

Responsive Ads Here