blob: 0838304c353f3bdf46737242427a909457f7c07c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/*
* This file contains styles specific to the "index" view. The corresponding
* HTML/template file is `views/index.html`.
*/
.hero {
/* We want the hero at the top to take up a big portion of the screen,
* while still showing that there's more content to be found below. */
min-height: 50vh;
/* Put children smack-dab in the center */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */
background-image:
radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%),
url(/static/hero.jpeg);
background-size: cover;
/* TODO: Put some cool image here */
background-color: purple;
color: white;
}
.hero__title {
font-size: 5rem;
margin: 1rem;
/* TODO: Use (subset) font for this very important text. */
}
.hero__subtitle {
font-size: large;
font-style: italic;
}
.achievements {
padding: 2rem 1rem;
/* Use a dark and twisted color to make this band stand out as a separate element. */
background-color: #6e1818;
/* Disperse achievements evenly horisontally */
display: flex;
justify-content: space-around;
align-items: center;
}
.achievements__item {
/* Stack the two children vertically */
display: flex;
flex-direction: column;
align-items: center;
}
.achievements__item__number {
/* Numbers should be big and attention grabbing */
font-size: 2rem;
font-style: bold;
}
.achievements__item__text {
}
|
