Skip to content

Commit 75968f7

Browse files
Weirdo1312Weirdo1312
committed
easter-egg and dark mode
1 parent a8e81d4 commit 75968f7

File tree

6 files changed

+85
-22
lines changed

6 files changed

+85
-22
lines changed

‎aot.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
audio {
2+
display: none;
3+
}
4+
5+
html {
6+
background-image: url(https://raw.githubusercontent.com/Weirdo1312/testing/main/aot.gif);
7+
background-size: cover;
8+
background-repeat: no-repeat;
9+
}

‎aot.gif

1.73 MB
Loading

‎aot.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
<link rel="stylesheet" href="aot.css">
7+
<title>shinzou wo sasageyo</title>
8+
</head>
9+
<body>
10+
<audio src="https://raw.githubusercontent.com/Weirdo1312/testing/main/aot.mp3" autoplay></audio>
11+
</body>
12+
</html>

‎aot.mp3

47.3 KB
Binary file not shown.

‎index.html

+13-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,19 @@
22
<html>
33
<head>
44
<meta charset="UTF-8" />
5-
<title>test</title>
5+
<title>Testing Ground</title>
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
9+
<!--Hamburger Menu-->
910
<input type="checkbox" id="sidebar-toggle">
1011
<label for="sidebar-toggle" id="closed-hamburger-menu" class="sidebar-toggle-button">&#9776;</label>
1112
<label for="sidebar-toggle" id="opened-hamburger-menu" class="sidebar-toggle-button">&#x2715;</label>
13+
<!--Dark Mode Toggle-->
14+
<span></span>
15+
<input type="checkbox" id="theme-toggle"/>
16+
<label class="theme-toggle-button" for="theme-toggle"></label>
17+
<!--Main Screen-->
1218
<div class="main">
1319
<div class="container">
1420
<h1 class="title">تست</h1>
@@ -18,11 +24,16 @@ <h5 class="content" dir="rtl">لورم ایپسوم متن ساختگی با ت
1824
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
1925
</h5>
2026
</div>
27+
<!--Side Bar-->
2128
<div class="sidebar">
29+
<!--Sidebar Links-->
2230
<a id="home" href="#">صفحه اصلی 🏠</a>
2331
<a id="services" href="#">خدمات 💪</a>
2432
<a id="contact" href="#">ارتباط با ما 📞</a>
25-
<img id="logo" src="https://raw.githubusercontent.com/Weirdo1312/testing/main/wings.png" alt="wings-of-freedom">
33+
<!--Easter Egg-->
34+
<a class="easter-egg-button" href="https://raw.githubusercontent.com/Weirdo1312/testing/main/aot.html">
35+
<img src="https://raw.githubusercontent.com/Weirdo1312/testing/main/wings.png" alt="wings-of-freedom">
36+
</a>
2637
</div>
2738
</body>
2839
</html>

‎style.css

+51-20
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
.container {
22
text-align: center;
3-
padding: 10px;
3+
padding-top: 100px;
44
}
55

66
.title {
77
font-size: 800%;
88
font-weight: bold;
99
text-align: center;
1010
padding: 2px;
11-
border: 2px solid MediumSeaGreen;
12-
border-radius: 10px;
1311
display: inline;
14-
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
1512
}
1613

1714
.content {
1815
padding: 100px;
1916
padding-top: 0;
2017
font-size: 250%;
21-
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
2218
text-align: center;
23-
color: rgb(50, 50, 50);
24-
}
25-
26-
body {
27-
background-color: AntiqueWhite;
2819
}
2920

30-
.main {
21+
.main {
22+
color: #323232;
23+
background-color:#faebd7;
3124
transition: 200ms all ease;
25+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
3226
}
3327

3428
.sidebar {
@@ -47,15 +41,16 @@ body {
4741
.sidebar a {
4842
display: block;
4943
color: white;
50-
padding: 50px;
44+
padding: 40px;
5145
text-decoration: none;
5246
transition: 200ms all;
53-
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
47+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
5448
}
5549

5650

57-
.sidebar #logo {
58-
padding-top: 60%;
51+
.easter-egg-button {
52+
position: relative;
53+
bottom: -450px;
5954
}
6055

6156
#sidebar-toggle {
@@ -89,13 +84,49 @@ body {
8984

9085
#sidebar-toggle:checked ~ .sidebar {
9186
right: 0px;
87+
box-shadow: 0px 0px 200px 500px hsla(0, 0%, 0%, 0.732);
9288
}
9389

94-
#sidebar-toggle:checked ~ .main {
95-
filter: blur(5px);
96-
user-select: none;
90+
.sidebar > a:hover {
91+
color: #323232;
9792
}
9893

99-
.sidebar > a:hover {
100-
color: rgb(0, 0, 0)
94+
.theme-toggle-button::before {
95+
content: "☀️";
96+
font-size: 510%;
97+
position: absolute;
98+
top: 2%;
99+
left: 2%;
100+
width: 100px;
101+
height: 100px;
102+
background-color: white;
103+
border-radius: 50%;
104+
transition: transform 200ms;
105+
}
106+
107+
#theme-toggle {
108+
display: none;
109+
}
110+
111+
#theme-toggle:checked + .theme-toggle-button {
112+
background-color: #323232;
113+
}
114+
115+
#theme-toggle:checked + .theme-toggle-button::before {
116+
content: "🌑";
117+
}
118+
119+
#theme-toggle:checked ~ .main {
120+
background: radial-gradient(circle at center, #051428, #051428 92%, #faebd7 70%, #faebd7);
121+
color: #faebd7;
122+
}
123+
124+
#theme-toggle:checked ~ .sidebar {
125+
background-color: #102f1e;
126+
}
127+
128+
129+
130+
.easter-egg {
131+
display: none;
101132
}

0 commit comments

Comments
 (0)