<div id="profile">
<img src="https://source.unsplash.com/EVXB_Is-UqI" alt="Cat">
</div>
<nav>
<ul class="menu">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</nav>
<div class="wrapper">
<h2>Hello, I'm <a href="http://katherinekato.com" title="Katherine Kato">Katherine Kato</a>!</h2>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Est <a href="#">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
<p>Aspernatur sapiente quae sint <a href="#">soluta</a> modi, atque praesentium laborum pariatur earum <a href="#">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
<p>Cum ipsam quod, incidunt sit ex <a href="#">tempore</a> placeat maxime <a href="#">corrupti</a> possimus <a href="#">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="#">quibusdam</a>, nulla.</p>
<p>Esse quibusdam, ad, ducimus cupiditate <a href="#">nulla</a>, quae magni odit <a href="#">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
<p>Aliquam <a href="#">dicta</a> sequi culpa fugiat <a href="#">consequuntur</a> pariatur optio ad minima, maxime <a href="#">odio</a>, distinctio magni impedit tempore enim repellendus <a href="#">repudiandae</a> quas!</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Lato');
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
min-height: 100vh;
margin: 0; /* Important! */
font-family: 'Lato', serif;
color: #7d7d7d;
}
.wrapper {
margin: 0 auto;
max-width: 650px;
font-size: 20px;
line-height: 2;
position: relative;
}
h2 {
font-family: 'Lato', sans-serif;
color: #272727;
}
a {
text-decoration: none;
color: #272727;
background: rgba(240, 233, 241, 0.4);
}
.highlight {
transition: all 0.2s;
border-bottom: 2px solid #fff8a3;
position: absolute;
top: 0;
background: #fff8a3;
left: 0;
z-index: -1;
display: block;
}
.menu {
padding: 0;
display: flex;
list-style: none;
justify-content: center;
margin: 40px 0 60px 0;
}
.menu a {
display: inline-block;
padding: 5px;
margin: 0 20px;
}
#profile {
margin: 40px 0;
}
img {
margin: 0 auto;
display: block;
width: 125px;
height: 125px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);
function highlightLink() {
const linkCoords = this.getBoundingClientRect();
console.log(linkCoords);
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
};
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
// From https://codepen.io/SJF
triggers.forEach(a => a.addEventListener('focus', highlightLink));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.