Final Examination (Hands On) Source Code Code For Index - HTML

Final Examination (Hands On) Source Code
Code for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mock Business Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color:#F0F8FF;
}
/* Style the header */
.header {
background-color: #000000;
padding: 20px;
text-align: center;
background-image:url('Board.jpg');
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
/* Style the Web Development Restaurant header image */
img {
width: 350px;
opacity: 100%;
}
/* Style the top navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Top navigation bar aligned left */
ul.topnav li {float: left;}
/* Style the topnav links */

ul.topnav li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */

ul.topnav li a:hover:not(.active) {background-color: #ddd;}
/* Change color of active tab */

ul.topnav li a.active {background-color: #696969;}
/* Create three unequal columns that floats next to each other */

.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
color:white;
background-image:url('Foods.jpg');
}
/* Middle column */
.column.middle {
width: 50%;
background-color:#B22222;
color:#F0FFF0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each
other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
ul.topnav li {float: none;}
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<img src="Restaurant.png">
</div>
<ul class="topnav">
<li><a class="active" href="#">HOME</a></li>
<li><a href="Menu.html">MENU</a></li>
<li><a href="Gallery.html">GALLERY</a></li>
</ul>
<div class="row">
<div class="column side">
<h1>WEB DEVELOPMENT RESTAURANT</h1>
<h2>Best Restaurant in Town</h2>
</div>
<div class="column middle">
<h1>Kumain Ka Na Ba?</h1>
<p>At Web Development Restaurant, we share the very best of Filipino culture through fresh, delicious
dishes. From savory curries to tender, marinated adobo, our menu celebrates authentic Filipino cuisine
while offering a unique spin on island classics. Whether you’re on the hunt for a culinary adventure or
you’re looking for straight-from-the-heart home cooking, Chef Whilma will take care of you.</p>
</div>
<div class="column side">
<h1>BEST SELLERS:</h1>
<h3>Beef Kare Kare</h3>
<h3>Crispy Pata</h3>
<h3>Pork Sisig</h3>
</div>
</div>
<div class="footer">
<p>© 2021 Web Development 2 Finals - YourFullName Here</p>
</div>
</body>
</html>
Code for Menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<style>
*{
}
body {
margin: 0;
background-color:#C0C0C0;
}
.header {
padding: 20px;
text-align: center;
}
img {
width: 350px;
opacity: 100%;
}
ul.topnav {
margin: 0;
padding: 0;
overflow: hidden;
}

ul.topnav li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}


/* Style the main content */

.section-light{
text-align: center;
color:#F0FFF0;
padding: 30px;
font-size: 17px;
}
/* This part is for the list on the main content */
ul {
list-style-type: square;
margin: 0;
padding: 0;
}
/* Responsive Navigation Bar */

}
li {
}

.footer {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
</div>
<ul class="topnav">
<li><a href="index.html">HOME</a></li>
<li><a class="active" href="#">MENU</a></li>
<li><a href="Gallery.html">GALLERY</a></li>
</ul>
<section class="section section-light">
<h1>MENU</h1>
<h3>Appetizers</h3>
<p>
<ul>
<li>Lumpia</li>
<li>Siopao</li>
<li>Dumplings</li>
</ul>
</p>
<h3>Main Dish</h3>
<p>
<ul>
<li>Beef Kare Kare</li>
<li>Crispy Pata</li>
<li>Pork Sisig</li>
<li>Pork Adobo</li>
<li>Bicol Express</li>
</ul>
</p>
<h3>Appetizers</h3>
<p>
<ul>
<li>Halo-Halo</li>
<li>Leche Flan</li>
<li>Turon</li>
</ul>
</p>
</section>
</div>
</body>
</html>
Code for Gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gallery</title>
<style>
*{
}
body {
margin: 0;
background-color:#F0F8FF;
}
.header {
padding: 20px;
text-align: center;
}
img {
width: 350px;
opacity: 100%;
}
ul.topnav {
margin: 0;
padding: 0;
overflow: hidden;
}

ul.topnav li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}


/* Style the main content */

.section-gallery{
color:#F0FFF0;
padding: 20px;
height: auto;
font-size: 20px;
}
/* This part is for Styling the Image Gallery Section*/
div.gallery {
margin: auto;
border: 5px solid #ccc;
width: 350px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
/* This part is where the Styling the Image Gallery Section ends*/
/* Responsive Navigation Bar */

}

.footer {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
</div>
<ul class="topnav">
<li><a href="index.html">HOME</a></li>
<li><a href="Menu.html">MENU</a></li>
<li><a class="active" href="#">GALLERY</a></li>
</ul>
<section class="section section-gallery">
<div class="gallery">
<a target="_blank" href="Picture1.jpg">
<img src="Picture1.jpg" alt="Beef Kare-Kare" width="600" height="400">
</a>
<div class="desc">Beef Kare-Kare</div>
</div>
<img src="Picture2.jpg" alt="Pork Sisig" width="600" height="400">
</a>
<div class="desc">Pork Sisig</div>
</div>
<img src="Picture3.jpg" alt="Crispy Pata" width="600" height="400">
</a>
<div class="desc">Crispy Pata</div>
</div>
<img src="Picture4.jpg" alt="Halo-Halo" width="600" height="400">
</a>
<div class="desc">Halo-Halo</div>
</div>
</section>
</div>
</body>
</html>

Final Examination (Hands On) Source Code Code For Index - HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Final Examination (Hands On) Source Code Code For Index - HTML

Uploaded by

Copyright:

Available Formats

Final Examination (Hands On) Source Code

Code for index.html

/* Style the topnav links */

/* Change color on hover */

/* Change color of active tab */

/* Create three unequal columns that floats next to each other */

/* Style the topnav links */

/* Change color on hover */

/* Change color of active tab */

/* Style the main content */

/* Responsive Navigation Bar */

/* Style the footer */

/* Style the topnav links */

/* Change color on hover */

/* Change color of active tab */

/* Style the main content */

/* This part is for Styling the Image Gallery Section*/

/* Responsive Navigation Bar */

/* Style the footer */

You might also like