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 2b0231d

Browse files
day 13 js ready
1 parent 2506e4d commit 2b0231d

File tree

4 files changed

+93
-67
lines changed

4 files changed

+93
-67
lines changed

‎day12/STARTER-FILES/styles.css

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap");
22

33
body {
44
min-width: 100vw;
55
min-height: 100vh;
6-
font-family: 'Roboto Mono', monospace;
6+
font-family: "Roboto Mono", monospace;
77
display: flex;
88
justify-content: center;
99
align-items: center;
1010
}
1111

1212
.wrapper {
13-
1413
}
1514

1615
h1 {
1716
font-weight: bold;
1817
font-size: 2rem;
19-
text-align: center;;
18+
text-align: center;
2019
margin-bottom: 75px;
2120
}
2221

@@ -36,7 +35,7 @@ li.pick-one {
3635
li.pick-one button {
3736
background: none;
3837
border: 2px solid black;
39-
font-family: 'Roboto Mono', monospace;
38+
font-family: "Roboto Mono", monospace;
4039
cursor: pointer;
4140
height: 355px;
4241
width: 325px;
@@ -48,7 +47,7 @@ li.pick-one button {
4847
}
4948

5049
li.pick-one button:hover {
51-
border: 10px solid #FFB800;
50+
border: 10px solid #ffb800;
5251
}
5352

5453
li.pick-one img {
@@ -58,12 +57,12 @@ li.pick-one img {
5857

5958
/* Winner Page */
6059
body.winner.you-win {
61-
background: url('./images/you-win.svg') left top no-repeat;
60+
background: url("./images/you-win.svg") left top no-repeat;
6261
background-size: auto 100%;
6362
}
6463

6564
body.winner.computer-wins {
66-
background: url('./images/computer-wins.svg') right top no-repeat;
65+
background: url("./images/computer-wins.svg") right top no-repeat;
6766
background-size: auto 100%;
6867
}
6968

@@ -79,7 +78,7 @@ body.winner .wrapper {
7978
}
8079

8180
body.winner img {
82-
mix-blend-mode: multiply;;
81+
mix-blend-mode: multiply;
8382
}
8483

8584
.computer-pick img {
@@ -91,7 +90,7 @@ body.winner img {
9190
left: 50%;
9291
transform: translateX(-50%);
9392
bottom: 0;
94-
font-family: 'Roboto Mono', monospace;
93+
font-family: "Roboto Mono", monospace;
9594
font-size: 2rem;
9695
border: 2px solid black;
9796
background: none;
@@ -102,4 +101,4 @@ body.winner img {
102101
.play-again:hover {
103102
background: black;
104103
color: white;
105-
}
104+
}
Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,70 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>13 - Custom Modal || Advent of JavaScript</title>
8+
<link rel="stylesheet" href="./styles.css" />
9+
</head>
310

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>13 - Custom Modal || Advent of JavaScript</title>
9-
<link rel="stylesheet" href="./styles.css" />
10-
</head>
11+
<body>
12+
<div class="wrapper">
13+
<svg
14+
viewBox="0 0 1440 1024"
15+
fill="none"
16+
xmlns="http://www.w3.org/2000/svg"
17+
xmlns:xlink="http://www.w3.org/1999/xlink"
18+
>
19+
<image href="images/bg.jpg" width="1440" height="1024" />
20+
<a href="#" id="something">
21+
<circle
22+
class="dot"
23+
cx="136.5"
24+
cy="113.5"
25+
r="17.5"
26+
id="elgato-keylight"
27+
/>
28+
<circle
29+
id="my-circle"
30+
cx="136.5"
31+
cy="113.5"
32+
r="22"
33+
stroke="#F41E82"
34+
stroke-width="6px"
35+
opacity="0"
36+
/>
37+
</a>
38+
</svg>
1139

12-
<body>
13-
<div class="wrapper">
14-
<svg viewBox="0 0 1440 1024" fill="none" xmlns="http://www.w3.org/2000/svg"
15-
xmlns:xlink="http://www.w3.org/1999/xlink">
16-
<image href="images/bg.jpg" width="1440" height="1024" />
17-
<a href="#" id="something">
18-
<circle class="dot" cx="136.5" cy="113.5" r="17.5" id="elgato-keylight" />
19-
<circle id="my-circle" cx="136.5" cy="113.5" r="22" stroke="#F41E82" stroke-width="6px" opacity="0" />
20-
</a>
21-
</svg>
40+
<div class="overlay">
41+
<div class="modal">
42+
<button class="close">
43+
<img src="images/close.svg" alt="Close" />
44+
</button>
2245

23-
<div class="overlay">
24-
<div class="modal">
25-
<button class="close">
26-
<img src="images/close.svg" alt="Close" />
27-
</button>
28-
29-
<div class="content">
30-
<h1>Elgato Key Lights</h1>
31-
<div class="description">
32-
<p>
33-
These lights are great if you shoot video at your desk.
34-
</p>
35-
<p>
36-
My desk is pushed up against the wall, so I didn’t have room for a large soft box. These lights still
37-
deliver on the
38-
look that I wanted. Plus, it comes with a desktop app where you can adjust the brightness and temperature.
39-
</p>
46+
<div class="content">
47+
<h1>Elgato Key Lights</h1>
48+
<div class="description">
49+
<p>These lights are great if you shoot video at your desk.</p>
50+
<p>
51+
My desk is pushed up against the wall, so I didn’t have room for
52+
a large soft box. These lights still deliver on the look that I
53+
wanted. Plus, it comes with a desktop app where you can adjust
54+
the brightness and temperature.
55+
</p>
56+
</div>
57+
<a href="http://amazon.com" class="buy-now" target="_blank">
58+
BUY NOW for 169ドル.99
59+
</a>
4060
</div>
41-
<a href="http://amazon.com" class="buy-now" target="_blank">
42-
BUY NOW for 169ドル.99
43-
</a>
44-
</div>
4561

46-
<div class="product-image">
47-
<img src="images/elgato-key-light.png" alt="Elgato Key Light" />
62+
<div class="product-image">
63+
<img src="images/elgato-key-light.png" alt="Elgato Key Light" />
64+
</div>
4865
</div>
49-
5066
</div>
5167
</div>
52-
</div>
53-
</body>
54-
55-
</html>
68+
<script src="/day13/13__PROJECT-FILES/js.js"></script>
69+
</body>
70+
</html>

‎day13/13__PROJECT-FILES/STARTER-FILES/styles.css

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Roboto:wght@400;700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Roboto:wght@400;700&display=swap");
22

33
:root {
4-
--pink: #F41E82;
5-
--gold: #FFD200;
4+
--pink: #f41e82;
5+
--gold: #ffd200;
66
}
77

8-
98
body {
109
margin: 0;
1110
padding: 0;
1211
min-width: 100vw;
1312
min-height: 100vh;
1413
background: black;
15-
font-family: 'Roboto', sans-serif;
14+
font-family: "Roboto", sans-serif;
1615
}
1716

1817
.wrapper {
@@ -94,23 +93,23 @@ a:hover #my-circle {
9493
}
9594

9695
h1 {
97-
font-family: 'Oswald', sans-serif;
96+
font-family: "Oswald", sans-serif;
9897
text-transform: uppercase;
9998
color: var(--pink);
10099
font-size: 8rem;
101100
font-weight: 700;
102-
letter-spacing: -.5px;
101+
letter-spacing: -0.5px;
103102
padding: 0;
104103
margin: 0 0 50px;
105-
line-height: .9;
104+
line-height: 0.9;
106105
}
107106

108107
.description {
109108
margin-bottom: 50px;
110109
}
111110

112111
p {
113-
font-family: 'Roboto', sans-serif;
112+
font-family: "Roboto", sans-serif;
114113
font-size: 1.125rem;
115114
line-height: 1.5;
116115
}
@@ -119,7 +118,7 @@ p {
119118
background-color: var(--gold);
120119
color: black;
121120
border-radius: 100px;
122-
font-family: 'Roboto', sans-serif;
121+
font-family: "Roboto", sans-serif;
123122
font-weight: 900;
124123
font-size: 1.5rem;
125124
padding: 20px 50px;
@@ -129,4 +128,8 @@ p {
129128
.buy-now:hover {
130129
background-color: #3452a5;
131130
color: var(--gold);
132-
}
131+
}
132+
133+
.hide {
134+
display: none;
135+
}

‎day13/13__PROJECT-FILES/js.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const modalWindow = document.querySelector(".overlay");
2+
3+
modalWindow.classList.add("hide");
4+
5+
document.querySelector(".close").onclick = () =>
6+
modalWindow.classList.add("hide");
7+
8+
document.querySelector(".dot").onclick = () =>
9+
modalWindow.classList.remove("hide");

0 commit comments

Comments
(0)

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