Skip to content

Commit edaa48d

Browse files
winar-jinwinar-jin
committed
upload challenge no 22
1 parent 6540273 commit edaa48d

File tree

2 files changed

+120
-0
lines changed

2 files changed

+120
-0
lines changed

‎22 - Follow Along Link Highlighter/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>👀👀👀Follow Along Nav</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<nav>
11+
<ul class="menu">
12+
<li><a href="">Home</a></li>
13+
<li><a href="">Order Status</a></li>
14+
<li><a href="">Tweets</a></li>
15+
<li><a href="">Read Our History</a></li>
16+
<li><a href="">Contact Us</a></li>
17+
</ul>
18+
</nav>
19+
20+
<div class="wrapper">
21+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus
22+
necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
23+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a>
24+
cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
25+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a
26+
href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
27+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur
28+
eveniet sunt quam provident sapiente dicta neque quod.</p>
29+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a
30+
href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
31+
</div>
32+
33+
<script>
34+
35+
const triggers = document.querySelectorAll('a');
36+
const highlight = document.createElement('span');
37+
highlight.classList.add('highlight');
38+
document.body.appendChild(highlight);
39+
40+
function highlightLink() {
41+
const linkCoords = this.getBoundingClientRect();
42+
console.log(linkCoords);
43+
const coords = {
44+
width: linkCoords.width,
45+
height: linkCoords.height,
46+
top: linkCoords.top + window.scrollY,
47+
left: linkCoords.left + window.scrollX
48+
};
49+
50+
highlight.style.width = `${coords.width}px`;
51+
highlight.style.height = `${coords.height}px`;
52+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
53+
54+
}
55+
56+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
57+
58+
</script>
59+
</body>
60+
</html>
61+

‎22 - Follow Along Link Highlighter/style.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
*, *:before, *:after {
5+
box-sizing: inherit;
6+
}
7+
body {
8+
min-height: 100vh;
9+
margin: 0; /* Important! */
10+
font-family: sans-serif;
11+
background:
12+
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
13+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
14+
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
15+
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
16+
}
17+
18+
.wrapper {
19+
margin:0 auto;
20+
max-width:500px;
21+
font-size: 20px;
22+
line-height: 2;
23+
position: relative;
24+
}
25+
26+
a {
27+
text-decoration: none;
28+
color:black;
29+
background:rgba(0,0,0,0.05);
30+
border-radius: 20px
31+
}
32+
33+
.highlight {
34+
transition: all 0.2s;
35+
border-bottom:2px solid white;
36+
position: absolute;
37+
top:0;
38+
background:white;
39+
left:0;
40+
z-index: -1;
41+
border-radius:20px;
42+
display: block;
43+
box-shadow: 0 0 10px rgba(0,0,0,0.2)
44+
}
45+
46+
.menu {
47+
padding: 0;
48+
display: flex;
49+
list-style: none;
50+
justify-content: center;
51+
margin:100px 0;
52+
}
53+
54+
.menu a {
55+
display: inline-block;
56+
padding:5px;
57+
margin:0 20px;
58+
color:black;
59+
}

0 commit comments

Comments
 (0)