<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- https://favicon.io/ -->
<link rel="shortcut icon" href="rsrc/imgs/favicon.png">
<!-- SEO -->
<meta name="description" content="tunisian food is a premium food delivery service with
the mission to bring affordable and healthy meals to as many as people as possible.">
<!-- validate the html validator.w3.org -->
<title>Tunisian Food</title>
<!-- normalize .css check the link : https://necolas.github.io/normalize.css/ -->
<link rel="stylesheet" type="text/css" href="vendors/normalize/normalize.css">
<!-- http://www.responsivegridsystem.com a grid system-->
<link rel="stylesheet" href="vendors/gridsystem/grid.css">
<!-- google fonts LATO -->
<link
href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900
,900i&display=swap" rel="stylesheet">
<!-- ion icons -->
<link rel="stylesheet" type="text/css" href="vendors/ionicon/css/ionicons.min.css">
<!-- css file -->
<link rel="stylesheet" type="text/css" href="rsrc/css/style.css">
<!-- media queries css file -->
<link rel="stylesheet" type="text/css" href="rsrc/css/mediaQueries.css">
</head>
<body>
<header>
<nav>
<div class="row">
<img class="logo" src="rsrc/imgs/logo_transparent.png" alt="brand logo">
<ul class="main-nav">
<li><a href="#features">food delevery</a></li>
<li><a href="#works">how it works</a></li>
<li><a href="#cities">our cities</a></li>
<li><a href="#plans">sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>GoodBye junk food, <br>Hello super Tunisian food</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">i'm starving</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">gimme more</a>
</div>
</header>
<!-- feature section -->
<!-- https://ionicons.com/ to add icons -->
<section class="section-feature js--section-features" id="features">
<div class="row">
<h2>get food fast — not fast food</h2>
<p class="long-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>up to 365 days/year</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>ready in 20 minutes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>order anything</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
</div>
</section>
<!-- meal section -->
<section class="section-meal">
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/1.jpg" alt="tunisian masfouf">
<div class="overlay">masfouf <br><br>
<a href="#" class="btn btn-ghost">order now</a>
</div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/2.jpg" alt="tunisian grilled salad">
<div class="overlay">grilled salad<br><br>
<a href="#" class="btn btn-ghost">order now</a>
</div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/3.jpg" alt="tunisian sehan tounsi">
<div class="overlay">sehan tounsi<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/4.jpg" alt="tunisian kouskous and mloukhia">
<div class="overlay">kouskous and mloukhia<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
</ul>
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/5.jpg" alt="tunisian frikasee">
<div class="overlay">frikasee<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/6.jpg" alt="tunisian mokli">
<div class="overlay">mokli<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/7.jpg" alt="tunisian brik and swabaa fatma">
<div class="overlay">brik and swabaa fatma<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/8.jpg" alt="tunisian traditional bread">
<div class="overlay">traditional bread<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
</ul>
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/9.jpg" alt="tunisian ija merguez">
<div class="overlay">ija merguez<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/10.jpg" alt="tunisian kaskrout thon">
<div class="overlay">kaskrout thon<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/11.jpg" alt="tunisian sehan tounsi with merguez">
<div class="overlay">sehan tounsi with merguez<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/12.jpg" alt="tunisian frikasee with eggs">
<div class="overlay">frikasee with eggs<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
</ul>
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/13.jpg" alt="tunisian mokli with eggs">
<div class="overlay">mokli with eggs<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/14.jpg" alt="tunisian mloukhia with soup">
<div class="overlay">mloukhia with soup<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/15.jpg" alt="tunisian spaghetti with meat balls">
<div class="overlay">spaghetti with meat balls<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/16.jpg" alt="tunisian lablelbi">
<div class="overlay">tunisian lablelbi<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
</ul>
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/17.jpg" alt="tunisian kouskous">
<div class="overlay">tunisian kouskous<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/18.jpg" alt="tunisian mokli with royal fish">
<div class="overlay">mokli with royal fish<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/19.jpg" alt="tunisian mousli with chicken">
<div class="overlay">mousli with chicken<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/20.jpg" alt="tunisian ija merguez with trational bread">
<div class="overlay">ija merguez with trational bread<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
</ul>
<ul class="meal-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/21.jpg" alt="tunisian mokli with eggs and fish">
<div class="overlay">mokli with eggs and fish<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/22.jpg" alt="tunisian royal kouskous">
<div class="overlay">royal kouskous<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="rsrc/imgs/23.jpg" alt="tunisian mousli with cows meat">
<div class="overlay">mousli with cows meat<br><br>
<a href="#" class="btn btn-ghost">order now</a></div>
</figure>
</li>
<li>
<figure class="meal-photo">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
/
23
100%