Quickeat - Restaurant & Food Delivery HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──css/
│──│──img/
│──│──js/
│──│──│──aos.js
│──│──│──beforeafter.js
│──│──│──custom.js
│──│──│──jquery-3.6.0.min.js
│──│──│──jquery-weekdays.min.js
│──│──│──jquery.fancybox.min.js
│──│──│──jquery.nice-select.min.js
│──│──│──jquery.quinn.min.js
│──│──│──jquery.slim.min.js
│──│──│──owl.carousel.min.js
│──│──│──range-slider.js
│──│──│──underscore-1.3.1.js
│──│──404.html
│──│──about.html
│──│──become-partner.html
│──│──blog.html
│──│──checkout.html
│──│──contacts.html
│──│──faq.html
│──│──index.html
│──│──pricing-table.html
│──│──restaurant-card.html
│──│──restaurants.html
│──│──services.html
│──│──single-blog.html
-
assets/css/ - all CSS styles for template
-
assets/css/style.css - main CSS styles for template
-
assets/js/ - all JS library for template
- assets/js/custom.js - main JS for template
Settings
Include of fonts
To use fonts, you must add @import in '/css/style.css' file:
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
HTML structure
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quickeat - index</title>
<link rel="icon" href="assets/img/fav-icon.png">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- owl carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- nice-select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- aos -->
<link rel="stylesheet" href="assets/css/aos.css">
<!-- style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- responsive -->
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- color -->
<link rel="stylesheet" href="assets/css/color.css">
<!-- Font Awesome 5 -->
<script src="https://kit.fontawesome.com/27a041baf1.js" crossorigin="anonymous"></script>
</head>
<body class="menu-layer">
<!-- loader start-->
<div class="page-loader">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
<!-- loader end-->
<!-- header -->
<header>
...
</header>
<!-- hero-section -->
<section class="hero-section gap" style="background-image: url(assets/img/background-1.png);">
...
</section>
<!-- works-section -->
<section class="works-section gap no-top">
...
</section>
<!-- best-restaurants -->
<section class="best-restaurants gap" style="background:#fcfcfc">
...
</section>
<!-- your-favorite-food -->
<section class="your-favorite-food gap" style="background-image: url(assets/img/background-1.png);">
...
</section>
<!-- counters-section -->
<section class="counters-section">
...
</section>
<!-- reviews-sections -->
<section class="reviews-sections gap">
...
</section>
<!-- join-partnership -->
<section class="join-partnership gap" style="background-color: #363636;">
...
</section>
<!-- news-section -->
<section class="news-section gap">
...
</section>
<!-- subscribe-section -->
<section class="subscribe-section gap" style="background:#fcfcfc">
...
</section>
<!-- footer -->
<footer class="gap no-bottom" style="background-color: #363636;">
...
</footer>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<!-- owl.carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- aos -->
<script src="assets/js/aos.js"></script>
<!-- custom -->
<script src="assets/js/custom.js"></script>
</body>
HTML structure of "Home" pages
<!-- hero-section -->
<section class="hero-section gap" style="background-image: url(assets/img/background-1.png);">
...
</section>
<!-- works-section -->
<section class="works-section gap no-top">
...
</section>
<!-- best-restaurants -->
<section class="best-restaurants gap" style="background:#fcfcfc">
...
</section>
<!-- your-favorite-food -->
<section class="your-favorite-food gap" style="background-image: url(assets/img/background-1.png);">
...
</section>
<!-- counters-section -->
<section class="counters-section">
...
</section>
<!-- reviews-sections -->
<section class="reviews-sections gap">
...
</section>
<!-- join-partnership -->
<section class="join-partnership gap" style="background-color: #363636;">
...
</section>
<!-- news-section -->
<section class="news-section gap">
...
</section>
<!-- subscribe-section -->
<section class="subscribe-section gap" style="background:#fcfcfc">
...
</section>
HTML structure of "Inner" pages
<!-- hero-section -->
<section class="hero-section about gap" style="background-image: url(assets/img/background.png);">
...
</section>
<!-- our-mission-section -->
<section class="our-mission-section gap">
...
</section>
<!-- cards-section -->
<section class="cards-section gap no-top">
...
</section>
<!-- video-section -->
<section class="video-section gap">
...
</section>
<!-- about-counters-section -->
<section class="about-counters-section gap" style="background-image: url(assets/img/background-1.png);">
...
</section>
<!-- Our Team Section -->
<section class="our-team-section gap">
...
</section>
<!-- Our partners Section -->
<section class="our-partners-section gap" style="background:#fcfcfc" data-aos="fade-up" data-aos-delay="200" data-aos-duration="300">
...
</section>
<!-- Our partners Section -->
<section class="service-shows gap" data-aos="fade-up" data-aos-delay="200" data-aos-duration="300">
...
</section>
<!-- subscribe-section -->
<section class="subscribe-section about gap" style="background-image: url(https://via.placeholder.com/1920x423);" >
...
</section>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.