rafaelcamargo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover Animated Menu</title>
  <style>
    html, body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      min-height: 100vh;
      background-color: #FF7A4B;
      font-family: sans-serif;
    }
    menu {
      margin: 0;
      padding: 0;
      max-width: 320px;
      list-style-type: none;
    }
    .mobilon {
      display: inline-block;
      position: relative;
      color: #000;
      font-size: 36px;
      line-height: 1;
      text-decoration: none;
      overflow: hidden;
      border-width: 0 0 .07em 0;
      border-style: solid;
      border-color: transparent;
      transition: border 400ms ease-out;
    }
    .mobilon:hover{
      border-color: #000;
    }
    .mobilon:before,
    .mobilon:after {
      content: attr(aria-label);
      left: 0;
      transition: all 200ms ease-out;
    }
    .mobilon:before {
      position: relative;
      opacity: 1;
      top: 0;
    }
    .mobilon:hover:before,
    .mobilon:focus:before {
      opacity: 0;
      top: -1em;
    }
    .mobilon:after {
      position: absolute;
      opacity: 0;
      top: 100%;
    }
    .mobilon:hover:after,
    .mobilon:focus:after {
      opacity: 1;
      top: 0;
    }
  </style>
</head>
<body>
  <menu>
    <li>
      <a href="#/home" class="mobilon" aria-label="Home"></a>
    </li>
    <li>
      <a href="#/work" class="mobilon" aria-label="Work"></a>
    </li>
    <li>
      <a href="#/services-and-models" class="mobilon" aria-label="Services & Models"></a>
    </li>
    <li>
      <a href="#/about" class="mobilon" aria-label="About"></a>
    </li>
    <li>
      <a href="#/contact" class="mobilon" aria-label="Contact"></a>
    </li>
  </menu>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hover Animated Menu</title>
	<style>
	html, body {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	min-height: 100vh;
	background-color: #FF7A4B;
	font-family: sans-serif;
	}
	menu {
	margin: 0;
	padding: 0;
	max-width: 320px;
	list-style-type: none;
	}
	.mobilon {
	display: inline-block;
	position: relative;
	color: #000;
	font-size: 36px;
	line-height: 1;
	text-decoration: none;
	overflow: hidden;
	border-width: 0 0 .07em 0;
	border-style: solid;
	border-color: transparent;
	transition: border 400ms ease-out;
	}
	.mobilon:hover{
	border-color: #000;
	}
	.mobilon:before,
	.mobilon:after {
	content: attr(aria-label);
	left: 0;
	transition: all 200ms ease-out;
	}
	.mobilon:before {
	position: relative;
	opacity: 1;
	top: 0;
	}
	.mobilon:hover:before,
	.mobilon:focus:before {
	opacity: 0;
	top: -1em;
	}
	.mobilon:after {
	position: absolute;
	opacity: 0;
	top: 100%;
	}
	.mobilon:hover:after,
	.mobilon:focus:after {
	opacity: 1;
	top: 0;
	}
	</style>
	</head>
	<body>
	<menu>
	<li>
	<a href="#/home" class="mobilon" aria-label="Home"></a>
	</li>
	<li>
	<a href="#/work" class="mobilon" aria-label="Work"></a>
	</li>
	<li>
	<a href="#/services-and-models" class="mobilon" aria-label="Services & Models"></a>
	</li>
	<li>
	<a href="#/about" class="mobilon" aria-label="About"></a>
	</li>
	<li>
	<a href="#/contact" class="mobilon" aria-label="Contact"></a>
	</li>
	</menu>
	</body>
	</html>