Skip to content

Commit

Permalink
app
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sanskriti65
Sanskriti65 committed Jan 15, 2025
1 parent db79b28 commit de4464f
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 323 deletions.
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Routes, Route } from 'react-router-dom';

import './index.css';
import Header from './components/Header';
import MainSection1 from './components/MainSection1';
Expand Down
345 changes: 22 additions & 323 deletions src/components/Collection.js
View file
Original file line number Diff line number Diff line change
@@ -1,330 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<title>Swiggy</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="icon" href="Swiggy_logo.png" />
<link rel="icon" type="image/x-icon" href="https://media-assets.swiggy.com/co-web-assets/food_icons/favicon-16x16.ico">
<body>
<header class="navbar">
<div class="navbar-container">
<!-- Left Section -->
<div class="navbar-left">
<!-- Logo -->
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Swiggy_logo.png" alt="Swiggy Logo" class="logo">

<!-- Dropdown -->
<div class="dropdown">
<span>Other <i class="fas fa-chevron-down"></i></span>
<div class="dropdown-content">
<a href="#">Location 1</a>
<a href="#">Location 2</a>
</div>
</div>
</div>

<!-- Right Section -->
<div class="navbar-right">
<a href="#" class="navbar-link">
<i class="fas fa-briefcase"></i> Swiggy Corporate
</a>
<a href="#" class="navbar-link">
<i class="fas fa-search"></i> Search
</a>
<a href="#" class="navbar-link">
<i class="fas fa-tags"></i> Offers <span class="new-badge">NEW</span>
</a>
<a href="#" class="navbar-link">
<i class="fas fa-question-circle"></i> Help
</a>
<a href="#" class="navbar-link">
<i class="fas fa-user"></i> Sign in
</a>
<a href="#" class="navbar-link cart">
<i class="fas fa-shopping-cart"></i> Cart <span class="cart-count">0</span>
</a>
</div>
</div>
</header>



<section class="section-1">
<div class="nav-down">
<div class="left-image">
<div >
<img class="image" src="./image/Veggies_new.avif" alt="">
</div>
</div>
<div class="top-text-center">
<div class="center-text-wrap">
<h1>Order food & groceries. Discover best restaurants. Swiggy it!</h1>
<div class="search-bar">
<div class="input-location">
<i class="fa fa-search" aria-hidden="true"></i>
<input type="search" value="" placeholder="Enter your delivery location">

</div>
<div class="input-menu">
<input type="search" name="" id="" placeholder="Search for restaurant, item or more">
</div>
</div>
</div>
</div>
<div class="right-image">
<img class="img" src="./image/Sushi_replace.avif" alt="">
</div>
</div>


<div class="menu-boxes">
<div class="boxes">
<div class="specific">
<a href=""> <img src="./image/delivery.avif" alt=""></a>

</div>
<div class="specific">
<a href="#"><img src="./image/instamart.avif" alt=""></a>

</div>
<div class="specific">
<a href="#"><img src="./image/dineout.avif" alt=""></a>

</div>
<div class="specific">
<a href="#"><img src="./image/genie.avif" alt=""></a>

</div>
</div>

</div>
</section>
<br>
<section class="collections">
<h3>Collections</h3>
<p>Explore curated list of top restaurents, cafes, bars and much more.</p>
<div class="collection-cards">
<div class="card">
<img src="./image/trendyCafe.jpg" alt="Trending Spots">
<div class="card-content">
import React from 'react';

function Collections() {
return (
<section className="collections">
<h3>Collections</h3>
<p>Explore curated list of top restaurants, cafes, bars, and much more.</p>
<div className="collection-cards">
<div className="card">
<img src="./image/trendyCafe.jpg" alt="Trending Spots" />
<div className="card-content">
<h3>Trending Spots</h3>
<p>Discover the most popular places around you.</p>
</div>
</div>
</div>
<div class="card">
<img src="./image/roofTop.jpg" alt="Best Rooftop Restaurants">
<div class="card-content">
<div className="card">
<img src="./image/roofTop.jpg" alt="Best Rooftop Restaurants" />
<div className="card-content">
<h3>Best Rooftop Restaurants</h3>
<p>Enjoy dining with a view at these top rooftop restaurants.</p>
</div>
</div>
</div>
<div class="card">
<img src="./image/newelyOpen.jpg" alt="Newly Opened Places">
<div class="card-content">
<h3>Newly Opened Places</h3>
<p>Check out the latest additions to the food scene.</p>
</div>
</div>
<div class="card">
<img src="./image/restaurents.jpg" alt="Insta Worthy Places">
<div class="card-content">
<h3>Insta Worthy Places</h3>
<p>Find the most photogenic spots for your Instagram feed.</p>
</div>
</div>
</div>
</section>
<section class="section-2">
<div class="container">
<div class="dishes">
<div class="dishes-wrap">
<h1>Order our best food options</h1>
</div>
<div class="menu-dishes">

<div >
<a href="">
<img src="./image/Burger.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Chinese.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Ice Cream.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Momo.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/North Indian.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Pastry.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Pav Bhaji.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Pizza.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Pure Veg.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Rolls.avif" alt="">
</a>
</div>
</div>
<div class="menu-dishes">
<div>
<a href="">
<img src="./image/Biryani.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Gulab Jamun.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Dosa.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Kebab.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Paratha.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Salad.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Chinese.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Pav Bhaji.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Shawarma.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/Cake.avif" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</section>




<section class="section-3">
<div class="container">
<div class="instamart">
<div class="instamart-wrap">
<h1>Shop groceries on Instamart</h1>
</div>
<div class="menu-instamart">
<div >
<a href="">
<img src="./image/0a688af1-1bb4-4a55-8128-31fc79cc9ad0_6d0abb9a-daff-4fbe-a1c9-2dddb6ae6717.avif" alt="">
<p class="instamart-text">hext</p>
</a>
</div>
<div>
<a href="">
<img src="./image/frui2.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit10.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/frui5.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/frui9.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit3.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit4.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit6.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit7.avif" alt="">
</a>
</div>
<div>
<a href="">
<img src="./image/fruit8.avif" alt="">
</a>
</div>
</div>
</section>


<section class="section-5">
<img src="./image/App_download_banner.avif" alt="">
</section>
<footer>
{/* Add more cards as required */}
</div>
</section>
);
}

</footer>
<script src="script.js"></script>
</body>
</html>
export default Collections;

0 comments on commit de4464f

Please sign in to comment.