Skip to content

Commit 49b2dda

Browse files
n3218n3218
committed
wesbos#5 done
1 parent 098a4da commit 49b2dda

File tree

2 files changed

+93
-71
lines changed

2 files changed

+93
-71
lines changed

‎05 - Flex Panel Gallery/index-START.html

Lines changed: 13 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,77 +4,9 @@
44
<meta charset="UTF-8">
55
<title>Flex Panels 💪</title>
66
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css" />
78
</head>
89
<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-
18-
body {
19-
margin: 0;
20-
}
21-
22-
*, *:before, *:after {
23-
box-sizing: inherit;
24-
}
25-
26-
.panels {
27-
min-height: 100vh;
28-
overflow: hidden;
29-
}
30-
31-
.panel {
32-
background: #6B0F9C;
33-
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
34-
color: white;
35-
text-align: center;
36-
align-items: center;
37-
/* Safari transitionend event.propertyName === flex */
38-
/* Chrome + FF transitionend event.propertyName === flex-grow */
39-
transition:
40-
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
41-
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
42-
background 0.2s;
43-
font-size: 20px;
44-
background-size: cover;
45-
background-position: center;
46-
}
47-
48-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
49-
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
50-
.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); }
51-
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
52-
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
53-
54-
/* Flex Children */
55-
.panel > * {
56-
margin: 0;
57-
width: 100%;
58-
transition: transform 0.5s;
59-
}
60-
61-
.panel p {
62-
text-transform: uppercase;
63-
font-family: 'Amatic SC', cursive;
64-
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
65-
font-size: 2em;
66-
}
67-
68-
.panel p:nth-child(2) {
69-
font-size: 4em;
70-
}
71-
72-
.panel.open {
73-
font-size: 40px;
74-
}
75-
76-
</style>
77-
7810

7911
<div class="panels">
8012
<div class="panel panel1">
@@ -105,10 +37,20 @@
10537
</div>
10638

10739
<script>
40+
const panels = document.querySelectorAll('.panel');
41+
function toggleOpen() {
42+
this.classList.toggle('open');
43+
}
44+
function toggleOpenActive(e) {
45+
console.log(e.propertyName);
46+
if (e.propertyName.includes('flex')) {
47+
this.classList.toggle('active-open');
48+
}
49+
}
50+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
51+
panels.forEach(panel => panel.addEventListener('transitionend', toggleOpenActive));
10852

10953
</script>
11054

111-
112-
11355
</body>
11456
</html>

‎05 - Flex Panel Gallery/style.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
html {
2+
box-sizing: border-box;
3+
font-family: 'helvetica neue';
4+
font-size: 20px;
5+
font-weight: 200;
6+
}
7+
8+
body {
9+
margin: 0;
10+
}
11+
12+
*, *:before, *:after {
13+
box-sizing: inherit;
14+
}
15+
16+
.panels {
17+
min-height: 100vh;
18+
overflow: hidden;
19+
display: flex;
20+
}
21+
22+
.panel {
23+
flex: 1;
24+
background: #6B0F9C;
25+
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
26+
color: white;
27+
text-align: center;
28+
align-items: center;
29+
/* Safari transitionend event.propertyName === flex */
30+
/* Chrome + FF transitionend event.propertyName === flex-grow */
31+
transition:
32+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
33+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
34+
background 0.2s;
35+
font-size: 20px;
36+
background-size: cover;
37+
background-position: center;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: center;
41+
42+
}
43+
44+
.panel1 { background-image:url(https://scontent-sjc3-1.cdninstagram.com/vp/8d0887f308bb3fe8c3d42a87ec4cb84b/5DB854DD/t51.2885-15/e35/p1080x1080/61329834_2082479698541552_625177425115252861_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com); }
45+
.panel2 { background-image:url(https://scontent-sjc3-1.cdninstagram.com/vp/da17dcc4a694d394d694aa7a856c4e42/5DB6E59A/t51.2885-15/e35/p1080x1080/62536344_145039079912953_1242712127152841146_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com); }
46+
.panel3 { background-image:url(https://scontent-sjc3-1.cdninstagram.com/vp/f3b9f7fdb60e2e427731820355b220e1/5DC4A8A9/t51.2885-15/e35/p1080x1080/61127117_2217291751653867_2588097884125964879_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com); }
47+
.panel4 { background-image:url(https://scontent-sjc3-1.cdninstagram.com/vp/1c6240c47867984e0a453f532e42efdd/5DBF5605/t51.2885-15/e35/56862491_2231333487196451_3985131880808614168_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com); }
48+
.panel5 { background-image:url(https://scontent-sjc3-1.cdninstagram.com/vp/ca98cc594a2896560f62849b571ad6bd/5DC5AC0B/t51.2885-15/e35/53361298_2230907753894154_5834238327234797150_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com); }
49+
50+
/* Flex Children */
51+
.panel > * {
52+
margin: 0;
53+
width: 100%;
54+
transition: transform 0.5s;
55+
flex: 1;
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
}
60+
61+
.panel > *:first-child { transform: translateY( -100%); }
62+
.panel.active-open > *:first-child { transform: translateY(0); }
63+
.panel > *:last-child { transform: translateY( 100%); }
64+
.panel.active-open > *:last-child { transform: translateY(0); }
65+
66+
.panel p {
67+
text-transform: uppercase;
68+
font-family: 'Amatic SC', cursive;
69+
text-shadow: 0 0 4px rgba(0.5, 0, 0, 0.72), 0 0 14px rgba(0.5, 0, 0, 0.75);
70+
font-size: 2em;
71+
}
72+
73+
.panel p:nth-child(2) {
74+
font-size: 4em;
75+
}
76+
77+
.panel.open {
78+
font-size: 40px;
79+
flex: 5;
80+
}

0 commit comments

Comments
 (0)