diff --git a/index.html b/index.html index c8c50f8..d7b6431 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,10 @@ font-family: Arial, Helvetica, sans-serif; } + + body { + background-color: #ecfeff; + } diff --git a/src/App.jsx b/src/App.jsx index a9d96e6..0c6f935 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,22 +1,38 @@ -// изменяем импорт import styles from './App.module.css' +import SneakersImage from './assets/images/sneakers-image.jpg' function Product() { return ( - <> - {/* вытаскиваем класс product из объекта styles */} -

Товар

- +
+ +
+
+

Sneakers Red & White 2025

+ +
+

NIKE

+

$38.00

+
+
) } function App() { return ( <> -

Интернет-магазин

- - - +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
) } diff --git a/src/App.module.css b/src/App.module.css index 6df1531..c1d32ba 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -1,4 +1,63 @@ -.product { - color: red; - font-size: 14; +.container { + max-width: 1220px; + margin: 0 auto; +} + +.list { + display: flex; + justify-content: space-between; + border-radius: 10px; + margin-top: 100px; /* временно */ + padding: 20px; + background-color: white; + list-style: none; +} + +.product { + display: flex; + flex-direction: column; + width: 350px; + gap: 20px; + border-radius: 10px; +} + +.content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.title { + display: flex; + justify-content: space-between; + align-items: center; + + h4 { + font-size: 18px; + } + + button { + background-color: black; + color: white; + border: 0; + border-radius: 100%; + outline: 0; + + font-size: 20px; + padding: 5px 10px; + + cursor: pointer; + } +} + +img { + border-radius: 10px; +} + +.description { + color: gray; +} + +.price { + font-weight: bold; } diff --git a/src/assets/images/sneakers-image.jpg b/src/assets/images/sneakers-image.jpg new file mode 100644 index 0000000..d49264d Binary files /dev/null and b/src/assets/images/sneakers-image.jpg differ