Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <header class='header'>
- <div class='header__container'>
- <div class='header__soshul-media-bar'>
- <i class="fab fa-facebook-square header__soshul-media-bar--icon"></i>
- <i class="fab fa-twitter-square header__soshul-media-bar--icon"></i>
- <i class="fab fa-youtube header__soshul-media-bar--icon"></i>
- <i class="fab fa-instagram soshul header__soshul-media-bar--icon"></i>
- <i class="fab fa-pinterest-square header__soshul-media-bar--icon"></i>
- </div>
- <nav class='header__navLeft'>
- <ul class='header__navLeft--list header__nav'>
- <li class='header__navLeft--list--item'><a href='#' >Home</a></li>
- <li class='header__navLeft--list--item'><a href='#' >Featured</a></li>
- <li class='header__navLeft--list--item'><a href='#' >Sports</a> </li>
- </ul>
- </nav>
- <h1 class='header__logo'><a href='/'>Notyble</a></h1>
- <nav class='header__navRight'>
- <ul class='header__navRight--list header__nav'>
- <li class='header__navRight--list--item'><a href='#' >Fitness</a></li>
- <li class='header__navRight--list--item'><a href='#' >Lifestye</a></li>
- <li class='header__navRight--list--item'><a href='#' >Gaming</a></li>
- </ul>
- </nav>
- <div class='header__userBar'>
- <div class='header__userBar--login'><a href='#' >Log In</a></div>
- <span class='header__userBar--divider'>|</span>
- <div class='header__userBar--register'><a href='/register'>Register</a></div>
- </div>
- </div>
- </div>
- </header>
- .header{
- display: flex;
- flex-direction: column;
- height: 75vh;
- &__container{
- display: flex;
- justify-content: center;
- padding-top: 2.5rem;
- padding-bottom: 2.5rem;
- box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
- background-color: #fff;
- align-items: baseline;
- border-bottom: 2px solid black;
- }
- &__soshul-media-bar{
- flex: 1;
- text-align: center;
- &--icon{
- font-size: 1.4rem;
- }
- &--icon:not(:last-child){
- padding-right: 1rem;
- }
- }
- &__navLeft{
- flex: 2;
- &--list{
- list-style-type: none;
- text-align: right;
- word-spacing: 3rem;
- &--item{
- display: inline-block;
- }
- }
- }
- &__logo{
- flex: 1;
- text-align: center;
- padding-right: 5rem;
- padding-left: 5rem;
- }
- &__navRight{
- flex: 2;
- &--list{
- list-style-type: none;
- word-spacing: 3rem;
- &--item{
- display: inline-block;
- }
- }
- }
- &__userBar{
- flex: 1;
- display: flex;
- text-transform: uppercase;
- justify-content: center;
- font-size: 1.2rem;
- &--login{
- padding-right: 1rem;
- }
- &--register{
- padding-left: 1rem;
- }
- }
- &__featured-post{
- height: 100%;
- width: 100%;
- background-image: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .5)), url('travel1.jpg');
- background-size: cover;
- background-position: 30% 70%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement