codegirl007
/
theprimeagenbirthday
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix formatting and header

main
Stephanie Gredell 1 year ago
parent
3dd764fdc5
commit
d021469028
3 changed files with 204 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      index.css
  2. 4
      index.php
  3. 55
      index.scss

9
index.css
Unescape View File

@ -37,7 +37,8 @@ body {
.wishes hr { .wishes hr {
display: none; display: none;
} }
.wishes .chakra-input, .wishes .chakra-textarea { .wishes .chakra-input,
.wishes .chakra-textarea {
background: #fff; background: #fff;
color: #000; color: #000;
} }
@ -56,7 +57,7 @@ body {
font-size: 72px; font-size: 72px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 800px; width: 735px;
} }
.cake { .cake {
@ -158,7 +159,7 @@ body {
} }
.candle { .candle {
background-color: #7B020B; background-color: #7b020b;
width: 16px; width: 16px;
height: 50px; height: 50px;
border-radius: 8px/4px; border-radius: 8px/4px;
@ -246,7 +247,7 @@ body {
height: 75px; height: 75px;
width: 1px; width: 1px;
padding: 1px; padding: 1px;
background-color: #FDFD96; background-color: #fdfd96;
display: block; display: block;
position: absolute; position: absolute;
top: 125px; top: 125px;

4
index.php
Unescape View File

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<title>HAPPY BIRTHDAY PRIME!</title> <title>HAPPY BIRTHDAY PRIME!</title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
@ -14,6 +15,7 @@
} }
</script> </script>
</head> </head>
<body> <body>
<h1 class="title">Happy Birthday Prime!</h1> <h1 class="title">Happy Birthday Prime!</h1>
<div id="balloon-container"> <div id="balloon-container">
@ -129,5 +131,5 @@ window.addEventListener("click", () => {
</script> </script>
</body> </body>
</html>
</html>

55
index.scss
Unescape View File

@ -22,7 +22,6 @@ body {
font-style: normal; font-style: normal;
color: #fff; color: #fff;
.css-itvw0n { .css-itvw0n {
font-size: 24px !important; font-size: 24px !important;
} }
@ -44,9 +43,10 @@ body {
display: none; display: none;
} }
.chakra-input, .chakra-textarea { .chakra-input,
.chakra-textarea {
background: #fff; background: #fff;
color:#000 color: #000;
} }
.css-xdp1c1 { .css-xdp1c1 {
@ -54,7 +54,7 @@ body {
} }
.chakra-button { .chakra-button {
color:#000 color: #000;
} }
} }
@ -66,7 +66,7 @@ body {
font-size: 72px; font-size: 72px;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 800px; width: 735px;
} }
@mixin foodColoring($color) { @mixin foodColoring($color) {
@ -125,9 +125,15 @@ body {
@include foodColoring(#553c13); @include foodColoring(#553c13);
} }
.layer-top { top: 0px; } .layer-top {
.layer-middle { top: 33px; } top: 0px;
.layer-bottom { top: 66px; } }
.layer-middle {
top: 33px;
}
.layer-bottom {
top: 66px;
}
.icing { .icing {
top: 2px; top: 2px;
@ -185,7 +191,7 @@ body {
} }
.candle { .candle {
background-color: #7B020B; background-color: #7b020b;
width: 16px; width: 16px;
height: 50px; height: 50px;
border-radius: 8px / 4px; border-radius: 8px / 4px;
@ -201,7 +207,7 @@ body {
width: 16px; width: 16px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background-color: lighten(#7B020B, 10%); background-color: lighten(#7b020b, 10%);
} }
} }
@ -231,35 +237,40 @@ body {
0 0 10px rgba(orange, 0.2), 0 0 10px rgba(orange, 0.2),
0 0 20px rgba(orange, 0.2), 0 0 20px rgba(orange, 0.2),
0 0 60px rgba(orange, 0.2), 0 0 60px rgba(orange, 0.2),
0 0 80px rgba(orange, 0.2) } 0 0 80px rgba(orange, 0.2);
}
25% { 25% {
transform: skewX(-5deg); transform: skewX(-5deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.5), 0 0 10px rgba(orange, 0.5),
0 0 20px rgba(orange, 0.5), 0 0 20px rgba(orange, 0.5),
0 0 60px rgba(orange, 0.5), 0 0 60px rgba(orange, 0.5),
0 0 80px rgba(orange, 0.5) } 0 0 80px rgba(orange, 0.5);
}
50% { 50% {
transform: skewX(10deg); transform: skewX(10deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.3), 0 0 10px rgba(orange, 0.3),
0 0 20px rgba(orange, 0.3), 0 0 20px rgba(orange, 0.3),
0 0 60px rgba(orange, 0.3), 0 0 60px rgba(orange, 0.3),
0 0 80px rgba(orange, 0.3) } 0 0 80px rgba(orange, 0.3);
}
75% { 75% {
transform: skewX(-10deg); transform: skewX(-10deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.4), 0 0 10px rgba(orange, 0.4),
0 0 20px rgba(orange, 0.4), 0 0 20px rgba(orange, 0.4),
0 0 60px rgba(orange, 0.4), 0 0 60px rgba(orange, 0.4),
0 0 80px rgba(orange, 0.4) } 0 0 80px rgba(orange, 0.4);
}
100% { 100% {
transform: skewX(5deg); transform: skewX(5deg);
box-shadow: box-shadow:
0 0 10px rgba(orange, 0.5), 0 0 10px rgba(orange, 0.5),
0 0 20px rgba(orange, 0.5), 0 0 20px rgba(orange, 0.5),
0 0 60px rgba(orange, 0.5), 0 0 60px rgba(orange, 0.5),
0 0 80px rgba(orange, 0.5) } 0 0 80px rgba(orange, 0.5);
}
} }
#balloon-container { #balloon-container {
@ -293,7 +304,7 @@ body {
height: 75px; height: 75px;
width: 1px; width: 1px;
padding: 1px; padding: 1px;
background-color: #FDFD96; background-color: #fdfd96;
display: block; display: block;
position: absolute; position: absolute;
top: 125px; top: 125px;
@ -315,8 +326,12 @@ body {
} }
@keyframes float { @keyframes float {
from {transform: translateY(100vh); from {
opacity: 1;} transform: translateY(100vh);
to {transform: translateY(-300vh); opacity: 1;
opacity: 0;} }
to {
transform: translateY(-300vh);
opacity: 0;
}
} }
Write Preview
Loading…
Cancel
Save