Cafe Project

<!
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=MnwxMj
A3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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=MnwxMj
A3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="">
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit dolor sit amet
consectetur adipisicing
elit.</p>
</div>
</div>
<div class="card">
<img
src="https://images.unsplash.com/photo-1606491956689-2ea866880c84?ixlib=rb-1.2.1&ixid=MnwxMjA
3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1921&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">
<img
src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-1.2.1&ixid=MnwxMjA
alt="">
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit lorem ipsum, dolor
sit amet consectetur
adipisicing elit</p>
</div>
</div>
<div class="card">
<img
src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=MnwxMjA
alt="">
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae

doloremque fugit sequi quidem
eveniet?</p>
</div>
</div>
<div class="card">
<img
src="https://images.unsplash.com/photo-1603894584373-5ac82b2ae398?ixlib=rb-1.2.1&ixid=MnwxMjA
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=200
0
" 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 2022
<p>
Designed by Sonika
</p>
</div>
</footer>
</div>
</body>
</html>

Cafe Project

Uploaded by

Document Information

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

Cafe Project

Uploaded by

Copyright:

Available Formats

<!

<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" />

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

<h1 class="h-primary">Welcome to Foodie</h1>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>

<button class="btn">Order Now</button>

<h5 class="price"> $10 </h5>

minus. Facilis explicabo natus nihil voluptatem eveniet pariatur.</p>

<h5 class="price"> $10 </h5>

<h5 class="price"> $8 </h5>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus

<h5 class="price"> $12 </h5>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae

<h5 class="price"> $14 </h5>

<h1 class="title">About us</h1>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam

doloremque. Assumenda illo delectus aliquid libero, quisquam vero facere

similique, aperiam dolores ex mollitia nobis nostrum blanditiis autem qui

<button id="btn1">learn more</button>

<input type="text" class="inp_box" placeholder="Name">

<textarea type="text" class="inp_box text_area" placeholder="Adress"></textarea>

<button class="btn2">Order Now</button>

You might also like