Add hero section with background gradient and logo to enhance user interface
This commit is contained in:
parent
3042382ae4
commit
9cb4f42d07
4 changed files with 87 additions and 44 deletions
|
@ -70,3 +70,30 @@ article.message {
|
|||
font-family: remixicon;
|
||||
content: "\eca0";
|
||||
}
|
||||
|
||||
#hero {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
circle 50vh at 4rem 50%,
|
||||
var(--pico-primary-background),
|
||||
color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 10%) 20%,
|
||||
color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 30%) 40%,
|
||||
color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
|
||||
color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
|
||||
var(--pico-background-color));
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 4rem;
|
||||
|
||||
.big-logo {
|
||||
font-size: 8rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue