2 changed files with 479 additions and 0 deletions
@ -0,0 +1,216 @@ |
|||||||
|
body { |
||||||
|
background: black !important; |
||||||
|
} |
||||||
|
|
||||||
|
.wishes { |
||||||
|
width: 800px; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
position: relative; |
||||||
|
top: 370px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.wishes form { |
||||||
|
order: 3; |
||||||
|
} |
||||||
|
.wishes .chakra-stack { |
||||||
|
order: 1; |
||||||
|
font-family: "Patrick Hand", cursive; |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.wishes .chakra-stack .css-itvw0n { |
||||||
|
font-size: 24px !important; |
||||||
|
} |
||||||
|
.wishes .css-1h4ws66 { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.wishes .css-1h4ws66 .chakra-text { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.wishes .chakra-alert { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.wishes hr { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.wishes .chakra-input, .wishes .chakra-textarea { |
||||||
|
background: #fff; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.wishes .css-xdp1c1 { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.wishes .chakra-button { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: #fff; |
||||||
|
font-family: "Pacifico", cursive; |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
font-size: 72px; |
||||||
|
margin: 0 auto; |
||||||
|
display: block; |
||||||
|
width: 800px; |
||||||
|
} |
||||||
|
|
||||||
|
.cake { |
||||||
|
position: absolute; |
||||||
|
width: 250px; |
||||||
|
height: 200px; |
||||||
|
top: 200px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -125px; |
||||||
|
} |
||||||
|
|
||||||
|
.plate { |
||||||
|
width: 270px; |
||||||
|
height: 110px; |
||||||
|
position: absolute; |
||||||
|
bottom: -10px; |
||||||
|
left: -10px; |
||||||
|
background-color: #ccc; |
||||||
|
border-radius: 50%; |
||||||
|
box-shadow: 0 2px 0 #b3b3b3, 0 4px 0 #b3b3b3, 0 5px 40px rgba(0, 0, 0, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.cake > * { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 250px; |
||||||
|
height: 100px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #553c13; |
||||||
|
box-shadow: 0 2px 0px #6a4b18, 0 4px 0px #33240b, 0 6px 0px #32230b, 0 8px 0px #31230b, 0 10px 0px #30220b, 0 12px 0px #2f220b, 0 14px 0px #2f210a, 0 16px 0px #2e200a, 0 18px 0px #2d200a, 0 20px 0px #2c1f0a, 0 22px 0px #2b1f0a, 0 24px 0px #2a1e09, 0 26px 0px #2a1d09, 0 28px 0px #291d09, 0 30px 0px #281c09; |
||||||
|
} |
||||||
|
|
||||||
|
.layer-top { |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.layer-middle { |
||||||
|
top: 33px; |
||||||
|
} |
||||||
|
|
||||||
|
.layer-bottom { |
||||||
|
top: 66px; |
||||||
|
} |
||||||
|
|
||||||
|
.icing { |
||||||
|
top: 2px; |
||||||
|
left: 5px; |
||||||
|
background-color: #f0e4d0; |
||||||
|
width: 240px; |
||||||
|
height: 90px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.icing:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
right: 5px; |
||||||
|
bottom: 6px; |
||||||
|
left: 5px; |
||||||
|
background-color: #f4ebdc; |
||||||
|
box-shadow: 0 0 4px #f6efe3, 0 0 4px #f6efe3, 0 0 4px #f6efe3; |
||||||
|
border-radius: 50%; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.drip { |
||||||
|
display: block; |
||||||
|
width: 50px; |
||||||
|
height: 60px; |
||||||
|
border-bottom-left-radius: 25px; |
||||||
|
border-bottom-right-radius: 25px; |
||||||
|
background-color: #f0e4d0; |
||||||
|
} |
||||||
|
|
||||||
|
.drip1 { |
||||||
|
top: 53px; |
||||||
|
left: 5px; |
||||||
|
transform: skewY(15deg); |
||||||
|
height: 48px; |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.drip2 { |
||||||
|
top: 69px; |
||||||
|
left: 181px; |
||||||
|
transform: skewY(-15deg); |
||||||
|
} |
||||||
|
|
||||||
|
.drip3 { |
||||||
|
top: 54px; |
||||||
|
left: 90px; |
||||||
|
width: 80px; |
||||||
|
border-bottom-left-radius: 40px; |
||||||
|
border-bottom-right-radius: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.candle { |
||||||
|
background-color: #7B020B; |
||||||
|
width: 16px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 8px/4px; |
||||||
|
top: -20px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -8px; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.candle:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 16px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #ad030f; |
||||||
|
} |
||||||
|
|
||||||
|
.flame { |
||||||
|
position: absolute; |
||||||
|
background-color: orange; |
||||||
|
width: 15px; |
||||||
|
height: 35px; |
||||||
|
border-radius: 10px 10px 10px 10px/25px 25px 10px 10px; |
||||||
|
top: -34px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -7.5px; |
||||||
|
z-index: 10; |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5); |
||||||
|
transform-origin: 50% 90%; |
||||||
|
animation: flicker 1s ease-in-out alternate infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes flicker { |
||||||
|
0% { |
||||||
|
transform: skewX(5deg); |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2), 0 0 60px rgba(255, 165, 0, 0.2), 0 0 80px rgba(255, 165, 0, 0.2); |
||||||
|
} |
||||||
|
25% { |
||||||
|
transform: skewX(-5deg); |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5); |
||||||
|
} |
||||||
|
50% { |
||||||
|
transform: skewX(10deg); |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3), 0 0 60px rgba(255, 165, 0, 0.3), 0 0 80px rgba(255, 165, 0, 0.3); |
||||||
|
} |
||||||
|
75% { |
||||||
|
transform: skewX(-10deg); |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4), 0 0 60px rgba(255, 165, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.4); |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: skewX(5deg); |
||||||
|
box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,263 @@ |
|||||||
|
body { |
||||||
|
background: black !important; |
||||||
|
} |
||||||
|
|
||||||
|
.wishes { |
||||||
|
width: 800px; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
position: relative; |
||||||
|
top: 370px; |
||||||
|
margin: 0 auto; |
||||||
|
|
||||||
|
form { |
||||||
|
order: 3; |
||||||
|
} |
||||||
|
|
||||||
|
.chakra-stack { |
||||||
|
order: 1; |
||||||
|
font-family: "Patrick Hand", cursive; |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
color:#fff; |
||||||
|
|
||||||
|
|
||||||
|
.css-itvw0n { |
||||||
|
font-size:24px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.css-1h4ws66 { |
||||||
|
display:none; |
||||||
|
|
||||||
|
.chakra-text { |
||||||
|
display:none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.chakra-alert { |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
hr { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.chakra-input, .chakra-textarea { |
||||||
|
background: #fff; |
||||||
|
color:#000 |
||||||
|
} |
||||||
|
|
||||||
|
.css-xdp1c1 { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.chakra-button { |
||||||
|
color:#000 |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color:#fff; |
||||||
|
font-family: "Pacifico", cursive; |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
font-size:72px; |
||||||
|
margin:0 auto; |
||||||
|
display: block; |
||||||
|
width: 800px; |
||||||
|
} |
||||||
|
|
||||||
|
@mixin foodColoring($color) { |
||||||
|
background-color: $color; |
||||||
|
box-shadow: |
||||||
|
0 2px 0px lighten($color, 5%), |
||||||
|
0 4px 0px darken($color, 8.2%), |
||||||
|
0 6px 0px darken($color, 8.4%), |
||||||
|
0 8px 0px darken($color, 8.6%), |
||||||
|
0 10px 0px darken($color, 8.8%), |
||||||
|
0 12px 0px darken($color, 9%), |
||||||
|
0 14px 0px darken($color, 9.2%), |
||||||
|
0 16px 0px darken($color, 9.4%), |
||||||
|
0 18px 0px darken($color, 9.6%), |
||||||
|
0 20px 0px darken($color, 9.8%), |
||||||
|
0 22px 0px darken($color, 10%), |
||||||
|
0 24px 0px darken($color, 10.2%), |
||||||
|
0 26px 0px darken($color, 10.4%), |
||||||
|
0 28px 0px darken($color, 10.6%), |
||||||
|
0 30px 0px darken($color, 10.8%); |
||||||
|
} |
||||||
|
|
||||||
|
.cake { |
||||||
|
position: absolute; |
||||||
|
width: 250px; |
||||||
|
height: 200px; |
||||||
|
top: 200px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -125px; |
||||||
|
} |
||||||
|
|
||||||
|
.plate { |
||||||
|
width: 270px; |
||||||
|
height: 110px; |
||||||
|
position: absolute; |
||||||
|
bottom: -10px; |
||||||
|
left: -10px; |
||||||
|
background-color: #ccc; |
||||||
|
border-radius: 50%; |
||||||
|
box-shadow: |
||||||
|
0 2px 0 darken(#ccc, 10%), |
||||||
|
0 4px 0 darken(#ccc, 10%), |
||||||
|
0 5px 40px rgba(black, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.cake > * { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.layer { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 250px; |
||||||
|
height: 100px; |
||||||
|
border-radius: 50%; |
||||||
|
@include foodColoring(#553c13); |
||||||
|
} |
||||||
|
|
||||||
|
.layer-top { top: 0px; } |
||||||
|
.layer-middle { top: 33px; } |
||||||
|
.layer-bottom { top: 66px; } |
||||||
|
|
||||||
|
.icing { |
||||||
|
top: 2px; |
||||||
|
left: 5px; |
||||||
|
background-color: #f0e4d0; |
||||||
|
width: 240px; |
||||||
|
height: 90px; |
||||||
|
border-radius: 50%; |
||||||
|
&:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
right: 5px; |
||||||
|
bottom: 6px; |
||||||
|
left: 5px; |
||||||
|
background-color: lighten(#f0e4d0, 3%); |
||||||
|
box-shadow: |
||||||
|
0 0 4px lighten(#f0e4d0, 5%), |
||||||
|
0 0 4px lighten(#f0e4d0, 5%), |
||||||
|
0 0 4px lighten(#f0e4d0, 5%); |
||||||
|
border-radius: 50%; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.drip { |
||||||
|
display: block; |
||||||
|
width: 50px; |
||||||
|
height: 60px; |
||||||
|
border-bottom-left-radius: 25px; |
||||||
|
border-bottom-right-radius: 25px; |
||||||
|
background-color: #f0e4d0; |
||||||
|
} |
||||||
|
|
||||||
|
.drip1 { |
||||||
|
top: 53px; |
||||||
|
left: 5px; |
||||||
|
transform: skewY(15deg); |
||||||
|
height: 48px; |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.drip2 { |
||||||
|
top: 69px; |
||||||
|
left: 181px; |
||||||
|
transform: skewY(-15deg); |
||||||
|
} |
||||||
|
|
||||||
|
.drip3 { |
||||||
|
top: 54px; |
||||||
|
left: 90px; |
||||||
|
width: 80px; |
||||||
|
border-bottom-left-radius: 40px; |
||||||
|
border-bottom-right-radius: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.candle { |
||||||
|
background-color: #7B020B; |
||||||
|
width: 16px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 8px / 4px; |
||||||
|
top: -20px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -8px; |
||||||
|
z-index: 10; |
||||||
|
&:before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 16px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: lighten(#7B020B, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.flame { |
||||||
|
position: absolute; |
||||||
|
background-color: orange; |
||||||
|
width: 15px; |
||||||
|
height: 35px; |
||||||
|
border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px; |
||||||
|
top: -34px; |
||||||
|
left: 50%; |
||||||
|
margin-left: -7.5px; |
||||||
|
z-index: 10; |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.5), |
||||||
|
0 0 20px rgba(orange, 0.5), |
||||||
|
0 0 60px rgba(orange, 0.5), |
||||||
|
0 0 80px rgba(orange, 0.5); |
||||||
|
transform-origin: 50% 90%; |
||||||
|
animation: flicker 1s ease-in-out alternate infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes flicker { |
||||||
|
0% { |
||||||
|
transform: skewX(5deg); |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.2), |
||||||
|
0 0 20px rgba(orange, 0.2), |
||||||
|
0 0 60px rgba(orange, 0.2), |
||||||
|
0 0 80px rgba(orange, 0.2) } |
||||||
|
25% { |
||||||
|
transform: skewX(-5deg); |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.5), |
||||||
|
0 0 20px rgba(orange, 0.5), |
||||||
|
0 0 60px rgba(orange, 0.5), |
||||||
|
0 0 80px rgba(orange, 0.5) } |
||||||
|
50% { |
||||||
|
transform: skewX(10deg); |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.3), |
||||||
|
0 0 20px rgba(orange, 0.3), |
||||||
|
0 0 60px rgba(orange, 0.3), |
||||||
|
0 0 80px rgba(orange, 0.3) } |
||||||
|
75% { |
||||||
|
transform: skewX(-10deg); |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.4), |
||||||
|
0 0 20px rgba(orange, 0.4), |
||||||
|
0 0 60px rgba(orange, 0.4), |
||||||
|
0 0 80px rgba(orange, 0.4) } |
||||||
|
100% { |
||||||
|
transform: skewX(5deg); |
||||||
|
box-shadow: |
||||||
|
0 0 10px rgba(orange, 0.5), |
||||||
|
0 0 20px rgba(orange, 0.5), |
||||||
|
0 0 60px rgba(orange, 0.5), |
||||||
|
0 0 80px rgba(orange, 0.5) } |
||||||
|
} |
||||||
Loading…
Reference in new issue