EXPERT ANSWER
Home.html
<html>
<head>
<title> Home </title>
</head>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
header {
height: 100px;
background: #262626;
width: 100%;
z-index: 10;
position: fixed;
}
.logo {
width: 30%;
float: left;
line-height: 100px;
}
.logo a {
text-decoration: none;
font-size: 30px;
font-family: poppins;
color: #fff;
letter-spacing: 5px;
}
nav {
float: right;
line-height: 100px;
}
nav a {
text-decoration: none;
font-family: poppins;
letter-spacing: 4px;
font-size: 20px;
margin: 0 10px;
color: #fff;
}
footer{
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
font-family: “Open Sans”;
padding-top: 20px;
color: #fff;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 1rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 20px;
font-size: 14px;
}
.footer-bottom{
background: #000;
width: 100vw;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
</style>
<body>
<header>
<div class=”wrapper”>
<div class=”logo”>
<a href=”#”>Indian Resturant</a>
</div>
<nav>
<a href=”Home.html”>Home</a> <a href=”Menu.html”>Menu</a> <a href=”ContactUs.html”>Contact Us</a>
</nav>
</div>
</header>
<div style=”padding-top: 120px; “>
<img src=”https://media-cdn.tripadvisor.com/media/photo-s/14/c8/3c/b8/happy-rajah-indian-restaurant.jpg”>
<img src=”https://media-cdn.tripadvisor.com/media/photo-s/02/d5/41/be/large-sea-prawns.jpg”>
<img src=”https://assets.simpleviewinc.com/simpleview/image/upload/c_fill,h_1100,q_50,w_2800/v1/clients/irving/shutterstock_754732342_273d2a9f-367e-4efb-a0ff-d3c73d163597.jpg” style=”width:788px;”>
</div>
<div class=”wrapper” style=”padding-top: 75px;padding-bottom: 25px; “>
<h3>For the first time in Janakpur, Folsom cafe has brought the Open Kitchen restaurant and Fresh Beans Coffee varieties concept where you can enjoy a variety of dishes each prepared by the expert chef to give you the best dining experience. We provide you with a wide variety of dishes to choose from, each created with the perfection which you can enjoy with your family and friends in a peaceful environment.
Upholding our motto of healthy eats wealthy treats, Folsom café only serves fresh, hygienic, and highest quality food to our valuable customers in a due time. With an open kitchen concept, we are established to fill up the need of a place where quality comes with consistency in terms of both foods and services, and a place where you can meet, relax and have a great time together.
Serving more than hundred varieties of tea and coffee made from fresh beans, Folsom café is also a great place for the coffee enthusiast. Enjoy the conversation with a wide variety of coffee and exotic dishes to choose from, in an environment built with the perfect ambience which can serve you in both your personal and professional needs with Folsom cafe.</h2>
</div>
<footer>
<div class=”footer-content”>
<h3>Contacst Us</h3>
<p>+1 123 456 7890<br>Washington DC, USA</p>
</div>
<div class=”footer-bottom”>
<p>copyright ©2021</p>
</div>
</footer>
</body>
</html>
Menu.html
<html>
<head>
<title> Menu </title>
</head>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
.wrapper1 {
display: grid;
}
header {
height: 100px;
background: #262626;
width: 100%;
z-index: 10;
position: fixed;
}
.logo {
width: 30%;
float: left;
line-height: 100px;
}
.logo a {
text-decoration: none;
font-size: 30px;
font-family: poppins;
color: #fff;
letter-spacing: 5px;
}
nav {
float: right;
line-height: 100px;
}
nav a {
text-decoration: none;
font-family: poppins;
letter-spacing: 4px;
font-size: 20px;
margin: 0 10px;
color: #fff;
}
footer{
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
font-family: “Open Sans”;
padding-top: 20px;
color: #fff;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 1rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 20px;
font-size: 14px;
}
.footer-bottom{
background: #000;
width: 100vw;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
.one {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.one1 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.two2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
.three {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.three3 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
.four {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.four4 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
.five {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.five5 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
.six {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
margin-left:275px;
}
.six6 {
grid-column: 2 / 4;
grid-row: 1 / 3;
height :200px;
margin-bottom:25px;
float:left;
}
</style>
<body>
<header>
<div class=”wrapper”>
<div class=”logo”>
<a href=”#”>Indian Resturant</a>
</div>
<nav>
<a href=”Home.html”>Home</a> <a href=”Menu.html”>Menu</a> <a href=”ContactUs.html”>Contact Us</a>
</nav>
</div>
</header>
<div class=”wrapper,wrapper1″ style=”padding-top:120px; margin-left:50px;”>
<center><h1><u>Menu</u></h1></center>
<div class=”one1″><img src=”https://b.zmtcdn.com/data/pictures/3/40853/0bde209ae22d654ea5f24041414aadeb
_o2_featured_v2.jpg?output-format=webp” style=”height:200px; width:250px;”></div>
<div class=”one”><h1 style=”margin-top:65px”>Punjabi Food</h1><h2>Price: 10$</h2></div>
<div class=”two2″><img src=”https://b.zmtcdn.com/data/pictures/chains/7/34157/15163a4ef898921901b09ced2446d67d
_o2_featured_v2.jpg?output-format=webp” style=”height:200px;width:250px;” ></div>
<div class=”two”><h1 style=”margin-top:65px”>Spicy Food</h1><h2>Price: 13$</h2></div>
<div class=”three3″><img src=”https://b.zmtcdn.com/data/pictures/chains/1/47211/c9996dd70c88230268cb00d20a92b7cf
_o2_featured_v2.jpg?output-format=webp” style=”height:200px;width:250px;” ></div>
<div class=”three”><h1 style=”margin-top:65px”>Pizza</h1><h2>Price: 15$</h2></div>
<div class=”four4″><img src=”https://b.zmtcdn.com/data/pictures/chains/6/18785956/f77404915f5f07540ce2936941f365f0
_o2_featured_v2.jpg?output-format=webp” style=”height:200px;width:250px;” ></div>
<div class=”four”><h1 style=”margin-top:65px”>Cake</h1><h2>Price: 10$</h2></div>
<div class=”five5″><img src=”https://b.zmtcdn.com/data/pictures/chains/9/35079/c0ba9ec0f08684316b2552a8eb5a1ea8
_o2_featured_v2.jpg?output-format=webp” style=”height:200px;width:250px;” ></div>
<div class=”five”><h1 style=”margin-top:65px”>McDonalds</h1><h2>Price: 5$</h2></div>
<div class=”six6″><img src=”https://b.zmtcdn.com/data/pictures/chains/1/18721181/722eb241096d2d9511bc931d0ca92a84
_o2_featured_v2.jpg?output-format=webp” style=”height:200px;width:250px;” ></div>
<div class=”six”><h1 style=”margin-top:65px”>Rice</h1><h2>Price: 6$</h2></div>
</div>
<footer>
<div class=”footer-content”>
<h3>Contacst Us</h3>
<p>+1 123 456 7890<br>Washington DC, USA</p>
</div>
<div class=”footer-bottom”>
<p>copyright ©2021</p>
</div>
</footer>
</body>
</html>
ContactUs.html
<html>
<head>
<title> Contact Us </title>
</head>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
header {
height: 100px;
background: #262626;
width: 100%;
z-index: 10;
position: fixed;
}
.logo {
width: 30%;
float: left;
line-height: 100px;
}
.logo a {
text-decoration: none;
font-size: 30px;
font-family: poppins;
color: #fff;
letter-spacing: 5px;
}
nav {
float: right;
line-height: 100px;
}
nav a {
text-decoration: none;
font-family: poppins;
letter-spacing: 4px;
font-size: 20px;
margin: 0 10px;
color: #fff;
}
footer{
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
font-family: “Open Sans”;
padding-top: 20px;
color: #fff;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 1rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 20px;
font-size: 14px;
}
.footer-bottom{
background: #000;
width: 100vw;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #262626;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
padding-left:50px;
}
</style>
<body>
<header>
<div class=”wrapper”>
<div class=”logo”>
<a href=”#”>Indian Resturant</a>
</div>
<nav>
<a href=”Home.html”>Home</a> <a href=”Menu.html”>Menu</a> <a href=”ContactUs.html”>Contact Us</a>
</nav>
</div>
</header>
<div>
<div style=”width:50%;height:70%; padding-top:120px; float:right;”>
<span “padding-left:120px;”>
<h1 style=”margin-top:100px;”>Contact Us</h1></br>
<h2>Out mailing Address is:</h2>
<h3>152A, Charlotte Street,<br> Washington DC<br>Phone: +1 234 567 890</h3>
<span>
</div>
<div style=”width:50%;height:70%;padding-top:120px;”>
<div class=”container” style=”magin-left:30px;”>
<h2><strong>Contact Form</strong></h2><br>
<span>
<form action=”#”>
<label for=”fname”>First Name :</label>
<input type=”text” id=”fname” name=”firstname” placeholder=”Your name..”>
<label for=”lname”>Last Name :</label>
<input type=”text” id=”lname” name=”lastname” placeholder=”Your last name..”>
<label for=”subject”>Comment :</label>
<textarea id=”subject” name=”subject” placeholder=”Write something..” style=”height:130px”></textarea>
<input type=”submit” value=”Submit”>
</form>
</span>
</div>
</div>
</div>
<footer>
<div class=”footer-content”>
<h3><u>Contacst Us</u></h3>
<p>+1 123 456 7890<br>Washington DC, USA</p>
</div>
<div class=”footer-bottom”>
<p>copyright ©2021</p>
</div>
</footer>
</body>
</html>
