HTML Code

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Foodie</title>
</head>
<body>
<link rel="preconnect" href="https://fonts.googleapis.com">
<div class="container">
<header>
<nav id="navbar">
<div class="logo"><span>Foodie</span></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#order">Order</a></li>
</ul>
</nav>
<div id="mobile">
<div class="logo1"><span>Foodie</span></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#order">Order</a></li>
</ul>
</div>
<div class="overlay">
<section id="home">
<h1 class="h-primary">Welcome to Foodie</h1>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Perferendis dolorum numquam minus. </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</p>
<button class="btn">Order Now</button>
</section>
</div>
</header>
<div id="menu">
<div class="heading">
<h1>Menu</h1>
<h3>Today's Special</h3>
</div>
<div class="card">
<img
src="https://images.unsplash.com/photo-1626074353765-
517a681e40be?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887
&q=80">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $10 </h5>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit
reiciendis nam non quia! Earum eveniet
minus. Facilis explicabo natus nihil voluptatem eveniet
pariatur.</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1593179241557-
bce1eb92e47e?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&
q=80"
alt="">
</div>
dolor sit amet consectetur adipisicing
elit.</p>
</div>
</div>
<div class="card">
2ea866880c84?ixlib=rb-
&q=80"
alt="">
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloribus quibusdam facilis, magni
consectetur necessitatibus.</p>
</div>
</div>
<div class="card">
7c749659a591?ixlib=rb-
&q=80"
alt="">
</div>
lorem ipsum, dolor sit amet consectetur
adipisicing elit</p>
</div>
</div>
<div class="card">
23c9450c58cd?ixlib=rb-
&q=80"
alt="">
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Molestiae doloremque fugit sequi quidem
eveniet?</p>
</div>
</div>
<div class="card">
5ac82b2ae398?ixlib=rb-
&q=80"
alt="">
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Delectus reiciendis nam non quia! Earum
eveniet quia.</p>
</div>
</div>
</div>
<div id="about">
<h1 class="title">About us</h1>
<div class="about_row">
<div class="about_column">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Laboriosam voluptate aperiam id saepe
natus tempore adipisci neque incidunt vel nam, distinctio,
eos labore cupiditate assumenda
doloremque. Assumenda illo delectus aliquid libero,
quisquam vero facere molestias neque
similique, aperiam dolores ex mollitia nobis nostrum
blanditiis autem qui itaque quos, nisi
dolore.</p>
<button id="btn1">learn more</button>
</div>
<div class="about_column">
<img src="https://img.freepik.com/free-photo/chef-making-ok-
sign-white-background_1368-2804.jpg?w=2000
" alt="">
</div>
</div>
</div>
<div id="order">
<h1 class="title1">order</h1>
<form action="">
<input type="text" class="inp_box" placeholder="Name">
<input type="email" class="inp_box" placeholder="Email">
<textarea type="text" class="inp_box text_area"
placeholder="Adress"></textarea>
<button class="btn2">Order Now</button>
</div>
</form>
</div>
<footer>
<div>
©copyright 2023
<p>
Designed by coding__wallah
</p>
</div>
</footer>
</div>
</body>
</html>

HTML Code

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

HTML Code

Uploaded by

Copyright:

Available Formats

<!

<link rel="preconnect" href="https://fonts.googleapis.com">

You might also like