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