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.

0 0
Add a comment Improve this question Transcribed image text
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>

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.

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...

  • 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...

  • Create a website on a topic of your choosing. Site should include the following: Design: Site...

    Create a website on a topic of your choosing. Site should include the following: Design: Site Map (Task 7) Page-layout for each page (Task 8) Homepage . . o Title o Navigation Links o Footer o Minimum of 1 graphic 4 additional pages that are linked to home page o o o Navigation Links (link back to homepage) Minimum of 1 graphic per page Footer (matching homepage) CSS should be used for formatting visual aspects of site. Use either external...

  • I need a small website that to where I need to interlink a CSS file into...

    I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with the CSS attributes show up in the browser when I do click the "open with" after I click on the saved HTML file. Basically when I copy files from the internet, to see if the HTML and CSS would interlink and run, the HTML would run...

  • i want to create a website for my project . all 48% 2:02 a Expert Q&A...

    i want to create a website for my project . all 48% 2:02 a Expert Q&A course, you should make a personal website for yourself The completod website should have a minimem of 4 pages. You con decide abour the content and organiration of the pages as you like .The overall design of your webeite will be evalusted (inclading olor schems, creativity, layout, originality, etc) The visual appearance of your website is important All papes should pass validation The website...

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
ADVERTISEMENT