Skip to content

Commit 9142494

Browse files
katbowkatbow
committed
Add completed day 5 challenge
1 parent c4ddaa1 commit 9142494

5 files changed

Lines changed: 155 additions & 261 deletions

File tree

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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 rel="stylesheet" href="style.css" media="screen" title="no title">
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 type="text/javascript" src="main.js"></script>
40+
</body>
41+
</html>

‎05 - Flex Panel Gallery - Complete/main.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var panels = document.querySelectorAll('.panel')
2+
3+
function toggleOpen () {
4+
this.classList.toggle('open')
5+
}
6+
7+
function toggleActive (e) {
8+
if (e.propertyName.includes('flex')) {
9+
this.classList.toggle('open-active')
10+
}
11+
}
12+
13+
panels.forEach(panel => {
14+
panel.addEventListener('click', toggleOpen)
15+
})
16+
17+
panels.forEach(panel => {
18+
panel.addEventListener('transitionend', toggleActive)
19+
})

‎05 - Flex Panel Gallery - Complete/style.css‎

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

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

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

0 commit comments

Comments
 (0)