Where can I find the HTML catalog template?

Question

css

We need a simple catalog for 5 products with product pages.
All that I found with a bunch of pages, but I basically need 1 main one and from it, through the goods, go to the page of the product itself. Does anyone have a layout or at least code examples?

Answer 1

Specify the language used, as the web is not only PHP, but also python, ruby, js, java and others.
If you only need html code, then there is nothing particularly complicated in it. For example, a product card might look like this.

<div class="preview">
  <div class="preview__image">
    <a href="#">
      <img src="" alt="">
    </a>
  </div>
  <div class="preview__title">
    <a href="#">item name</a>
  </div>
  <ul class="preview__price">
    <li class="preview__price-new">
      1700
    </li>
    <li class="preview__price-old">
      2300
    </li>
  </ul>
  <a href="#" class="preview__bay">Купить</a>
</div>

And the product page

<div class="product">
  <div class="product__image"> // слайдер с картинками, или изображение или еще что
    <img src="" alt="">
  </div>
  <div class="product__info">
    <div class="product__title">
      Name item
    </div>
    <div class="product__description">
       velit esse cillum dolore eu fugiat nulla pariatur. 
    </div>
    <div class="product__property">
      <h3>Состав</h3>
      <p>Хлопок 20%, Полиэстр 80%</p>
    </div>
    <div class="product__property">
      <h3>Количество в упаковке</h3>
      <p>30</p>
    </div>
    <div class="product__menu">
      <input type="text" name="" value="">
      <button type="button" name="купить"></button>
    </div>
  </div>
</div>

of course, in addition to this, there is also a header, footer and other necessary blocks.
On the server, all this is implemented simply. A list of products is taken from the database, and when the user requests, the generated page is given to him (exactly how it depends on the language and framework used). That is, with the help of a cycle through the list of goods, a preview code is generated for each iteration, and the product data in a specific iteration is inserted in the right places.