GiovanniRiefolo/index.html

## index.html
<html>
  <head>
    <title>Skip links</title>
  </head>
  <style>
    .skip-link{
      position: absolute;
      z-index: 99;
      left: -50%;
      right: -50%
      top: -100%;

      width: 120px;
      padding: 12px
      background-color: black;
      color: white;

      transition: top .5s linear;
    }
      .skip-link:focus{
        top: 0;
      }
  </style>
  <body>
    <header>
      <a href="#content"
         class="skip-link">Go to main content</a>
      <img alt="Company logo" width="64" height="64" src="./logo.png">
      <nav>
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
      </nav>
    </header>
    <main id="content">
    <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in magna at odio efficitur pretium.
      Proin placerat faucibus pulvinar. Morbi molestie mauris erat, id rhoncus mauris placerat id.
      Mauris vel lobortis lorem, quis dapibus felis. Morbi imperdiet at nisl nec viverra. Cras suscipit,
      turpis et vulputate feugiat, dolor orci lobortis turpis, a vulputate enim enim quis est. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed scelerisque libero non laoreet
      tempor. Proin fermentum erat vitae purus accumsan porta. Mauris fermentum lorem sed quam suscipit,
      at accumsan eros cursus. Sed in libero sit amet dolor aliquet suscipit at at tellus. Aliquam tempus turpis
      volutpat venenatis semper.</p>
    </main>
  </body>
</html>
	<html>
	<head>
	<title>Skip links</title>
	</head>
	<style>
	.skip-link{
	position: absolute;
	z-index: 99;
	left: -50%;
	right: -50%
	top: -100%;

	width: 120px;
	padding: 12px
	background-color: black;
	color: white;

	transition: top .5s linear;
	}
	.skip-link:focus{
	top: 0;
	}
	</style>
	<body>
	<header>
	<a href="#content"
	class="skip-link">Go to main content</a>
	<img alt="Company logo" width="64" height="64" src="./logo.png">
	<nav>
	<a href="#link1">Link 1</a>
	<a href="#link2">Link 2</a>
	</nav>
	</header>
	<main id="content">
	<h1>Main content</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in magna at odio efficitur pretium.
	Proin placerat faucibus pulvinar. Morbi molestie mauris erat, id rhoncus mauris placerat id.
	Mauris vel lobortis lorem, quis dapibus felis. Morbi imperdiet at nisl nec viverra. Cras suscipit,
	turpis et vulputate feugiat, dolor orci lobortis turpis, a vulputate enim enim quis est. Vestibulum ante
	ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed scelerisque libero non laoreet
	tempor. Proin fermentum erat vitae purus accumsan porta. Mauris fermentum lorem sed quam suscipit,
	at accumsan eros cursus. Sed in libero sit amet dolor aliquet suscipit at at tellus. Aliquam tempus turpis
	volutpat venenatis semper.</p>
	</main>
	</body>
	</html>