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 c115c69

Browse files
Update fun with HTML5 canvas project
1 parent f2f98f5 commit c115c69

File tree

2 files changed

+49
-2
lines changed

2 files changed

+49
-2
lines changed

β€Ž08 - Fun with HTML5 Canvas/css/style.css

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
box-sizing: border-box;
45
}
56

67
html {
78
font-size: 10px;
89
}
910

1011
body {
11-
background-color: #eaf6f554;
12+
background-color: #dbefe547;
1213
overflow: hidden;
1314
display: flex;
1415
justify-content: center;
1516
align-items: center;
1617
min-height: 100vh;
18+
font-family: "Finger Paint", cursive;
1719
}
1820

1921
#text {
2022
color: #8a2be2;
2123
position: absolute;
22-
font: 4rem"Finger Paint", cursive;
24+
font-size: 4rem;
2325
animation: fade 1s ease;
2426
user-select: none;
2527
}
@@ -33,3 +35,38 @@ body {
3335
opacity: 1;
3436
}
3537
}
38+
39+
@media screen and (max-width: 1007px) {
40+
body::after {
41+
content: "Visit in desktop for the best experience.";
42+
background-image: linear-gradient(217deg, #47d1c8, #ff000000 70.71%),
43+
linear-gradient(127deg, #47d198, #00ff0000 70.71%),
44+
linear-gradient(336deg, #47aad1, #0000ff00 70.71%);
45+
width: 100vw;
46+
min-height: 100vh;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
text-align: center;
51+
font-size: 3.4rem;
52+
padding: 0 1.5rem;
53+
color: #2b7ae2;
54+
}
55+
56+
#text,
57+
#canvas {
58+
display: none;
59+
}
60+
}
61+
62+
@media screen and (max-width: 750px) {
63+
html {
64+
font-size: 8px;
65+
}
66+
}
67+
68+
@media screen and (max-width: 550px) {
69+
html {
70+
font-size: 7px;
71+
}
72+
}

β€Ž08 - Fun with HTML5 Canvas/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<!-- title -->
45
<title>HTML5 Canvas</title>
56

67
<!-- required meta tags -->
78
<meta charset="UTF-8" />
89
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
910
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<meta name="theme-color" content="#f0faf9" />
1012

1113
<!-- favicon -->
1214
<link rel="icon" href="img/fish.png" />
1315

16+
<!-- google font -->
17+
<link rel="preconnect" href="https://fonts.googleapis.com" />
18+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
19+
<link
20+
href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap"
21+
rel="stylesheet"
22+
/>
23+
1424
<!-- style -->
1525
<link rel="stylesheet" href="css/style.css" />
1626
</head>

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /