File tree 2 files changed +5
-121
lines changed 2 files changed +5
-121
lines changed Load Diff This file was deleted.
Original file line number Diff line number Diff line change 44
44
background-position : center;
45
45
flex : 1 ;
46
46
justify-content : center;
47
+ align-items : center;
47
48
display : flex;
48
49
flex-direction : column;
49
50
}
55
56
.panel4 { background-image : url (https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
56
57
.panel5 { background-image : url (https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
57
58
58
- /* Flex Items */
59
59
.panel > * {
60
60
margin : 0 ;
61
61
width : 100% ;
62
62
transition : transform 0.5s ;
63
63
flex : 1 0 auto;
64
- display : flex;
64
+ display : flex;
65
65
justify-content : center;
66
66
align-items : center;
67
67
}
82
82
}
83
83
84
84
.panel .open {
85
- flex : 5 ;
86
85
font-size : 40px ;
86
+ flex : 5 ;
87
87
}
88
88
89
89
.cta {
126
126
const panels = document . querySelectorAll ( '.panel' ) ;
127
127
128
128
function toggleOpen ( ) {
129
- console . log ( 'Hello' ) ;
130
129
this . classList . toggle ( 'open' ) ;
131
130
}
132
131
133
132
function toggleActive ( e ) {
134
- console . log ( e . propertyName ) ;
135
133
if ( e . propertyName . includes ( 'flex' ) ) {
136
134
this . classList . toggle ( 'open-active' ) ;
137
135
}
141
139
panels . forEach ( panel => panel . addEventListener ( 'transitionend' , toggleActive ) ) ;
142
140
</ script >
143
141
142
+
143
+
144
144
</ body >
145
145
</ html >
You can’t perform that action at this time.
0 commit comments