Arman azarnik 39400988

src/Routes.js

@@ -1,12 +1,11 @@
 import { BrowserRouter as Router , Switch , Route } from 'react-router-dom'
+import ArmanAzarnik from './views/39400988/index'
 
 export default function Routes() {
     return (
         <Router>
             <Switch>
-
-
-
+                <Route path="/39400988/" component={ArmanAzarnik}/>
             </Switch>
         </Router>
     )

src/views/39400988/components/productCard/ProductCard.jsx

@@ -0,0 +1,7 @@
+export default function ProductCard(){
+return(
+    <div className="product-card">
+
+    </div>
+)
+}

src/views/39400988/css/header.css

@@ -0,0 +1,47 @@
+header {
+    width: 100%;
+    color: aliceblue;
+    line-height:66px ;
+    background-color: blue;
+}
+
+header .container{
+    width: 90%;
+    display: flex;
+    margin: 0 auto;
+    align-items: center;
+    max-width: 900px;
+    justify-content: space-between;
+}
+
+header .container h3{
+    font-weight: normal;
+}
+.cart:hover{
+    background-color: red;
+}
+
+.cart h3{
+    font-size: 14px;
+}
+
+.cart h3 span {
+    font-size: 16px;
+    margin-right: 8px;
+}
+.cart-content {
+    left:0;
+    width: 90%;
+    position: absolute;
+    padding: 16px;
+    list-style: none;
+    max-width: 260px;
+    min-height: 300px;
+    background-color: rgb(250, 250, 250);
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 7px 10px ;
+}
+
+.cart:hover >.cart-content {
+    display: block;
+}

src/views/39400988/css/main.css

@@ -0,0 +1,14 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    direction: rtl;
+    font-family: 'Courier New', Courier, monospace;
+
+}
+
+@import './header.css';
+@import './product-card.css';

src/views/39400988/css/product-card.css

@@ -0,0 +1,18 @@
+.products{
+    display: flex;
+    margin-top: 16px;
+    width: 100%;
+    padding: 0 16px;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.product-card{
+    border-radius: 8px;
+    background-color: aqua;
+    width:90%;
+    margin: 8px;
+    max-width: 240px;
+    padding: 16px;
+}

src/views/39400988/index.jsx

@@ -0,0 +1,23 @@
+import './css/main.css'
+import Header from './layouts/Header'
+import ProductCard from './components/productCard/ProductCard'
+export default function Home (){
+    return(
+        <div>
+            <Header count={3} />
+            <div className="products">
+            <ProductCard data=""/>
+            </div>
+            <div className="products">
+            <ProductCard data=""/>
+            </div>
+            <div className="products">
+            <ProductCard data=""/>
+            </div>
+            <div className="products">
+            <ProductCard data=""/>
+            </div>
+
+        </div>
+    )
+}

src/views/39400988/layouts/Header.jsx

@@ -0,0 +1,12 @@
+export default function Header (){
+    return (
+        <header>
+            <div className="container">
+                <h3>آرمان</h3>
+                <div className="cart">
+                    <h3>سبد خرید</h3>
+                </div>
+            </div>
+        </header>
+    )
+}