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 1cc9849

Browse files
feat add task 2
1 parent c0d5a39 commit 1cc9849

11 files changed

+1706
-0
lines changed

‎2024/02/assets/christmas-carol.png

33.3 KB
Loading[フレーム]

‎2024/02/assets/christmas-vacation.png

35 KB
Loading[フレーム]

‎2024/02/assets/die-hard.png

27 KB
Loading[フレーム]

‎2024/02/assets/dropdown-arrow.svg

Lines changed: 4 additions & 0 deletions
Loading[フレーム]

‎2024/02/assets/home-alone.png

34.5 KB
Loading[フレーム]

‎2024/02/assets/its-a-wonderful-life.png

34 KB
Loading[フレーム]
35.9 KB
Loading[フレーム]

‎2024/02/assets/top-100-christmas-movies.json

Lines changed: 1502 additions & 0 deletions
Large diffs are not rendered by default.

‎2024/02/index.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
:root {
2+
--bg-light: #26c9c3;
3+
--bg-main: #f3f3f3;
4+
--bg-blue: #1aaaf2;
5+
}
6+
7+
body {
8+
display: flex;
9+
box-sizing: border-box;
10+
flex-direction: column;
11+
height: 100vh;
12+
min-height: 100vh;
13+
max-height: 100vh;
14+
overflow: hidden;
15+
background-color: rgb(215, 230, 250);
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
20+
.select-form.show {
21+
overflow: visible;
22+
}
23+
24+
.select-form {
25+
margin: auto;
26+
position: relative;
27+
width: 600px;
28+
height: 120px;
29+
min-height: 120px;
30+
border: 1px solid pink;
31+
font-size: 34px;
32+
background: var(--bg-main);
33+
overflow: hidden;
34+
color: black;
35+
}
36+
37+
input,
38+
ul {
39+
width: 100%;
40+
height: 100%;
41+
color: inherit;
42+
font-size: inherit;
43+
background: inherit;
44+
list-style-type: none;
45+
padding-left: 0px;
46+
}
47+
48+
input {
49+
padding: 20px 0;
50+
width: 80%;
51+
height: 60%;
52+
margin: 25px 80px;
53+
outline: 0;
54+
border: 1px solid transparent;
55+
box-sizing: border-box;
56+
}
57+
58+
input::placeholder {
59+
color: #26c9c3;
60+
}
61+
62+
input:focus::placeholder {
63+
color: transparent;
64+
}
65+
66+
input:focus {
67+
border-bottom: 1px solid rgb(148, 148, 148);
68+
}
69+
70+
li {
71+
height: inherit;
72+
width: inherit;
73+
font-size: inherit;
74+
background: inherit;
75+
display: block;
76+
padding: 40px 20px;
77+
max-width: 100%;
78+
max-height: 100%;
79+
box-sizing: border-box;
80+
margin-bottom: 2px;
81+
cursor: pointer;
82+
}
83+
84+
li:hover {
85+
background: var(--bg-blue);
86+
color: white;
87+
}
88+
89+
li.selected {
90+
position: absolute;
91+
left: 0;
92+
top: 0;
93+
border: 2px solid black;
94+
}
95+
96+
ul {
97+
}
98+
99+
.show ul {
100+
}

‎2024/02/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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+
<title>Document</title>
7+
<link rel="stylesheet" href="./index.css" />
8+
<script type="text/javascript" defer src="./index.js"></script>
9+
</head>
10+
<body>
11+
<div class="select-form">
12+
<input class="search" type="search" value="" placeholder="Your Favorite Holiday Movie" />
13+
<ul>
14+
<li>movie 1</li>
15+
<li>movie 2</li>
16+
<li>movie 3</li>
17+
</ul>
18+
</div>
19+
<div style="width: auto; height: 200px; font-size: 60px; margin: auto; margin-bottom: 100px">
20+
<div style="width: 100%; text-align: center; margin: 40px auto; text-decoration: none; font-size: 20px">
21+
<a style="text-decoration: none" href="https://github.com/hustle2live/Advent-of-JavaScript/">
22+
BACK TO REPO
23+
</a>
24+
</div>
25+
<a style="text-decoration: none" href="https://www.linkedin.com/in/vkuznietsov-bb066376/" target="_blank">
26+
<img
27+
style="border-radius: 50%; vertical-align: sub"
28+
src="../../ln.png"
29+
width="80"
30+
height="80"
31+
alt="github"
32+
/>
33+
</a>
34+
<a style="text-decoration: none" href="https://github.com/hustle2live" target="_blank">
35+
<img
36+
style="border-radius: 50%; vertical-align: sub"
37+
src="../../gh.ico"
38+
width="80"
39+
height="80"
40+
alt="github"
41+
/>
42+
</a>
43+
<a style="text-decoration: none" href="https://t.me/vkuznetsov28" target="_blank">
44+
<img
45+
style="border-radius: 50%; vertical-align: sub"
46+
src="../../tg.png"
47+
width="80"
48+
height="80"
49+
alt="telegram"
50+
/>
51+
</a>
52+
</div>
53+
</body>
54+
</html>

0 commit comments

Comments
(0)

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