8000 add my page · CodeMacrocosm/Web-a-Thon@cf5e165 · GitHub
[go: up one dir, main page]
Skip to content

Commit cf5e165

Browse files
DearSmcDearSmc
committed
add my page
1 parent eb742ec commit cf5e165

File tree

4 files changed

+77
-0
lines changed

4 files changed

+77
-0
lines changed

‎web/Images/ahh.png

27.9 KB
Loading

‎web/Images/hup.png

23.9 KB
Loading

‎web/pages/Dear.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
8+
<link rel="stylesheet" href="../stylesheet/Dear.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<title>Just POP</title>
16+
</head>
17+
<script>
18+
const IMAGE_PATH = ["../images/hup.png", "../images/ahh.png"];
19+
let state = false;
20+
let count = 0;
21+
$(document).bind("contextmenu", function (e) {
22+
return false;
23+
});
24+
function handleOnClick() {
25+
count += 1;
26+
state = !state;
27+
document.getElementById("count").innerHTML = count;
28+
document.getElementById("image").src = IMAGE_PATH[state | 0];
29+
}
30+
</script>
31+
<body>
32+
33+
<h1 class="text">Hi! I'm Dear and I known we all love cat!!</h1>
34+
35+
<div
36+
id="container"
37+
onmousedown="return false"
38+
onselectstart="return false"
39+
oncopy="return false"
40+
onclick="handleOnClick()"
41+
>
42+
<div class="text">
43+
<h1>POP ME</h1>
44+
<h2 id="count">0</h2>
45+
</div>
46+
<img id="image" src="../images/hup.png" />
47+
</div>
48+
</body>
49+
</html>

‎web/stylesheet/Dear.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
html,body{ margin:0; padding:0; height:100%; width:100%; }
2+
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
3+
* {
4+
font-family: 'Fredoka One', cursive;
5+
}
6+
#container {
7+
height: 70%;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: space-between;
11+
align-items: center;
12+
margin: 2% 0% 2% 0%;
13+
cursor: pointer;
14+
}
15+
#image {
16+
height: 40vh;
17+
}
18+
h1 {
19+
font-size: 5em;
20+
}
21+
h2 {
22+
font-size: 3em;
23+
}
24+
.text {
25+
text-align: center;
26+
text-shadow: 2px 2px rgb(146, 79, 16);
27+
padding: 10px;
28+
}

0 commit comments

Comments
 (0)
0