diff options
Diffstat (limited to 'templates/welcome.html')
| -rw-r--r-- | templates/welcome.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/templates/welcome.html b/templates/welcome.html new file mode 100644 index 0000000..86f4ac6 --- /dev/null +++ b/templates/welcome.html @@ -0,0 +1,86 @@ +{% extends "layout.html" %} + +{% block title %} + Welcome +{% endblock %} + +{% block main %} +<section> + <h1 id="header-main">Welcome to Total Expense!</h1><br> + <h3>Your personal money saving assistant</h3><br> +</section> + +<section> + <div id="CarouselWelcome" class="carousel carousel-dark slide" data-bs-ride="carousel"> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="2" aria-label="Slide 3"></button> + <button type="button" data-bs-target="#CarouselWelcome" data-bs-slide-to="3" aria-label="Slide 4"></button> + </div> + <div class="carousel-inner"> + <div class="carousel-item active" data-bs-interval="5000"> + <img src="/static/couple_piggy.png" class="border border-secondary rounded" alt="..."> + <div class="carousel-caption d-none d-md-block"> + <h5 style="color: #910700;">Take charge of your savings with our digital financial helper!</h5> + <p style="color: #910700;" class="carousel-text">Create an account today and leave debts behind forever.</p> + </div> + </div> + <div class="carousel-item" data-bs-interval="5000"> + <img src="/static/happy_piggy.png" class="border border-secondary rounded carousel-img" alt="..."> + <div class="carousel-caption d-none d-md-block"> + <h5 style="color: #15627d;">Keep your piggy bank - and yourself - happy!</h5> + <p style="color: #15627d" class="carousel-text">Even small change can make a big change.</p> + </div> + </div> + <div class="carousel-item" data-bs-interval="5000"> + <img src="/static/piggy_categories.png" class="border border-secondary rounded carousel-img" alt="..."> + <div class="carousel-caption d-none d-md-block"> + <h5 style="color: white;">Use personalized spending categories!</h5> + <p style="color: white;" class="carousel-text">Keep detailed track of your individual spending habits.</p> + </div> + </div> + <div class="carousel-item" data-bs-interval="5000"> + <img src="/static/piggy_house.png" class="border border-secondary rounded carousel-img" alt="..."> + <div class="carousel-caption d-none d-md-block"> + <h5 style="color: #fae682;">Fulfill your dreams!</h5> + <p style="color: #fae682;" class="carousel-text">Start saving today and achieve your financial goals tomorrow.</p> + </div> + </div> + </div> + <button class="carousel-control-prev" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="visually-hidden">Previous</span> + </button> + <button class="carousel-control-next" type="button" data-bs-target="#CarouselWelcome" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> + </div> +</section> + +<section> + <div class="row align-items-start row-cols-2" style="margin-top: 60px;"> + <div class="col card border-dark mb-3" style="background-color: #d1e7dd;"> + <article id="text-welcome"> + <p style="margin-top: 10px;">Are you tired of relying on financial experts? You do not know how to finance your big dreams but you want to make a change?<br></p> + <p>Then you have come to the right place: here you can easily keep track of your spending habits and monitor your individual budget.<br></p> + <p>And a special highlight to meet your online shopping needs: we will help you to find the best deals!<br></p> + <p>This way you will never run the risk of spending more than you can afford.<br></p> + <p>Instead, you can build financial funds step by step, coming closer to fulfilling your dreams!<br></p> + <p>So what are you waiting for? Sign up today and create your account! It is <u>totally free</u>!</p> + </article> + </div> + + <div class="col card border-dark mb-3" style="background-color: #d1e7dd; margin-top: 50px;"> + <ul> + <li class="text-bullet">Create a free account!</li> + <li class="text-bullet">Set your personal budget!</li> + <li class="text-bullet">Track your every expense!</li> + <li class="text-bullet">Review your spending history in detail!</li> + <li class="text-bullet">Find the cheapest online deals!</li> + </ul> + </div> + </div> +</section> +{% endblock %} |