12 changed files with 95 additions and 46 deletions
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 5.9 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,47 @@
@@ -0,0 +1,47 @@
|
||||
// ----------------------------------------------------------------------------- |
||||
// Specific styles for the homepage |
||||
// ----------------------------------------------------------------------------- |
||||
|
||||
.homepage { |
||||
color: $white; |
||||
background-color: $primary; |
||||
background-image: |
||||
url("#{$img-path}/hand_top-left.png"), |
||||
url("#{$img-path}/hand_top-right.png"), |
||||
url("#{$img-path}/hand_bottom-right.png"), |
||||
url("#{$img-path}/hand_bottom-left.png"); |
||||
background-repeat: no-repeat; |
||||
background-position: |
||||
left 5%, |
||||
95% top, |
||||
right 95%, |
||||
left 101%; |
||||
background-size: auto 30%; |
||||
|
||||
@media (orientation: portrait) and (min-height: 540px) { |
||||
background-size: 40% auto; |
||||
} |
||||
|
||||
@media (min-width: 1024px), (min-height: 768px) { |
||||
background-size: auto; |
||||
} |
||||
} |
||||
|
||||
.homepage-header { |
||||
position: absolute; |
||||
top: 1rem; |
||||
right: 2rem; |
||||
z-index: $zindex-sticky; |
||||
} |
||||
|
||||
.homepage-content { |
||||
@include grid-cell(shrink); |
||||
max-width: 600px; |
||||
padding: 2rem; |
||||
} |
||||
|
||||
.homepage-lead { |
||||
@include media-breakpoint-up(md) { |
||||
font-size: $lead-font-size; |
||||
} |
||||
} |
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
{% extends "base.html" %} |
||||
{% load static %} |
||||
|
||||
{% block container %} |
||||
<div class="app-container align-items-center justify-content-center homepage"> |
||||
<header class="homepage-header"> |
||||
<a href="{% url "accounts:login" %}" class="text-secondary">Se connecter</a> |
||||
</header> |
||||
|
||||
<main class="homepage-content text-center"> |
||||
<img src="{% static "img/logo-home.png" %}" alt="Bénévalibre" class="img-fluid mb-2 mb-md-3"> |
||||
<p class="homepage-lead mb-md-4">Le logiciel libre qui facilite la gestion et la valorisation du bénévolat dans les associations.</p> |
||||
<a href="{% url "association:index" %}" class="btn btn-light btn-lg">Voir les associations</a> |
||||
</main> |
||||
</div> |
||||
{% endblock %} |
Loading…
Reference in new issue