Delish – Restaurant & Cafe Bootstrap HTML5 Template
Created: 15 June, 2024
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to Support
Template Installation
-
FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside delish-html folder.
Pages
- index.html 1st Home Page
- index-one-page.html 1st Home One Page
- index-2.html 2nd Home Page
- index-2-one-page.html 2nd Home One Page
- index-3.html 3rd Home Page
- index-3-one-page.html 3nd Home One Page
- about-us.html About Us Page
- blog.html Blog Page
- blog-details.html Blog Details Page
- contact-us.html Contact Us Page
- gallery.html Gallery Page
- menu.html Menu Page
- reservation.html Reservation Page
- team.html Team Page
- team-details.html Team Details Page
- cart.html Cart Page
- shop.html Shop Page
- shop-details.html Shop Details Page
- wishlist.html Wishlist Page
- checkout.html Checkout Page
- 404.html Error Page
Fonts
<!-- Google Fonts
============================================ -->
Jost - <link href='https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap rel='stylesheet' type='text/css'>
Source File (CSS)
<!-- =========== All Stylesheet ================= -->
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendor/animate.min.css">
<link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
<link rel="stylesheet" href="assets/css/vendor/magnific-popup.css">
<link rel="stylesheet" href="assets/css/vendor/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/vendor/spacing.css">
<link rel="stylesheet" href="assets/css/plugins/odometer-theme-default.css">
<link rel="stylesheet" href="assets/css/main.css">
Source File (JS)
<!-- All JS Plugins -->
<!-- JS here -->
<script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
<script src="assets/js/plugins/waypoints.min.js"></script>
<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins/meanmenu.min.js"></script>
<script src="assets/js/plugins/odometer.min.js"></script>
<script src="assets/js/plugins/swiper.min.js"></script>
<script src="assets/js/plugins/wow.js"></script>
<script src="assets/js/vendor/magnific-popup.min.js"></script>
<script src="assets/js/vendor/type.js"></script>
<script src="assets/js/plugins/nice-select.min.js"></script>
<script src="assets/js/vendor/jquery-ui.min.js"></script>
<script src="assets/js/vendor/jquery.appear.js"></script>
<script src="assets/js/plugins/parallax.min.js"></script>
<script src="assets/js/plugins/parallax-scroll.js"></script>
<script src="assets/js/plugins/gsap.min.js"></script>
<script src="assets/js/plugins/ScrollTrigger.min.js"></script>
<script src="assets/js/plugins/SplitText.js"></script>
<script src="assets/js/plugins/tween-max.min.js"></script>
<script src="assets/js/plugins/draggable.min.js"></script>
<script src="assets/js/plugins/smoothscroll.js"></script>
<script src="assets/js/vendor/ajax-form.js"></script>
<script src="assets/js/main.js"></script>
Customization
How to Change Logo
How to Change Title
How to Change Favicon
How to Change Main home banner
How to Change Page Banner
How to Change Blog Section Item
How to Change Mail Address with Your's - Open mail.php file and edit.
How to Change Copyright
SCSS Structure
CSS Structure
I'm using One SCSS files in this template. You change the SCSS Code of style.scss file
/*-----------------------------------------------------------------------------------
Template Name: Delish – Restaurant & Cafe Bootstrap HTML5 Template
Author: RRDevs
Support: https://support.rrdevs.net
Description: Delish – Restaurant & Cafe Bootstrap HTML5 Template.
Version: 1.0
Developer: Sabbir Ahmmed (https://github.com/ahmmedsabbirbd)
-----------------------------------------------------------------------------------
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 @forward 'common';
1.2 @forward 'spacing';
1.3 @forward 'theme';
1 index
-----------------
02. COMPONENTS CSS
-----------------
2.1 @forward 'custom-class';
2.2 @forward 'search';
2.3 @forward 'buttons';
2.4 @forward 'offcanvas';
2.5 @forward 'section-title';
2.6 @forward 'breadcrumb';
2.7 @forward 'backtotop';
2.8 @forward 'animation';
2.9 @forward 'preloader';
2.10 @forward 'rangeSlider';
2 index
-----------------
03. HEADER CSS
-----------------
3.1 @forward 'header-common';
3.2 @forward 'header-1';
3.3 @forward 'header-2';
3.4 @forward 'header-3';
3.5 @forward 'header-4';
3 index
---------------------------------
04. MENU CSS
---------------------------------
4.1 @forward 'menu';
4.2 @forward 'meanmenu';
4 index
---------------------------------
05. BLOG CSS
---------------------------------
5.1 @forward 'blog';
5.2 @forward 'sidebar';
5.3 @forward 'blog-details';
5.4 @forward 'blog-2';
5.5 @forward 'blog-3';
5.6 @forward 'blog-4';
5 index
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 @forward 'footer';
6.2 @forward 'footer-copyright';
6.3 @forward 'footer-2';
6.4 @forward 'footer-3';
6.5 @forward 'footer-cta';
6.6 @forward 'footer-top';
6 index
---------------------------------
07. CTA CSS
---------------------------------
7.1 @forward 'cta';
7.2 @forward 'cta-2';
7 index
---------------------------------
08. Banner CSS
---------------------------------
8.1 @forward 'banner-1';
8.2 @forward 'banner-2';
8.3 @forward 'banner-3';
8 index
---------------------------------
09. PAGES CSS
---------------------------------
09.1 @forward './about-2.scss';
09.2 @forward './about-our-company.scss';
09.3 @forward './book-a-table-2.scss';
09.4 @forward './book-a-table-3.scss';
09.5 @forward './book-a-table.scss';
09.6 @forward './business-model.scss';
09.7 @forward './cart.scss';
09.8 @forward './checkout.scss';
09.9 @forward './client-testimonial.scss';
09.10 @forward './clients-feedback.scss';
09.11 @forward './contact-us.scss';
09.12 @forward './customer-feedback.scss';
09.13 @forward './discount.scss';
09.14 @forward './discover-food.scss';
09.15 @forward './error.scss';
09.16 @forward './experience-2.scss';
09.17 @forward './experience.scss';
09.18 @forward './fast-food.scss';
09.19 @forward './food-gallery.scss';
09.20 @forward './food-menu-tab.scss';
09.21 @forward './food-menu.scss';
09.22 @forward './most-reservation.scss';
09.23 @forward './opening-time.scss';
09.24 @forward './our-food-menu.scss';
09.25 @forward './our-project.scss';
09.26 @forward './our-service-2.scss';
09.27 @forward './our-service.scss';
09.28 @forward './reservation-2.scss';
09.29 @forward './reservation.scss';
09.30 @forward './service-2.scss';
09.31 @forward './shop-details.scss';
09.32 @forward './team-2.scss';
09.33 @forward './team-3.scss';
09.34 @forward './team-details.scss';
09.35 @forward './team.scss';
09.36 @forward './wishlist.scss';
09 index
*/
*Note: Responsive css in assests/css/main.css.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Home Page Hero Banner section CSS - find and change it on _banner-1.scss from "assets/scss/layout/banner/banner-1.scss" folder
@use '../../utils' as *;
/*----------------------------------------*/
/* 9.1 banner Style 1
/*----------------------------------------*/
// Banner style
.banner {
&__slider {
.swiper-slide-active {
.banner__item {
&-bg {
@include transform(scale(1.3));
}
&-content {
h1 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
span.bar span:after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
span.bar span:before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
}
}
}
}
&__item {
overflow: hidden;
z-index: 1;
position: relative;
padding-top: 213px;
padding-bottom: 233px;
background: var(--rr-theme-secondary);
@media #{$lg} {
padding-top: 200px;
padding-bottom: 220px;
}
@media #{$md} {
padding-top: 170px;
padding-bottom: 190px;
}
@media #{$sm} {
padding-top: 140px;
padding-bottom: 160px;
}
@media #{$xs} {
padding-top: 130px;
padding-bottom: 160px;
}
&-bg {
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
content: "";
position: absolute;
transition: all 6s ease;
}
&:before {
content: "";
width: calc(100% - 160px);
height: calc(100% - 158px);
z-index: 0;
top: 50%;
left: 50%;
position: absolute;
mix-blend-mode: normal;
@include transform(translate(-50%, -50%));
border: 2px solid rgba(255, 255, 255, 0.1);
@media #{$sm, $xs} {
display: none;
}
}
&-overlay:after {
content: "";
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
position: absolute;
background: rgba(10, 5, 4, 0.67);
}
&-content {
position: relative;
z-index: 1;
h1 {
transition: all .7s ease-in-out;
color: var(--rr-common-white);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
font-family: var(--rr-ff-jost);
text-transform: uppercase;
font-style: normal;
font-weight: 700;
font-size: 80px;
line-height: 116px;
@media #{$md} {
font-size: 60px;
line-height: 96px;
}
@media #{$sm} {
font-size: 50px;
line-height: 75px;
}
@media #{$xs} {
font-size: 34px;
line-height: 44px;
}
span {
display: block;
font-size: 48px;
font-weight: 600;
line-height: 65px;
font-style: normal;
@media #{$md} {
font-size: 38px;
line-height: 55px;
}
@media #{$sm} {
font-size: 33px;
line-height: 50px;
}
@media #{$xs} {
font-size: 28px;
line-height: 38px;
}
&.bar span {
z-index: 1;
position: relative;
display: inline-block;
&:after, &:before {
z-index: -1;
width: 140px;
content: "";
top: 50%;
height: 1px;
position: absolute;
background: var(--rr-common-white);
@include transform(translate(-50%, 0));
transition: all 1s ease;
transition-delay: 1s;
@media #{$sm, $xs} {
width: 80px;
}
}
&:before {
left: -92px;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
@media #{$sm, $xs} {
left: -65px;
}
}
&:after {
right: -232px;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
@media #{$sm, $xs} {
right: -145px;
}
}
}
}
}
&-link {
gap: 70px;
align-items: center;
justify-content: center;
display: flex;
@media #{$xs, $sm} {
gap: 30px;
}
a {
font-style: normal;
font-weight: 600;
font-size: 16px;
padding-bottom: 5px;
line-height: 23px;
text-transform: uppercase;
font-family: var(--rr-ff-jost);
color: var(--rr-common-white);
display: block;
border-bottom: 2px solid transparent;
&:hover {
border-color: var(--rr-common-white);
}
}
}
}
}
&__thumbnail {
left: 50%;
width: 189px;
bottom: 50px;
z-index: 1;
position: absolute;
@include transform(translate(-50%, 0));
.swiper-slide {
width: 55px;
&.swiper-slide-active {
.banner__thumbnail-item {
border: 2px solid var(--rr-common-white);
}
}
}
}
&__thumbnail-item {
width: 55px;
height: 55px;
overflow: hidden;
@include border-radius(500px);
border: 1px solid var(--rr-common-black);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}