Refactor menu section to highlight authentic Indian dishes and update layout for improved user experience
This commit is contained in:
Alaguraj0361
parent
5d78301f2b
commit
5b6a0d13cf
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-1-old.webp
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-1-old.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-2-old.webp
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-2-old.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-3-old.webp
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-3-old.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-1.png
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 890 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-2.png
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-3.png
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/blog-news-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 796 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
addons/dine360_theme_shivasakthi/static/src/img/menu-tomato.png
Normal file
BIN
addons/dine360_theme_shivasakthi/static/src/img/menu-tomato.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
@ -1198,6 +1198,110 @@ section h2.display-4 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Blog News Cards — Screenshot Layout */
|
||||||
|
.s_blog_premium {
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
/* Subtitle above title */
|
||||||
|
.blog-subtitle-top {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #ffb800;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main heading */
|
||||||
|
.blog-main-heading {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #111111;
|
||||||
|
font-size: clamp(32px, 5vw, 52px);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card wrapper */
|
||||||
|
.blog-news-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: none;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
.blog-news-img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image wrapper — no border radius, like screenshot */
|
||||||
|
.blog-news-img-wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 220px;
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-news-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text body */
|
||||||
|
.blog-news-body {
|
||||||
|
padding: 20px 4px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Blog title — Bebas Neue dark, uppercase */
|
||||||
|
.blog-news-title {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #111111;
|
||||||
|
font-size: clamp(16px, 2vw, 20px);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Excerpt text */
|
||||||
|
.blog-news-excerpt {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* READ MORE link */
|
||||||
|
.blog-news-readmore {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #ffb800;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
|
||||||
|
.fa-star {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #cc9200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Gallery Slider Section
|
// Gallery Slider Section
|
||||||
.s_gallery_slider_premium {
|
.s_gallery_slider_premium {
|
||||||
background-color: #F4F1EA;
|
background-color: #F4F1EA;
|
||||||
@ -2233,35 +2337,330 @@ body.o_edit_mode {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Thali and Deal Sections */
|
/* Thali Section */
|
||||||
.s_unlimited_thali_section,
|
.s_unlimited_thali_section {
|
||||||
.s_enjoy_flavors_section {
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.lead {
|
/* Enjoy the Flavors Section — Exact Screenshot Banner Layout */
|
||||||
font-family: 'Roboto', sans-serif !important;
|
.s_enjoy_flavors_section {
|
||||||
|
background-color: #111111;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 380px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
/* ─── LEFT SIDE ─── */
|
||||||
|
|
||||||
|
/* "ENJOY THE" small chalk/brush line */
|
||||||
|
.enjoy-title-enjoy {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: clamp(28px, 4vw, 42px);
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
/* "FLAVORS" large brush text image */
|
||||||
transition: transform 0.5s ease;
|
.enjoy-title-flavors {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enjoy-flavors-img {
|
||||||
|
/* The image is the brush-style "FLAVORS" text in white */
|
||||||
|
max-width: 340px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Golden subtitle */
|
||||||
|
.enjoy-subtitle {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #ffb800;
|
||||||
|
font-size: clamp(16px, 2.2vw, 22px);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outline "ORDER NOW" button matching screenshot */
|
||||||
|
.enjoy-btn-outline {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 2px solid #ffb800;
|
||||||
|
color: #ffb800;
|
||||||
|
background: transparent;
|
||||||
|
padding: 10px 28px;
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.03) translateY(-5px);
|
background: #ffb800;
|
||||||
|
color: #111111;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── RIGHT SIDE ─── */
|
||||||
|
|
||||||
|
.enjoy-right-col {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main dosa tray image */
|
||||||
|
.enjoy-dosa-img {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
max-width: 520px;
|
||||||
|
width: 100%;
|
||||||
|
filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.8));
|
||||||
|
animation: enjoyDosaFloat 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "DOSADOS" watermark behind image */
|
||||||
|
.enjoy-watermark {
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: clamp(60px, 10vw, 120px);
|
||||||
|
color: rgba(255, 255, 255, 0.06);
|
||||||
|
letter-spacing: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shared floating element base */
|
||||||
|
.enjoy-float {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
pointer-events: none;
|
||||||
|
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Onion ring — top-left of image area */
|
||||||
|
.enjoy-float-onion {
|
||||||
|
width: 70px;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
animation: enjoyFloatA 3.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Green chili — top-right */
|
||||||
|
.enjoy-float-chili {
|
||||||
|
width: 50px;
|
||||||
|
top: 5%;
|
||||||
|
right: 8%;
|
||||||
|
transform: rotate(20deg);
|
||||||
|
animation: enjoyFloatB 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tomato slice — bottom-right */
|
||||||
|
.enjoy-float-tomato {
|
||||||
|
width: 55px;
|
||||||
|
bottom: 10%;
|
||||||
|
right: 5%;
|
||||||
|
animation: enjoyFloatC 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Steam container — positioned above dosa image */
|
||||||
|
.enjoy-steam {
|
||||||
|
position: absolute;
|
||||||
|
top: 5%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
z-index: 5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enjoy-steam-line {
|
||||||
|
width: 3px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: linear-gradient(to top, rgba(255,255,255,0.35), transparent);
|
||||||
|
|
||||||
|
&.s1 { animation: steamRise 2s ease-out 0s infinite; }
|
||||||
|
&.s2 { animation: steamRise 2s ease-out 0.4s infinite; height: 55px; }
|
||||||
|
&.s3 { animation: steamRise 2s ease-out 0.8s infinite; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── Keyframes ─── */
|
||||||
|
@keyframes enjoyDosaFloat {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-8px); }
|
||||||
|
}
|
||||||
|
@keyframes enjoyFloatA {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(-10deg); }
|
||||||
|
50% { transform: translateY(-12px) rotate(-10deg); }
|
||||||
|
}
|
||||||
|
@keyframes enjoyFloatB {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(20deg); }
|
||||||
|
50% { transform: translateY(-10px) rotate(20deg); }
|
||||||
|
}
|
||||||
|
@keyframes enjoyFloatC {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(15deg); }
|
||||||
|
50% { transform: translateY(-14px) rotate(15deg); }
|
||||||
|
}
|
||||||
|
@keyframes steamRise {
|
||||||
|
0% { opacity: 0; transform: translateY(0) scaleX(1); }
|
||||||
|
30% { opacity: 0.5; }
|
||||||
|
100% { opacity: 0; transform: translateY(-50px) scaleX(2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Testimonial Section — Split Layout matching screenshot */
|
||||||
.s_testimonials_premium {
|
.s_testimonials_premium {
|
||||||
.testimonial-carousel {
|
overflow: hidden;
|
||||||
.carousel-item {
|
|
||||||
display: none;
|
/* LEFT: Food photo as full-bleed cover */
|
||||||
&.active {
|
.testi-left-col {
|
||||||
display: block !important;
|
min-height: 580px;
|
||||||
}
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testi-left-img {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 580px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RIGHT: Golden amber background */
|
||||||
|
.testi-right-col {
|
||||||
|
background-color: #f5a623;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 60px 50px;
|
||||||
|
min-height: 580px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tomato accent — bottom-right corner */
|
||||||
|
.testi-tomato-accent {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0.85;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 55px;
|
||||||
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content wrapper — centered */
|
||||||
|
.testi-content-wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 560px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main heading — white bold Bebas Neue */
|
||||||
|
.testi-main-title {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: clamp(22px, 3vw, 36px);
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stars */
|
||||||
|
.testi-stars {
|
||||||
|
color: #ffb800;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Review paragraph — white, centered, small */
|
||||||
|
.testi-review-text {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 1.8;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Author name */
|
||||||
|
.testi-author-name {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav buttons — small circular dark */
|
||||||
|
.testi-nav-btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testi-nav-btn {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(255,255,255,0.6);
|
||||||
|
background: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #f5a623;
|
||||||
|
border-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bootstrap carousel override for text slides */
|
||||||
|
.carousel-item {
|
||||||
|
display: none;
|
||||||
|
&.active {
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2518,3 +2917,131 @@ body.o_edit_mode {
|
|||||||
0%, 100% { transform: translateY(0) rotate(-15deg); }
|
0%, 100% { transform: translateY(0) rotate(-15deg); }
|
||||||
50% { transform: translateY(8px) rotate(-12deg); }
|
50% { transform: translateY(8px) rotate(-12deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* From Authentic Indian Kitchen Realignment */
|
||||||
|
.s_authentic_kitchen_section {
|
||||||
|
background-color: #fcfbf7 !important;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.menu-accent-cucumber {
|
||||||
|
position: absolute;
|
||||||
|
left: 2%;
|
||||||
|
top: 8%;
|
||||||
|
width: 140px;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.95;
|
||||||
|
filter: drop-shadow(5px 5px 12px rgba(0,0,0,0.12));
|
||||||
|
animation: floatCucumber 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-accent-tomato {
|
||||||
|
position: absolute;
|
||||||
|
right: 3%;
|
||||||
|
bottom: 5%;
|
||||||
|
width: 120px;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.95;
|
||||||
|
filter: drop-shadow(5px 5px 12px rgba(0,0,0,0.12));
|
||||||
|
animation: floatTomatoBottom 10s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-card-container {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #eef0eb;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-column {
|
||||||
|
.menu-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 20px 25px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #ffb800 !important;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #04121D !important;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: 'Roboto', sans-serif !important;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-text {
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffb800 !important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 2px dotted rgba(4, 18, 29, 0.15) !important;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fbfbfa;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
|
||||||
|
img {
|
||||||
|
transform: scale(1.08) rotate(5deg);
|
||||||
|
border-color: #04121D !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-menu-view-all {
|
||||||
|
background-color: #ffb800 !important;
|
||||||
|
color: #04121D !important;
|
||||||
|
font-family: 'Bebas Neue', sans-serif !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 12px 35px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 4px 15px rgba(254, 205, 79, 0.4);
|
||||||
|
background-color: #04121D !important;
|
||||||
|
color: #ffb800 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.border-end-lg {
|
||||||
|
border-right: 1px solid #eef0eb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floatCucumber {
|
||||||
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||||
|
50% { transform: translateY(-12px) rotate(8deg); }
|
||||||
|
}
|
||||||
|
|||||||
@ -356,299 +356,344 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Menu Section Header -->
|
<!-- From Authentic Indian Kitchen Section -->
|
||||||
<section class="s_title o_colored_level pb24 pt64" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: white; background-image: none;">
|
<section class="s_authentic_kitchen_section o_colored_level pt96 pb96" style="background-color: #fcfbf7; position: relative; overflow: hidden;">
|
||||||
<div class="s_allow_columns container">
|
<!-- Floating Accent Images -->
|
||||||
<h6 style="text-align: center;">
|
<img src="/dine360_theme_shivasakthi/static/src/img/menu-cucumber.png" class="menu-accent-cucumber d-none d-lg-block" alt="Cucumber Accent"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
|
<img src="/dine360_theme_shivasakthi/static/src/img/menu-tomato.png" class="menu-accent-tomato d-none d-lg-block" alt="Tomato Accent"/>
|
||||||
<span style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">CHINESE DISH</span>
|
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
|
|
||||||
</h6>
|
|
||||||
<h2 class="display-4 fw-bold" style="text-align: center; color: #04121D; text-transform: uppercase;">Popular Exquisite Dishes</h2>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Menu List Section -->
|
|
||||||
<section class="s_menu_section o_colored_level pb80" style="background-color: white;">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row g-5">
|
<!-- Header -->
|
||||||
<!-- Column 1 -->
|
<div class="row mb-5">
|
||||||
<div class="col-lg-6">
|
<div class="col-12 text-center">
|
||||||
<div class="d-flex flex-column gap-4">
|
<h6 class="mb-2" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 16px;">POPULAR MENU</h6>
|
||||||
<!-- Item 1 -->
|
<h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 46px; letter-spacing: 1px; line-height: 1.2;">FROM AUTHENTIC INDIAN KITCHEN</h2>
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
</div>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
</div>
|
||||||
<div class="flex-grow-1">
|
|
||||||
<div class="d-flex align-items-baseline">
|
<!-- Menu Card Container -->
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN MANCHURIAN</h5>
|
<div class="menu-card-container mb-5">
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<div class="row g-0">
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
|
<!-- Column 1 -->
|
||||||
|
<div class="col-lg-6 menu-column border-end-lg">
|
||||||
|
<div class="d-flex flex-column gap-4 p-4 p-md-5">
|
||||||
|
<!-- Item 1 -->
|
||||||
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" alt="Medhu Vada"/>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<div class="d-flex align-items-baseline">
|
||||||
|
<h5 class="fw-bold mb-0 text-dark">MEDHU VADA</h5>
|
||||||
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
|
<span class="fw-bold price-text">$7.99</span>
|
||||||
|
</div>
|
||||||
|
<p class="small text-muted mb-0">The popular soft and savory appetizer</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Tender chicken chunks tossed in spicy Chinese Manchurian sauce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 2 -->
|
||||||
<!-- Item 2 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" class="rounded-circle me-3" alt="Garlic Naan"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">GARLIC NAAN</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">SCHEZWAN CHICKEN NOODLES</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$1.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Naan infused with garlic</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Noodles stir-fried with chicken and spicy Schezwan sauce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 3 -->
|
||||||
<!-- Item 3 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/fiery-fish-curry.png" class="rounded-circle me-3" alt="King Fish Fry"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">KING FISH FRY</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">VEG FRIED RICE</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$17.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$13.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">House Special - Premium King Fish Slice Fry</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Stir-fried rice mixed with colorful fresh vegetables.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 4 -->
|
||||||
<!-- Item 4 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-desserts.png" class="rounded-circle me-3" alt="Paruppu Pradhaman"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">PARUPPU PRADHAMAN</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">GOBI MANCHURIAN</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$3.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">south style Payasam made with coconut, Lentils and Jaggery</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Crispy cauliflower florets in dark, sweet and tangy sauce.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 5 -->
|
||||||
<!-- Item 5 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/crispy-gobi-65.png" class="rounded-circle me-3" alt="Egg Bhurji"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">EGG BHURJI (PODIMAS)</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHILLI PANEER</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$11.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Masala Egg Bhurji (Podimas)</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Paneer cubes tossed with bell peppers and green chillies.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Column 2 -->
|
||||||
<!-- Column 2 -->
|
<div class="col-lg-6 menu-column">
|
||||||
<div class="col-lg-6">
|
<div class="d-flex flex-column gap-4 p-4 p-md-5">
|
||||||
<div class="d-flex flex-column gap-4">
|
<!-- Item 1 -->
|
||||||
<!-- Item 1 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" alt="Veg Biryani"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/fiery-fish-curry.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">VEG BIRYANI</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHILLI CHICKEN</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$13.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Cooked in Chettinadu style using Basmati rice</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Spicy and crispy chicken tossed in soy-chilli gravy.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 2 -->
|
||||||
<!-- Item 2 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" class="rounded-circle me-3" alt="Hakka Noodles"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">HAKKA NOODLES (VEG)</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN FRIED RICE</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$13.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Hakka Flavored Noodles</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Stir-fried rice tossed with eggs, chicken, and spring onions.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 3 -->
|
||||||
<!-- Item 3 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="rounded-circle me-3" alt="Thalapakattu Mutton Biryani"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-curries.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">THALAPAKATTU MUTTON BIRYANI</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">CHICKEN NOODLES</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$16.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$15.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Authentic Thalapakattu style in seeraga samba rice</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Noodles tossed with chicken chunks and fresh stir-fry veggies.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 4 -->
|
||||||
<!-- Item 4 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-dosa.png" class="rounded-circle me-3" alt="Pizza Dosa"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-desserts.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">PIZZA DOSA</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">EGG NOODLES</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$14.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$14.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Classic Dosa made to taste like pizza and favorite with kids and adults alike</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Stir-fried noodles cooked with eggs and standard spices.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Item 5 -->
|
||||||
<!-- Item 5 -->
|
<div class="menu-list-item d-flex align-items-center">
|
||||||
<div class="menu-list-item d-flex align-items-center">
|
<img src="/dine360_theme_shivasakthi/static/src/img/cat-desserts.png" class="rounded-circle me-3" alt="Payasam"/>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-beverages.png" class="rounded-circle me-3" style="width: 70px; height: 70px; object-fit: cover; border: 2px solid #ffb800;" alt=""/>
|
<div class="flex-grow-1">
|
||||||
<div class="flex-grow-1">
|
<div class="d-flex align-items-baseline">
|
||||||
<div class="d-flex align-items-baseline">
|
<h5 class="fw-bold mb-0 text-dark">PAYASAM</h5>
|
||||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 16px;">VEG NOODLES</h5>
|
<span class="flex-grow-1 border-bottom mx-2"/>
|
||||||
<span class="flex-grow-1 border-bottom mx-2" style="border-style: dotted !important; border-color: #ddd !important; border-width: 2px !important;"/>
|
<span class="fw-bold price-text">$3.99</span>
|
||||||
<span class="fw-bold text-dark" style="font-size: 16px;">$13.99</span>
|
</div>
|
||||||
|
<p class="small text-muted mb-0">Traditional Tamilnadu style vermichilli payasam</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="small text-muted mb-0">Classic stir-fried noodles cooked with cabbage, carrot, and onion.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- View All Button -->
|
<!-- View All Button -->
|
||||||
<div class="row mt-5">
|
<div class="row">
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<a href="/shop" class="btn px-5 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">VIEW ALL</a>
|
<a href="/shop" class="btn btn-menu-view-all">VIEW FULL MENU <i class="fa fa-long-arrow-right ms-2"/></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Enjoy the Flavors Section -->
|
<!-- Enjoy the Flavors Section -->
|
||||||
<section class="s_enjoy_flavors_section o_colored_level pt96 pb96" style="background-color: #080808; background-image: url('/dine360_theme_shivasakthi/static/src/img/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
|
<section class="s_enjoy_flavors_section o_colored_level" style="background-color: #111111; position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center;">
|
||||||
<div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); z-index: 1;"/>
|
|
||||||
<div class="container position-relative" style="z-index: 2;">
|
<!-- Container -->
|
||||||
|
<div class="container position-relative" style="z-index: 2; padding: 60px 0;">
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<!-- Left Text Side -->
|
|
||||||
<div class="col-lg-6 text-white o_colored_level">
|
<!-- LEFT: Text Content -->
|
||||||
<h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">SPECIAL DEAL</h6>
|
<div class="col-lg-5 col-md-6 text-white o_colored_level" style="padding-right: 40px;">
|
||||||
<h1 class="display-3 fw-bold mb-2 text-white" style="line-height: 1.1; letter-spacing: 1px;">ENJOY THE FLAVORS</h1>
|
<!-- "ENJOY THE" small brush title -->
|
||||||
<h2 class="h3 fw-bold mb-5" style="color: #ffb800; text-transform: uppercase;">SOUTH INDIAN FOOD HERITAGE</h2>
|
<!-- <div class="enjoy-title-enjoy">ENJOY THE</div> -->
|
||||||
<div class="pt-2">
|
<!-- "FLAVORS" large brush image text -->
|
||||||
<a href="/shop" class="btn px-5 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">ORDER NOW</a>
|
<div class="enjoy-title-flavors">
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/offer-dosa-left.webp" alt="FLAVORS" class="enjoy-flavors-img"/>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Golden Subtitle -->
|
||||||
|
<h3 class="enjoy-subtitle">SOUTH INDIAN AND NORTH<br/>INDIAN CUSINE</h3>
|
||||||
|
<!-- Outline ORDER NOW Button -->
|
||||||
|
<a href="/shop" class="enjoy-btn-outline text-uppercase fw-bold">ORDER NOW <i class="fa fa-arrow-right ms-2"/></a>
|
||||||
</div>
|
</div>
|
||||||
<!-- Right Image Side -->
|
|
||||||
<div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level">
|
<!-- RIGHT: Dosa Image with Floating Elements + Watermark -->
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/offer-dosa-left.webp" class="img img-fluid mx-auto" alt="Dosa Platter Deal" style="max-height: 400px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));"/>
|
<div class="col-lg-7 col-md-6 o_colored_level position-relative enjoy-right-col">
|
||||||
|
|
||||||
|
<!-- DOSADOS Watermark Text -->
|
||||||
|
<div class="enjoy-watermark">DOSADOS</div>
|
||||||
|
|
||||||
|
<!-- Floating: Onion Ring (top-left of image area) -->
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/hero-onion-ring.png" class="enjoy-float enjoy-float-onion" alt=""/>
|
||||||
|
|
||||||
|
<!-- Floating: Green Chili (top-right) -->
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/hero-shape2.png" class="enjoy-float enjoy-float-chili" alt=""/>
|
||||||
|
|
||||||
|
<!-- Floating: Tomato Slice (bottom-right) -->
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="enjoy-float enjoy-float-tomato" alt=""/>
|
||||||
|
|
||||||
|
<!-- Steam Effect -->
|
||||||
|
<div class="enjoy-steam">
|
||||||
|
<div class="enjoy-steam-line s1"/>
|
||||||
|
<div class="enjoy-steam-line s2"/>
|
||||||
|
<div class="enjoy-steam-line s3"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Dosa Tray Image -->
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/shiva-sakthi-web-banner.webp" class="enjoy-dosa-img img-fluid" alt="Masala Dosa Platter"/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Testimonial Section -->
|
<!-- Testimonial Section -->
|
||||||
<section class="s_testimonials_premium o_colored_level" data-snippet="s_testimonials_premium" data-name="Premium Testimonials" style="background-color: #0c0f12; padding: 100px 0;">
|
<section class="s_testimonials_premium o_colored_level" style="padding: 0; overflow: hidden;">
|
||||||
<div class="container">
|
<div class="row g-0" style="min-height: 580px;">
|
||||||
<div class="row align-items-center g-5">
|
|
||||||
<!-- Left Image Side -->
|
<!-- LEFT: Dark Food Pan Image — full cover -->
|
||||||
<div class="col-lg-6 o_colored_level text-center">
|
<div class="col-lg-6 col-md-5 testi-left-col">
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/home-testi.webp" class="img img-fluid rounded-circle border border-yellow" style="max-width: 480px; aspect-ratio: 1/1; object-fit: cover; border-width: 8px !important; border-color: #ffb800 !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5);" alt="Testimonial food dish"/>
|
<div class="testi-left-img" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/home-testi.webp');"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT: Golden Yellow Background + Review Content -->
|
||||||
|
<div class="col-lg-6 col-md-7 testi-right-col">
|
||||||
|
|
||||||
|
<!-- Tomato accent — bottom right -->
|
||||||
|
<div class="testi-tomato-accent">
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" alt=""/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right Content Side -->
|
<div class="testi-content-wrap">
|
||||||
<div class="col-lg-6 o_colored_level">
|
|
||||||
<div class="content-wrapper text-white ps-lg-4">
|
|
||||||
<h6 class="d-flex align-items-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
|
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
|
|
||||||
TESTIMONIALS
|
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
|
|
||||||
</h6>
|
|
||||||
<h2 class="display-4 fw-bold text-white mb-4">What Our Clients Say</h2>
|
|
||||||
|
|
||||||
<!-- Google Reviews Branding -->
|
<!-- Title -->
|
||||||
<div class="google-reviews-info mb-5 d-flex align-items-center gap-3">
|
<h2 class="testi-main-title">WHAT HAVE LOT'S OFF HAPPY CUSTOMER<br/>EXPLORE FEEDBACK</h2>
|
||||||
<img src="https://www.vectorlogo.zone/logos/google/google-ar21.svg" class="google-reviews-logo" alt="Google" style="height: 35px;"/>
|
|
||||||
<div class="stars" style="color: #ffb800; font-size: 16px;">
|
<!-- Stars -->
|
||||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
<div class="testi-stars mb-3">
|
||||||
<span class="ms-2 text-white-50 small">(4.8 / 5.0)</span>
|
<i class="fa fa-star"/>
|
||||||
|
<i class="fa fa-star"/>
|
||||||
|
<i class="fa fa-star"/>
|
||||||
|
<i class="fa fa-star"/>
|
||||||
|
<i class="fa fa-star"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review Carousel -->
|
||||||
|
<div id="testiCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
|
||||||
|
<div class="carousel-item active">
|
||||||
|
<p class="testi-review-text">Visited this beautiful restaurant while nearby for a conference. The staff were welcoming from the very start! We started with the Gobi 65 which had light spice but a lot of flavour. Then, we had the hakka noodles, masala dosa and chettinadu chicken curry which was so tasty. Our Server Gagan recommended it and I'm glad he did. He was fantastic and if we are in town again, we will definitely return!</p>
|
||||||
|
<p class="testi-author-name">Cam Larocque</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-item">
|
||||||
|
<p class="testi-review-text">Authentic South Indian flavor right here in Mississauga! The biryani was fragrant and the dosa was perfectly crispy. Definitely our new favorite spot for Indian food. The service was warm and attentive throughout our visit.</p>
|
||||||
|
<p class="testi-author-name">Arun Kumar</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-item">
|
||||||
|
<p class="testi-review-text">Amazing hospitality and even better food. The Chicken Kothu is a must-try. The staff is very friendly and the atmosphere is vibrant and welcoming. Will definitely be coming back with the family!</p>
|
||||||
|
<p class="testi-author-name">Sarah Thompson</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Testimonial Slider -->
|
<!-- Prev / Next controls -->
|
||||||
<div id="testimonialCarousel" class="carousel slide testimonial-carousel" data-bs-ride="carousel">
|
<div class="testi-nav-btns mt-4">
|
||||||
<div class="carousel-inner">
|
<button class="testi-nav-btn" type="button" data-bs-target="#testiCarousel" data-bs-slide="prev">
|
||||||
<div class="carousel-item active">
|
<i class="fa fa-chevron-left"/>
|
||||||
<p class="lead text-white-50" style="line-height: 1.8; font-style: italic;">"Authentic South Indian flavor right here in Mississauga! The biryani was fragrant and the dosa was perfectly crispy. Definitely our new favorite spot for Indian food."</p>
|
</button>
|
||||||
<div class="author-info d-flex align-items-center mt-4">
|
<button class="testi-nav-btn" type="button" data-bs-target="#testiCarousel" data-bs-slide="next">
|
||||||
<div class="ms-0">
|
<i class="fa fa-chevron-right"/>
|
||||||
<h6 class="text-white fw-bold mb-0" style="font-size: 18px;">Arun Kumar</h6>
|
</button>
|
||||||
<small class="text-white-50">Local Guide</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-item">
|
|
||||||
<p class="lead text-white-50" style="line-height: 1.8; font-style: italic;">"Amazing hospitality and even better food. The Chicken Kothu is a must-try. The staff is very friendly and the atmosphere is vibrant and welcoming."</p>
|
|
||||||
<div class="author-info d-flex align-items-center mt-4">
|
|
||||||
<div class="ms-0">
|
|
||||||
<h6 class="text-white fw-bold mb-0" style="font-size: 18px;">Sarah Thompson</h6>
|
|
||||||
<small class="text-white-50">Regular Customer</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Custom Controls -->
|
|
||||||
<div class="testimonial-controls mt-5 d-flex gap-2">
|
|
||||||
<button class="btn btn-outline-warning border-2 rounded-circle" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
|
|
||||||
<i class="fa fa-arrow-left"/>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-outline-warning border-2 rounded-circle ms-2" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
|
|
||||||
<i class="fa fa-arrow-right"/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Premium Blog Section -->
|
<!-- Premium Blog Section -->
|
||||||
<section class="s_blog_premium o_colored_level pt80 pb80" data-snippet="s_blog_premium" data-name="Premium Blog">
|
<section class="s_blog_premium o_colored_level" style="background-color: #ffffff; padding: 80px 0;">
|
||||||
<t t-set="latest_blogs" t-value="website.get_recent_blogs(3)"/>
|
|
||||||
<!-- Floating Accent -->
|
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/french-fries-accent.png" class="fries-accent d-none d-lg-block" alt=""/>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="row mb-5">
|
<div class="row mb-5">
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<h6 class="d-flex align-items-center justify-content-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">
|
<p class="blog-subtitle-top">THE LATEST NEWS WHAT WE HAVE</p>
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" alt=""/>
|
<h2 class="blog-main-heading">OUR LATEST FOOD NEWS</h2>
|
||||||
OUR LATEST FOOD NEWS
|
|
||||||
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" alt=""/>
|
|
||||||
</h6>
|
|
||||||
<h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase;">Latest News & Articles</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row g-4 d-flex align-items-stretch">
|
<!-- Blog Cards Row -->
|
||||||
<t t-foreach="latest_blogs" t-as="blog">
|
<div class="row g-4">
|
||||||
<div class="col-lg-4">
|
|
||||||
<div class="blog-card">
|
<!-- Card 1 -->
|
||||||
<div class="blog-img-wrapper">
|
<div class="col-lg-4 col-md-6">
|
||||||
<img t-att-src="blog.get('image')" t-att-alt="blog.get('title')"/>
|
<div class="blog-news-card">
|
||||||
<div class="date-badge">
|
<div class="blog-news-img-wrap">
|
||||||
<span t-esc="blog.get('day')"/>
|
<img src="/dine360_theme_shivasakthi/static/src/img/blog-news-1.png" alt="The Flavors of North India" class="blog-news-img"/>
|
||||||
<span t-esc="blog.get('month')"/>
|
</div>
|
||||||
</div>
|
<div class="blog-news-body">
|
||||||
</div>
|
<h3 class="blog-news-title">THE FLAVORS OF NORTH INDIA: MORE THAN JUST CURRIES</h3>
|
||||||
<div class="blog-body">
|
<p class="blog-news-excerpt">Exploring the Bread, Tandoor, and Delights of North Indian Cuisine 'North Indian cuisine is not only about rich curries but also a vibrant array of breads, tandoor-cooked</p>
|
||||||
<span class="category-line" t-esc="'Category: ' + blog.get('category')"/>
|
<a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
|
||||||
<h4><a t-attf-href="/blog/#{blog.get('slug')}" class="text-decoration-none" style="color: inherit;" t-esc="blog.get('title')"/></h4>
|
|
||||||
<p class="blog-excerpt" t-esc="blog.get('excerpt')"/>
|
|
||||||
<a t-attf-href="/blog/#{blog.get('slug')}" class="btn-link text-decoration-none fw-bold mt-2 d-inline-block" style="color: #ffb800; font-size: 14px;">Read More</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</t>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bottom Button -->
|
|
||||||
<div class="row mt-5">
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<a href="/blog" class="know-more-btn">
|
|
||||||
Know More <span><i class="fa fa-arrow-right"></i></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="blog-news-card">
|
||||||
|
<div class="blog-news-img-wrap">
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/blog-news-2.png" alt="The Secret to Perfect North Indian Curries" class="blog-news-img"/>
|
||||||
|
</div>
|
||||||
|
<div class="blog-news-body">
|
||||||
|
<h3 class="blog-news-title">THE SECRET TO PERFECT NORTH INDIAN CURRIES</h3>
|
||||||
|
<p class="blog-news-excerpt">Unlocking the Flavors of Authentic North Indian CuisineNorth Indian curries are the heart and soul of Indian cuisine, known for their rich textures, deep flavors, and</p>
|
||||||
|
<a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="col-lg-4 col-md-6">
|
||||||
|
<div class="blog-news-card">
|
||||||
|
<div class="blog-news-img-wrap">
|
||||||
|
<img src="/dine360_theme_shivasakthi/static/src/img/blog-news-3.png" alt="The Rich History of South Indian Cuisine" class="blog-news-img"/>
|
||||||
|
</div>
|
||||||
|
<div class="blog-news-body">
|
||||||
|
<h3 class="blog-news-title">THE RICH HISTORY OF SOUTH INDIAN CUISINE</h3>
|
||||||
|
<p class="blog-news-excerpt">A Journey Through Time: The Story of South Indian Cuisine</p>
|
||||||
|
<a href="/blog" class="blog-news-readmore">READ MORE <i class="fa fa-star ms-1"/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user