0% found this document useful (0 votes)

3 views94 pages

Doctype HTML

The document is an HTML template for a website titled 'Homegrown Flavours', featuring various sections for displaying products such as butter, cheese, frozen items, pitha, and chocolate. It includes styling for navigation elements, search functionality, and responsive design features. The layout is designed to enhance user interaction with a focus on aesthetics and usability.

Uploaded by

fathinshahadchowdhury

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

3 views94 pages

Doctype HTML

Uploaded by

fathinshahadchowdhury

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 94

<!

DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Homegrown Flavours</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/

all.min.css">

<style>

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

padding-bottom: 40px; /* Add extra space at the bottom of the page */

background-color: #f4f4f9;

.paused {

animation-play-state: paused;

/* Pause the rotation animation */

.reload-icon.paused {

animation-play-state: paused;

.refresh-container {

position: fixed;

top: -40px; /* Reduced height */

left: 0;

right: 0;

height: 40px; /* Smaller container */

display: flex;

justify-content: center;

align-items: center;

background-color: transparent; /* Removed background */

pointer-events: none; /* Ensure it doesn't block interactions */

transition: top 0.3s ease;

.refresh-loader {

width: 24px; /* Smaller size */

height: 24px; /* Smaller size */

border: 3px solid #ddd; /* Thinner border */

border-top: 3px solid #007bff; /* Thinner border */

border-radius: 50%;

animation: spin 1s linear infinite;

opacity: 0;

transition: opacity 0.3s ease;

}
@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

.content {

padding: 20px;

text-align: center;

margin-top: 60px;

.highlight {

background-color: #fff3cd;

padding: 2px 5px;

border-radius: 3px;

transition: background-color 0.3s ease;

.search-suggestions {

width: 170px;

position: absolute;

top: 45px;

right: 69px;

background-color: #fff;

box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);

border-radius: 20px;

z-index: 1000;

max-height: 196px;

overflow-y: auto;

/* Hide scrollbar for WebKit browsers */

.search-suggestions::-webkit-scrollbar {

display: none;

/* Hide scrollbar for other browsers */

.search-suggestions {

scrollbar-width: none;

-ms-overflow-style: none;

.suggestion-item {

padding: 10px;

cursor: pointer;

border-bottom: 1px solid #ddd;

.suggestion-item:first-child {

border-top-left-radius: 20px;

border-top-right-radius: 20px;

.suggestion-item:last-child {
border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

border-bottom: none;

.suggestion-item:hover {

background-color: #f0f0f0;

.suggestion-item:not(:first-child):not(:last-child):hover {

border-radius: 0;

.suggestion-item:first-child:hover {

border-radius: 20px 20px 0 0;

.suggestion-item:last-child:hover {

border-radius: 0 0 20px 20px;

/* Style for the top bar */

.top-bar {

height: 50px;

display: flex;

justify-content: space-between;
align-items: center;

background-color: #fff;

padding: 20px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Style for the icons on the left side */

.menu-icons {

display: flex;

align-items: center;

.left-icons {

display: flex;

align-items: center;

.left-icons i {

font-size: 20px;

margin-right: 10px; /* Adjust spacing between the icons */

cursor: pointer;

.right-icons {

display: flex;

align-items: center;

position: relative;

}
#searchBar.active {

display: inline-block;

width: 300px; /* Adjust this value to change the width when active */

/* Style for when search bar is focused */

#searchBar:focus {

border-color: #bdbdbdb8;

outline: none;

background-color: #ffffffeb; /* Blue background when focused */

/* Style for the search bar */

#searchBar {

width: 150px !important; /* Adjust width */

padding: 10px;

margin-left: 10px;

border: 1px solid #bdbdbdb8;

border-radius: 30px;

background-color: #ffffffeb;

transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;

font-size: 16px;

color: #000000;

display: none; /* Hidden by default */

/* Style for the arrow */

#searchArrow {

font-size: 1.2rem;
color: #333;

cursor: pointer;

margin-left: 10px;

display: none; /* Initially hidden */

/* Show the arrow when the search bar is active */

#searchBar.active + #searchArrow {

display: inline-block; /* Display the arrow beside the active search bar */

/* Style for the search icon */

.menu-icons i {

cursor: pointer;

font-size: 20px;

color: #000000;

transition: transform 0.3s ease;

margin-left: 10px; /* Add margin for spacing */

/* Hover effect for menu icons */

.menu-icons i:hover {

transform: scale(1.1);

/* Style for the right icons container */

.menu-icons.right-icons {

display: flex;

align-items: center;
position: relative;

/* Make search bar appear when active */

#searchBar.active {

display: inline-block;

width: 200px;

/* Additional styling for spacing */

.menu-icons i.fa-shopping-cart {

margin-left: 20px; /* Space between search bar and shopping cart */

.scroll-to-top {

position: fixed;

bottom: 10px;

right: 50%;

transform: translateX(50%);

width: 40px;

height: 40px;

background-color: white;

border-radius: 50%;

justify-content: center;

align-items: center;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

cursor: pointer;

opacity: 0;

visibility: hidden;

transition: opacity 0.3s ease, visibility 0s 0.3s;

.scroll-to-top.show {

opacity: 1;

visibility: visible;

transition: opacity 0.3s ease, visibility 0s;

.close-drawer {

position: fixed;

top: 50%; /* Position in the middle vertically */

left: 260px; /* Place it beside the drawer */

transform: translateY(-50%); /* Center the button vertically */

background-color: white; /* White background */

border-radius: 50%; /* Make it a circle */

width: 40px; /* Set a fixed width */

height: 40px; /* Set a fixed height */

display: flex; /* Flexbox to center the content */

justify-content: center; /* Center horizontally */

align-items: center; /* Center vertically */

border: none;

font-size: 24px;

cursor: pointer;

z-index: 1001;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: adds a shadow for better visibility */
}

.nav-drawer.active + .close-drawer {

left: 260px; /* Matches the drawer's width */

.nav-drawer + .close-drawer {

left: -100px; /* Hide when the drawer is closed */

.menu-icon {

font-size: 30px;

cursor: pointer;

position: fixed;

top: 25px;

left: 10px;

z-index: 1000;

transition: left 0.3s ease, top 0.3s ease;

}
/* Make the navigation drawer scrollable */

.nav-drawer {

width: 250px;

height: 100%;

position: fixed;

top: 0;

left: -250px; /* Initially hidden */

background-color: #fff;

box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);

overflow-y: auto; /* Allows scrolling inside */

transition: left 0.3s ease;

z-index: 999;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

/* Prevent body from scrolling when nav drawer is open */

body.no-scroll {

overflow: hidden;

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */

.nav-drawer::-webkit-scrollbar {

display: none;

/* Hide scrollbar for other browsers */

.nav-drawer {
scrollbar-width: none; /* For Firefox */

-ms-overflow-style: none; /* For Internet Explorer and Edge */

.nav-drawer.active {

left: 0;

.nav-drawer ul {

list-style-type: none;

padding: 0;

margin: 0;

.nav-drawer li {

padding: 15px;

border-bottom: 1px solid #ddd;

cursor: pointer;
font-size: 18px;

line-height: 1.5;

.nav-drawer li:hover {

background-color: #f0f0f0;

.nav-drawer .social-icons {

display: flex;

justify-content: space-around;

padding: 15px;

border-top: 1px solid #ddd;

.nav-drawer .social-icons a {

text-decoration: none;

font-size: 24px;
color: black;

.logo-img {

height: 50px; /* Adjust height as needed */

width: auto; /* Keep aspect ratio */

/* Butter Section */

.butter-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.butter-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.butter-section .description {

font-size: 1.2rem;

color: #4e4a4a;
text-align: center;

margin-bottom: 20px;

.butter-section .butter-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.butter-section .butter-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.butter-section .butter-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.butter-section .butter-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Cheese Section */
.cheese-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.cheese-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.cheese-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.cheese-section .cheese-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

}
.cheese-section .cheese-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.cheese-section .cheese-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.cheese-section .cheese-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Frozen Section */

.frozen-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.frozen-section h1 {

font-size: 2.5rem;

color: #333;
text-align: center;

.frozen-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.frozen-section .frozen-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.frozen-section .frozen-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.frozen-section .frozen-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.frozen-section .frozen-box .price {

font-weight: bold;
color: #333;

margin-top: 10px;

/* Pitha Section */

.pitha-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.pitha-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.pitha-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.pitha-section .pitha-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.pitha-section .pitha-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.pitha-section .pitha-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.pitha-section .pitha-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Chocolate Section */

.chocolate-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.chocolate-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.chocolate-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.chocolate-section .chocolate-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.chocolate-section .chocolate-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.chocolate-section .chocolate-box p {

font-size: 1rem;
color: #444;

margin-bottom: 5px;

.chocolate-section .chocolate-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Tubcake Section */

.tubcake-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.tubcake-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.tubcake-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;
}

.tubcake-section .tubcake-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.tubcake-section .tubcake-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.tubcake-section .tubcake-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.tubcake-section .tubcake-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Dessert Section */

.dessert-section {

display: none;
padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.dessert-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.dessert-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.dessert-section .dessert-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.dessert-section .dessert-box h2 {

font-size: 1.3rem;
color: #444;

margin-bottom: 5px;

.dessert-section .dessert-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.dessert-section .dessert-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Traditional Mithai Section */

.traditional-mithai-section {

display: block;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.traditional-mithai-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

}
.traditional-mithai-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.traditional-mithai-section .traditional-mithai-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.traditional-mithai-section .traditional-mithai-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.traditional-mithai-section .traditional-mithai-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.traditional-mithai-section .traditional-mithai-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;
}

/* Spices Section */

.spices-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.spices-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.spices-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.spices-section .spices-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;
padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.spices-section .spices-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.spices-section .spices-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.spices-section .spices-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

/* Baking Section */

.baking-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;
}

.baking-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.baking-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.baking-section .baking-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.baking-section .baking-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;
}

.baking-section .baking-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.baking-section .baking-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

.baking-section .baking-img {

width: 150px;

height: auto;

border-radius: 10px;

object-fit: cover;

/* Ruti/Paratha Section */

.ruti-paratha-section {

display: none;

padding: 20px;

background-color: #fff;

border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.ruti-paratha-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.ruti-paratha-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.ruti-paratha-section .ruti-paratha-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

.ruti-paratha-section .ruti-paratha-box h2 {
font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.ruti-paratha-section .ruti-paratha-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.ruti-paratha-section .ruti-paratha-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

.ruti-paratha-section .ruti-paratha-img {

width: 150px;

height: auto;

border-radius: 10px;

object-fit: cover;

/* Cake Hub Section */

.cake-hub-section {

display: none;

padding: 20px;

background-color: #fff;
border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin: 20px auto;

max-width: 800px;

.cake-hub-section h1 {

font-size: 2.5rem;

color: #333;

text-align: center;

.cake-hub-section .description {

font-size: 1.2rem;

color: #4e4a4a;

text-align: center;

margin-bottom: 20px;

.cake-hub-section .cake-box {

display: flex;

justify-content: space-between;

border: 1px solid #ddd;

border-radius: 10px;

padding: 15px;

margin-bottom: 20px;

background-color: #fafafa;

}
.cake-hub-section .cake-box h2 {

font-size: 1.3rem;

color: #444;

margin-bottom: 5px;

.cake-hub-section .cake-box p {

font-size: 1rem;

color: #444;

margin-bottom: 5px;

.cake-hub-section .cake-box .price {

font-weight: bold;

color: #333;

margin-top: 10px;

.cake-hub-section .cake-img {

width: 150px;

height: auto;

border-radius: 10px;

object-fit: cover;

/* Initially hide all sections except home */

.butter-section,
.cheese-section,

.frozen-section,

.pitha-section,

.chocolate-section,

.tubcake-section,

.dessert-section,

.traditional-mithai-section {

display: none;

/* Display home section by default */

.home-section {

display: block;

.butter-img {

width: 150px;

height: auto;

border-radius: 5px;

.button-container {

display: flex;

justify-content: center;
align-items: center;

width: 100%;

.order-button, .order-button-2 {

text-decoration: none;

position: relative;

border: none;

font-size: 14px;

font-family: inherit;

cursor: pointer;

color: #fff;

width: 9em;

height: 3em;

line-height: 2em;

text-align: center;

background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

background-size: 300%;

border-radius: 30px;

z-index: 1;

margin: 20px auto;

display: inline-block;

/* Rest of your CSS remains the same */

.order-button:hover, .order-button-2:hover {

animation: ani 8s linear infinite;

border: none;
}

.order-button:before, .order-button-2:before {

content: "";

position: absolute;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

z-index: -1;

background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

background-size: 400%;

border-radius: 35px;

transition: 1s;

.order-button:hover::before, .order-button-2:hover::before {

filter: blur(20px);

.order-button:active, .order-button-2:active {

background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

/* Style for Home Section */

.home-section {

padding: 20px;
background-color: #f4f4f9;

text-align: center;

.home-section h1 {

font-size: 2rem;

color: #333;

.home-section p {

font-size: 1rem;

color: #666;

/* Popup container */

#popup {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.5);

z-index: 1000;

justify-content: center;

align-items: center;

opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;

#popup.show {

display: flex;

opacity: 1;

visibility: visible;

/* Popup content */

#popup div {

max-width: 300px;

padding: 20px;

text-align: center;

background-color: white;

border-radius: 10px;

transform: scale(0.8);

transition: transform 0.4s ease-in-out;

#popup.show div {

transform: scale(1);

/* Button styles */

button {

padding: 10px 20px;

border-radius: 5px;

cursor: pointer;
margin-top: 10px;

border: 1px solid white;

transition: background-color 0.3s ease, transform 0.2s ease;

/* Hover effect for buttons */

button:hover {

background-color: #d9dad9;

/* Click animation for buttons */

button:active {

transform: scale(0.95);

/* Focus outline removal */

button:focus {

outline: none;

/* Close button specific styles */

button.close {

background-color: #e3e5e3;

/* Hover effect for the close button */

button.close:hover {

background-color: #d9dad9;

}
/* Copy button specific styles */

button.copy {

background-color: #e3e5e3;

/* Hover effect for the copy button */

button.copy:hover {

background-color: #d9dad9;

.payment-option {

margin-bottom: 10px;

cursor: pointer;

padding: 10px 20px;

transition: all 0.3s ease;

border-radius: 5px;

background-color: #f4f4f9;

display: inline-block;

text-align: center;

.payment-option:hover {

background-color: #e0e0e0;

padding: 10px 30px;

.payment-option:active {
background-color: #e0e0e0;

padding: 10px 30px;

.social-login-icons {

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

-webkit-box-reflect: below 5px linear-gradient(transparent, #00000055);

.social-login-icons svg {

width: 40px;

.social-icon-1,

.social-icon-1-1,

.social-icon-2,

.social-icon-2-2,

.social-icon-3,

.social-icon-3-3,

.social-icon-4,

.social-icon-4-4 {
width: 50px;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50px;

margin: 20px 0 0px 0;

.icon svg {

fill: #111;

.socialcontainer {

height: 80px;

overflow: hidden;

.social-icon-1 {

transition-duration: 0.4s;

background-color: rgb(0, 0, 0);

transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

.social-icon-1 svg,

.social-icon-2 svg,

.social-icon-3 svg,

.social-icon-4 svg {

opacity: 0;
transition-duration: 0.5s;

transition-delay: 0.2s;

.social-icon-1-1 {

transition-duration: 0.4s;

background-color: rgb(0, 0, 0, 0);

.socialcontainer:hover .social-icon-1 {

transform: translateY(-70px);

.socialcontainer:hover .social-icon-1 svg,

.socialcontainer:hover .social-icon-2 svg,

.socialcontainer:hover .social-icon-3 svg,

.socialcontainer:hover .social-icon-4 svg {

opacity: 1;

.social-icon-2 {

transition-duration: 0.4s;

transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

background: linear-gradient(

72.44deg,

#ff7a00 11.92%,

#ff0169 51.56%,

#d300c5 85.69%

);
}

.socialcontainer:hover .social-icon-2 {

transform: translateY(-70px);

.social-icon-3 {

transition-duration: 0.4s;

transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

background: #316ff6;

.socialcontainer:hover .social-icon-3 {

transform: translateY(-70px);

.social-icon-4 {

transition-duration: 0.4s;

transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

background: linear-gradient(

180deg,

rgba(129, 34, 144, 1) 0%,

rgba(77, 34, 124, 1) 91%

);

.socialcontainer:hover .social-icon-4 {

transform: translateY(-70px);

}
.amount {

margin-top: 0; /* Keeps amount close to its price */

margin-bottom: 0; /* Ensures consistent spacing */

</style>

</head>

<body>

<div class="menu-icon" onclick="toggleDrawer()">☰</div>

<div class="nav-drawer" id="drawer">

<ul>

<li onclick="showSection('butter')">Butter</li>

<li onclick="showSection('cheese')">Cheese</li>

<li onclick="showSection('frozen')">Frozen</li>

<li onclick="showSection('pitha')">Pitha</li>

<li onclick="showSection('chocolate')">Chocolate</li>

<li onclick="showSection('tubcake')">Tub Cake</li>

<li onclick="showSection('dessert')">Dessert</li>

<li onclick="showSection('traditional-mithai')">Traditional Mithai</li>

<li onclick="showSection('spices')">Spices</li>
<li onclick="showSection('baking')">Baking</li>

<li onclick="showSection('ruti-paratha')">Ruti/Paratha</li>

<li onclick="showSection('cake-hub')">Cake Hub</li>

</ul>

</div>

<button class="close-drawer" onclick="toggleDrawer()">X</button>

</div>

<div class="menu-icons left-icons">

</div>

</div>

<div class="menu-icons right-icons">

<i class="fas fa-search" onclick="toggleSearchBar()"></i>

<input type="text" id="searchBar" placeholder="Search..." oninput="searchFunction()">

<i id="searchArrow" class="fas fa-arrow-right" onclick="triggerSearch()"></i> <!-- Arrow Icon

beside search bar -->

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<i class="fas fa-shopping-cart"></i>

</a>

</div>

<div id="home-section" class="home-section">

<h1>Welcome to Homegrown Flavours</h1>

<p style="font-size: large;">Fresh, homemade meals crafted with love and care✨️

<br>Taste the comfort of home in every bite💌

</p>

<h2 style="padding-top: 10px;">Our Signature Recipes</h2>

<img src="file:///E:/71bd9015-6b33-45d6-bf13-b12a2e0a458d.jpeg" alt="Straberry Chocolate Cake"

style="width: 50%; height: auto; border-radius: 10px; margin-top: 20px;">

<p style="font-size: large; color: #2e2d2d;"> <u> Strawberry Chocolate cake</u></p>

<p style="font-size: large; color: #2e2d2d;padding-bottom:30px ;"> <u>Ferrero Mud Cake </u></p>

<hr>

<h2 style="padding-top: 30px;">🎀Thank You for Visiting us🎀</h2>

<p style="font-size: large; text-align: left;padding-left: 20px;">We're offering shipping to your

doorsteps all over 🇧🇩. We're eagerly looking forward to serve you! ✨️❣️</p>

<p style="font-size: large; text-align: left;padding-left: 20px;">

For purchase, our Inside Chittagong Delivery time is (1-3 )days and outside Chittagong(3-5) days
depending on your food cravings.🚚

</p>

<p style="font-size: large; text-align: left;padding-left: 20px;"> As we make fresh right after your
order, we hope patience from you💌

</p>

<h3 style="padding-top:30px" >EXPLORE MORE</h3>

<ul style="text-align: center; padding: 0; list-style-type: none;">

<li onclick="showSection('home')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

transition: all 0.3s ease; border-radius: 5px; background-color: #f4f4f9; display: inline-block; text-align:
center;" onmouseover="this.style.backgroundColor='#e0e0e0'; this.style.padding='10px 30px'"
onmouseout="this.style.backgroundColor='#f4f4f9'; this.style.padding='10px 20px'">

Home

</li>

<li onclick="showSection('butter')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Butter

</li>

<li onclick="showSection('cheese')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Cheese

</li>

<li onclick="showSection('frozen')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Frozen

</li>

<li onclick="showSection('pitha')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Pitha

</li>

<li onclick="showSection('chocolate')" style="margin-bottom: 10px; cursor: pointer; padding: 10px

20px; transition: all 0.3s ease; border-radius: 5px; background-color: #f4f4f9; display: inline-block; text-
align: center;" onmouseover="this.style.backgroundColor='#e0e0e0'; this.style.padding='10px 30px'"
onmouseout="this.style.backgroundColor='#f4f4f9'; this.style.padding='10px 20px'">

Chocolate

</li>

<li onclick="showSection('tubcake')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Tub Cake

</li>

<li onclick="showSection('dessert')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Dessert

</li>
<li onclick="showSection('traditional-mithai')" style="margin-bottom: 10px; cursor: pointer; padding:
10px 20px; transition: all 0.3s ease; border-radius: 5px; background-color: #f4f4f9; display: inline-block;
text-align: center;" onmouseover="this.style.backgroundColor='#e0e0e0'; this.style.padding='10px
30px'" onmouseout="this.style.backgroundColor='#f4f4f9'; this.style.padding='10px 20px'">

Traditional Mithai

</li>

<li onclick="showSection('spices')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Spices

</li>

<li onclick="showSection('baking')" style="margin-bottom: 10px; cursor: pointer; padding: 10px 20px;

Baking

</li>

<li onclick="showSection('ruti-paratha')" style="margin-bottom: 10px; cursor: pointer; padding: 10px

Ruti/Paratha

</li>

<li onclick="showSection('cake-hub')" style="margin-bottom: 10px; cursor: pointer; padding: 10px

Cake Hub

</li>

</ul>

<h3 style="padding-top:15px" >ADDRESS</h3>

<p style="font-size: large; text-align: center;padding-left: 20px;"> Ruby gate, Hillview Housing Society ,
Block - B , Panchlaish , Chittagong , Bangladesh

</p>

<h3 style="padding-top:35px" >Payment Methods</h3>

<ul style="text-align: center; padding: 0; list-style-type: none;">

<li class="payment-option">Cash on Delivery</li>

<li class="payment-option" onclick="showPopup('Bkash','01886621687')">Bkash</li>

<li class="payment-option" onclick="showPopup('Nagad', '01832200967')">Nagad</li>

</ul>

<div>

<button class="copy" onclick="copyToClipboard()">Copy Number</button>

<button class="close" onclick="closePopup()">Close</button>

</div>

<div class="icon social-icon-2-2">

<svg

fill="white"

class="svgIcon"

viewBox="0 0 448 512"

height="1.5em"

xmlns="http://www.w3.org/2000/svg"

<path

d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9
287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6
74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8
12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-
184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2
93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9
2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-
132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7
42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9
132.1s2.7 102.7-9 132.1z"

></path>

</svg>

</div>

<svg

fill="white"

class="svgIcon"

viewBox="0 0 448 512"

height="1.5em"

xmlns="http://www.w3.org/2000/svg"

<path

></path>

</svg>

</div>

</a>

</div>

<div class="icon social-icon-3-3">

<svg

viewBox="0 0 384 512"

fill="white"

height="1.6em"

xmlns="http://www.w3.org/2000/svg"

<path

d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0

29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"

></path>

</svg>

</div>

<svg

viewBox="0 0 384 512"

fill="white"

height="1.6em"

xmlns="http://www.w3.org/2000/svg"

<path

d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0

29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"

></path>

</svg>

</div>

</a>

</div>

<h1 style="padding-top: 0px; color: #f4f4f9;">fcgvhbkj</h1>

</div>

<div class="butter-section" id="butter-section">

<h1>Butter🧈</h1>

<p class="description">✨Fresh, creamy, and <b>Pure</b> homemade butters, rich in taste and quality
made with love! 🧈</p>

<h2>Unsalted Butter</h2>

<p>A smooth, creamy butter, perfect for baking or cooking.</p>

<p class="price">Price: 280 TK</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="unsalted-butter.jpg" alt="Unsalted Butter" class="butter-img">

</div>

<h2>Sweet Butter</h2>

<p>A rich and sweet butter that adds a touch of luxury to any dish.</p>

<p class="price">Price: 350 TK</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="file:///E:/accaa51f-0c7f-4ace-b2b2-0a3fcc72a82b.jpeg" alt="Sweet Butter" class="butter-

img">

</div>

<h2>Salted Butter</h2>

<p>A savory, salted butter ideal for spreading or cooking with a savory kick.</p>

<p class="price">Price: 340 TK</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="salted-butter.jpg" alt="Salted Butter" class="butter-img">

</div>

<h2>Chocolate Peanut Butter</h2>

<p>A deliciously creamy blend of chocolate and peanut butter, perfect for spreading or
snacking.</p>

<p class="price">Price: 400 TK</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="chocolate-peanut-butter.jpg" alt="Chocolate Peanut Butter" class="butter-img">

</div>

<h2>Peanut Butter</h2>

<p>A creamy, nutty peanut butter, ideal for spreading on toast or adding to recipes.</p>

<p class="price">Price: 370 TK</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="peanut-butter.jpg" alt="Peanut Butter" class="butter-img">

</div>

<p>🌿As no preservatives are used, you can store it in the freezer for up to a year.🎊

<br>🥄 Smooth, creamy, rich in flavours and easily spreadable

<br>🍞 Perfect for sandwiches, snacks, and more!

</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>
</div>

</div>

<div class="cheese-section" id="cheese-section">

<h1>Cheese🧀</h1>

<p class="description">Fresh, Creamy and stretchy Homemade cheeses, rich in taste and quality made
with hygiene 🍂🧀</p>

<h2>Sliced Cheese</h2>

<p>Comming Soon</p>

</div>

<img src="cheddar-cheese.jpg" alt="Cheddar Cheese" class="butter-img">

</div>

<h2>Mozzarella Cheese</h2>

<p>Soft, creamy, stretchy mozzarella cheese for your appetite.</p>

<p class="price">Price: 300 Tk</p>

<p class="amount">Amount: 250g</p>

</div>

<img src="mozzarella-cheese.jpg" alt="Mozzarella Cheese" class="butter-img">

</div>

<p>🧀 Freshly Hand Made With Milk 🥛

<br> 🌱 100% Natural

<br>🍴 Melt-in-your-mouth Goodness</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="frozen-section" id="frozen-section">

<h1>Frozen🥶</h1>

<p class="description">Our frozen products are freshly made, packed and ready to eat for your
convenience and taste 🧊</p>

<h2>Chicken Meatball</h2>

<p class="price">Price: 260 TK</p>

<p class="amount">Amount: 250g (25 pc) </p>

<p class="price">Price: 420 TK</p>

<p class="amount">Amount: 500g (50 pc)</p>

<p class="price">Price: 620 TK</p>

<p class="amount">Amount: 1Kg (100 pc)</p>

</div>

<img src="frozen-butter.jpg" alt="Frozen Butter" class="butter-img">

</div>
<div class="frozen-box">

<h2>Chicken Nuggets</h2>

<p class="price">Price: 290 TK</p>

<p class="amount">Amount: 250g (17 pc)</p>

<p class="price">Price: 350 TK</p>

<p class="amount">Amount: 300g </p>

<p class="price">Price: 530 TK</p>

<p class="amount">Amount: 500g </p>

<p class="price">Price: 710 TK</p>

<p class="amount">Amount: 1Kg (67 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Chicken Sausage</h2>

<p class="price">Price: 285 TK</p>

<p class="amount">Amount: 350g (10 pc)</p>

<p class="price">Price: 470 TK</p>

<p class="amount">Amount: 700g (20 pc)</p>

<p class="price">Price: 650 TK</p>

<p class="amount">Amount: 1Kg (30 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Chicken Shami Kabab</h2>

<p class="price">Price: 340 TK</p>

<p class="amount">Amount: 250g (10 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Chicken Salami</h2>

<p class="price">Price: 390 TK</p>

<p class="amount">Amount: 250g (12 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<div class="frozen-details">
<h2>French Fries</h2>

<p class="price">Price: 270/370 TK (price may vary on market value) </p>

<p class="amount">Amount: 500g </p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Fish Cheese Balls</h2>

<p class="price">Price: 370 TK</p>

<p class="amount">Amount: 250g (12 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<p class="price">Price: 360 TK</p>

<p class="amount">Amount: 250g (12 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Shrimp Puri</h2>

<p class="price">Price: 260 TK</p>

<p class="amount">Packet: 1 (8 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<p>Chicken/Vegetable/Mix.</p>

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Samosa</h2>

<p>Chicken/Vegetable/Mix.</p>

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>
<div class="frozen-box">

<h2>Onthons</h2>

<p>Chicken/Vegetable/Mix.</p>

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Shingara</h2>

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>
<div class="frozen-box">

<p class="price">Price: 200 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Spicy Cone</h2>

<p>Chicken/Vegetable/Mix.</p>

<p class="price">Price: 235 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Chicken Puli</h2>

<p class="price">Price: 235 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Narkel Puli</h2>

<p class="price">Price: 22 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<h2>Premium Narkel Puli</h2>

<p class="price">Price: 25 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="frozen-cheese.jpg" alt="Frozen Cheese" class="butter-img">

</div>

<p>❄️Store properly for longer freshness! 🎉</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>
</a>

</div>

<div class="pitha-section" id="pitha-section">

<h1>Pitha🍥</h1>

<p class="description">Delicious, fresh homemade Pithas to enjoy! 🍥</p>

<h2>Chutti Pitha</h2>

<p class="price">Price: 250 TK</p>

<p class="amount">Amount: 500g</p>

<p class="price">Price: 400 TK</p>

<p class="amount">Amount: 1Kg</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Guru Pitha</h2>

<p class="price">Price: 300 TK</p>

<p class="amount">Amount: 500g</p>

<p class="price">Price: 550 TK</p>

<p class="amount">Amount: 1Kg</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Narkel Puli (Frozen)</h2>

<p class="price">Price: 22 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Narkel Puli (Fry)</h2>

<p class="price">Price: 24 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Premium Narkel Puli</h2>

<p class="price">Price: 28 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Mishti Puli</h2>

<p class="price">Price: 20 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<h2>Chicken Puli</h2>

<p class="price">Price: 235 TK</p>

<p class="amount">Packet: 1 (13 pc)</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha" class="butter-img">

</div>

<div class="pitha-details">
<h2>Chitoi Pitha</h2>

<p class="price">Price: 16 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Narkel Chitoi Pitha</h2>

<p class="price">Price: 18 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Dudh Chitoi Pitha</h2>

<p class="price">Price: 400 TK</p>

<p class="amount">Box: 1 (10 pc)</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>
<div class="pitha-box">

<h2>Gur + Narkel + Dudh<br> Chitoi Phita</h2>

<p class="price">Price: 580 TK</p>

<p class="amount">Box: 1 (12 pc)</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Patishapta Sheets</h2>

<p class="price">Price: 200 TK</p>

<p class="amount">Amount: 20 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Narkel Patishapta</h2>

<p class="price">Price: 25 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Premium Narkel Patishapta</h2>

<p class="price">Price: 30 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Kheer Patishapta</h2>

<p class="price">Price: 35 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Premium Kheer Patishapta</h2>

<p class="price">Price: 40 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>
<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Mera Pitha/Chainne Pitha</h2>

<p class="price">Price: 20 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Mera Pitha/Chainne Pitha (gur)</h2>

<p class="price">Price: 25 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Narkel Bhapa Pitha</h2>

<p class="price">Price: 30 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>
<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Gur Bhapa Pitha</h2>

<p class="price">Price: 35 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Bini Chal'r Goijja</h2>

<p class="price">Price: 40 TK</p>

<p class="amount">Amount: 1 pc</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Ful-Jhuri Pitha/Sajer Nasta</h2>

<p class="price">Price: 280 TK</p>

<p class="amount">Packet: 1 (10 pc)</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<h2>Jhinuk Pitha</h2>

<p class="price">Price: 260 TK</p>

<p class="amount">Packet: 1 (20 pc)</p>

</div>

<img src="pitha-butter.jpg" alt="Pitha Butter" class="butter-img">

</div>

<p>🌟 Treat yourself or your loved ones with our handcrafted chocolates! 🎉</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="chocolate-section" id="chocolate-section">

<h1>Chocolate🍫</h1>

<p class="description">Coming Soon</p>

</div>
<div class="tubcake-section" id="tubcake-section">

<p class="description">Coming Soon</p>

</div>

<div class="dessert-section" id="dessert-section">

<h1>Dessert🍰</h1>

<p class="description">Delicious, sweet, and freshly made desserts for every sweet tooth! 🍰</p>

<h2>Firni</h2>

<p>Indulge in the creamy goodness of our homemade firni, a perfect blend of tradition and taste!
</p>

<p class="price">Price: 40 TK</p>

<p class="amount">Amount: 1 cup</p>

<p class="price">Price: 230 TK</p>

<p class="amount">Amount: 6 cups</p>

<p class="price">Price: 300 TK</p>

<p class="amount">Amount: 500g</p>

<p class="price">Price: 510 TK</p>

<p class="amount">Amount: 1Kg</p>

</div>

<img src="chocolate-mousse.jpg" alt="Chocolate Mousse" class="butter-img">

</div>

<p>🍭 Treat yourself to our delightful desserts, perfect for any occasion!

<br>🎉We take orders for events</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="traditional-mithai-section" id="traditional-mithai-section">

<h1>Traditional Mithai🍬</h1>

<p class="description">Authentic, sweet, and mouth-watering traditional mithai for all occasions! 🍬
</p>

<h2>Rasgulla</h2>

<p>Description about Rasgulla.</p>

<p class="price">Price: $8</p>

</div>

<img src="rasgulla.jpg" alt="Rasgulla" class="mithai-img">

</div>

<h2>Gulab Jamun</h2>

<p>Description about Gulab Jamun.</p>

<p class="price">Price: $10</p>

</div>

<img src="gulab-jamun.jpg" alt="Gulab Jamun" class="mithai-img">

</div>

<p>🍭 Savor the rich flavors of our traditional mithai, perfect for every celebration! 🎉</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="spices-section" id="spices-section">

<h1>Spices 🌶️</h1>

<p class="description">Explore our collection of authentic and aromatic spices!</p>

<h2>Turmeric</h2>

<p>Description about Turmeric.</p>

<p class="price">Price: $5</p>

</div>
<img src="turmeric.jpg" alt="Turmeric" class="spices-img">

</div>

<h2>Cumin</h2>

<p>Description about Cumin.</p>

<p class="price">Price: $6</p>

</div>

<img src="cumin.jpg" alt="Cumin" class="spices-img">

</div>

<p>🌿 Add rich flavors to your dishes with our premium spices!</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="baking-section" id="baking-section">

<h1>Baking 🍰</h1>

<p class="description">Delight in our freshly baked goods, perfect for any occasion!</p>

<h2>Cupcakes</h2>

<p>Description about Cupcakes.</p>

<p class="price">Price: $7</p>

</div>

<img src="cupcakes.jpg" alt="Cupcakes" class="baking-img">

</div>

<h2>Chocolate Cake</h2>

<p>Description about Chocolate Cake.</p>

<p class="price">Price: $12</p>

</div>

<img src="chocolate-cake.jpg" alt="Chocolate Cake" class="baking-img">

</div>

<p>🍪 Indulge in our delicious baked treats, made with love and the finest ingredients!</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="ruti-paratha-section" id="ruti-paratha-section">

<h1>Ruti/Paratha 🍞</h1>

<p class="description">Fresh, soft, and delicious Ruti/Paratha for every meal!</p>

<h2>Plain Ruti</h2>

<p>Description about Plain Ruti.</p>

<p class="price">Price: $3</p>

</div>

<img src="plain-ruti.jpg" alt="Plain Ruti" class="ruti-paratha-img">

</div>

<h2>Stuffed Paratha</h2>

<p>Description about Stuffed Paratha.</p>

<p class="price">Price: $5</p>

</div>

<img src="stuffed-paratha.jpg" alt="Stuffed Paratha" class="ruti-paratha-img">

</div>

<p>🍽️Enjoy the comforting flavors of our freshly made Ruti and Paratha, perfect for any meal!</p>

<a href="https://m.me/442231502315237?source=qr_link_share" target="_blank">

<button class="order-button">Inbox</button>

</a>

</div>

<div class="cake-hub-section" id="cake-hub-section">

<h1>Cake Hub 🎂</h1>

<p class="description">Coming Soon</p>

</div>

<div class="scroll-to-top" onclick="scrollToTop()">↑</div>

// Scroll to the top of the page when it reloads

window.onload = function () {

window.scrollTo(0, 0);

};

// Get the scroll-to-top button

var scrollToTopBtn = document.querySelector('.scroll-to-top');

// Show the button when the page is scrolled down 200px or more

window.addEventListener('scroll', function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {

scrollToTopBtn.style.display = "flex"; // Show the button

} else {

scrollToTopBtn.style.display = "none"; // Hide the button

});

// Scroll to the top when the button is clicked

function scrollToTop() {

window.scrollTo({ top: 0, behavior: 'smooth' });

// Function to toggle the drawer open and close

function toggleDrawer() {

var drawer = document.getElementById('drawer');

var menuIcon = document.querySelector('.menu-icon');

var reloadIcon = document.querySelector('.reload-icon');

drawer.classList.toggle('active');

// Check if the drawer is open

if (drawer.classList.contains('active')) {

menuIcon.style.left = '250px'; // Move the menu icon when the drawer is open

menuIcon.style.visibility = 'hidden'; // Hide the menu icon when the drawer is open

reloadIcon.classList.add('paused'); // Pause the reload animation

} else {

menuIcon.style.left = '10px'; // Reset the position of the menu icon

menuIcon.style.visibility = 'visible'; // Show the menu icon when the drawer is closed

reloadIcon.classList.remove('paused'); // Resume the reload animation

}

// Close the drawer if clicking outside of it (including the menu icon)

document.addEventListener('click', function (event) {

var drawer = document.getElementById('drawer');

var menuIcon = document.querySelector('.menu-icon');

var reloadIcon = document.querySelector('.reload-icon');

// If the click is outside the drawer and menu icon, close the drawer

if (!drawer.contains(event.target) && !menuIcon.contains(event.target) &&

drawer.classList.contains('active')) {

drawer.classList.remove('active');

menuIcon.style.left = '10px'; // Reset the position of the menu icon

menuIcon.style.visibility = 'visible'; // Show the menu icon when the drawer is closed

reloadIcon.classList.remove('paused'); // Resume the reload animation

});

// Function to show the selected section and close the drawer

function showSection(section) {

// Hide all sections

var sections = document.querySelectorAll('.butter-section, .cheese-section, .frozen-section, .pitha-

section, .chocolate-section, .tubcake-section, .dessert-section, .traditional-mithai-section, .home-
section, .spices-section, .baking-section, .ruti-paratha-section, .cake-hub-section');

sections.forEach(function (sectionElem) {

sectionElem.style.display = 'none';

});

// Show the selected section

var activeSection = document.getElementById(section + '-section');

if (activeSection) {

activeSection.style.display = 'block';

// Close the drawer and reset the menu icon

var drawer = document.getElementById('drawer');

drawer.classList.remove('active');

var menuIcon = document.querySelector('.menu-icon');

menuIcon.style.left = '10px'; // Reset position

menuIcon.style.visibility = 'visible'; // Show the menu icon again

// Scroll to the top of the page

window.scrollTo(0, 0);

// Function to toggle the search bar's visibility

function toggleSearchBar() {

var searchBar = document.getElementById("searchBar");

searchBar.classList.toggle("active"); // Add or remove the "active" class to show/hide the search bar

// Function to handle the search input (can be customized later for actual search functionality)

function searchFunction() {

var searchQuery = document.getElementById("searchBar").value;

console.log("Searching for: " + searchQuery); // Placeholder action for now, you can handle the search
logic

}
// Show the button with animation when scrolling down

window.onscroll = function () {

if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {

scrollToTopBtn.classList.add('show'); // Add class to show the button with animation

} else {

scrollToTopBtn.classList.remove('show'); // Remove class to hide the button with animation

};

function showPopup(method, number) {

var phoneNumberElement = document.getElementById("phoneNumber");

if (number) {

phoneNumberElement.innerText = method + ": " + number; // Add the method name along with
the number

} else {

phoneNumberElement.innerText = "No phone number available"; // If no number is provided

// Show the popup

document.getElementById("popup").classList.add("show");

function closePopup() {

document.getElementById("popup").classList.remove("show");

function copyToClipboard() {

var phoneNumberText = document.getElementById("phoneNumber").innerText;

var textarea = document.createElement("textarea");

textarea.value = phoneNumberText;

document.body.appendChild(textarea);

textarea.select();

document.execCommand("copy");

document.body.removeChild(textarea);

// Toggle the search bar visibility

function toggleSearchBar() {

const searchBar = document.getElementById('searchBar');

searchBar.classList.toggle('active');

if (searchBar.classList.contains('active')) {

searchBar.style.display = 'inline-block'; // Show the search bar

} else {

searchBar.style.display = 'none'; // Hide the search bar

// Function to handle search when the arrow icon or "Enter" is pressed

function triggerSearch() {

const searchQuery = document.getElementById("searchBar").value.toLowerCase().trim();

if (searchQuery) {

const allProducts = document.querySelectorAll('h2');

for (let product of allProducts) {

if (product.textContent.toLowerCase().includes(searchQuery)) {

const section = product.closest('[id$="-section"]');

if (section) {
// First hide all sections

const allSections = document.querySelectorAll('[id$="-section"]');

allSections.forEach(s => s.style.display = 'none');

// Then show only the target section

section.style.display = 'block';

// Scroll to the product

setTimeout(() => {

product.scrollIntoView({ behavior: 'smooth', block: 'center' });

product.classList.add('highlight');

}, 100);

setTimeout(() => {

product.classList.remove('highlight');

}, 2000);

break;

// Add event listener to the search bar for "Enter" key press

document.getElementById("searchBar").addEventListener("keypress", function (event) {

if (event.key === "Enter") {

event.preventDefault();

triggerSearch(); // Call triggerSearch when "Enter" is pressed

}

});

// Add this function to show search suggestions

function showSearchSuggestions(searchQuery) {

const suggestions = document.createElement('div');

suggestions.className = 'search-suggestions';

const allProducts = document.querySelectorAll('h2');

let found = false;

allProducts.forEach(product => {

if (product.textContent.toLowerCase().includes(searchQuery.toLowerCase())) {

const suggestion = document.createElement('div');

suggestion.className = 'suggestion-item';

suggestion.textContent = product.textContent;

suggestion.addEventListener('click', () => {

const section = product.closest('[id$="-section"]');

if (section) {

section.scrollIntoView({ behavior: 'smooth' });

document.getElementById('searchBar').value = product.textContent;

removeSuggestions();

});

suggestions.appendChild(suggestion);

found = true;

});
removeSuggestions(); // Remove existing suggestions

if (found && searchQuery.length > 0) {

document.getElementById('searchBar').parentNode.appendChild(suggestions);

// Add this function to remove suggestions

function removeSuggestions() {

const existing = document.querySelector('.search-suggestions');

if (existing) {

existing.remove();

// Modify your search bar input event

document.getElementById("searchBar").addEventListener("input", function () {

showSearchSuggestions(this.value);

});

// Close suggestions when clicking outside

document.addEventListener('click', function (event) {

if (!event.target.closest('.search-suggestions') && !event.target.closest('#searchBar')) {

removeSuggestions();

});

function toggleSearchBar() {

var searchBar = document.getElementById("searchBar");

var logo = document.querySelector(".logo");

searchBar.classList.toggle("active");

// Toggle logo visibility

if (searchBar.classList.contains("active")) {

logo.style.display = "none";

} else {

logo.style.display = "flex";

let startY = 0;

let currentY = 0;

let isRefreshing = false;

const refreshContainer = document.querySelector('.refresh-container');

const refreshLoader = document.querySelector('.refresh-loader');

const navDrawer = document.querySelector('.nav-drawer');

// Increased threshold from 60 to 120 pixels

const PULL_THRESHOLD = 120;

function isNavDrawerOpen() {

return navDrawer.classList.contains('active');

}
document.addEventListener('touchstart', (e) => {

if (window.scrollY === 0 && !isRefreshing && !isNavDrawerOpen()) {

startY = e.touches[0].pageY;

});

document.addEventListener('touchmove', (e) => {

if (window.scrollY === 0 && !isRefreshing && !isNavDrawerOpen()) {

currentY = e.touches[0].pageY;

if (currentY > startY) {

const pullDistance = currentY - startY;

refreshContainer.style.top = Math.min(pullDistance, PULL_THRESHOLD) + 'px';

if (pullDistance > PULL_THRESHOLD) {

refreshLoader.style.opacity = '1';

});

document.addEventListener('touchend', () => {

if (window.scrollY === 0 && !isRefreshing && !isNavDrawerOpen()) {

if (currentY - startY > PULL_THRESHOLD) {

isRefreshing = true;

refreshContainer.style.top = '0';

refreshLoader.style.opacity = '1';

setTimeout(() => {
refreshContainer.style.top = '-60px';

refreshLoader.style.opacity = '0';

isRefreshing = false;

location.reload();

}, 1000);

} else {

refreshContainer.style.top = '-60px';

refreshLoader.style.opacity = '0';

});

</script>

</body>

</html>

Chrome Club Restaurant Menu
No ratings yet
Chrome Club Restaurant Menu
15 pages
Broken Beginnings
No ratings yet
Broken Beginnings
327 pages
HEADERX
No ratings yet
HEADERX
7 pages
White Color Ki Jaha Mark Kiya Hu Uh
No ratings yet
White Color Ki Jaha Mark Kiya Hu Uh
12 pages
Css
No ratings yet
Css
10 pages
My Website's Template
No ratings yet
My Website's Template
21 pages
Style
No ratings yet
Style
25 pages
Html website1
No ratings yet
Html website1
25 pages
Restaurant_Website_Bhrigu_0068
No ratings yet
Restaurant_Website_Bhrigu_0068
6 pages
codexe
No ratings yet
codexe
20 pages
Landing
No ratings yet
Landing
9 pages
CSS Word Project
No ratings yet
CSS Word Project
39 pages
MY WEBSITE PDF
No ratings yet
MY WEBSITE PDF
48 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
5 pages
New Design
No ratings yet
New Design
11 pages
Nnno Data
No ratings yet
Nnno Data
3 pages
app code
No ratings yet
app code
34 pages
Product Atp Shop Css
No ratings yet
Product Atp Shop Css
9 pages
Nav Bar Pre Styles
No ratings yet
Nav Bar Pre Styles
4 pages
portfolio code
No ratings yet
portfolio code
66 pages
CSS
No ratings yet
CSS
15 pages
header
No ratings yet
header
5 pages
Css
No ratings yet
Css
4 pages
cssweb
No ratings yet
cssweb
16 pages
belajar html
No ratings yet
belajar html
21 pages
CSS
No ratings yet
CSS
20 pages
margin
No ratings yet
margin
28 pages
4
No ratings yet
4
16 pages
MMCEWA
No ratings yet
MMCEWA
24 pages
index.html
No ratings yet
index.html
19 pages
Youtube Clone
No ratings yet
Youtube Clone
9 pages
Ex Code Funnel Building
No ratings yet
Ex Code Funnel Building
19 pages
Untitled document
No ratings yet
Untitled document
12 pages
theme-15588302489723418
No ratings yet
theme-15588302489723418
17 pages
category css
No ratings yet
category css
6 pages
Css
No ratings yet
Css
52 pages
index.html
No ratings yet
index.html
12 pages
10-English Way To Success
75% (69)
10-English Way To Success
19 pages
C 1 D
No ratings yet
C 1 D
8 pages
Style
No ratings yet
Style
196 pages
FFFFF
No ratings yet
FFFFF
28 pages
Message
No ratings yet
Message
13 pages
header class
No ratings yet
header class
8 pages
New Text Document
No ratings yet
New Text Document
26 pages
XtraVac CM780_-_Double_Chamber_Machine_Operations_Manual_and_Spare_Parts_List
No ratings yet
XtraVac CM780_-_Double_Chamber_Machine_Operations_Manual_and_Spare_Parts_List
45 pages
Navigation Bar
No ratings yet
Navigation Bar
2 pages
intern project
No ratings yet
intern project
36 pages
Php
No ratings yet
Php
15 pages
Chương 4 Khái niệm căn bản về logic (1)
No ratings yet
Chương 4 Khái niệm căn bản về logic (1)
74 pages
Activity 13
No ratings yet
Activity 13
20 pages
Shoping App Incpired by Daraz
No ratings yet
Shoping App Incpired by Daraz
8 pages
<!DOCTYPE html>
No ratings yet
<!DOCTYPE html>
7 pages
Messenger
No ratings yet
Messenger
18 pages
code of e commerce website
No ratings yet
code of e commerce website
3 pages
Code Games صفحة الهبوط
No ratings yet
Code Games صفحة الهبوط
46 pages
Css
No ratings yet
Css
14 pages
Website Design and Development
No ratings yet
Website Design and Development
18 pages
"Open Sans" Sans-Serif #444444: Hover
No ratings yet
"Open Sans" Sans-Serif #444444: Hover
21 pages
JNA_HTML5_Explained
No ratings yet
JNA_HTML5_Explained
4 pages
Program Orientation BPM2 f'22
No ratings yet
Program Orientation BPM2 f'22
47 pages
Dribbble Clone
No ratings yet
Dribbble Clone
7 pages
Misconception 2
No ratings yet
Misconception 2
12 pages
Experiment 1
No ratings yet
Experiment 1
6 pages
i Tried to Creat Delevery Web
No ratings yet
i Tried to Creat Delevery Web
3 pages
BAHAY'
No ratings yet
BAHAY'
3 pages
Class 9th Ncert Book English Moments 2024-25
No ratings yet
Class 9th Ncert Book English Moments 2024-25
76 pages
APTIS READING REAL TESTS
No ratings yet
APTIS READING REAL TESTS
27 pages
THE PARAGRAPH 1st Year
No ratings yet
THE PARAGRAPH 1st Year
67 pages
1.html
No ratings yet
1.html
4 pages
Soal Uas Intermediate Reading Lama
No ratings yet
Soal Uas Intermediate Reading Lama
10 pages
Class Guide SFDA
No ratings yet
Class Guide SFDA
60 pages
Chapter 8 Human Population Solved Classified Past Papers
No ratings yet
Chapter 8 Human Population Solved Classified Past Papers
30 pages
Vitamin A
No ratings yet
Vitamin A
15 pages
חוברת קיץ באנגלית למסיימי ח הקבצות בג
No ratings yet
חוברת קיץ באנגלית למסיימי ח הקבצות בג
19 pages
Pri Eng 2ed tr4 End of Stage Ans Ed
100% (1)
Pri Eng 2ed tr4 End of Stage Ans Ed
4 pages
ClassSched JHS
No ratings yet
ClassSched JHS
18 pages
P4G Ilobac
No ratings yet
P4G Ilobac
10 pages
Manisha Sharma-Synopsis
No ratings yet
Manisha Sharma-Synopsis
13 pages
Compilation of Carol Ann Duffy Poems
No ratings yet
Compilation of Carol Ann Duffy Poems
13 pages
Food Packaging
No ratings yet
Food Packaging
6 pages
Donoghue (Or M'Alister) V Stevenson Is One of The
No ratings yet
Donoghue (Or M'Alister) V Stevenson Is One of The
12 pages
Coursebook - Unit 28
No ratings yet
Coursebook - Unit 28
6 pages
Past tense
No ratings yet
Past tense
4 pages
Veb List Regular &-Irregular
100% (1)
Veb List Regular &-Irregular
2 pages
Algae
No ratings yet
Algae
4 pages
Soal Ukk Bahasa Inggris Kelas 2 SD
No ratings yet
Soal Ukk Bahasa Inggris Kelas 2 SD
4 pages
Đề Ôn Thi 9-10 - 10
No ratings yet
Đề Ôn Thi 9-10 - 10
4 pages
Week 6 Acids and Bases
No ratings yet
Week 6 Acids and Bases
5 pages
Navi Mumbai-ramadan-calendar-2024-Hamariweb
No ratings yet
Navi Mumbai-ramadan-calendar-2024-Hamariweb
1 page
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.