Orientation and Display order

Flex-wrap

Report a typo

Add just enough product cards to make them go beyond the borders of the container. Then make them move to the next line.

Keep the classnames consistent. The next item, for example, should have the class="product product3" attribute.

You may copy the code sample below:

<div class="product product1">
  <img src="https://i.ibb.co/GVwHH3C/placeholder.jpg">
  <p class="name">Name of the product 1</p>
  <p>Ordered 124 times</p>
  <p><strong>Price: 100$</strong></p>
</div>

Write HTML and CSS code

<!DOCTYPE html>

<head>

</head>

<body>

<p class="name">Name of the product 1</p>

<p>Ordered 124 times</p>

<p><strong>Price: 100$</strong></p>

</div>

<p class="name">Name of the product 2</p>

<p>Ordered 1321 times</p>

<p><strong>Price: 100$</strong></p>

</div>

</body>

</html>

Completed 0 of 2

Added just enough products

Products moved to the next line

___

Create a free account to access the full topic