Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 71a5fc5

Browse files
add task17 and update the answer of task 16
1 parent 5cd2260 commit 71a5fc5

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
22+
<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>
23+
<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>
24+
<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>
25+
<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>
26+
</div>
27+
28+
<script>
29+
const triggers = document.querySelectorAll('a');
30+
const highlight = document.createElement('span');
31+
highlight.classList.add('highlight');
32+
document.body.appendChild(highlight);
33+
34+
function highlightLink() {
35+
const linkCoords = this.getBoundingClientRect();
36+
console.log(linkCoords);
37+
const coords = {
38+
width: linkCoords.width,
39+
height: linkCoords.height,
40+
top: linkCoords.top + window.scrollY,
41+
left: linkCoords.left + window.scrollX
42+
};
43+
44+
highlight.style.width = `${coords.width}px`;
45+
highlight.style.height = `${coords.height}px`;
46+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
47+
48+
}
49+
50+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
51+
52+
</script>
53+
</body>
54+
</html>
55+
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430" src="https://s3.cn-north-1.amazonaws.com.cn/tws-courses-resource/Linux%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%9F%BA%E7%A1%80.mp4" loop controls></video>
12+
<div class="speed">
13+
<div class="speed-bar">×ばつ</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
</script>
19+
</body>
20+
</html>

‎17 - Video Speed Controller/style.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
margin: 0;
3+
display:flex;
4+
justify-content: center;
5+
align-items: center;
6+
min-height: 100vh;
7+
background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');
8+
background-size:cover;
9+
font-family: sans-serif;
10+
}
11+
.wrapper {
12+
width:850px;
13+
display:flex;
14+
}
15+
video {
16+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
17+
}
18+
19+
.speed {
20+
background:#efefef;
21+
flex:1;
22+
display:flex;
23+
align-items:flex-start;
24+
margin:10px;
25+
border-radius:50px;
26+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
27+
overflow: hidden;
28+
}
29+
.speed-bar {
30+
width:100%;
31+
background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
32+
text-shadow:1px 1px 0 rgba(0,0,0,0.2);
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
padding:2px;
37+
color:white;
38+
height:16.3%;
39+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /