In: Computer Science
Minimum Requirements:
Hello , I am writing the
answer below and have tried to write complete answer
in simple and easy to understand language. I hope my answer will
help you.
PLEASE give me LIKE / UPVOTE if you like my answer. THANK
YOU.
all pages made by the HTML & CSS only
index.html
here in this index page :we make a title in the top of the page.
add a nvabar using css also active class in here.
3 navbar links added about, project page , future project
using the images & we make a links a Restaurants links .
then add footer
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Restaurant</title>
<!-- using here internal stye css here-->
<style>
h1{
text-align: center;
}
.gal{
margin-left: 60px;;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 400px;
}
<!--mouse curser when then the gallery border color change effect-->
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 400px;
height:400px;
}
div.desc {
padding: 15px;
text-align: center;
}
.dis{
float: none;
clear: both;
text-align: center;padding-top: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
<!--all li properties float to the left side -->
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!--here you can mouse curser effect add uisng hover-->
li a:hover {
background-color: #111;
}
<!-- footer style here center , padding space ,bgcolor change & text color white-->
footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}
.active{
color: darkgrey;
}
</style>
</head>
<body>
<h1>Restaurant</h1>
<!--here add navbar uisng the unorderd list & list item also making a link uisng ancer tag -->
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="project.html">Project page</a></li>
<li><a href="future.html">Future goals page</a></li>
</ul>
<!-- the three image are create -->
<div class="gal">
<div class="gallery">
<a target="_blank" href="hotdog.com">
<img src="1.jpg" width="100" height="400">
</a>
<div class="desc"><b>Hotdog restaurant</b> <p>its good hotdog sellers makit it traditionaly<p><a href="hotdog.com">www.hotdog.com</a></div>
</div>
<div class="gallery">
<a target="_blank" href="pizza.com">
<img src="2.jpg" width="400" height="400">
</a>
<div class="desc"><b>Pizza restaurant</b> <p>quality pizza baking with wood-fired oven.<p><a href="pizza.com">www.pizza.com</a></div>
</div>
<div class="gallery">
<a target="_blank" href="southres.com">
<img src="3.jpg" width="800" height="400">
</a>
<div class="desc"><b>south restaurant</b> <p>good food available souths items<p><a href="southres.com">www.south.com</a></div>
</div>
<p>
<div class="dis"><h3>
We love foods so our top 3 Restaurant list here , if you like the top quality food visit the image or links. thank you
</p></h3>
</div>
<!--footer here only the auther nake eg. -->
<footer>
<p>Author: <br>
<a href="[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
About.html
title & the navbar same mention here as index page,
then add information about us.
(you can also add info as you want or change)
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Restaurant</title>
<style>
h1{
text-align: center;
}
.gal{
margin-left: 25px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}
.active{
color: darkgrey;
}
.para{font-family:initial;
text-align: center;
font-size: 20px;
padding:20px;
}
</style>
</head>
<body>
<h1> Restaurant</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="active" href="About.html">About</a></li>
<li><a href="project.html">Project page</a></li>
<li><a href="future.html">Future goals page</a></li>
</ul>
<div class="para">
We can show you which Restaurant is best for you.
<p> We make also you choose best food</p>
<p>Best possible service add in the Restaurant </p>
<p>We test first then suggest food.</p>
</div>
<footer>
<p>Author: <br>
<a href="[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
project.html
title & navbar as same in all pages
only the imformation change here
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Restaurant</title>
<style>
h1{
text-align: center;
}
.gal{
margin-left: 25px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}
.active{
color: darkgrey;
}
.para{font-family:initial;
text-align: center;
font-size: 20px;
padding:20px;
}
</style>
</head>
<body>
<h1>Restaurant</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a class="active" href="project.html">Project page</a></li>
<li><a href="future.html">Future goals page</a></li>
</ul>
<div class="para">
we can add some more Restaurant.
<p>new Restaurant list in our website.
<p>we make happy customers </p>
</div>
<footer>
<p>Author: <br>
<a href="[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
future.html
title & navbar same as index
added only extran inforamtion here
also footer
you can switch any page between any page
ita all connected.
<!DOCTYPE html>
<html>
<head>
<title>My Favourite Restaurant</title>
<style>
h1{
text-align: center;
}
.gal{
margin-left: 25px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}
.active{
color: darkgrey;
}
.para{font-family:initial;
text-align: center;
font-size: 20px;
padding:20px;
}
</style>
</head>
<body>
<h1> Restaurant</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="project.html">Project page</a></li>
<li><a class="active" href="future.html">Future goals page</a></li>
</ul>
<div class="para">
We can suggest more Restaurants in the future,as we told we make better Decision Restaurant to you.
<p>Restaurant add list like India. Mexico.Italy.Thailand.
<p>also we add "best Drinks" add in our website</p>
</div>
<footer>
<p>Author: <br>
<a href="[email protected]">[email protected]</a></p>
</footer>
</body>
</html>