Kekkai-web/src/web/static/styles/index.css

140 lines
2.2 KiB
CSS
Raw Normal View History

2024-09-21 20:42:44 +03:00
body {
background: #4F5574;
color: white;
font: medium "Gotham Pro", sans-serif;
margin: 0;
padding: 0;
2024-09-21 20:42:44 +03:00
}
.banner {
background: rgba(0, 0, 0, 0.39);
border-radius: 3vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2%;
max-width: 95vw;
margin: .5% auto;
2024-09-21 20:42:44 +03:00
}
.banner-img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
2024-09-21 20:42:44 +03:00
}
.banner-img img {
width: 100%;
max-width: 450px;
height: auto;
2024-09-21 20:42:44 +03:00
margin: 1.5%;
}
.desc {
width: 100%;
max-width: 600px;
2024-09-21 20:42:44 +03:00
text-align: center;
margin: 1% auto;
word-wrap: break-word;
padding: 0 2%;
box-sizing: border-box;
font-size: 16px;
}
.desc-xl {
text-align: center;
display: flex;
margin: 1% auto;
word-wrap: break-word;
width: 100%;
max-width: 500px;
font-weight: bold;
padding: 10px 2%;
box-sizing: border-box;
}
.features-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
padding: 80px 20px;
max-width: 1200px;
margin: auto;
}
.features {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
max-width: 300px;
}
.features svg {
margin-bottom: 15px;
}
.text {
font-size: 22px;
font-weight: bold;
}
2024-09-22 18:22:05 +03:00
.footer-wrapper {
position: relative;
min-height: 100%;
}
footer {
flex: 0 0 auto;
width: 100%;
background: rgba(0, 0, 0, 0.39);
position: absolute;
left: 0;
bottom: 0;
}
footer p{
word-wrap: break-word;
text-align: center;
}
footer a:visited {
color: white
}
@media (min-width: 768px) {
.desc {
font-size: 20px;
}
}
@media (min-width: 1200px) {
.desc {
font-size: 24px;
}
.features-container {
flex-direction: row;
align-items: center;
gap: 200px;
}
2024-09-22 18:22:05 +03:00
.footer-wrapper {
position: relative;
min-height: 100%;
}
footer {
width: 100%;
background: rgba(0, 0, 0, 0.39);
position: absolute;
left: 0;
bottom: 0;
}
2024-09-21 20:42:44 +03:00
}