trevor/smartsoltech_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

homepage carousel is getting slides from web_services table

Browse Source
This commit is contained in:
trevor
2024-10-08 20:50:19 +09:00
parent 0e82b86e51
commit ee254ef17f
7 changed files with 50 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
smartsoltech/web/templates/web/home.html
View File

@@ -6,44 +6,30 @@
{% block content %}
<div id="carousel-1" class="carousel slide" data-bs-ride="carousel" style="height: 600px;">
<div class="carousel-inner h-100">
<div class="carousel-item active h-100"><img class="w-100 d-block position-absolute h-100 fit-cover" src="{% static 'img/1.png'%}" alt="Slide Image" style="z-index: -1;" />
<div class="container d-flex flex-column justify-content-center 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">Сайты<br />разработка сайтов</h1>
<p class="my-3">Tincidunt laoreet leo, adipiscing taciti tempor. Primis senectus sapien, risus donec ad fusce augue interdum.</p><a class="btn btn-primary btn-lg me-2" role="button" href="service/1">Подробнее</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item h-100"><img class="w-100 d-block position-absolute h-100 fit-cover" src="{% static 'img/3.png'%}" alt="Slide Image" style="z-index: -1;" />
<div class="container d-flex flex-column justify-content-center h-100">
<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">Biben dum<br />fringi dictum, augue purus</h1>
<p class="my-3">Tincidunt laoreet leo, adipiscing taciti tempor. Primis senectus sapien, risus donec ad fusce augue interdum.</p><a class="btn btn-primary btn-lg me-2" role="button" href="/service/3">Подробее</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item h-100"><img class="w-100 d-block position-absolute h-100 fit-cover" src="{% static 'img/2.png'%}" alt="Slide Image" style="z-index: -1;" />
<div class="container d-flex flex-column justify-content-center h-100">
<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">Biben dum<br />fringi dictum, augue purus</h1>
<p class="my-3">Tincidunt laoreet leo, adipiscing taciti tempor. Primis senectus sapien, risus donec ad fusce augue interdum.</p><a class="btn btn-primary btn-lg me-2" role="button" href="#">Button</a><a class="btn btn-outline-primary btn-lg" role="button" href="#">Button</a>
<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"><button class="active" type="button" data-bs-target="#carousel-1" data-bs-slide-to="0"></button><button type="button" data-bs-target="#carousel-1" data-bs-slide-to="1"></button><button type="button" data-bs-target="#carousel-1" data-bs-slide-to="2"></button></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>
{% endblock %}
<br><br><br>
{% endblock %}