How to make a professional hotel or restaurant website using HTML, CSS, JAVASCRIPT, PHP | HTML Projects | Website Development Projects | Engineering Projects LOGIN PAGE FOR DAILY MEAL HOTEL

on
Here's the code for Login Page of Daily Meal Hotel.
Save it as login.html in the company folder.


<html>
<head>
<!-------------FAVICON------------------------------>
<link rel="apple-touch-icon" sizes="180x180" href="C:\Users\dell\Documents\rest\css\apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="C:\Users\dell\Documents\rest\css\favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="C:\Users\dell\Documents\rest\css\favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title> Basic login page </title>


<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<style>
/* border of the form which is light grey*/
form { border: 4px solid #bfb5b1; }
/* user inputs */
input[type=text], input[type=password] {
    width: 50%;
    padding: 12px 12px;
    margin: 8px 0;
    display: inline-block;
    border: 2px solid #ccc;
    box-sizing: border-box;
}
/* button properties */
button {
    background-color: #133bb2; /* background color*/
    color: white;   /* color of the text of button*/
    padding: 15px 16px;
    margin: 8px 0;
    border: none;
    border-radius:8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* border shadow */
    cursor: pointer;
    font-size: 18 px;
    width: 40%; /* width of the button visible on screen*/
}
/* Hover effect for buttons*/
/* Whenever you bring cursor on the button there will be some animation */
     button:hover {  opacity: 0.5; }
.cancelbtn {
    width: auto;
    padding: 12px 19px;
    background-color: #f22133;
}
span.psw {
    float: right;
    padding-top: 16px;
}
}
</style>
</head>


<body>
<!-------------------------------------- Navbar--------------------------------------->
<div class="w3-top">
  <div class="w3-bar w3-black w3-card">
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
 
<!----------------------------logo------------------------------------------>
 

<a href="#" class="w3-bar-item w3-button w3-padding-large">
 <img src="C:\Users\dell\Documents\rest\images\logo.png"  alt="Daily Meal logo" width=80 height=80> </img></a>
 
 <a href="C:\Users\dell\Documents\rest\css\rest2.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>
    <a href="C:\Users\dell\Documents\rest\css\menus.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">MENUS</a>
    <a href="C:\Users\dell\Documents\rest\css\contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
<a href="file:///C:/Users/dell/Documents/rest/css/login.html#" class="w3-bar-item w3-button w3-padding-large w3-hide-small">LOGIN</a>
    <a href="file:///C:/Users/dell/Documents/rest/css/signup.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SIGNUP</a>
<div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>
   <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="C:\Users\dell\Documents\rest\css\terms.html" class="w3-bar-item w3-button"> TERMS AND CONDITIONS</a>
        <a href="C:\Users\dell\Documents\rest\css\aboutchefs.html" class="w3-bar-item w3-button">ABOUT CHEFS</a>
        <a href="C:\Users\dell\Documents\rest\css\aboutceos.html" class="w3-bar-item w3-button">ABOUT CEO</a>

      </div> </div>

   
    <a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
  </div>
</div>

<!--------------- ---------------------Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) ----------------------->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="C:\Users\dell\Documents\rest\css\menus.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MENUS</a>
  <a href="C:\Users\dell\Documents\rest\css\contact.html" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>

</div>
<!------------------------------------------------------LOGIN FORM------------------------------>
<br><br><br><br><br><br>

<form action="action_page.php">

<div class="container" style="background-color:#f1f1f1">
    <label for="uname"> <b> Username </b> </label>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <br>
    <label for="psw"> <b> Password </b> </label>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <br>
    <button type="submit"> Login </button>
    <br>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    <br>
   <button type="button" class="cancelbtn"> Cancel </button>
   <span class="psw">Forgot <a href="#">password?</a></span>


</div>
</form>

<!------------------------------------------------ Footer ---------------------------------------------->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
 <a href="https://www.facebook.com/Harsha-Navalkar-451869015169946/"> <i class="fa fa-facebook-official w3-hover-opacity"></i> </a>
  <a href="https://www.instagram.com/harsha_navalkar/"><i class="fa fa-instagram w3-hover-opacity">  </i></a>
   <a href="https://twitter.com/harsha_navalkar"><i class="fa fa-twitter w3-hover-opacity"></i>
  <a href="https://www.linkedin.com/in/harsha-navalkar-00085515b/"> <i class="fa fa-linkedin w3-hover-opacity"></i>
  <p class="w3-medium">Powered by <a href="http://harshanavalkar.blogspot.com/p/copyright.html" target="_blank">© 2018 Daily Meal</a></p>
</footer>
</body>
</html>

OUTPUT WILL BE

How to make a professional hotel or restaurant website using HTML, CSS, JAVASCRIPT, PHP | HTML Projects | Website Development Projects | Engineering Projects daily experience blog harsha navalkar
Login Page of Daily Meal Hotel

Daily Meal Hotel Website  Development Project


How to make a professional hotel or restaurant website using HTML, CSS, JAVASCRIPT, PHP | HTML Projects | Website Development Projects | Engineering Projects LOGIN PAGE FOR DAILY MEAL HOTEL