You are on page 1of 31

WEB TECHNOLOGY LABORATORY

Report submitted in partial fulfillment of requirements for


The award of the degree of
BACHELOR OF TECHNOLOGY
In
Computer Sciences and Engineering
Under the esteemed Guidance of

MS.KOMAL KASHYAP

Assistant Professor

Department Of Computer Science and


Engineering

GITAM INSTITUTE OF TECHNOLOGY

GITAM DEEMED TO BE UNIVERSITY (estd. u/s 3 the


UGC Act, 1956) VISAKHAPATNAM CAMPUS

T. PRAVEEN KUMAR
121710319054 3/B19
B.Tech. - CSE 2017-2021
Institute Of Technology
Visakhapatnam
TITLE:-

ONLINE RESTAURANT
MANAGEMENT SYSTEM

ABSTRACT:-

Restaurant Management System is developed to automate


the daily activity of a restaurant. The purpose of this system
is to provide a service facility to the restaurant workers and
also to the customers.

The main objective builds the system is to provide ordering


and reservation service online to the customer. Each menu
item has a name, price and associated recipe available. This
way ordering and reservation will become easier. The user
needs to register first, then they can access the other part of
the site.

After login, the customer can access the menu page. The
main point of developing this system is to help restaurant
administrators manage the restaurant business and help
customers with online ordering and reserving a table. The
registered user can search for a menu according to price
range and category of food and later they can order. Using
manual customer ordering is difficult for the worker to keep
the correct customer information.
SOURCE CODE:-

Home.html :-

<html>
<head> <link rel="stylesheet" type="text/css"
href="home.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div>
<center><h1>WELCOME</h1></center>

<center><h1>TO</h1></center>

<center><h1>NORTHERN
RESTAURANT</h1></center>
</body>
</html>

Features.html:-

<html>
<head> <link rel="stylesheet" type="text/css"
href="features.css">
</head>
<body>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="login.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div><div class="title"><h2>Special cold
coffee:</h2></div>
<div class="image">
<img src="coffee1.jpg">
</div>
<div class="content1">
<h4><center>
As we sweat our way into summer 2018, enjoying
coffee chilled on ice is peaking as the latest specialty coffee
trend. Espresso, of course, has long appeared in various
cold-blended café concoctions like frappés and smoothies,
as well as in bottled ready-to-drink (RTD) beverages heavy
on sweetener, milk and flavorings.</center></h4>
</div>
<div class="title1"><h2>Special Thali:</h2></div>
<div class="image1">
<img src="dish2.jpg" height: 150px; width: 150px;>
</div>
<div class="content2">
<h4><center>
Thali is a complete meal served on a single plate.
Characterized by eye-popping variety and an imposing
quantity, thali easily contains 10 to 15 dishes (including rice
and bread): Don’t even think of ordering thali unless you’ve
brought your full appetite! Even though individual
components of thali may be prepared in homes on a regular
basis, the full experience is reserved in its full splendor for
festivals, days of religious significance, or ceremonies and
social functions. Generally, you’re more likely to find thali
in a restaurant than someone’s home.
</center></h4>
</div>
</body>
</html>

Index.html:-

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div>
<section class="container-fluid form-section">

<div id="form-main">
<div id="form-div">
<h3>Contact Us</h3>
<form class="form" id="form1">

<p class="name">
<input name="name" type="text"
class="validate[required,custom[onlyLetter],length[0,100]]
feedback-input" placeholder="Name" id="name" />
</p>

<p class="email">
<input name="email" type="text"
class="validate[required,custom[email]] feedback-input"
id="email" placeholder="Email" />
</p>

<p class="text">
<textarea name="text"
class="validate[required,length[6,300]] feedback-input"
id="comment" placeholder="Comment"></textarea>
</p>

<div class="submit">
<input type="submit" value="SEND"
id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
<div class="submit1">
<a href=in.html> <input type="submit"
value="Explore Menu" id="buttonblue"/></a>
</div>
</div>
</section>

</body>
</html>

Login.html:-

<html>
<head>
<link rel="stylesheet" type="text/css"
href="login.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div>
<div class="boxed">
<div id="containe">
<form method="POST" action="login.php">
<h3>Login in to your account</h3>
<input class="text" name="id" placeholder="Enter
username">
<input class="password" name="pass"
type="password" placeholder="enter password">
<div id="forgot">
<a href="#">Forgot password?</a><br>
</div>
<input class="submit" type="submit"
name="submit" value="submit">
</form>
<h5>Not an Account?</h5>
<div class="signup">
<a href="signup.html">Signup</a>
</div>
</div>
</div>
</body>
</html>

in.html:-

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="a.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div>
<center>
<div class="boxed"><form method="POST"
action="data.php">
<div class="main">
<div id="mainselection">
<select>
<option>Starters</option>
<option
value="http://google.com">Google</option>
<option>Paneer Tikka</option>
<option>Chilly Potato</option>
<option>Paneer Taka Tak</option>
<option>Garlic Chilly Potato</option>
<option>Honey Chilly Potato</option>
<option>Paneer Tikka</option>
<option>Tandoori Aloo</option>
</select><br>
</div> <div id="mainselection">
<select>
<option>Quick Bites</option>
<option>Veg Roll</option>
<option>Chowmien Roll</option>
<option>Cheese Roll</option>
<option>Paneer Roll</option>
<option>Bhel Puri</option>
<option>French Fries</option>
<option>Nachos with Salsa</option>
<option>Masala Cheese
Maggi</option>
</select><br></div>
<div id="mainselection"><select>
<option>Chinese Delicacies</option>
<option>Chilly Panner</option>
<option>Manchurian Gravy</option>
<option>Manchurian Dry</option>
<option>Steamed Momos</option>
<option>Fried Momos</option>
<option>Deep Fried Momos</option>
<option>Tandoori Momos</option>
</select><br></div>
<div id="mainselection"><select>
<option>Pizza and Pasta</option>
<option>Special Pizza</option>
<option>Onion Pizza</option>
<option>Cheese Pizza</option>
<option>OTC Pizza</option>
<option>Corn Pizza</option>
<option>Peppy Pizza</option>
<option>Pink Sauce pasta</option>
<option>Alfredo Pasta</option>
</select><br></div>
<div id="mainselection"><select>
<option>Sandwiches &
Burger</option>
<option>Aloo Tikki Burger</option>
<option>Cheese Slice Burger</option>
<option>Paneer Burger</option>
<option>Double Daker
Burger</option>
<option>Spicy Cheese Burger</option>
<option>Cheese Sandwich</option>
<option>Corn Sandwich</option>
<option>Garlic Sandwich</option>
</select><br></div>
<div id="mainselection"><select>
<option>Shakes</option>
<option>Vanilla Shake</option>
<option>Chocolate Shake</option>
<option>Kitkat Shake</option>
<option>Strawberry Shake</option>
<option>Oreo Shake</option>
<option>Brownie Shake</option>
<option>Papaya Shake</option>
<option>Banana Shake</option>
</select><br></div>
<div id="mainselection"><select>
<option>Main Course</option>
<option>Kadhai Paneer</option>
<option>Jeersa Paneer</option>
<option>Paneer Pyaaz</option>
<option>Matar Paneer</option>
<option>Shahi Paneer</option>
<option>Paneer Butter
Masala</option>
<option>Malai Kofte</option>
<option>Panner Korma</option>
</select><br></div>
<div id="mainselection"><select>
<option>Dessert & Beverages</option>
<option>Hot Coffee</option>
<option>Cold Coffee</option>
<option>Cold Coffee with Vanilla Ice
Cream</option>
<option>Cold Coffee with strawberry
Ice Cream</option>
<option>Cold Coffee with
Butter-Scoach Ice Cream</option>
<option>Cold Coffee with Choco
Chips</option>
<option>Cold Coffee with Kesar-Pista
Ice Cream</option>
<option>Cold Coffee with Dark
Chocolate</option>
<option>Cold Coffee with Vanilla &
Choco Chips</option>
<option>Nishita's Special Cold
Coffee</option>
</select></div>
</div></form></div></center>
</body>
</html>

Signup.html:-

<html>
<head>
<link rel="stylesheet" type="text/css"
href="signup.css">
<title>Northern Restaurant</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" type="text/css"
href="css/style.css">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/cs
s/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt2
7NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo"
style="width:40px; height: 40px;">Northern Restaurant
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<div class="nav-container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html"><i
class="fa fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="features.html"><i
class="fa fa-cogs"></i> Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"><i
class="fa fa-edit"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse"
href="#search"><i class="fa fa-search"></i> Search</a>
</li>
</ul>
</div>

</div>
</nav>
<div class="collapse" id="search">
<div class="card card-body">
<form class="search-form">
<div class="form-group">
<input class="search" type="text" name="search"
placeholder="Enter your text here...">
<input class="btn-info" type="submit"
name="submit-search" placeholder="Submit">
</div>
</form>
</div>
</div> <div class="boxeds">
<div id="sign">
<center><h3>Sign up to Nishita`s
restaurant</h3></center>
<hr>
<form method="POST"
action="signup.php">
<b>Name </b> <input class="text1"
name="nam1" placeholder="First Name"required>
<input class="text2" name="nam2" placeholder="Last
Name" required><br><br>
<b>Email</b><input class="text3"
name="nam3" placeholder="Email" required><br><br>
<b>Password</b><input class="passw"
name="nam4" type="password" placeholder="Password"
required><br><br>
<b>Mobile No.</b><input
class="mobileno" type="number" name="nam5"
placeholder="Mobile no." required><br>
<input class="submitt" type="submit"
name="submit" value="submit">
</form>
<h5>Already a member</h5>
<div class="logi">
<a href="login.html">Login</a>
</div>
</div>
</div>
</body>
</html>

Style.css:-

body{
overflow-x: hidden;
}
.navbar-light{
background: rgb(72, 44, 191);
background: -webkit-linear-gradient(45deg, rgba(72,
44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
background: -o-linear-gradient(45deg, rgba(72, 44,
191, 1) 0%, rgba(106, 198, 240, 1) 100%);
background: linear-gradient(45deg, rgba(72, 44, 191, 1)
0%, rgba(106, 198, 240, 1) 100%);
color: white !important;
}
.navbar-light a{
display: block;
color: white !important
}
.navbar-brand img{
height: 30px;
width: 30px;
}
.nav-container{
position: absolute;
margin-left: 600px;
}
.nav-item .nav-link{
text-align: center;
}
.nav-item .nav-link:hover{
background-color: #0493bd;
}
.collapse input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;

}
.collapse input[type=submit]{
width: 100%;
padding: 12px 20px;
text-align: center;
margin: 8px 0;
box-sizing: border-box;
}

.form-section{
background-image: url("../images/bg.jpg");
height: 600px;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

#form-main{
position: relative;
width:100%;
height: 300px;
margin-left: 400px;
margin-top: 50px;
float:left;
padding-top:0px;
}
#form-main h3{
color: white;
text-align: center;
text-transform: uppercase;
}

#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 15px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#name:focus{
background-image:
url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email{
background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email:focus{
background-image:
url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#comment{
background-image:
url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

textarea {
width: 100%;
height: 80px;
line-height: 150%;
resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}

#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
height: 40px;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:20px;
padding-top:0px;
padding-bottom:2px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:300;
}

#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}

.submit:hover {
color: #3498db;
}

.ease {
width: 0px;
height: 35px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}

.submit:hover .ease{
width:100%;
background-color:white;
}
#buttonblue{
position: relative;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
min-width: 10%;
height: 40px;
margin-left:-350px;
margin-top: 450px;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:20px;
padding-top:0px;
padding-bottom:2px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
font-weight:300;
}

#buttonblue:hover{
background-color:white;
color: #0493bd;
}

@media only screen and (max-width: 580px) {


#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
@media (max-width: 673px) {
.nav-container {
position: relative;
text-align: center;
margin-left: -0px;
}
}

OUTPUT:-

You might also like