goods + worstka

shop/src/App.css

@@ -66,13 +66,14 @@
 
 .MainImg {
   background-image: url(./images/main.jpg);
-  background-color: rgb(58, 58, 65);
+  background-color: rgb(10, 10, 10);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
   width: 100%;
-  height: 30em;
+  min-height: 45em;
   margin-top: 50px;
+  padding-bottom: 100px;
   display: flex;
 }
 
@@ -86,6 +87,36 @@ content {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  width: 90%;
+  border-radius: 10%;
+  padding: 20px;
+}
+
+.catalog  {
+  list-style: none;
+  padding: 3%;
+}
+
+.goodsWrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.oneGood {
+  background-color: rgb(10, 10, 10);
+  display: flex;
+  flex-direction: column;
+  font-size: 15px;
+  align-items: center;
+  margin: 5px;
+  padding: 10px;
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 20%;
+}
+.oneGood h5 {
+  font-size: 16px;
 }
 
 .About {
@@ -129,10 +160,42 @@ content {
     width: 60%;
     align-items: center;
   }
+
+  .catalog {
+
+  }
+  
+
+  .catalog a {
+    font-size: 10px;
+  }
+
   .MainImg {
-    height: 15em;
+    padding-top: 100px;
+    /* height: 15em; */
+    background-position: top;
   }
+.MainImg aside {
+  width: 40%;
+}
 
+  .MainImg content {
+    width: 60%;
+  }
+  .goods {
+    padding: 0%;
+    background: none;
+  }
+  .oneGood {
+    background-color: rgb(10, 10, 10);
+    width: 100%;
+  }
+  .oneGood h5 {
+    font-size: 10px;
+  }
+  .oneGood img {
+    width: 35px;
+  }
 
   .footer {
     font-size: 8px;

shop/src/components/goods.js

@@ -10,10 +10,11 @@ import { useEffect } from 'react';
 const OneGood = ({className = "oneGood", image, name, price}) => {
     return (
       <>
-      <div>
+      <div className = {className}>
         <h5>{name}</h5>
+
+        <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
         <span>{price}грн</span>
-        <img src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
       </div>
       </>
     )
@@ -25,12 +26,12 @@ const OneGood = ({className = "oneGood", image, name, price}) => {
       console.log(goods)
       return(
           <>
-                    <h1>{id}</h1>
-          <div className = {className}>
-  
-            {/* <button onClick = {() => getData(id)}>hello</button> */}
-            {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
-          </div>
+            <div className = "goodsWrapper">
+                <h4>Товары</h4>
+                <div className = {className}>          
+                {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+                </div>
+            </div>
           </>
       )
   }