{% extends "navfoot.html" %}
{% load static %}
{% block content %}


<div class="container mt-5 text-center">
  <div class="row d-flex flex-wrap justify-content-center">
    <div class="col-sm-4">
      <p class="m-2">DÉTÉCTION &amp; PROTECTION INCENDIE</p>
      <div class="card mb-2">
        <img src="{% static 'images/SSI.jpg' %}" class="card-img-top" alt="Foggy Forest">
        <div class="card-body">
          <a href="{% url 'category_detail' category_name='DÉTÉCTION & PROTECTION INCENDIE'  %}" class="btn btn-outline-light">Voir les produits</a>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <p class="m-2">PORTES INDUSTRIELLES</p>
      <div class="card mb-2">
        <img src="{% static 'images/porte va et vient.jpg' %}" class="card-img-top" alt="Lake">
        <div class="card-body">
          <a href="{% url 'category_detail' category_name='PORTES INDUSTRIELLES'  %}" class="btn btn-outline-light">Voir les produits</a>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <p class="m-2">PORTAILS INDUSTRIELS</p>
      <div class="card mb-2">
        <img src="{% static 'images/Automatisme pour portail.png' %}" class="card-img-top" alt="Mountain">
        <div class="card-body">
          <a href="{% url 'category_detail' category_name='PORTAILS INDUSTRIELS'  %}" class="btn btn-outline-light">Voir les produits</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p class="m-2">TOURNIQUETS ET BARRIÉRES D’ACCÉS</p>
      <div class="card mb-2">
        <img src="{% static 'images/Tourniquet Controle d\'Acces.jpg' %}" class="card-img-top" alt="Sunset">
        <div class="card-body">
          <a href="{% url 'category_detail' category_name='TOURNIQUETS ET BARRIÉRES D’ACCÉS'  %}" class="btn btn-outline-light">Voir les produits</a>
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <p class="m-2">BARRIÉRES DE PROTECTION</p>
      <div class="card mb-2">
        <img src="{% static 'images/bornes portiques securite.jpeg' %}" class="card-img-top" alt="Sunset">
        <div class="card-body">   
          <a href="{% url 'category_detail' category_name='BARRIÉRES DE PROTECTION'  %}" class="btn btn-outline-light">Voir les produits</a>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}