Welcome to Maluka Food

Okay, here is the setup for the mobile app-like onboarding page using Bootstrap 5 and Jinja2 syntax. Welcome to Maluka Food

Fresh Mutton Delivered Fast

Get the best quality mutton sourced directly from local farms, delivered to your doorstep.

Simple & Quick Ordering

Browse our selection, choose your cuts, and place your order in just a few taps.

Track Your Delivery

Know exactly when your fresh meat will arrive with real-time tracking.

Get Started

:root { --brand-maroon: #83283e; --bs-primary: var(--brand-maroon); --bs-primary-rgb: 131, 40, 62; /* Needed for Bootstrap components like buttons */ --bs-body-font-family: 'Poppins', sans-serif; } html, body { height: 100%; margin: 0; font-family: var(--bs-body-font-family); background-color: #f8f9fa; /* Light background for desktop view */ } body { display: flex; justify-content: center; align-items: center; } .mobile-app-container { width: 100%; height: 100%; max-width: 450px; /* Max width for mobile screen simulation */ max-height: 900px; /* Max height */ background-color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */ border-radius: 10px; /* Slightly rounded corners for the container */ } /* Ensure carousel takes full height of the container */ #onboardingCarousel { height: 100%; } .carousel-inner, .carousel-item { height: 100%; } .carousel-item > div { /* Using flex utilities already, ensure content is centered */ padding-bottom: 80px; /* Space for indicators */ } .onboarding-image { max-width: 80%; height: auto; border-radius: 15px; /* Rounded images */ object-fit: cover; } .carousel-indicators { bottom: 20px; /* Position indicators lower */ } .carousel-indicators [data-bs-target] { background-color: #ccc; /* Default indicator color */ width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; opacity: 0.7; transition: opacity 0.6s ease; } .carousel-indicators .active { background-color: var(--brand-maroon); /* Active indicator color */ opacity: 1; } .skip-link { position: absolute; top: 20px; right: 20px; z-index: 10; /* Above carousel content */ color: var(--brand-maroon); font-weight: 600; text-decoration: none; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.8); /* Slight background for visibility */ border-radius: 15px; font-size: 0.9rem; } .skip-link:hover { color: darken(var(--brand-maroon), 10%); text-decoration: none; } .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); font-weight: 600; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: darken(var(--brand-maroon), 10%); border-color: darken(var(--brand-maroon), 10%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover/focus */ } h2 { font-weight: 700; /* Bolder headlines */ color: #333; } p.text-muted { font-size: 0.95rem; line-height: 1.6; } /* Hide default Bootstrap carousel controls visually */ .carousel-control-prev, .carousel-control-next { display: none; /* Visually hide, still accessible */ } /* Media query for larger screens to maintain the mobile look */ @media (min-width: 451px) { .mobile-app-container { height: 80vh; /* Adjust height on desktop */ min-height: 600px; max-height: 850px; border-radius: 20px; /* More pronounced rounding on desktop */ } }