top-navigation.html - Ciro Santilli

css/top-navigation.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Top navigation</title>
<style>
body {
  padding: 0;
  margin: 0;
}
a {
  align-items: center;
  display: flex;
  text-decoration: none;
}
.nav {
  background-color: black;
  color: blue;
  cursor: pointer;
  display: flex;
  font-size: 50px;
  font-weight: bold;
  /* Not sure how to algorithmically chose a minimal value here
   * relative to the font-size that guarantees that font descenders
   * don't show outside of the navigation. */
  height: 70px;
}
.nav-item {
  padding: 5px 10px;
}
.nav-item.profile {
  padding: 0px 10px 0px 0px;
}
.nav .pull-right {
  display: flex;
  margin-left: auto;
}
.nav-item:hover {
  background-color: red;
  color: green;
}
img {
  height: 100%;
  padding-right: 10px;
  /*width: 50px;*/
}
</style>
</head>
<body>
<div class="nav">
  <a class="nav-item" href="name">Website</a>
  <div class="pull-right">
    <a class="nav-item" href="new">New post</a>
    <a class="nav-item" href="new">Settings</a>
    <a class="nav-item profile" href="profile"><img src="200x200.png"/>Username</a>
  </div>
</div>
<p>Body</p>
</body>
</html>