cntrl + swift + p ==> code snap take beautiful screen shots
cntrl + backspace => hungry delete delete spaces
extrasmall <576
small >= 576
md >= 768
lg >= 992
xl >= 1200
xxl >= 1400
Banner Section
navicon ="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-munch-
img.png"
backgroundImage =
"https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/foodmunch-banner-
bg.png
why choose us
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-serve.png
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/fruits-img.png
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/offers-img.png
explore menu
1 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-ginger-fried-
img.png
2 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-veg-starters-
img.png
3 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-soup-img.png
4 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-grilled-seafood-
img.png
5 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-hyderabadi-
biryani-img.png
6 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-mushroom-
noodles-img.png
7 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-gluten-img.png
8 https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-coffee-bourbon-
img.png
healthy section
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/healthy-food-plate-
img.png
delivery and payment section
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/delivery-payment-
section-img.png
<div class="mt-3">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-
responsive-website/visa-card-img.png" class="payment-card-img" />
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-
responsive-website/master-card-img.png" class="payment-card-img" />
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-
responsive-website/paypal-card-img.png" class="payment-card-img" />
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-
responsive-website/american-express-img.png" class="payment-card-img" />
</div>
footer section
"https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-munch-logo-
light.png"
thanking customers section
https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/thanking-customers-
section-img.png
git config --global user.email "tamadaashokkumar4@gmail.com"
git config --global user.username "Tamadaashokkumar"
git remote remove origin
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"react-loader-spinner": "^6.1.6",
"react-router-dom": "^7.4.1"
npm install --legacy-peer-deps
<nav class="fixed-top navbar navbar-expand-lg navbar-light bg-light NavBarSection
p-3">
<div class="container">
<a class="navbar-brand" href="" id="navbarLogo">
Ashok
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">
Login <span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">
SignUp
</a>
</div>
</div>
</div>
</nav>
);
<nav
class="fixed-top navbar navbar-expand-lg navbar-light bg-light navContainer"
>
<div class="container">
<a class="navbar-brand" href="#bannerSection">
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/
food-munch-img.png"
class="navbar-image"
alt="navbarimage"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#whyChooseUsSection">
Why Choose Us? <span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#exploreMenuSection">Explore Menu</a>
<a class="nav-link" href="#deliveryAndPaymentSection"
>Delivery & Payment</a
>
<a class="nav-link" href="#FloowUsSection">Follow Us</a>
</div>
</div>
</div>
</nav>
.itemSection {
width: 100%;
display: flex;
align-items: center;
margin-top: 100px;
}
.gallery {
width: 150px;
}
.gallery img {
<div class="sc-dtBdUo gzvYBM sc-kOPcWz fFPUzA"><div class="sc-aXZVg iwOBvp sc-
kOHTFB jKfDUb"></div><div class="sc-aXZVg kCePhW sc-kOHTFB jKfDUb"> 50% OFF UPTO
₹100</div><div class="sc-aXZVg cZfNzk sc-kOHTFB jKfDUb"></div></div>
width: 100%;
}
