HomeworkLib
Question

Design restaurant website of five pages using Html , Create a folder and add all pages...

Design restaurant website of five pages using Html ,
Create a folder and add all pages and files Compress the folder using WinRar program.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

HTML code is provided below

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}

.w3-bar-block .w3-bar-item {padding:20px}

</style>

<body>

<!-- Sidebar (hidden by default) -->

<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">

<a href="javascript:void(0)" onclick="w3_close()"

class="w3-bar-item w3-button">Close Menu</a>

<a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>

<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>

</nav>

<!-- Top menu -->

<div class="w3-top">

<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">

<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>

<div class="w3-right w3-padding-16">Mail</div>

<div class="w3-center w3-padding-16">My Food</div>

</div>

</div>

  

<!-- !PAGE CONTENT! -->

<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">

<!-- First Photo Grid-->

<div class="w3-row-padding w3-padding-16 w3-center" id="food">

<div class="w3-quarter">

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3>The Perfect Sandwich, A Real NYC Classic</h3>

<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">

<h3>Let Me Tell You About This Steak</h3>

<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">

<h3>Cherries, interrupted</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

<p>What else?</p>

</div>

<div class="w3-quarter">

<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">

<h3>Once Again, Robust Wine and Vegetable Pasta</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

</div>

  

<!-- Second Photo Grid-->

<div class="w3-row-padding w3-padding-16 w3-center">

<div class="w3-quarter">

<img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">

<h3>All I Need Is a Popsicle</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">

<h3>Salmon For Your Skin</h3>

<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3>The Perfect Sandwich, A Real Classic</h3>

<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-quarter">

<img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">

<h3>Le French</h3>

<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

</div>

<!-- Pagination -->

<div class="w3-center w3-padding-32">

<div class="w3-bar">

<a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>

<a href="#" class="w3-bar-item w3-black w3-button">1</a>

<a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>

<a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>

<a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>

<a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>

</div>

</div>

  

<hr id="about">

<!-- About Section -->

<div class="w3-container w3-padding-32 w3-center">  

<h3>About Me, The Food Man</h3><br>

<img src="/w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">

<div class="w3-padding-32">

<h4><b>I am Who I Am!</b></h4>

<h6><i>With Passion For Real, Good Food</i></h6>

<p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

</div>

</div>

<hr>

  

<!-- Footer -->

<footer class="w3-row-padding w3-padding-32">

<div class="w3-third">

<h3>FOOTER</h3>

<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>

</div>

  

<div class="w3-third">

<h3>BLOG POSTS</h3>

<ul class="w3-ul w3-hoverable">

<li class="w3-padding-16">

<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">

<span class="w3-large">Lorem</span><br>

<span>Sed mattis nunc</span>

</li>

<li class="w3-padding-16">

<img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">

<span class="w3-large">Ipsum</span><br><span>Praes tinci sed</span>

</li>

</ul>

</div>

<div class="w3-third w3-serif">

<h3>POPULAR TAGS</h3>

<p>

<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>

</p>

</div>

</footer>

!-- End page content -->

</div>

<script>

// Script to open and close sidebar

function w3_open() {

document.getElementById("mySidebar").style.display = "block";

}

function w3_close() {

document.getElementById("mySidebar").style.display = "none";

}

</script>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Design restaurant website of five pages using Html , Create a folder and add all pages...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • To create a website I create Psd Files for the design (Phase 1) I Convert these...

    To create a website I create Psd Files for the design (Phase 1) I Convert these Psd's to html/css static webpages (Phase 2) I add some javascript to these webpages (Phase 3) I start the IDE "visual web developper" to start developping (Phase 4) I have studied computer programming for the past five years and now I noticed that the corresponding phase (phase 4) of creating a website takes the least amount time and effort in entire process. All the...

  • I have to create a website (using html) with three different tabs that consists of: -...

    I have to create a website (using html) with three different tabs that consists of: - Home page - Contact Us - Calender I was wondering how I go about doing so. I already have made the home page, contact us, and calender but I'm not sure how to put it onto one website and how to make tabs for contact us, calender, and the home page. Also, my professor asked us to do this as well: You will provide...

  • Create a new HTML file Include a folder and include in this folder the current version...

    Create a new HTML file Include a folder and include in this folder the current version of jquery.js In the HTML file, create a link to the jquery.js file In the <body> section o Include 2 <section> tags each with a unique ID In the <head> section include a <script> section and add jquery code to do the following... Include the document.ready statement In the document.ready function (when document loads) Include your name in the 1st<section> Change the font-size to...

  • // I need help in creating and publishing a website with two pages for this assignment,...

    // I need help in creating and publishing a website with two pages for this assignment, I am new to this and need a bit of help as to what and how many HTML files I need to create, and CSS files. If anyone could send me a sample code or anything to start out with it would be appreciated ! I have attached the specifications and requirements below CPI 101 Introduction to Informatics Homework #1 Check Out My Website!...

  • Could you create a website based on html and css? Details in the below: Note: You...

    Could you create a website based on html and css? Details in the below: Note: You can put link that I can download that folder Based on Project 2-1, do the necessary changes to have a webpage structure of a header, main, and footer sections. Then: •Set the width of the page to 700px •Use the font family starting with Verdana •Move one of the images from your Project 2-1 to the header. •Set the width of the header image...

  • I need help asap with this Dropbox Usage Hide Folder Information 0% 100% Instructions Less Info...

    I need help asap with this Dropbox Usage Hide Folder Information 0% 100% Instructions Less Info Final Project Instructions You are using 0 % of your total space for this dropbox folder. (0 Bytes of 244.14 MB) Create a web pages about yourself, a hobby, or something you are interested in. You may create the project from scratch or by using an online template. Your final project should be at least 3 webpages and a CSS file. It should also...

  • Create a two-page website by using HTML commands (without using CSS or javascript).

    Create a two-page website by using HTML commands (without using CSS or javascript).

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • i am using html 5. i have my main folder with my home page and i...

    i am using html 5. i have my main folder with my home page and i have five folders inside that folder how do i connect them all to each through links? or do i have to take them out of the folder?

  • Can you create a basic website using HTML or CSS that doesn’t require a web server...

    Can you create a basic website using HTML or CSS that doesn’t require a web server to run. Couldn't you just store the html or css doc in File/Window Explorer? Would it only need to be stored on a web server if I wanted to view it through the Internet?

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT