Skip to content

Commit 361a6e9

Browse files
mancristianamancristiana
committed
Day wesbos#5 Flex Panel Gallery
1 parent 83006cd commit 361a6e9

File tree

2 files changed

+65
-150
lines changed

2 files changed

+65
-150
lines changed

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

Lines changed: 0 additions & 111 deletions
This file was deleted.

‎05 - Flex Panel Gallery/index-FINISHED.html renamed to ‎05 - Flex Panel Gallery/index.html

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,116 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Flex Panels 💪</title>
67
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
78
</head>
9+
810
<body>
911
<style>
1012
html {
1113
box-sizing: border-box;
12-
background:#ffc600;
13-
font-family:'helvetica neue';
14+
background: #ffc600;
15+
font-family: 'helvetica neue';
1416
font-size: 20px;
1517
font-weight: 200;
1618
}
19+
1720
body {
1821
margin: 0;
1922
}
20-
*, *:before, *:after {
23+
24+
*,
25+
*:before,
26+
*:after {
2127
box-sizing: inherit;
2228
}
2329

2430
.panels {
25-
min-height:100vh;
31+
min-height: 100vh;
2632
overflow: hidden;
2733
display: flex;
2834
}
2935

3036
.panel {
31-
background:#6B0F9C;
32-
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
33-
color:white;
37+
flex: 1;
38+
background: #6B0F9C;
39+
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
40+
color: white;
3441
text-align: center;
35-
align-items:center;
42+
align-items: center;
3643
/* Safari transitionend event.propertyName === flex */
3744
/* 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;
45+
transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
46+
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
47+
background 0.2s;
4248
font-size: 20px;
43-
background-size:cover;
44-
background-position:center;
45-
flex: 1;
46-
justify-content: center;
49+
background-size: cover;
50+
background-position: center;
4751
display: flex;
4852
flex-direction: column;
4953
}
5054

5155

52-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
53-
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/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); }
56+
.panel1 {
57+
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
58+
}
59+
60+
.panel2 {
61+
background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
62+
}
63+
64+
.panel3 {
65+
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);
66+
}
5767

58-
/* Flex Items */
59-
.panel > * {
60-
margin:0;
68+
.panel4 {
69+
background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
70+
}
71+
72+
.panel5 {
73+
background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
74+
}
75+
76+
.panel>* {
77+
margin: 0;
6178
width: 100%;
62-
transition:transform 0.5s;
79+
transition: transform 0.5s;
6380
flex: 1 0 auto;
64-
display:flex;
65-
justify-content: center;
66-
align-items: center;
81+
display: flex;
82+
}
83+
84+
.panel>*:first-child {
85+
transform: translateY(-100%)
86+
}
87+
88+
.panel>*:last-child {
89+
transform: translateY(+100%)
90+
}
91+
92+
.panel.open-active>* {
93+
transform: translateY(0)
6794
}
6895

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); }
7396

7497
.panel p {
7598
text-transform: uppercase;
7699
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);
100+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
78101
font-size: 2em;
102+
justify-content: center;
103+
align-items: center;
79104
}
105+
80106
.panel p:nth-child(2) {
81107
font-size: 4em;
82108
}
83109

84110
.panel.open {
85111
flex: 5;
86-
font-size:40px;
112+
font-size: 40px;
87113
}
88-
89114
</style>
90115

91116

@@ -121,20 +146,21 @@
121146
const panels = document.querySelectorAll('.panel');
122147

123148
function toggleOpen() {
124-
console.log('Hello');
125149
this.classList.toggle('open');
126150
}
127-
128151
function toggleActive(e) {
129-
console.log(e.propertyName);
130152
if (e.propertyName.includes('flex')) {
131153
this.classList.toggle('open-active');
132154
}
133155
}
134156

135157
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
136158
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
159+
137160
</script>
138161

162+
163+
139164
</body>
140-
</html>
165+
166+
</html>

0 commit comments

Comments
 (0)