Add more info to homepage #27
|
@ -26,6 +26,11 @@
|
|||
--bs-body-font-family: 'Lato', sans-serif;
|
||||
--pfl-heading-font-family: 'Aleo', serif;
|
||||
|
||||
--trade-icon: url('/static/home/info/trade.png');
|
||||
--plant-1-icon: url('/static/home/info/plant-1.png');
|
||||
--plant-2-icon: url('/static/home/info/plant-2.png');
|
||||
--frame-1-icon: url('/static/home/info/frame-1.png');
|
||||
--frame-2-icon: url('/static/home/info/frame-2.png');
|
||||
}
|
||||
|
||||
:root[data-bs-theme='dark'] {
|
||||
|
@ -48,6 +53,12 @@
|
|||
--bs-heading-color: #fff;
|
||||
--pfl-logo: url('/static/dark.png');
|
||||
--pfl-home-background: url('/static/home/home-dark.webp');
|
||||
|
||||
--trade-icon: url('/static/home/info/dark-trade.png');
|
||||
--plant-1-icon: url('/static/home/info/dark-plant-1.png');
|
||||
--plant-2-icon: url('/static/home/info/dark-plant-2.png');
|
||||
--frame-1-icon: url('/static/home/info/dark-frame-1.png');
|
||||
--frame-2-icon: url('/static/home/info/dark-frame-2.png');
|
||||
}
|
||||
|
||||
.btn-pfl {
|
||||
|
@ -120,6 +131,7 @@ a {
|
|||
background-image: var(--pfl-home-background);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.home-opaque {
|
||||
|
@ -187,4 +199,36 @@ h4,
|
|||
h5 {
|
||||
font-family: var(--pfl-heading-font-family);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.plant-1-icon {
|
||||
background-image: var(--plant-1-icon);
|
||||
}
|
||||
|
||||
.plant-2-icon {
|
||||
background-image: var(--plant-2-icon);
|
||||
}
|
||||
|
||||
.frame-1-icon {
|
||||
background-image: var(--frame-1-icon);
|
||||
}
|
||||
|
||||
.frame-2-icon {
|
||||
background-image: var(--plant-2-icon);
|
||||
}
|
||||
|
||||
.trade-icon {
|
||||
background-image: var(--trade-icon);
|
||||
}
|
BIN
pflaenzli/pflaenzli/static/home/info/dark-frame-1.png
Normal file
After Width: | Height: | Size: 140 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/dark-frame-2.png
Normal file
After Width: | Height: | Size: 129 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/dark-plant-1.png
Normal file
After Width: | Height: | Size: 96 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/dark-plant-2.png
Normal file
After Width: | Height: | Size: 84 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/dark-trade.png
Normal file
After Width: | Height: | Size: 201 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/frame-1.png
Normal file
After Width: | Height: | Size: 140 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/frame-2.png
Normal file
After Width: | Height: | Size: 129 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/hand-1.png
Normal file
After Width: | Height: | Size: 187 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/hand-2.png
Normal file
After Width: | Height: | Size: 163 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/plant-1.png
Normal file
After Width: | Height: | Size: 97 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/plant-2.png
Normal file
After Width: | Height: | Size: 84 KiB |
BIN
pflaenzli/pflaenzli/static/home/info/trade.png
Normal file
After Width: | Height: | Size: 201 KiB |
|
@ -1,10 +1,10 @@
|
|||
{% extends 'base.html' %}
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% block title %}Home{% endblock %}
|
||||
{% block meta %}
|
||||
<meta name="description"
|
||||
content="{% trans 'Pflänz.li is a platform to trade plants.' %}">
|
||||
content="{% trans "Pflänz.li is a platform to trade plants." %}">
|
||||
{% endblock %}
|
||||
{% block background %}home-background{% endblock %}
|
||||
{% block content %}
|
||||
|
@ -12,20 +12,83 @@
|
|||
<div class="container-fluid py-5 position-relative row d-flex align-items-center justify-content-center">
|
||||
<div class="home-background"></div>
|
||||
<div class="pfl-home-logo xl-align-self-center col-lg h-100 mb-3"></div>
|
||||
<div class="col-lg">
|
||||
<div class="col-lg text-center text-lg-start">
|
||||
<h1 class="display-5 fw-bold">{% trans "Welcome to Pflänz.li" %}</h1>
|
||||
<p class="fs-4">
|
||||
{% trans "This is a platform to trade plants. You can offer plants and setup a wishlist what you want to trade it for." %}
|
||||
</p>
|
||||
<hr />
|
||||
<p>{% trans "To offer your plants, please register first." %}</p>
|
||||
<a href="{% url 'list_offers' %}"
|
||||
<a href="{% url "list_offers" %}"
|
||||
class="btn btn-pfl btn-lg mb-3"
|
||||
type="button">{% trans "Show offers" %}</a>
|
||||
<a href="{% url 'register_user' %}"
|
||||
<a href="{% url "register_user" %}"
|
||||
class="btn btn-pfl-secondary btn-lg mb-3"
|
||||
type="button">{% trans "Register" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 mb-4 bg-body-tertiary rounded-3 home-opaque">
|
||||
<h2 class="h1 mx-auto text-center mb-3">{% trans 'How does Pflänz.li work?' %}</h2>
|
||||
<div class="info-container mx-auto">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6 order-md-1">
|
||||
<div class="info-icon plant-1-icon w-100"></div>
|
||||
</div>
|
||||
<div class="col-md-6 order-md-2 text-center">
|
||||
<h2>1. {% trans "Your plant" %}</h2>
|
||||
<p>
|
||||
{% trans 'You have a plant that you would like to trade for another plant? Great, that is exactly what Pflänz.li is for!' %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6 order-md-2">
|
||||
<div class="info-icon frame-1-icon w-100"></div>
|
||||
</div>
|
||||
<div class="col-md-6 order-md-1 text-center">
|
||||
<h2>2. {% trans "Offer your plant " %}</h2>
|
||||
<p>
|
||||
{% trans 'Create an offer on Pflänz.li so others can see what you offer. You can also setup your wishlist to show others what you would like to trade for.' %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6 order-md-1">
|
||||
<div class="info-icon frame-2-icon w-100"></div>
|
||||
</div>
|
||||
<div class="col-md-6 order-md-2 text-center">
|
||||
<h2>3. {% trans "Find your dream plant" %}</h2>
|
||||
<p>{% trans "Use the search functions of Pflänz.li to find a suitable plant near you." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6 order-md-2 d-flex">
|
||||
<div class="info-icon trade-icon w-100"></div>
|
||||
</div>
|
||||
<div class="col-md-6 order-md-1 text-center">
|
||||
<h2>4. {% trans "Trade" %}</h2>
|
||||
<p>
|
||||
{% trans "When you have found someone with a plant who is willing to trade, you can directly discuss the details of the trade, like when and where." %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6 order-md-1">
|
||||
<div class="info-icon plant-2-icon w-100"></div>
|
||||
</div>
|
||||
<div class="col-md-6 order-md-2 text-center">
|
||||
<h2>5. {% trans "Your new plant" %}</h2>
|
||||
<p>
|
||||
{% trans "Congratulations, you just got a new plant! Take good care of it and maybe you can use it to trade in the future." %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row d-flex justify-content-center mx-auto mt-4">
|
||||
<h3 class="text-center mb-3">{% trans "If you have other questsions, check out the FAQ!" %}</h3>
|
||||
<a class="btn btn-pfl w-25" href="{% url "faq" %}">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|