Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

banner changed #15

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

banner changed #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/assets/mob-photo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/sale.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/summer-sale.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 79 additions & 51 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="author" content="Sahib Singh" />
<meta
name="keywords"
content="Sahib Singh, reactjs, ecommerce, react ecommerce website, ecommerce website, sahibsingh.vercel.app"
/>
<!-- Primary Meta Tags -->
<title>Ecommerce Website</title>
<meta name="title" content="Ecommerce Website" />
<meta
name="description"
content="A Ecommerce Website made with React.js Framework."
/>

<meta name="theme-color" content="#000000" />
<meta name="author" content="Sahib Singh">
<meta name="keywords" content="Sahib Singh, reactjs, ecommerce, react ecommerce website, ecommerce website, sahibsingh.vercel.app">
<!-- Primary Meta Tags -->
<title>Ecommerce Website</title>
<meta name="title" content="Ecommerce Website">
<meta name="description" content="A Ecommerce Website made with React.js Framework.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://reactjs-ecommerce-app.vercel.app/"
/>
<meta property="og:title" content="Ecommerce Website" />
<meta
property="og:description"
content="A Ecommerce Website made with React.js Framework."
/>
<meta property="og:image" content="https://i.ibb.co/fQ293tm/image.png" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://reactjs-ecommerce-app.vercel.app/">
<meta property="og:title" content="Ecommerce Website">
<meta property="og:description" content="A Ecommerce Website made with React.js Framework.">
<meta property="og:image"
content="https://i.ibb.co/fQ293tm/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://reactjs-ecommerce-app.vercel.app/"
/>
<meta property="twitter:title" content="Ecommerce Website" />
<meta
property="twitter:description"
content="A Ecommerce Website made with React.js Framework."
/>
<meta
property="twitter:image"
content="https://i.ibb.co/fQ293tm/image.png"
/>
<link rel="stylesheet" href="/style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://reactjs-ecommerce-app.vercel.app/">
<meta property="twitter:title" content="Ecommerce Website">
<meta property="twitter:description" content="A Ecommerce Website made with React.js Framework.">
<meta property="twitter:image"
content="https://i.ibb.co/fQ293tm/image.png">
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>

</html>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
9 changes: 9 additions & 0 deletions public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
#hero {
height: 80vh;

background-size: cover;
background-image: url('./assets/mob-photo.png');
background-position: center;
object-fit: cover;
background-repeat: no-repeat;
}
21 changes: 2 additions & 19 deletions src/components/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,8 @@ import React from "react";
const Home = () => {
return (
<>
<div className="hero border-1 pb-3">
<div className="card bg-dark text-white border-0 mx-3">
<img
className="card-img img-fluid"
src="./assets/main.png.jpg"
alt="Card"
height={500}
/>
<div className="card-img-overlay d-flex align-items-center">
<div className="container">
<h5 className="card-title fs-1 text fw-lighter">New Season Arrivals</h5>
<p className="card-text fs-5 d-none d-sm-block ">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
<div className="opacity-100 md:opacity-0 border-1 pb-3">
<div className="card bg-dark text-white border-0 mx-3" id="hero"></div>
</div>
</>
);
Expand Down