Advertisement
Guest User

Untitled

a guest
Jun 17th, 2019
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.17 KB | None | 0 0
  1. <header class='header'>
  2. <div class='header__container'>
  3. <div class='header__soshul-media-bar'>
  4. <i class="fab fa-facebook-square header__soshul-media-bar--icon"></i>
  5. <i class="fab fa-twitter-square header__soshul-media-bar--icon"></i>
  6. <i class="fab fa-youtube header__soshul-media-bar--icon"></i>
  7. <i class="fab fa-instagram soshul header__soshul-media-bar--icon"></i>
  8. <i class="fab fa-pinterest-square header__soshul-media-bar--icon"></i>
  9. </div>
  10.  
  11. <nav class='header__navLeft'>
  12. <ul class='header__navLeft--list header__nav'>
  13. <li class='header__navLeft--list--item'><a href='#' >Home</a></li>
  14. <li class='header__navLeft--list--item'><a href='#' >Featured</a></li>
  15. <li class='header__navLeft--list--item'><a href='#' >Sports</a> </li>
  16. </ul>
  17. </nav>
  18.  
  19. <h1 class='header__logo'><a href='/'>Notyble</a></h1>
  20.  
  21. <nav class='header__navRight'>
  22. <ul class='header__navRight--list header__nav'>
  23. <li class='header__navRight--list--item'><a href='#' >Fitness</a></li>
  24. <li class='header__navRight--list--item'><a href='#' >Lifestye</a></li>
  25. <li class='header__navRight--list--item'><a href='#' >Gaming</a></li>
  26. </ul>
  27. </nav>
  28.  
  29. <div class='header__userBar'>
  30. <div class='header__userBar--login'><a href='#' >Log In</a></div>
  31. <span class='header__userBar--divider'>|</span>
  32. <div class='header__userBar--register'><a href='/register'>Register</a></div>
  33. </div>
  34.  
  35. </div>
  36.  
  37.  
  38.  
  39. </div>
  40. </header>
  41.  
  42. .header{
  43. display: flex;
  44. flex-direction: column;
  45. height: 75vh;
  46.  
  47.  
  48. &__container{
  49. display: flex;
  50. justify-content: center;
  51. padding-top: 2.5rem;
  52. padding-bottom: 2.5rem;
  53. box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.3);
  54. background-color: #fff;
  55. align-items: baseline;
  56. border-bottom: 2px solid black;
  57.  
  58. }
  59.  
  60. &__soshul-media-bar{
  61. flex: 1;
  62. text-align: center;
  63.  
  64. &--icon{
  65. font-size: 1.4rem;
  66. }
  67.  
  68. &--icon:not(:last-child){
  69. padding-right: 1rem;
  70. }
  71. }
  72.  
  73. &__navLeft{
  74. flex: 2;
  75.  
  76.  
  77. &--list{
  78. list-style-type: none;
  79. text-align: right;
  80. word-spacing: 3rem;
  81.  
  82. &--item{
  83. display: inline-block;
  84. }
  85. }
  86. }
  87.  
  88. &__logo{
  89. flex: 1;
  90. text-align: center;
  91. padding-right: 5rem;
  92. padding-left: 5rem;
  93. }
  94.  
  95.  
  96.  
  97. &__navRight{
  98. flex: 2;
  99.  
  100. &--list{
  101. list-style-type: none;
  102. word-spacing: 3rem;
  103.  
  104.  
  105. &--item{
  106. display: inline-block;
  107. }
  108. }
  109.  
  110. }
  111.  
  112. &__userBar{
  113. flex: 1;
  114. display: flex;
  115. text-transform: uppercase;
  116. justify-content: center;
  117. font-size: 1.2rem;
  118.  
  119. &--login{
  120. padding-right: 1rem;
  121. }
  122.  
  123. &--register{
  124. padding-left: 1rem;
  125. }
  126. }
  127.  
  128.  
  129.  
  130.  
  131. &__featured-post{
  132. height: 100%;
  133. width: 100%;
  134. background-image: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .5)), url('travel1.jpg');
  135. background-size: cover;
  136. background-position: 30% 70%;
  137. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement