-
-
Save pmdartus/060a6bb5a2a2c5de2032b982da12bd2a to your computer and use it in GitHub Desktop.
JS Bin Site header using flexbox // source https://jsbin.com/rekilad
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Site header using flexbox"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html { | |
| font-family: arial, san-serif; | |
| } | |
| .site-header-logo img { | |
| height: 30px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| background-color: #56727C; | |
| } | |
| section { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .site-header__item { | |
| padding: 5px 10px; | |
| } | |
| .site-header__item + .site-header__item { | |
| margin-left: 5px; | |
| } | |
| .site-header-button { | |
| color: white; | |
| cursor: pointer; | |
| } | |
| .site-header__item-selected { | |
| background-color: #405b65; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <section> | |
| <div class="site-header__item site-header-logo"> | |
| <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-light.png" alt="logo"> | |
| </div> | |
| <div class="site-header__item site-header__item-selected site-header-button">Inbox</div> | |
| <div class="site-header__item site-header-button">Sent</div> | |
| <div class="site-header__item site-header-button">Trash</div> | |
| </section> | |
| <section> | |
| <div class="site-header__item site-header-button">Settings</div> | |
| <div class="site-header__item site-header-button">Logout</div> | |
| </section> | |
| </header> | |
| <script id="jsbin-source-css" type="text/css">html { | |
| font-family: arial, san-serif; | |
| } | |
| .site-header-logo img { | |
| height: 30px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| background-color: #56727C; | |
| } | |
| section { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .site-header__item { | |
| padding: 5px 10px; | |
| } | |
| .site-header__item + .site-header__item { | |
| margin-left: 5px; | |
| } | |
| .site-header-button { | |
| color: white; | |
| cursor: pointer; | |
| } | |
| .site-header__item-selected { | |
| background-color: #405b65; | |
| border-radius: 3px; | |
| }</script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-family: arial, san-serif; | |
| } | |
| .site-header-logo img { | |
| height: 30px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| background-color: #56727C; | |
| } | |
| section { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .site-header__item { | |
| padding: 5px 10px; | |
| } | |
| .site-header__item + .site-header__item { | |
| margin-left: 5px; | |
| } | |
| .site-header-button { | |
| color: white; | |
| cursor: pointer; | |
| } | |
| .site-header__item-selected { | |
| background-color: #405b65; | |
| border-radius: 3px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment