src/styles/components/_components.header.scss
.header {
position: relative;
height: 100vh;
background-image: url('../assets/images/logo.jpg');
background-size: cover;
background-repeat: no-repeat;
text-align: center;
.header__text {
position: relative;
padding: 1rem;
top: 20%;
background-color: rgba(255, 255, 255, 0.4);
color: $dark-grey;
.header__text-subtitle {
font-weight: 500;
font-size: 1.2rem;
}
p {
font-size: smaller;
}
@media (min-height: 568px) {
top: 50%;
}
@media (min-width: $small-desktop-breakpoint) {
top: 35%;
position: absolute;
margin-left: 2rem;
}
@media (min-width: 830px) {
margin-left: 5rem;
}
}
a {
background: rgba(255, 255, 255, 0);
}
.btn-primary {
color: $dark-grey;
border-color: $dark-grey;
}
}
.btn-primary {
color: #76818d;
background-color: transparent;
border-color: #76818d;
margin: 0 10px;
font-size: 16px;
&:hover {
color: #eee;
background-color: $blue;
border-color: $blue;
}
&:focus {
color: #eee;
background-color: $blue;
border-color: $blue;
}
&:active {
color: #eee;
background-color: $blue;
border-color: $blue;
}
}