app/assets/stylesheets/conferences/_header.scss
.conferences-header {
@extend .jumbotron-fluid;
position: relative;
padding: 7rem 0;
background-size: cover;
background-color: #999;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('https://images.unsplash.com/photo-1462823985959-022de68638a2?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=844&q=80&cs=tinysrgb');
background-position: center;
&__title,
&__subtitle {
text-align: center;
color: #fff;
}
&__title-link {
color: inherit;
border-bottom: 0.15rem solid rgba(#fff, 0.9);
&:hover {
text-decoration: none;
color: inherit;
}
}
&__filter-list {
@extend .nav;
@extend .nav-inline;
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
}
&__filter {
@extend .nav-link;
color: #fff;
position: relative;
padding-bottom: 1rem;
&:hover {
color: #fff;
}
&:after {
position: absolute;
bottom: 0;
left: 50%;
content: '';
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $body-bg;
}
}
}