header ads

How to Create Online Food Ordering System Using HTML and CSS (Part-1)

Hanif Miah December 13, 2018
index.html

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>FOOD ORDERING SYSTEM || CODETEXTPRO</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<link rel="stylesheet" href="styles/registration.css" type="text/css">
<style>
table { border-collapse: collapse; width: 100%;}
th, td {text-align: left;padding: 8px;}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<div class="wrapper row1">
  <header id="header" class="clear">
    <div id="hgroup">
      <h1><a href="#">Food Ordering System</a></h1>
    </div>
    <div class="clear"></div>
  </header>
</div>
<!-- content -->
<div class="wrapper row2">
  <div id="container">
    <!-- content body -->
    <aside id="left_column">


      <section>
        <!-- article 1 -->
        <article>
          <h2>Login Form</h2>
<form action="/action_page.php" style="border:0px solid #ccc">
  <div class="container">
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

 <label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

 <input type="checkbox" checked="checked"> Remember me

 <div class="clearfix">
<button type="submit" class="signupbtn">Login</button>
  <button type="button" class="cancelbtn">
        <a href="signup.html" style="background:none;color:white">Register</a>
        </button>
</div>
  </div>
</form>
        </article>
</section>
    </aside>
    <!-- main content -->
    <div id="content">
      <!-- section 1 -->
      <article>
          <h2><a href="#">About Us</a></h2>
          <address>
       
          </address>
          <p>
  <img src="Food-System.png" height="400" width="800">
  </p>
        </article>
    </div>
    <!-- / content body -->
    <div class="clear"></div>
  </div>
</div>
</body>
</html>

layout.css

body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#FFFFFF; background-color:#1E1E1E;}

 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; width:100%; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

 a{outline:none; text-decoration:none;}

 code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}

 .fl_left{float:left;}
.fl_right{float:right;}

 img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

 /*----------------------------------------------HTML 5 Overrides-------------------------------------*/

 address, article, aside, figcaption, figure, footer, header, nav, section{display:block; margin:0; padding:0;}

 q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'“ '; font-size:26px;}
q:after{content:' „'; font-size:26px; line-height:0;}

 /* ----------------------------------------------Wrapper-------------------------------------*/

 div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}

 .row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#FF9900; background-color:#FFFFFF;}
.row3, .row3 a{color:#FFFFFF; background-color:#1E1E1E;}

 /*----------------------------------------------Generalise-------------------------------------*/

 #header, #container, #footer{display:block; margin:0 auto; width:960px;}

 nav ul{margin:0; padding:0; list-style:none;}

 h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:20px; font-weight:normal; font-style:normal; line-height:normal;}

 /*----------------------------------------------Header-------------------------------------*/

 #header, #header a{color:#C0BAB6; background-color:#333333;}

 #header #hgroup{float:left; padding:20px 0;}
#header #hgroup h1, #header #hgroup h2{}
#header #hgroup h1{font-size:36px;}
#header #hgroup h2{font-size:13px;}

 #header nav{float:right; padding:20px 0;}
#header nav ul{margin-top:20px;}
#header nav li{display:inline; margin-right:15px; text-transform:uppercase;}
#header nav li.last{margin-right:0;}
#header nav a{color:#C0BAB6; background-color:#333333;}
#header nav a:hover{color:#FF9900; background-color:#333333;}

 /*----------------------------------------------Content Area-------------------------------------*/

 #container{padding:30px 0;}
#container section{margin:0 0 30px 0;}
#container section.last{margin:0;}
#container .more{text-align:right; text-transform:uppercase; font-size:smaller; font-weight:bold;}

 /* ------Left Column-----*/

 #container #left_column{float:left; width:280px;}
#container #left_column h2.title{margin-bottom:20px;}

 #container #left_column nav{display:block; width:100%; margin-bottom:30px;}
#container #left_column nav ul{margin:0; padding:0; list-style:none;}
#container #left_column nav li{margin:0 0 3px 0; padding:0;}
#container #left_column nav li.last{margin-bottom:0;}
#container #left_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted #666666;}
#container #left_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}

 /* ------Main Content-----*/

 #container #content{float:right; width:630px;}

 #container #content section article{}
#container #content section article h2{text-transform:uppercase;}
#container #content section article address{font-size:10px; font-style:normal;}
#container #content section article time{font-size:10px;}
#container #content section article .tags{display:block; padding:5px; color:#979797; background-color:#ECECEC; font-style:italic;}
#container #content section article .tags a{color:#FF9900; background-color:#ECECEC;}

 #container #content #services{}
#container #content #services ul{margin:0; padding:0; list-style:none;}
#container #content #services ul li{display:block; width:300px;}
#container #content #services ul li.odd{float:left;}
#container #content #services ul li.even{float:right;}
#container #content #services ul li img{width:290px; height:100px; margin:0 0 15px 0; padding:4px; border:1px solid #666666;}

 /*----------------------------------------------Footer-------------------------------------*/

 #footer{}
#footer p{margin:0; padding:20px 0;}



registration.css

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
    float: left;
    width: 50%;
}
/* Add padding to container elements */
.container {
    padding: 16px;
}
/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}


Tags:
Hanif Miah

Posted by: Hanif Miah

Post a Comment

0 Comments