diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index ac1043b..c58c66d 100644 --- a/public/index.html +++ b/public/index.html @@ -11,13 +11,14 @@ manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> - + + + React App diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..a1a8f85 --- /dev/null +++ b/public/style.css @@ -0,0 +1,105 @@ +:root { + --border-radius: 0.6rem; + --text-color: #fff; +} +* { + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + text-decoration: none; + outline: none; +} + +body { + background-color: rgb(83, 83, 83); +} +html { + scroll-behavior: smooth; +} +.title { + text-align: center; + margin: 1rem 0; + color: white; + font-size: 2rem; +} +.products { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + padding: 0.5rem; +} +.product { + background-color: #2c2c2c; + display: flex; + flex-direction: column; + height: 450px; +} +.product_img { + width: 100%; + height: 15rem; +} +.product_details { + /* padding: .5rem; + line-height: 1.5rem; */ + + padding: 0.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + font-weight: 100; +} +.product_title { + padding: 0.2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + font-weight: 100; + color: aliceblue; + font-family: 'Roboto', sans-serif; +} +.product_price { + color: orange; +} +.product_rating { + color: orange; +} +.product_description { + font-size: 0.8rem; + color: white; + font-family: fantasy; + overflow: auto; + line-height: normal; + font-weight: 100; +} +.btn { + border: none; + padding: 0.2rem; + border-radius: var(--border-radius); + transition: all 0.3s; + width: 5rem; + color: rgb(195, 154, 77); +} + +.btn:hover { + background-color: orange; + color: black; +} + +.title { + text-align: center; + margin: 1rem 0; + color: white; + font-size: 2rem; +} + +@media (max-width: 768px) { + .products { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (max-width: 600px) { + .products { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } +} diff --git a/src/App.js b/src/App.js index c6e5940..41fb5f8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ +/* eslint-disable */ import React from 'react'; - import Products from './components/Products'; const products = [ @@ -83,13 +83,35 @@ const products = [ } ]; +// const App = () => { +// return ( +//
+//

BD Store

+//
+// {products.map((item, index) => { +// const { image, title, price, description, rating } = item; +// return ( +// +// ); +// })} +//
+//
+// ); +// }; +// export default App; + const App = () => { return (
-

BD Store

- +
); }; - export default App; diff --git a/src/components/Product.js b/src/components/Product.js index b497da4..5090c39 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,18 +1,19 @@ -/* eslint-disable react/prop-types */ +/* eslint-disable */ import React from 'react'; -const Product = () => { +const Product = (props) => { + const { image, title, price, description, rating, id } = props.product; return ( -
- +
+ {title}
-

product title

-

Price: $ product price

-

Rating: product rating rate/5

-

Description: product.description

+

{title}

+

Price: ${price}

+

Rating: {rating.rate}/5

+

Description:{description}

-
+ ); }; diff --git a/src/components/Products.js b/src/components/Products.js index 3da8fdd..b270c41 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -1 +1,35 @@ -/* eslint-disable react/prop-types */ +/* eslint-disable */ +import React from 'react'; +import Product from './Product'; + +// const products = (props) => { +// console.log(props.image); +// const { img, title, price, rating, desc } = props; +// return ( +//
+//
+// +//
+//

{title}

+//

Price : ${price}

+//

Rating : {rating}/5

+//

Description : {desc}

+// +//
+//
+//
+// ); +// }; +// export default products; + +const Products = (props) => { + const { products } = props; + const product = products.map((product) => ); + return ( +
+

BD Store

+
{product}
+
+ ); +}; +export default Products; diff --git a/src/index.css b/src/index.css index ee9f4f7..3eb68f4 100644 --- a/src/index.css +++ b/src/index.css @@ -16,7 +16,8 @@ html { } body { - background-color: #4c4c4c; + background-color: #5a5a5a; + width: 100%; } img { @@ -29,7 +30,6 @@ img { padding: 0.2rem; border-radius: var(--border-radius); transition: all 0.3s; - width: 5rem; color: rgb(195, 154, 77); } @@ -45,7 +45,6 @@ img { color: white; font-size: 2rem; } - .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); diff --git a/src/index.js b/src/index.js index a77cd22..bbc3086 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +/* eslint-disable */ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; @@ -5,5 +6,4 @@ import App from './App'; import './index.css'; const root = ReactDOM.createRoot(document.getElementById('root')); - root.render();