asauer/gruppenbildungsspiel
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Playing with buttons and nav bars

Browse Source
This commit is contained in:
Amma 2019-04-10 23:15:59 +02:00
parent 5292794178
commit a045eafe54
3 changed files with 69 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
static/main.css
View File

@ -1,4 +1,59 @@
html{
font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size:0.9em;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size: 0.9em;
}
/* Navigation bar */
nav{
background-color: #4C4C4C;
}
nav > ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav > ul >li {
display: inline-block;
padding: 14px 16px;
}
.active{
background-color: white
}
/*Buttons*/
.button{
background-color: #4CAF50;
border: none;
border-radius: 4px;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-box;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.btn-group button {
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 50%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
}
.btn-group button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}

6
templates/base.html
View File

@ -8,9 +8,9 @@
<body>
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Home</a></li>
<li><a href="{{ url_for('form') }}">Questionnaire</a></li>
<li><a href="{{ url_for('answers') }}">My Answers</a></li>
<li {% if request.path == url_for('index') %} class="active" {% endif %}><a href="{{ url_for('index') }}">Home</a></li>
<li {% if request.path == url_for('form') %} class="active" {% endif %}><a href="{{ url_for('form') }}">Questionnaire</a></li>
<li {% if request.path == url_for('answers') %} class="active" {% endif %}><a href="{{ url_for('answers') }}">My Answers</a></li>
</ul>
</nav>
{% block content %}

15
templates/index.html
View File

@ -1,10 +1,13 @@
{% extends "base.html" %}
{% block content %}
<div>
<ul>
<li><a href="{{ url_for('form') }}">Jetzt mitspielen</a></li>
<li><a href="{{ url_for('answers') }}">Hier geht's zu deinen Antworten</a></li>
<li><a href="{{ url_for('solution') }}">Lösung einreichen</a></li>
</ul>
<h1> Fooboars EET-Spiel </h1>
<h2> Wie funktioniert das Spiel? </h2>
<div> Anleitung leitet an. Oder erklärt die erklärt die Erklärung? Das ist alles gar nicht so schwer und überhaupt wollt ihr da alle mitmachen, weil es bestimmt Wildschweine gibt. Und wer will die nicht sehen?
Kein Alkohol mehr.
</div>
<div class="btn-group">
<a href="{{ url_for('form') }}"><button>Jetzt mitspielen</button></a>
<a href="{{ url_for('answers') }}"><button>Hier geht's zu deinen Antworten</button></a>
<a href="{{ url_for('solution') }}"><button>Lösung einreichen</button></a>
</div>
{% endblock %}