Bachelorthesis_Code/frontend/src/components/HeroSection.css

84 lines
1.4 KiB
CSS
Raw Normal View History

video {
object-fit: cover;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
.hero-container {
2021-06-21 01:45:22 +00:00
background: url("../images/fingerprint_biometrics.jpg") center center/cover
no-repeat;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
object-fit: contain;
}
.hero-container > h1 {
2021-06-07 02:14:00 +00:00
color: var(--primary);
font-size: 100px;
margin-top: -100px;
}
.hero-container > p {
margin-top: 8px;
2021-06-07 03:03:18 +00:00
color: var(--secondary);
font-size: 32px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}
.hero-btns {
margin-top: 32px;
2021-06-07 02:14:00 +00:00
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.hero-btns .btn {
margin: 6px;
2021-06-07 02:14:00 +00:00
align-items: center;
}
2021-06-21 01:45:22 +00:00
.hero-btns .btn:hover {
2021-06-07 03:03:18 +00:00
background-color: var(--secondary);
color: var(--primary);
2021-06-21 01:45:22 +00:00
border: none;
2021-06-07 03:03:18 +00:00
}
2021-05-27 00:43:05 +00:00
.fa-play-circle {
margin-left: 4px;
}
@media screen and (max-width: 960px) {
.hero-container > h1 {
font-size: 70px;
margin-top: -150px;
}
}
@media screen and (max-width: 768px) {
.hero-container > h1 {
font-size: 50px;
margin-top: -100px;
}
.hero-container > p {
font-size: 30px;
}
.btn-mobile {
display: block;
text-decoration: none;
}
.btn {
width: 100%;
}
2021-06-21 01:45:22 +00:00
}