|
4 | 4 | --box-shadow-clr: #ffffff1a; |
5 | 5 | --text-shadow-clr1: #00000073; |
6 | 6 | --text-shadow-clr2: #000000b8; |
| 7 | + --bg-blend-mode-clr1: #ea9df0fb; |
| 8 | + --bg-blend-mode-clr2: #e9b981e5; |
| 9 | + --bg-blend-mode-clr3: #f1c166f6; |
| 10 | + --bg-blend-mode-clr4: #b1dd5ed3; |
| 11 | + --bg-blend-mode-clr5: #dd3a1dc4; |
7 | 12 | --font-family: "Amatic SC", cursive; |
8 | 13 | } |
9 | 14 |
|
@@ -36,35 +41,43 @@ body { |
36 | 41 | align-items: center; |
37 | 42 | color: var(--white); |
38 | 43 | background: center/cover; |
| 44 | + background-blend-mode: darken; |
39 | 45 | box-shadow: inset 0 0 0 0.3rem var(--box-shadow-clr); |
40 | | - /* Safari transitionend event.propertyName === flex */ |
41 | | - /* Chrome + FF transitionend event.propertyName === flex-grow */ |
42 | 46 | transition: flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; |
43 | 47 | } |
44 | 48 |
|
45 | 49 | .panel1 { |
46 | 50 | background-image: url(../img/sea.jpg); |
| 51 | + background-color: var(--bg-blend-mode-clr1); |
47 | 52 | } |
48 | 53 |
|
49 | 54 | .panel2 { |
50 | 55 | background-image: url(../img/blue.jfif); |
51 | | - background-position: 70%; |
| 56 | + background-position: 75%; |
| 57 | + background-color: var(--bg-blend-mode-clr2); |
| 58 | + filter: contrast(103%); |
52 | 59 | } |
53 | 60 |
|
54 | 61 | .panel3 { |
55 | 62 | background-image: url(../img/nature.jfif); |
| 63 | + background-position: 35%; |
| 64 | + background-color: var(--bg-blend-mode-clr3); |
56 | 65 | } |
57 | 66 |
|
58 | 67 | .panel4 { |
59 | | - background-image: url(../img/mountain.jfif); |
| 68 | + background-image: url(../img/tree.jpg); |
| 69 | + background-color: var(--bg-blend-mode-clr4); |
| 70 | + filter: contrast(103%); |
60 | 71 | } |
61 | 72 |
|
62 | 73 | .panel5 { |
63 | 74 | background-image: url(../img/fox.jfif); |
| 75 | + background-color: var(--bg-blend-mode-clr5); |
64 | 76 | } |
65 | 77 |
|
66 | 78 | .panel > * { |
67 | | - transition: transform 0.5s, font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11); |
| 79 | + transition: transform 0.5s, |
| 80 | + font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11); |
68 | 81 | } |
69 | 82 |
|
70 | 83 | .panel > p { |
|
74 | 87 | align-items: center; |
75 | 88 | font-size: 8rem; |
76 | 89 | text-transform: uppercase; |
77 | | - text-shadow: 0 0 0.4rem var(--text-shadow-clr1), 0 0 1.4rem var(--text-shadow-clr2); |
| 90 | + text-shadow: 0 0 0.4rem var(--text-shadow-clr1), |
| 91 | + 0 0 1.4rem var(--text-shadow-clr2); |
78 | 92 | } |
79 | 93 |
|
80 | 94 | .panel > p:nth-child(2) { |
@@ -131,6 +145,10 @@ body { |
131 | 145 | html { |
132 | 146 | font-size: 8px; |
133 | 147 | } |
| 148 | + |
| 149 | + .panel3 { |
| 150 | + background-position: center; |
| 151 | + } |
134 | 152 | } |
135 | 153 |
|
136 | 154 | @media screen and (max-width: 800px) { |
|
0 commit comments