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%;
}
}
<!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%;
}
}
){kind=link}
0 Comments