Skip to content

Commit 007a7a0

Browse files
tfrommentfrommen
committed
Day 5.
1 parent 05a7d98 commit 007a7a0

2 files changed

Lines changed: 198 additions & 0 deletions

File tree

‎05 - Flex Panel Gallery/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
11+
<div class="panels">
12+
<div class="panel panel1">
13+
<p>Hey</p>
14+
<p>Let's</p>
15+
<p>Dance</p>
16+
</div>
17+
<div class="panel panel2">
18+
<p>Give</p>
19+
<p>Take</p>
20+
<p>Receive</p>
21+
</div>
22+
<div class="panel panel3">
23+
<p>Experience</p>
24+
<p>It</p>
25+
<p>Today</p>
26+
</div>
27+
<div class="panel panel4">
28+
<p>Give</p>
29+
<p>All</p>
30+
<p>You can</p>
31+
</div>
32+
<div class="panel panel5">
33+
<p>Life</p>
34+
<p>In</p>
35+
<p>Motion</p>
36+
</div>
37+
</div>
38+
39+
<script>
40+
const panels = Array.from( document.querySelectorAll( '.panel' ) );
41+
42+
panels.forEach( ( el ) => {
43+
el.addEventListener( 'click', handleClick );
44+
el.addEventListener( 'transitionend', handleTransition );
45+
} );
46+
47+
function handleClick() {
48+
if ( this.classList.contains( 'open' ) ) {
49+
closePanel( this );
50+
51+
return;
52+
}
53+
54+
openPanel( this );
55+
}
56+
57+
function openPanel( panel ) {
58+
panels.filter( ( el ) => ( el !== panel ) ).forEach( closePanel );
59+
60+
panel.classList.add( 'open' );
61+
}
62+
63+
function closePanel( panel ) {
64+
if ( panel.classList.contains( 'open' ) ) {
65+
panel.classList.add( 'closing' );
66+
}
67+
68+
panel.classList.remove( 'open-active' );
69+
}
70+
71+
function handleTransition( e ) {
72+
if ( this.classList.contains( 'closing' ) ) {
73+
if (
74+
( this.classList.contains( 'open' ) && e.propertyName.contains( 'flex' ) )
75+
|| 'transform' === e.propertyName
76+
) {
77+
this.classList.remove( 'open' );
78+
this.classList.remove( 'closing' );
79+
}
80+
81+
return;
82+
}
83+
84+
if ( this.classList.contains( 'open' ) && e.propertyName.contains( 'flex' ) ) {
85+
this.classList.add( 'open-active' );
86+
}
87+
}
88+
</script>
89+
90+
</body>
91+
</html>

‎05 - Flex Panel Gallery/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: inherit;
5+
}
6+
7+
html {
8+
box-sizing: border-box;
9+
background: #ffc600;
10+
font-family: 'helvetica neue', sans-serif;
11+
font-size: 20px;
12+
font-weight: 200;
13+
}
14+
15+
body {
16+
margin: 0;
17+
}
18+
19+
.panels {
20+
display: flex;
21+
min-height: 100vh;
22+
overflow: hidden;
23+
}
24+
25+
.panel {
26+
display: flex;
27+
flex-direction: column;
28+
flex: 1;
29+
background: #6b0f9c center;
30+
background-size: cover;
31+
color: white;
32+
font-size: 20px;
33+
align-items: center;
34+
justify-content: center;
35+
text-align: center;
36+
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
37+
/* Safari transitionend event.propertyName === flex */
38+
/* Chrome + FF transitionend event.propertyName === flex-grow */
39+
transition: 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+
}
43+
44+
.panel1 {
45+
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
46+
}
47+
48+
.panel2 {
49+
background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
50+
}
51+
52+
.panel3 {
53+
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);
54+
}
55+
56+
.panel4 {
57+
background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
58+
}
59+
60+
.panel5 {
61+
background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
62+
}
63+
64+
.panel > * {
65+
display: flex;
66+
flex: 1 0 auto;
67+
margin: 0;
68+
width: 100%;
69+
align-items: center;
70+
justify-content: center;
71+
transition: transform 0.5s;
72+
}
73+
74+
.panel > :first-child {
75+
transform: translateY(-100%);
76+
}
77+
78+
.panel > :last-child {
79+
transform: translateY(100%);
80+
}
81+
82+
.panel.open-active > :first-child,
83+
.panel.open-active > :last-child {
84+
transform: translateY(0);
85+
}
86+
87+
.panel p {
88+
font-family: 'Amatic SC', cursive;
89+
font-size: 2em;
90+
text-transform: uppercase;
91+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72),
92+
0 0 14px rgba(0, 0, 0, 0.45);
93+
}
94+
95+
.panel p:nth-child(2) {
96+
font-size: 4em;
97+
}
98+
99+
.panel.open {
100+
flex: 4;
101+
font-size: 40px;
102+
}
103+
104+
.cta {
105+
color: white;
106+
text-decoration: none;
107+
}

0 commit comments

Comments
 (0)