41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
{% extends 'homepage/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block site_name %}Tobacco Card{% endblock %}
|
|
|
|
{% block extra_header_block %}
|
|
<style>
|
|
.red-700 {
|
|
background-color: #841f29;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts_block %}
|
|
<script defer src="{% static 'homepage/assets/masonry/masonry.pkgd.min.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<main class="container d-flex flex-grow-1 flex-column text-white w-100">
|
|
<div class="row text-center mb-3">
|
|
<h1 class="fst-italic">Tobacco Card</h1>
|
|
</div>
|
|
|
|
<div class="w-100 row m-0" data-masonry='{"percentPosition": true }'>
|
|
{% for tobacco in tobaccos %}
|
|
<div class="col-sm-6 col-lg-4 col-sm-12 mb-4 text-center">
|
|
<div class="card {% if tobacco.in_stock %} bg-success {% else %} red-700 text-decoration-line-through {% endif %}">
|
|
<div class="card-header">
|
|
<h4 class="align-baseline">{{ tobacco.name }}</h4>
|
|
<h6 class="card-subtitle mb-2">{{ tobacco.category.name }}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">{{ tobacco.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|