laktionov-as/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавили каталог товаров, карточки и стилизацию для них

Browse Source
This commit is contained in:
isHardCoded
2025-06-08 13:05:39 +03:00
parent e0ba3a0f45
commit 9367009fdf
4 changed files with 91 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4
View File
@@ -13,6 +13,10 @@
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
body {
background-color: #ecfeff;
}
</style> </style>
</head> </head>
<body> <body>
src/App.jsx
+22 -6
View File
@@ -1,22 +1,38 @@
// изменяем импорт
import styles from './App.module.css' import styles from './App.module.css'
import SneakersImage from './assets/images/sneakers-image.jpg'
function Product() { function Product() {
return ( return (
<> <div className={styles.product}>
{/* вытаскиваем класс product из объекта styles */} <img src={SneakersImage} alt='' />
<p className={styles.product}>Товар</p> <div className={styles.content}>
</> <div className={styles.title}>
<h4>Sneakers Red & White 2025</h4>
<button>+</button>
</div>
<p className={styles.description}>NIKE</p>
<p className={styles.price}>$38.00</p>
</div>
</div>
) )
} }
function App() { function App() {
return ( return (
<> <>
<h1>Интернет-магазин</h1> <div className={styles.container}>
<ul className={styles.list}>
<li>
<Product /> <Product />
</li>
<li>
<Product /> <Product />
</li>
<li>
<Product /> <Product />
</li>
</ul>
</div>
</> </>
) )
} }
src/App.module.css
+62 -3
View File
@@ -1,4 +1,63 @@
.product { .container {
color: red; max-width: 1220px;
font-size: 14; 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;
} }
src/assets/images/sneakers-image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB