added titles to the colums

This commit is contained in:
Hannes Klinckaert 2019-09-23 15:05:18 +02:00
parent 1d32b4f3f3
commit b30d160844
2 changed files with 82 additions and 48 deletions

View file

@ -1,6 +1,7 @@
body {
overflow: hidden;
background: #b6b6b5;
font-family: 'Roboto', sans-serif;
}
h1 {
@ -26,6 +27,18 @@ h1 {
flex-direction: column;
background: #e2e1e0;
width: 30%;
position: relative;
}
.card__title {
position: absolute;
bottom: 0;
right: 0;
color: darkslategrey;
font-size: 2.5rem;
font-weight: bolder;
padding: 10px;
text-transform: uppercase;
}
.item {
@ -41,3 +54,4 @@ h1 {
align-items: center;
justify-content: space-between;
}

View file

@ -1,55 +1,75 @@
<html>
<head>
<link
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
rel="stylesheet"
/>
<script
data-main="{{ url_for('static', filename = 'index.js') }}"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"
></script>
<link
rel="stylesheet"
href="{{ url_for('static', filename = 'index.css') }}"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
</head>
<head>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<script data-main="{{ url_for('static', filename = 'index.js') }}" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename = 'index.css') }}" />
</head>
<body>
<body>
<div class="container">
<div id="current_run" class="card">
<div class="item">
<div>
0
</div>
<div>
<button type="button">Start</button>
</div>
<div>
<i class="fas fa-question" style="color:grey"></i>
</div>
</div>
<div class="item">
<div>
1
</div>
<div>
Time: ...
</div>
<div>
<i class="fas fa-check" style="color:green"></i>
</div>
</div>
<div id="current_run" class="card">
<div class="item">
<div>
0
</div>
<div>
<button type="button">Start</button>
</div>
<div>
<i class="fas fa-question" style="color:grey"></i>
</div>
</div>
<div class="item">
<div>
1
</div>
<div>
Time: ...
</div>
<div>
<i class="fas fa-check" style="color:green"></i>
</div>
</div>
<div class="card__title">
Links
</div>
</div>
<div class="card">
<div class="item">
<div>
1
</div>
<div>
total time
</div>
<div>
max fase
</div>
</div>
<div class="card__title">
Runs
</div>
</div>
<div class="card">
<div class="item">live requests</div>
<div class="card__title">
Live Requests
</div>
<div class="card">
<div class="item">
<div>
1
</div>
<div>
total time
</div>
<div>
max fase
</div>
</div>
</div>
<div class="card">
<div class="item">live requests</div>
</div>
</div>
</div>
</body>
</body>
</html>