Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ef9e560

Browse files
committed
learned some flex and transitions!
1 parent 18d1a95 commit ef9e560

File tree

2 files changed

+5
-121
lines changed

2 files changed

+5
-121
lines changed

05 - Flex Panel Gallery/index-START.html

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

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
background-position:center;
4545
flex: 1;
4646
justify-content: center;
47+
align-items: center;
4748
display: flex;
4849
flex-direction: column;
4950
}
@@ -55,13 +56,12 @@
5556
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
5657
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
5758

58-
/* Flex Items */
5959
.panel > * {
6060
margin:0;
6161
width: 100%;
6262
transition:transform 0.5s;
6363
flex: 1 0 auto;
64-
display:flex;
64+
display: flex;
6565
justify-content: center;
6666
align-items: center;
6767
}
@@ -82,8 +82,8 @@
8282
}
8383

8484
.panel.open {
85-
flex: 5;
8685
font-size:40px;
86+
flex: 5;
8787
}
8888

8989
.cta {
@@ -126,12 +126,10 @@
126126
const panels = document.querySelectorAll('.panel');
127127

128128
function toggleOpen() {
129-
console.log('Hello');
130129
this.classList.toggle('open');
131130
}
132131

133132
function toggleActive(e) {
134-
console.log(e.propertyName);
135133
if (e.propertyName.includes('flex')) {
136134
this.classList.toggle('open-active');
137135
}
@@ -141,5 +139,7 @@
141139
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
142140
</script>
143141

142+
143+
144144
</body>
145145
</html>

0 commit comments

Comments
 (0)