fabasoad/business-card

View on GitHub
src/styles/components/_components.header.scss

Summary

Maintainability
Test Coverage
.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;
    }
}