{% extends "base_generic.html" %}

{% block title %}<title>Главная страница</title>{% endblock %}



{% block content %}
<style>
    .mainContent{
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .title {
        margin-bottom: 40px;
    }
    .desc {
        width: 50vw;
    }
    .mainProducts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .mainProduct {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px 30px;
        gap: 15px;
        box-shadow: #dadada 3px 3px 3px ;
    }

    .img {
        width: 350px;
    }
</style>

    <div class="mainContent">
        <h1 class="title">Главная страница</h1>
        <h3>Общее описание наших товаров</h3>
        <p class="desc">Банальные, но неопровержимые выводы, а также базовые сценарии поведения пользователей, которые представляют
            собой яркий пример континентально-европейского типа политической культуры, будут превращены в посмешище,
            хотя само их существование приносит несомненную пользу обществу. Лишь многие известные личности объединены
            в целые кластеры себе подобных. Также как укрепление и развитие внутренней структуры в значительной степени
            обусловливает важность дальнейших направлений развития.

        <div class="mainProducts">
            {% for product in products %}
            <div class="mainProduct">
                <p><strong>{{product.name}}</strong></p>
                <p>{{product.desc}}</p>
                <p><img class="img" src="/media/{{ product.photo }}"></p>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}