Add files via upload

Aakibgithuber · Feb 29, 2024 · 529e546 · 529e546
1 parent 5b5428c
commit 529e546
Show file tree

Hide file tree

Showing 11 changed files with 719 additions and 0 deletions.
diff --git a/src/Components/BestRes.css b/src/Components/BestRes.css
@@ -0,0 +1,17 @@
+.buttons-grp button{
+    width: 300px;
+    padding: 13px 0;
+    background: transparent;
+    border-radius: 10px;
+    font-weight: 400;
+    border: 1.5px solid rgba(2, 6, 12, 0.1);
+}
+
+.buttons-grps button{
+    width: 49%;
+    padding: 13px 0px;
+    background: transparent;
+    border-radius: 10px;
+    font-weight: 400;
+    border: 1.5px solid rgba(2, 6, 12, 0.1);
+}
diff --git a/src/Components/BestRest.jsx b/src/Components/BestRest.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import './BestRes.css'
+
+function BestRest() {
+  return (
+    <div className='d-flex justify-content-center align-items-center mt-5 mb-5'>
+        <div style={{width:"85%"}}>
+            <h4 className='fw-bold'>Best Places to Eat Across Cities</h4>
+            <div className='buttons-grp d-flex justify-content-between'>
+                <button>Best Restaurent in Bangalore</button>
+                <button>Best Restaurent in Pune</button>
+                <button>Best Restaurent in Mumbai</button>
+                <button>Best Restaurent in Delhi</button>
+            </div>
+
+            <div className='buttons-grp d-flex justify-content-between mt-3'>
+                <button>Best Restaurent in Hyderabad</button>
+                <button>Best Restaurent in Kolkata</button>
+                <button>Best Restaurent in Chennai</button>
+                <button>Best Restaurent in Chandigarh</button>
+            </div>
+
+            <div className='buttons-grp d-flex justify-content-between mt-3'>
+                <button>Best Restaurent in Ahmadabad</button>
+                <button>Best Restaurent in Jaipur</button>
+                <button>Best Restaurent in Nagpur</button>
+                <button>Show More <i className="fa-solid fa-angle-down"></i></button>
+            </div>
+
+            <h4 style={{marginTop:"80px"}} className='fw-bold'>Best Cuisines Near Me</h4>
+
+            <div className='buttons-grp d-flex justify-content-between'>
+                <button>Chinese Restaurant Near Me</button>
+                <button>South Indian Restaurant Near Me</button>
+                <button>Indian Restaurant Near Me</button>
+                <button>Kerala Restaurant Near Me</button>
+            </div>
+
+            <div className='buttons-grp d-flex justify-content-between mt-3'>
+                <button>Korea Restaurant Near Me</button>
+                <button>North India Restaurant Near Me</button>
+                <button>Sea food Restaurant Near Me</button>
+                <button>Bengali Restaurant Near Me</button>
+            </div>
+
+            <div className='buttons-grp d-flex justify-content-between mt-3'>
+                <button>Punjabi Restaurant Near Me</button>
+                <button>Italian Restaurant Near Me</button>
+                <button>Andhra Restaurant Near Me</button>
+                <button>Show More <i className="fa-solid fa-angle-down"></i></button>
+            </div>
+
+            <h4 style={{marginTop:"80px"}} className='fw-bold'>Explore Every Restaurants Near Me</h4>
+            <div className='buttons-grps d-flex justify-content-between mt-3'>
+                <button>Explore Restaurants Near Me</button>
+                <button>Explore Top Rated Restaurants Near Me</button>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default BestRest
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import logo from '../Photos/Logo.png'
+
+function Footer() {
+  return (
+    <div className='d-flex flex-column justify-content-center align-items-center w-100'>
+       <div  style={{backgroundColor:"#f1f0f4"}} className='w-100 d-flex justify-content-center align-items-center'>
+            <div className='w-75 d-flex justify-content-center align-items-center pt-3 pb-3'>
+                <h3 style={{letterSpacing:"-.5px",fontWeight:900,color:"#41444a"}}>For better experience,download <br /> the Swiggy app now</h3>
+                <img className='img-fluid' width={'180px'} style={{height:"60px",marginLeft:"90px",marginRight:"30px"}} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto/portal/m/play_store.png" alt="" />
+                <img width={'180px'} style={{height:"60px"}} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto/portal/m/app_store.png" alt="" />
+            </div>
+       </div>
+       <div style={{backgroundColor:"#02050c"}} className='d-flex justify-content-center align-tems-center w-100'>
+            <div className='w-75 d-flex justify-content-around  pt-5 pb-5'>
+                <div>
+                    <div className='d-flex align-items-center'><img width={'30px'} src={logo} alt="Logo" />
+                    <h3 style={{color:"white"}} className='fw-bolder mt-1 ms-2'>Swiggy</h3></div>
+                    <p style={{color:"white"}}>© 2023 Bundl Technologies Pvt. Ltd</p>
+                </div>
+                <div style={{color:"#9e9e9e"}}>
+                    <h5 style={{color:"white"}}>Company</h5>
+                    <p>About</p>
+                    <p>Careers</p>
+                    <p>Team</p>
+                    <p>Swiggy One</p>
+                    <p>Swiggy Instamart</p>
+                    <p>Swiggy Genie</p>
+                </div>
+                <div style={{color:"#9e9e9e"}}>
+                    <h5 style={{color:"white"}}>Contact us</h5>
+                    <p>Help & Support</p>
+                    <p>Partner with us</p>
+                    <p>Ride with us</p>
+                    <h5 style={{color:"white"}} className='mt-5'>Legal</h5>
+                    <p>Terms & Conditions</p>
+                    <p>Cokkie Policy</p>
+                    <p>Privacy Policy</p>
+                </div>
+                <div style={{color:"#9e9e9e"}}>
+                    <h5 style={{color:"white"}}>We deliver to:</h5>
+                    <p>Bangalore</p>
+                    <p>Gurgaon</p>
+                    <p>Hyderabad</p>
+                    <p>Delhi</p>
+                    <p>Mumbai</p>
+                    <p>Pune </p>
+                    <button style={{padding:"10px",background:"transparent",color:"#9e9e9e",border:"1px solid rgba(196, 198, 202, 0.1)",borderRadius:"20px"}}>589 cities    <i className="ms-5 fa-solid fa-angle-down"></i></button>
+                </div>
+            </div>
+       </div>
+
+    </div>
+  )
+}
+
+export default Footer
diff --git a/src/Components/Navigate.css b/src/Components/Navigate.css
@@ -0,0 +1,8 @@
+#Nav-logo p:hover{
+    color: #e78838;
+    cursor: pointer;
+}
+#Nav-icons p:hover{
+    color: #e78838;
+    cursor: pointer;
+}
diff --git a/src/Components/Navigate.jsx b/src/Components/Navigate.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+import './Navigate.css'
+
+function Navigate() {
+    return (
+        <div>
+            <Row className='w-100 pt-3 shadow pb-2'>
+                <Col >
+                    <div id='Nav-logo' style={{gap:"30px"}} className='d-flex justify-content-center align-items-center'>
+                        <img width={'55px'} src="https://www.theknowhowlib.com/wp-content/uploads/2020/05/Swiggy-2.png" alt="lolll" />
+                        <p style={{fontSize:"13px"}} className='mt-3'><span className='fw-bold text-decoration-underline'>Kakkanad</span> 288R+8PX, Echamuku, Kakkanad...</p>
+                        <i style={{color:"#e78838"}} className="fa-solid fa-angle-down"></i>
+                        </div>
+                </Col>
+                <Col>
+                        <div id='Nav-icons' className='d-flex justify-content-between align-items-center w-75 mt-3'>
+                            <p><i className="fa-solid fa-magnifying-glass"> </i> Search</p>
+                            <p><i className="fa-solid fa-percent"></i> Offers <sup style={{color:"#fda502"}}>New</sup> </p>
+                            <p><i className="fa-solid fa-bowl-food"></i> Help</p>
+                            <p><i className="fa-regular fa-user"></i> Profile</p>
+                            <p><i className="fa-solid fa-cart-shopping"></i> Cart</p>
+                        </div>
+                </Col>
+            </Row>
+        </div>
+    )
+}
+
+export default Navigate
diff --git a/src/Components/OfferBanner.css b/src/Components/OfferBanner.css
@@ -0,0 +1,6 @@
+::-webkit-scrollbar{
+    display: none;
+}
+#banner-img img{
+    cursor: pointer;
+}
diff --git a/src/Components/OffersBanner.jsx b/src/Components/OffersBanner.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import './OfferBanner.css'
+import banner2 from'../Photos/Banner2.png'
+import banner1 from'../Photos/Banner1.png'
+import banner3 from'../Photos/Banner3.png'
+import banner4 from'../Photos/Banner4.png'
+
+
+function OffersBanner() {
+    return (
+        <div className=' d-flex justify-content-center align-items-center mt-5 flex-column'>
+            <div className='w-75 '>
+                <h4 className='fw-bolder'>Best offers for you</h4>
+                <div id='banner-img' className='d-flex align-items-center ' style={{overflowY:"scroll",gap:"20px"}}>
+                    <img width={'450px'} src={banner2} alt="Offer" />
+                    <img width={'450px'} src={banner1} alt="Offer" />
+                    <img width={'450px'} src={banner3} alt="Offer" />
+                    <img width={'450px'} src={banner4} alt="Offer" />
+                </div>
+            </div>
+
+            <div className='w-75 mt-5'>
+
+                <h4 className='fw-bolder'>What's on your mind Today?</h4>
+                <div className='d-flex align-items-center' style={{overflowY:"scroll",gap:"19px"}}>
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/rng/md/carousel/production/e20c602ba8ed5d8ec2204e7a7b19d9f6" alt="Pothichoru" />
+
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1675667625/PC_Creative%20refresh/Biryani_2.png" alt="Biriyani" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029845/PC_Creative%20refresh/3D_bau/banners_new/Burger.png" alt="Burger" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029856/PC_Creative%20refresh/3D_bau/banners_new/Pizza.png" alt="Pizza" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1675667626/PC_Creative%20refresh/South_Indian_4.png" alt="South Indian" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029848/PC_Creative%20refresh/3D_bau/banners_new/Chinese.png" alt="Chinease" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1675667625/PC_Creative%20refresh/North_Indian_4.png" alt="North Indian" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029859/PC_Creative%20refresh/3D_bau/banners_new/Shawarma.png" alt="Shawarma" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029858/PC_Creative%20refresh/3D_bau/banners_new/Rolls.png" alt="Rolls" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1675667630/PC_Creative%20refresh/Desserts_2.png" alt="Deserts" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029858/PC_Creative%20refresh/3D_bau/banners_new/Shakes.png" alt="Shakes" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029858/PC_Creative%20refresh/3D_bau/banners_new/Pure_Veg.png" alt="Pure Veg" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029850/PC_Creative%20refresh/3D_bau/banners_new/Dosa.png" alt="Dosa" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029845/PC_Creative%20refresh/3D_bau/banners_new/Cakes.png" alt="Cakes" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029853/PC_Creative%20refresh/3D_bau/banners_new/Paratha.png" alt="Paratha" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029854/PC_Creative%20refresh/3D_bau/banners_new/Pasta.png" alt="Pasta" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029853/PC_Creative%20refresh/3D_bau/banners_new/Kebabs.png" alt="Kebabs" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029846/PC_Creative%20refresh/3D_bau/banners_new/Idli.png" alt="Idli" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/v1674029851/PC_Creative%20refresh/3D_bau/banners_new/Ice_Creams.png" alt="Ice Creams" />
+                    <img className='img-fluid' width={'140px'} src="https://media-assets.swiggy.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_288,h_360/rng/md/carousel/production/cbb85a3c1684891105294d11f8359996" alt="Tea" />
+
+
+
+                </div>
+                <hr />
+            </div>
+        </div>
+    )
+}
+
+export default OffersBanner
diff --git a/src/Components/RestaurentChain.css b/src/Components/RestaurentChain.css
@@ -0,0 +1,30 @@
+.Hotel-Card-img{
+    width: 290px;
+    height: 190px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 20px;
+}
+.Hotel-card{
+    width: 270px;
+    height: 400px;
+    transition: transform 160ms;
+}
+.Hotel-card:hover{
+    transform: scale(.93) ;
+}
+.Hotel-color{
+    width: 290px;
+    height: 190px;
+    background: linear-gradient(0deg, rgba(2,0,36,1) 2%, rgba(9,9,121,0) 39%, rgba(0,212,255,0) 100%);    border-radius: 0px 0px 20px 20px;
+    position: relative;
+}
+.Hotel-color h4{
+    position: absolute;
+    bottom: 0;
+    left: 12px;
+    color: White;
+    font-family: 'Lexend', sans-serif;
+    letter-spacing: -2px;
+}