35 lines
2.0 KiB
HTML
35 lines
2.0 KiB
HTML
<!-- web/templates/web/home.html -->
|
|
{% extends 'web/base.html' %}
|
|
{% load static %}
|
|
{% block title %}Главная{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="carousel-1" class="carousel slide" data-bs-ride="carousel" style="height: 600px;">
|
|
<div class="carousel-inner h-100">
|
|
{% for service in services %}
|
|
<div class="carousel-item {% if forloop.first %}active{% endif %} h-100">
|
|
<div class="carousel-overlay"></div>
|
|
<img class="w-100 d-block position-absolute h-100 fit-cover" src="{{ service.image.url }}" alt="{{ service.name }}" style="z-index: -1; filter: brightness(0.5);" />
|
|
<div class="container d-flex flex-column justify-content-center h-100 position-relative" style="z-index: 2;">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-4 offset-md-2">
|
|
<div style="max-width: 350px;">
|
|
<h1 class="text-uppercase fw-bold text-white">{{ service.name }}</h1>
|
|
<p class="my-3 text-white">{{ service.description }}</p>
|
|
<a class="btn btn-primary btn-lg me-2" role="button" href="{% url 'service_detail' service.pk %}">Подробнее</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div><a class="carousel-control-prev" href="#carousel-1" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carousel-1" role="button" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
|
|
<div class="carousel-indicators">
|
|
{% for service in services %}
|
|
<button class="{% if forloop.first %}active{% endif %}" type="button" data-bs-target="#carousel-1" data-bs-slide-to="{{ forloop.counter0 }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<br><br><br>
|
|
{% endblock %} |