2 changed files with 479 additions and 0 deletions
@ -0,0 +1,216 @@
@@ -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 @@
@@ -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