Created
June 12, 2016 07:35
-
-
Save anonymous/c3d7ae4bdda9adb89a97a5392ae3851e 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