ebi3102/top-menu.htm

## top-menu.htm
<html>
<head>
<meta name="viweport" content="width=device-width">
<style>
   *{
    box-sizing: border-box;
  }
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  @media only screen and (max-width: 768px) {
      /* For mobile phones: */
      [class*="col-"] {
          width: 100%;
      }
}
    .top{
    background-color: #3a3a3a;
    height: 42px;
    color: #f0f0f0;
  }
  .top-header{
    float: left;
    margin: 10px 10px;
  }
  .top-header:before, .top-header:after { content: ""; display: table; }
  .top-header { *zoom: 1; }
  .top-header a:link,
  .top-header a:visited {
    display: inline;
    padding: 10px 18px;
    text-decoration: none;
    color: #f0f0f0;
  }
  .top-prof{
    float: left;
  }
  .top-prof div{
    text-align: right;
    margin: 10px;
    padding: 10px;
  }
</style>
</head>
<body>
  <div class='top'>
			<header class="top-header col-9">
					<a href="#">LogIn</a>
					<a href="#">SignUp</a>
			</header>
			<div calss="top-prof col-3">Profile</div>
		</div>
</body>
</html>