257 lines
3.3 KiB
CSS
257 lines
3.3 KiB
CSS
* {
|
|
--theme: #92FF27;
|
|
--theme-dark: #462;
|
|
}
|
|
|
|
|
|
|
|
html, body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
|
|
overflow-x: hidden;
|
|
|
|
background-color: #000;
|
|
}
|
|
body {
|
|
font-size: 0px;
|
|
font-family: "Anonymous Pro", monospace;
|
|
}
|
|
|
|
span, li::marker {
|
|
font-size: 1rem;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.banner {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
min-height: 20rem;
|
|
height: 30vh;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.banner::before {
|
|
content: '';
|
|
|
|
position: absolute;
|
|
top: -12px;
|
|
left: -12px;
|
|
|
|
width: calc(100% + 24px);
|
|
height: calc(100% + 24px);
|
|
|
|
background-color: #222;
|
|
background-image: var(--bg-url);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
filter: grayscale(30%) brightness(80%) blur(6px);
|
|
}
|
|
|
|
.banner .container {
|
|
z-index: 5;
|
|
}
|
|
|
|
.banner .container .title {
|
|
display: block;
|
|
width: calc(100% - 4rem);
|
|
padding: 2rem;
|
|
|
|
font-size: 6rem;
|
|
font-family: "Niconne", cursive;
|
|
color: #fff;
|
|
text-align: center;
|
|
color: var(--theme);
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.banner {
|
|
height: 50vh;
|
|
}
|
|
.banner .container .title {
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section {
|
|
padding: 4rem 0rem;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section .container {
|
|
width: 80%;
|
|
}
|
|
|
|
.section .heading {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
margin: 0px 0px 4rem 0px;
|
|
|
|
font-size: 3rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.section .list {
|
|
width: auto;
|
|
max-width: 100%;
|
|
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section.offers {
|
|
background-color: var(--theme-dark);
|
|
background-color: color();
|
|
}
|
|
.section.offers .list .item {
|
|
flex-basis: 16rem;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
background-color: #333;
|
|
}
|
|
.section.offers .list .item .picture {
|
|
display: block;
|
|
width: 12rem;
|
|
height: 12rem;
|
|
margin: auto;
|
|
|
|
background-color: #aaa;
|
|
object-fit: cover;
|
|
|
|
border-radius: 50%;
|
|
}
|
|
.section.offers .list .item .title {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
margin: 1rem 0px;
|
|
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
color: var(--theme);
|
|
}
|
|
.section.offers .list .item .desc li {
|
|
margin: 0px 0px 0.5rem 0px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section.opinions {
|
|
background-color: #333;
|
|
}
|
|
.section.opinions .list .item {
|
|
flex-basis: 24rem;
|
|
padding: 2rem;
|
|
border-radius: 1rem;
|
|
background-color: #666;
|
|
}
|
|
.section.opinions .list .item .name, .section.opinions .list .item .rating, .section.opinions .list .item .text {
|
|
display: block;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.section.opinions .list .item .name {
|
|
color: var(--theme);
|
|
}
|
|
.section.opinions .list .item .name, .section.opinions .list .item .rating {
|
|
margin: 0px 0px 1rem 0px;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section.footer {
|
|
background-color: #000;
|
|
}
|
|
.section.footer .list {
|
|
align-items: center;
|
|
}
|
|
.section.footer .list .item {
|
|
flex-basis: 24rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
.section.footer .list .item a {
|
|
color: inherit;
|
|
}
|
|
.section.footer .list .item > span {
|
|
margin: 0px 0px 1rem 0px;
|
|
display: block;
|
|
}
|
|
|
|
.section.footer .list .item.contact .small-heading {
|
|
display: block;
|
|
font-size: 2rem;
|
|
margin: 0px 0px 1rem 0px;
|
|
}
|
|
.section.footer .list .item.contact a, .section.footer .list .item.contact a > span {
|
|
color: var(--theme);
|
|
}
|
|
|
|
.section.footer .list .item.legal .source-code .version {
|
|
color: #aaa;
|
|
}
|