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 92ff1ed

Browse files
add task06 and update the answer of task 05
1 parent 7a41118 commit 92ff1ed

File tree

3 files changed

+244
-0
lines changed

3 files changed

+244
-0
lines changed
Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Flex Panels 💪</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
</head>
8+
<body>
9+
<style>
10+
html {
11+
box-sizing: border-box;
12+
background:#ffc600;
13+
font-family:'helvetica neue';
14+
font-size: 20px;
15+
font-weight: 200;
16+
}
17+
body {
18+
margin: 0;
19+
}
20+
*, *:before, *:after {
21+
box-sizing: inherit;
22+
}
23+
24+
.panels {
25+
min-height:100vh;
26+
overflow: hidden;
27+
display: flex;
28+
}
29+
30+
.panel {
31+
background:#6B0F9C;
32+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
33+
color:white;
34+
text-align: center;
35+
align-items:center;
36+
/* Safari transitionend event.propertyName === flex */
37+
/* Chrome + FF transitionend event.propertyName === flex-grow */
38+
transition:
39+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
41+
background 0.2s;
42+
font-size: 20px;
43+
background-size:cover;
44+
background-position:center;
45+
flex: 1;
46+
justify-content: center;
47+
display: flex;
48+
flex-direction: column;
49+
}
50+
51+
52+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
53+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
54+
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
55+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
56+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
57+
58+
/* Flex Items */
59+
.panel > * {
60+
margin:0;
61+
width: 100%;
62+
transition:transform 0.5s;
63+
flex: 1 0 auto;
64+
display:flex;
65+
justify-content: center;
66+
align-items: center;
67+
}
68+
69+
.panel > *:first-child { transform: translateY(-100%); }
70+
.panel.open-active > *:first-child { transform: translateY(0); }
71+
.panel > *:last-child { transform: translateY(100%); }
72+
.panel.open-active > *:last-child { transform: translateY(0); }
73+
74+
.panel p {
75+
text-transform: uppercase;
76+
font-family: 'Amatic SC', cursive;
77+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
78+
font-size: 2em;
79+
}
80+
.panel p:nth-child(2) {
81+
font-size: 4em;
82+
}
83+
84+
.panel.open {
85+
flex: 5;
86+
font-size:40px;
87+
}
88+
89+
</style>
90+
91+
92+
<div class="panels">
93+
<div class="panel panel1">
94+
<p>Hey</p>
95+
<p>Let's</p>
96+
<p>Dance</p>
97+
</div>
98+
<div class="panel panel2">
99+
<p>Give</p>
100+
<p>Take</p>
101+
<p>Receive</p>
102+
</div>
103+
<div class="panel panel3">
104+
<p>Experience</p>
105+
<p>It</p>
106+
<p>Today</p>
107+
</div>
108+
<div class="panel panel4">
109+
<p>Give</p>
110+
<p>All</p>
111+
<p>You can</p>
112+
</div>
113+
<div class="panel panel5">
114+
<p>Life</p>
115+
<p>In</p>
116+
<p>Motion</p>
117+
</div>
118+
</div>
119+
120+
<script>
121+
const panels = document.querySelectorAll('.panel');
122+
123+
function toggleOpen() {
124+
console.log('Hello');
125+
this.classList.toggle('open');
126+
}
127+
128+
function toggleActive(e) {
129+
console.log(e.propertyName);
130+
if (e.propertyName.includes('flex')) {
131+
this.classList.toggle('open-active');
132+
}
133+
}
134+
135+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
136+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
137+
</script>
138+
139+
</body>
140+
</html>

‎06 - Type Ahead/index-START.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="City or State">
12+
<ul class="suggestions">
13+
<li>Filter for a city</li>
14+
<li>or a state</li>
15+
</ul>
16+
</form>
17+
<script>
18+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
const cities = []; //通过下面的方式可以异步获取到所有的城市名字
20+
fetch(endpoint)
21+
.then(blob => blob.json())
22+
.then(data => cities.push(...data));
23+
24+
25+
</script>
26+
</body>
27+
</html>

‎06 - Type Ahead/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
html {
2+
box-sizing: border-box;
3+
background:#ffc600;
4+
font-family:'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
input {
12+
width: 100%;
13+
padding:20px;
14+
}
15+
16+
.search-form {
17+
max-width:400px;
18+
margin:50px auto;
19+
}
20+
21+
input.search {
22+
margin: 0;
23+
text-align: center;
24+
outline:0;
25+
border: 10px solid #F7F7F7;
26+
width: 120%;
27+
left: -10%;
28+
position: relative;
29+
top: 10px;
30+
z-index: 2;
31+
border-radius: 5px;
32+
font-size: 40px;
33+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
34+
}
35+
36+
37+
.suggestions {
38+
margin: 0;
39+
padding: 0;
40+
position: relative;
41+
/*perspective:20px;*/
42+
}
43+
.suggestions li {
44+
background:white;
45+
list-style: none;
46+
border-bottom: 1px solid #D8D8D8;
47+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
48+
margin:0;
49+
padding:20px;
50+
transition:background 0.2s;
51+
display:flex;
52+
justify-content:space-between;
53+
text-transform: capitalize;
54+
}
55+
56+
.suggestions li:nth-child(even) {
57+
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
58+
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
59+
}
60+
.suggestions li:nth-child(odd) {
61+
transform: perspective(100px) rotateX(-3deg) translateY(3px);
62+
background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
63+
}
64+
65+
span.population {
66+
font-size: 15px;
67+
}
68+
69+
.hl {
70+
background:#ffc600;
71+
}
72+
73+
a {
74+
color:black;
75+
background:rgba(0,0,0,0.1);
76+
text-decoration: none;
77+
}

0 commit comments

Comments
(0)

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