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 5cd2260

Browse files
add task16 and update the answer of task 15
1 parent 3d00bc8 commit 5cd2260

File tree

3 files changed

+159
-0
lines changed

3 files changed

+159
-0
lines changed
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mouse Shadow</title>
6+
</head>
7+
<body>
8+
9+
<div class="hero">
10+
<h1 contenteditable>🔥WOAH!</h1>
11+
</div>
12+
13+
<style>
14+
html {
15+
color:black;
16+
font-family: sans-serif;
17+
}
18+
19+
body {
20+
margin: 0;
21+
}
22+
23+
.hero {
24+
min-height: 100vh;
25+
display:flex;
26+
justify-content: center;
27+
align-items: center;
28+
color:black;
29+
}
30+
31+
32+
h1 {
33+
text-shadow: 10px 10px 0 rgba(0,0,0,1);
34+
font-size: 100px;
35+
}
36+
</style>
37+
38+
<script>
39+
const hero = document.querySelector('.hero');
40+
const text = hero.querySelector('h1');
41+
const walk = 500; // 100px
42+
43+
function shadow(e) {
44+
const { offsetWidth: width, offsetHeight: height } = hero;
45+
let { offsetX: x, offsetY: y } = e;
46+
47+
if (this !== e.target) {
48+
x = x + e.target.offsetLeft;
49+
y = y + e.target.offsetTop;
50+
}
51+
52+
const xWalk = Math.round((x / width * walk) - (walk / 2));
53+
const yWalk = Math.round((y / height * walk) - (walk / 2));
54+
55+
text.style.textShadow = `
56+
${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
57+
${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
58+
${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
59+
${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
60+
`;
61+
62+
}
63+
64+
hero.addEventListener('mousemove', shadow);
65+
</script>
66+
</body>
67+
</html>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
30+
</script>
31+
</body>
32+
</html>
33+
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)

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