CodePen Embed - Skip to content navigation link

<body>
  <header>

    <a class="skip-to-content" href="#main-content">Skip to content</a>

    <nav>
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Stuff</a>
        </li>
      </ul>
    </nav>
  </header>
  <div>
    <p class="hero-content">Skip to Content example</p>
    <p class="hero-content">Use Tab to show link</p>
  </div>
  <main id="main-content">
    Main content here...

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem ratione tenetur dignissimos enim recusandae consectetur laborum, ex sunt similique voluptas doloremque rem molestias. Ea nihil assumenda error ad dolorum numquam ipsa cumque, natus perferendis in amet itaque debitis similique nostrum esse incidunt cum blanditiis maxime porro accusamus aspernatur voluptatibus praesentium. Asperiores, in. Quis voluptate accusamus porro suscipit, dolorum amet pariatur odio nam autem iste odit libero? Facere ex possimus provident fuga recusandae! Quos recusandae repellat eius nisi doloribus odio sunt reiciendis molestias temporibus voluptates consequuntur ad ut nam laudantium perspiciatis sapiente, officiis similique natus. Error suscipit ullam reiciendis. Repudiandae ratione quis incidunt impedit dolorum consequatur doloremque debitis nulla fugiat maxime animi facilis iusto, quod quasi vel blanditiis atque non illo ducimus magni sequi aspernatur unde. Cumque excepturi minima quisquam pariatur assumenda, deleniti quasi animi similique sapiente dolor. Cum ab libero repellat deserunt! Dicta ducimus, voluptas, id sequi neque et fugiat ex, quibusdam ut laudantium deleniti. Corrupti ipsam in ut doloribus voluptatem reiciendis harum, sint pariatur nobis impedit nisi perspiciatis dolore repellat quas tempora cupiditate laudantium, commodi porro libero molestiae fugiat! Suscipit placeat quisquam minus vitae veritatis non, perspiciatis, consequuntur dolores ut id quae reprehenderit. Obcaecati nostrum expedita consequatur tenetur unde. Possimus nam tempora dolore sint quod culpa ea nobis quae, perferendis quo aliquam temporibus at quidem fugit quos provident saepe id eos numquam dolorum officia iusto laudantium! Illo, aperiam voluptate quia architecto consectetur impedit tempore tenetur minus quidem error nemo iusto a fuga soluta! Pariatur officiis et culpa repellat quibusdam accusantium quisquam dicta! Reprehenderit, quas? Dolor molestiae neque est, amet reiciendis voluptates quos, magnam labore illo mollitia distinctio assumenda. Doloribus possimus nisi dignissimos neque, ducimus praesentium provident. Perferendis vel obcaecati voluptatibus doloribus distinctio quam laboriosam omnis deleniti rerum, sequi quis fugiat accusantium laborum eligendi accusamus earum eveniet molestias recusandae, modi dicta magni. Aspernatur quaerat magnam aliquam consequatur quia, magni voluptates. Maxime, dolore ratione provident distinctio quam voluptates consequuntur! Deserunt eligendi, a esse officiis possimus id voluptatem similique! Fuga, odit maiores. Ducimus rem, eos aliquid a deleniti quibusdam quas id harum culpa cumque libero, nobis necessitatibus corrupti quis pariatur accusantium. Ex deleniti sit molestias ad corporis autem quibusdam perferendis. Aut modi, similique eaque molestiae, sed molestias fugit enim maxime neque fugiat ea laudantium aliquid placeat voluptates eius officiis, cupiditate quas quibusdam! Quia non repudiandae vel. Nihil quos unde veritatis doloremque placeat, nobis consequatur magnam iusto! Est voluptatum suscipit labore sequi, doloribus aliquam enim nisi omnis eum odit consequatur, in sint incidunt cumque? Repellendus nihil veritatis voluptatibus nobis ea deleniti! Saepe dolorum labore sint consequatur est iure, at nobis, fugit vero, repellendus mollitia ea! Ducimus ullam modi itaque beatae quo quos laboriosam veritatis, voluptatibus aperiam natus! Maiores inventore temporibus quidem est perspiciatis impedit magnam voluptate, perferendis saepe hic vero vel dolor ex odio sunt molestias dolorem delectus quas. Voluptatum cum in sapiente non illo sunt iste ipsa maiores, tenetur quam neque quae. Sint laboriosam vero quo harum exercitationem ducimus tempore eveniet nesciunt quos consectetur, obcaecati doloribus architecto dicta impedit qui ab cumque eum eius quam! Ut nisi illo ad asperiores similique ea earum ducimus quisquam quos expedita, tempora qui repellat iste, ex rerum veritatis, maxime eligendi eius consequuntur modi explicabo labore quas! Exercitationem iure accusantium obcaecati in sunt omnis a molestiae vel quas laboriosam, doloremque, at commodi quos amet natus enim veniam. Perspiciatis odio blanditiis incidunt at itaque nesciunt perferendis doloribus neque! Odio provident soluta vitae sunt dolores? Beatae, eos officiis sit perferendis voluptatum voluptas blanditiis et numquam, nesciunt maiores nulla velit sint fugiat odit. Eum provident eos at cum esse. Eaque incidunt nihil esse nulla eius tempora eligendi aut, vitae dolor officia itaque repellendus aspernatur dicta omnis voluptatem optio odit laboriosam quia qui rerum ipsam velit natus numquam. Quia, doloremque suscipit illo itaque corrupti, magni, exercitationem temporibus aliquam consequatur iure eligendi saepe accusantium aliquid velit ducimus. Deserunt quaerat delectus ea praesentium voluptate harum minima, dolor quisquam necessitatibus deleniti earum perspiciatis odit impedit dolorem reprehenderit ex eos ullam fuga velit sint quidem. Reiciendis tempore similique delectus nam temporibus distinctio nemo illo, dicta numquam magni blanditiis quod! Quia eius vitae laborum pariatur corporis nobis repudiandae reiciendis nesciunt. Assumenda quaerat distinctio qui numquam labore magni odio repellendus iusto pariatur harum modi officia neque ipsa a maxime voluptates hic soluta animi consectetur ipsum voluptatibus cupiditate, consequuntur rem? Iusto excepturi vitae placeat ea, ullam delectus minus qui quae dolorum expedita ab ex, fugit vero quos molestias similique incidunt quaerat unde non? Fuga culpa molestias officiis quidem earum consectetur quisquam explicabo id commodi doloremque ex sint nostrum minima totam voluptatibus aliquid facilis, hic libero! Vero maxime iste molestiae? Autem non esse quisquam veniam vitae nemo excepturi perferendis illum, accusamus delectus, eaque perspiciatis quidem dolorum. Quae veritatis eum blanditiis excepturi, optio fuga quam accusantium veniam totam molestias error corporis quasi laudantium debitis eos sapiente dignissimos, expedita ipsam maxime! Asperiores, qui. Autem asperiores sed dolorum dolor nam maxime et cupiditate voluptatum. Dignissimos sit, rem veritatis illo eaque beatae quas, unde culpa qui harum ipsum minus omnis similique fugit voluptates suscipit, porro temporibus ut laborum ducimus nostrum! Pariatur quam consectetur commodi ex nobis placeat tenetur tempora dolor voluptate quidem harum sed asperiores quia dolores voluptates eius fugiat, error, temporibus eligendi quo atque est sunt minus? Eum, autem. Consequuntur voluptates ex quaerat odio libero dignissimos, itaque eos perspiciatis. Corrupti suscipit accusantium doloribus natus id alias in totam culpa distinctio, ratione necessitatibus perferendis est nisi ex? Expedita eligendi voluptatem quod, quis ratione vitae fugiat sapiente aspernatur in similique magni laboriosam totam a, maxime quidem assumenda consequatur veritatis dolorum? Porro distinctio dicta maiores architecto est animi nisi fugit, commodi rerum cupiditate ab necessitatibus voluptas. Molestiae ab eveniet non, numquam eos dignissimos omnis dolorem iste. Eius illum veniam ipsa quo, distinctio repellat praesentium eligendi illo est voluptatem dignissimos, placeat pariatur maiores expedita soluta! Laboriosam dolore quaerat sit id veritatis velit, nihil quisquam aperiam fuga nulla suscipit? Minus odit, eius animi, nostrum dolore a odio provident soluta fuga nesciunt, dicta quo optio reiciendis nemo eos pariatur. Assumenda tenetur quidem saepe harum voluptate fuga officiis quis eius? Veritatis laudantium exercitationem tempora aut placeat quo ipsa neque quaerat saepe corrupti asperiores totam voluptates et optio dignissimos blanditiis iste sunt doloribus dicta, reprehenderit quia culpa necessitatibus praesentium? Cumque dolores illo iusto laudantium? Magni dolorum nobis sequi, reiciendis eum dolor beatae quos repellendus nesciunt amet iste delectus voluptas, temporibus quidem. Optio ab facilis impedit velit esse! At, illo magni sit odit, temporibus voluptatem saepe obcaecati dignissimos officiis quo iste eligendi quasi dolorem fugit animi, voluptates tempore quidem hic repudiandae! Quibusdam, ex officia fugiat corrupti, sit cupiditate iure placeat, voluptatum quae velit nisi vel. Voluptatibus voluptas ipsum rem, possimus eligendi suscipit voluptate fugit id assumenda neque! Fugit, nostrum officiis! Exercitationem vitae voluptatibus iure officia accusantium excepturi illum nostrum tenetur? Quia quam, debitis distinctio quidem amet animi atque voluptatem nihil, maxime sapiente aut veniam, fugit nisi. Sunt voluptatum, vitae explicabo temporibus minima aliquid est nam obcaecati vel magnam cupiditate dolores placeat quas impedit, natus fuga et nobis provident quae fugiat dolorem mollitia iste aliquam earum? Sunt consequuntur doloremque repellat adipisci a excepturi aspernatur enim officia voluptatem vel consequatur aperiam ab dolorum modi deleniti possimus sapiente, sit quod nobis? Itaque, magni, dolore nisi labore veniam quibusdam voluptas magnam ex dignissimos illo et. Reiciendis minus illo iste omnis sunt eos mollitia beatae eaque itaque. Vel error veritatis, eius quasi voluptate amet voluptatum. Nihil, nemo reiciendis! Optio, fugit voluptatem cumque debitis nesciunt aspernatur eveniet porro consectetur delectus temporibus illum harum deleniti architecto voluptate vero commodi excepturi quasi possimus similique incidunt voluptates ullam expedita? Nostrum iure molestiae sit unde molestias? Unde quae magnam distinctio ullam impedit! Eius, laboriosam porro voluptatibus explicabo sed provident. Culpa, minima? Esse nesciunt accusantium quo necessitatibus ducimus. Labore non dicta natus voluptatem atque distinctio tempora veritatis, aspernatur consequuntur sapiente, praesentium velit! Quod recusandae eius nihil pariatur hic optio id! Est sint ea pariatur minima? Ipsam, aspernatur eos explicabo, corrupti nesciunt officiis hic numquam ratione corporis natus, velit dolores. Commodi obcaecati doloremque rerum provident ullam, distinctio quisquam sint minima harum quas facilis? Exercitationem similique doloremque nulla temporibus vero libero maxime incidunt non saepe nostrum ipsa in dolor, magnam iure quisquam quidem fugiat expedita dignissimos. Deleniti quod inventore optio commodi similique et natus veniam distinctio nam, modi ipsa asperiores quas explicabo consectetur. Architecto asperiores repellat corporis repellendus blanditiis iusto laborum eligendi harum ipsa. Pariatur quis, culpa magnam laborum deleniti iusto cumque ad tempora repellendus quidem ea debitis reiciendis molestias nihil minus expedita omnis, commodi, architecto ab ullam nisi illum. Iure optio quibusdam dolorem consequatur ex consectetur quam, laudantium possimus ea fugit rerum facilis officia nihil, laboriosam qui. Quod minus rerum ullam, cupiditate error ipsam suscipit soluta quidem, temporibus doloribus accusantium nostrum eaque exercitationem! Iure quas voluptatum iusto illum dignissimos, libero exercitationem aperiam nisi soluta dolores rerum magnam quo ducimus ipsum ipsa qui maxime quasi, tempore ex repudiandae impedit eum. Blanditiis nesciunt molestiae perferendis autem nam aspernatur deserunt veritatis vero, harum nisi ullam quia? Hic pariatur temporibus nesciunt illum iste iusto aperiam nostrum quos sed est asperiores minus dolor molestiae a esse, enim commodi molestias voluptatem debitis repellat totam! Ex deserunt alias esse asperiores. Enim quia vitae praesentium eius, excepturi sit natus accusantium autem, id delectus itaque accusamus repellendus dolore neque tempora dignissimos minus nulla pariatur ab velit provident repudiandae? Eos quam distinctio sint culpa, soluta mollitia nesciunt, dolor, atque in fugit qui voluptates amet fugiat dicta ex. Est, soluta eveniet praesentium minima minus aliquid quo enim inventore alias at distinctio perferendis rerum quasi animi libero iusto magnam eligendi? Libero autem eveniet ex. Mollitia ratione hic quis natus culpa reiciendis similique quo nulla. Libero, atque! Minus corrupti fuga harum tempore veritatis quaerat molestiae iste recusandae iusto. Non, ex quae quas eos cumque sed? Velit nobis possimus ut dolorem dolores eos voluptate obcaecati explicabo nemo autem in eaque, neque consequatur sint voluptatem. Quam vel deserunt et nulla consequatur. Quidem repellat quasi quibusdam laboriosam ab, porro officiis maiores beatae, voluptates sunt maxime sed in esse. Omnis, dolore, voluptas consequatur voluptatum, sint commodi mollitia adipisci iste numquam ipsum unde? Quas natus ut numquam nihil odio voluptatem recusandae dignissimos magni earum officia rem ab, quis, tempora optio id excepturi laudantium, explicabo ad. Quis quod amet ea esse, consequatur minima dignissimos odit, ab blanditiis perferendis reiciendis. Eveniet maxime nam doloribus assumenda unde error mollitia laboriosam ratione atque repellendus modi illum, vel omnis aliquam? Eveniet fugit aspernatur impedit officia corporis itaque id consequatur tempora, hic, esse magnam nesciunt at! Commodi consectetur amet fugiat. Adipisci nam aspernatur numquam accusamus soluta veniam laboriosam, ullam quis officiis voluptatibus modi, nulla eum expedita animi dolor molestiae, quae ab cupiditate repellendus. Quo magnam ullam perspiciatis consectetur harum vero quis amet nostrum error in fuga saepe est veniam, at dolor eveniet ratione aspernatur odio tenetur labore! Provident exercitationem voluptate officia? Veritatis, ipsa recusandae adipisci harum ratione, minima quo ex dolorum exercitationem obcaecati explicabo, dolor tenetur officia. Explicabo distinctio molestiae dolore nesciunt iste, atque optio voluptas enim officia sapiente inventore, nostrum neque mollitia deserunt quis. Expedita, quis sint laudantium voluptatem earum ratione, sapiente optio accusantium omnis dolorem consectetur? Sapiente alias consequatur dolorem iure debitis a nostrum vero, minus necessitatibus modi sint, doloremque officia harum perferendis tempore deserunt delectus magnam obcaecati iste earum, commodi nesciunt inventore! Quisquam blanditiis asperiores corporis reiciendis. Autem saepe eligendi provident, quia harum doloremque hic tenetur ex dolorem vel consequatur quam ratione obcaecati perspiciatis distinctio iure sunt aliquid officia accusamus voluptatum deleniti quas. Minima similique eligendi, esse tenetur repudiandae illo accusantium eos perferendis accusamus enim dignissimos nihil ad hic facere? In alias doloribus nulla aperiam ea ipsam, odio quos soluta similique! Dolores delectus atque voluptates esse asperiores totam blanditiis, molestiae corporis neque molestias veritatis nobis laborum repellat maiores perferendis magni, quo autem fuga libero aperiam laudantium ad iste! Iure quos, consequuntur doloremque accusantium iusto suscipit quidem culpa modi voluptatibus vitae consectetur facere provident, adipisci sequi earum nemo fuga inventore et excepturi tenetur ducimus eius. Excepturi dicta doloremque impedit officia facere, eum provident quam ipsam repellendus fugiat necessitatibus suscipit alias molestiae odio numquam amet expedita optio! Voluptatem numquam ducimus perferendis ipsam ab blanditiis rerum necessitatibus optio nobis cumque facilis aut cum doloremque, officiis eaque earum beatae, quis voluptatum suscipit quas laudantium et voluptas tempora? Hic necessitatibus similique fugit temporibus amet fuga accusamus sit laboriosam repellat. Totam numquam obcaecati sit deserunt quaerat perferendis, illo ut magni optio rerum nemo hic aut veritatis officiis ratione. Quis placeat magni laboriosam facere a in iusto officia id voluptate, harum sapiente quas saepe possimus eaque asperiores nobis, veritatis eligendi autem ipsum nam animi expedita. Perspiciatis voluptatibus eaque veritatis excepturi vitae quibusdam qui sequi quasi, molestiae voluptates modi iste praesentium dolorum doloribus earum ut numquam dicta? Dolore odit dolores inventore tempora. Quasi voluptatem deserunt sunt quo ipsam unde necessitatibus ducimus obcaecati saepe tempora, facilis nisi, tempore illo quas ratione molestias, asperiores distinctio laudantium eveniet iste quia? Ducimus omnis deserunt alias porro accusamus perferendis aliquid sapiente repellat ratione excepturi, ullam dolorum quibusdam consequuntur sed. Dolorem distinctio voluptates odio commodi vero nemo nihil impedit laudantium, quidem voluptas asperiores consequuntur dolorum odit magnam tempore provident non! Laboriosam dolore aliquid delectus nisi architecto a numquam nobis officia error, deserunt omnis voluptate quis voluptas magni deleniti nihil saepe, ab totam, adipisci molestiae. Consequatur velit ex debitis quod alias libero totam doloribus, ratione beatae asperiores similique. Nulla voluptatem aspernatur unde excepturi nostrum quae ad deserunt incidunt, at ipsam enim officiis aut ut ab ex, error laborum impedit hic doloremque voluptatum. Porro obcaecati similique recusandae, adipisci exercitationem fuga dolor minus blanditiis tempora aut cumque aspernatur, delectus quo minima. Itaque exercitationem possimus suscipit fugit quas quia, unde ex odit, aut a porro officiis ratione eum iure earum quos necessitatibus corrupti, quod fuga. Suscipit, aspernatur tempora dignissimos est rem quibusdam illo recusandae aperiam totam praesentium, asperiores eum laboriosam quae enim tenetur laudantium quas magni vero maxime! Animi, expedita accusamus! Ullam sit voluptatum porro dolorem. Fugiat laboriosam aliquid facilis incidunt eum ratione qui aperiam quia distinctio earum vero unde repellat, voluptatem voluptates rem suscipit animi! Accusantium deserunt quisquam aliquid, laborum officia aut adipisci veniam beatae debitis harum recusandae? Placeat minima maxime sit cum error saepe dolore dolorum. Fugiat quod delectus omnis laboriosam enim aperiam perspiciatis, eius a non. Recusandae dolorum quis delectus magnam quam, optio consequatur assumenda voluptatem culpa nisi iusto vitae laudantium odio molestias illum doloribus blanditiis iste qui mollitia harum. Incidunt velit officia ab iure animi labore eos vel voluptate consectetur accusantium totam voluptatum nihil dignissimos accusamus consequuntur aspernatur recusandae, doloremque neque quam similique quo libero. Exercitationem dolorum itaque doloribus, reiciendis illo odit consectetur, laborum consequatur eveniet quam quibusdam mollitia praesentium repellat dolorem ipsum rerum excepturi amet ducimus nam labore possimus debitis nobis! Ab voluptatem fugiat asperiores quisquam vitae. Quidem, voluptate vitae nobis aliquid cupiditate assumenda impedit. Magni quod repellendus quidem nostrum eum est eligendi beatae at tempora. Exercitationem soluta esse sunt maiores? Velit nesciunt animi consequuntur error dolores suscipit maxime alias neque consequatur. Magnam vero mollitia officiis quae animi quam, voluptatem accusantium, commodi perferendis quibusdam illo iusto inventore explicabo nam distinctio! Saepe earum, amet rerum ipsa non eaque ex laboriosam? Ipsum magnam tenetur odio incidunt accusamus quo ducimus, ut repellat ipsa ex dignissimos, unde facilis error aut tempora eos iusto atque reiciendis sed optio veniam libero. Ipsam quibusdam praesentium cumque saepe perspiciatis asperiores incidunt blanditiis repellat illum beatae, fugit porro amet ab deserunt corrupti ipsum ratione voluptas maiores, iste voluptatibus modi tenetur consequatur? A, reiciendis? Magnam saepe eaque ipsa quos. Maiores recusandae saepe neque rem aut a nobis, temporibus libero unde, voluptatibus architecto eos quia alias maxime excepturi nisi consequatur? Eligendi doloremque ipsum, beatae eveniet corrupti totam quasi odit reprehenderit provident numquam, quis aspernatur vel ea cupiditate ab vitae ullam assumenda impedit. Voluptatibus impedit tempore at ab, voluptas nesciunt nihil doloremque adipisci sed error consequuntur voluptatem quisquam, nemo ut, animi commodi culpa voluptatum aspernatur enim similique magni saepe illum! Incidunt deleniti ea voluptate fuga! In atque aut dicta! Accusantium, possimus officia! Eligendi, id? Corporis dignissimos, ab praesentium tempora voluptatem commodi enim a deleniti eligendi minus ipsa possimus voluptas numquam dolor neque rerum illo aspernatur ipsum odio nobis porro laudantium quo suscipit. Ipsa eaque perspiciatis maxime suscipit, repellendus eveniet sapiente voluptatum! Fuga quia voluptas, officia unde velit perspiciatis aspernatur. Nobis repellat dolorem accusamus inventore, porro nihil quas natus temporibus doloribus repudiandae ipsum consequatur vel explicabo harum voluptatum animi libero sapiente nemo. Temporibus enim debitis quas consectetur totam dolor doloremque! At dolor, porro deserunt quae aliquam error esse sapiente magni ipsum atque vel vero ut fuga exercitationem repellendus enim, voluptatibus a ratione repudiandae, facere tenetur nobis maxime assumenda nesciunt! Ipsa impedit consequatur repellendus dolor modi aperiam. Deleniti asperiores reiciendis delectus atque commodi quas omnis nisi ipsum eum itaque! Aliquam quae aliquid dolore repellendus libero iure architecto eligendi esse quis cumque nulla perspiciatis temporibus exercitationem quod amet doloribus, odio facilis mollitia, quia sit nostrum. Quas laborum iusto, tempore consequuntur optio officiis iste neque! Expedita blanditiis modi aut maxime rem quae incidunt beatae itaque qui eos corporis dolore perspiciatis molestias nulla, voluptas recusandae nihil vitae magni saepe dolorem obcaecati fugiat. Aut velit in accusamus laudantium odio eaque veritatis tenetur accusantium illum nesciunt harum eos, provident, perspiciatis tempora fugiat fuga dolorum eum eveniet? Quidem pariatur repellendus iste, quos facilis consequuntur et, obcaecati consectetur asperiores ex, eos eveniet corporis facere? Quibusdam dolores repudiandae magni? Voluptatum veniam cumque in asperiores alias culpa possimus minima iure quae ipsam. Labore quia perferendis inventore suscipit necessitatibus esse illum voluptate, blanditiis, consequatur iusto minima sequi? Dolor, id accusamus dignissimos ratione quia illo fugit doloribus incidunt numquam amet voluptatum sapiente natus maxime a alias sed est error voluptatibus, quis iure nesciunt eaque! Eveniet, aut ad eius voluptates quaerat, dolores inventore saepe aliquid molestiae in repellendus sunt voluptas consequatur possimus enim voluptatibus quas minima et corrupti. At eveniet necessitatibus quod omnis aliquid praesentium illo debitis! Officiis voluptate ab necessitatibus soluta reiciendis quis nisi distinctio magni magnam dignissimos alias eaque molestias, quod vel quidem iste repellat deleniti laboriosam, dolores explicabo veritatis. Facilis explicabo, distinctio cumque delectus repellat cupiditate perspiciatis a incidunt! Quam ut nemo illum earum enim culpa rem minima excepturi dolore magni at quod, quas pariatur repellendus temporibus itaque autem consequuntur!
  </main>

</body>

@import url(https://fonts.googleapis.com/css?family=Inter);

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  font-family: inter;
}

.skip-to-content {
  margin: 1rem;
  background: rebeccapurple;
  color: white;
  border-radius: 10px;
  padding: 1rem;
  position: absolute;
  transform: translateY(-150%);
  transition: transform 150ms ease-in;
}

.skip-to-content:focus {
  transform: translateY(0);
}

ul {
  display: flex;
  justify-content: space-evenly;
  padding: 1rem;
  background: papayawhip;
}

li {
  list-style: none;
}

.hero-content {
  background: teal;
  font-size: 6rem;
  font-weight: 900;
  text-align: center;
}

main {
  max-width: 50ch;
  margin: auto;
  font-size: 1.5rem;
}

Run Pen

This Pen is owned by Scott Spence on CodePen.

See more by @spences10 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.