Create christmasstyle.css

stinky7thgraders · Nov 28, 2024 · 5285487 · 5285487
1 parent 0f2bf54
commit 5285487
Showing 1 changed file with 296 additions and 0 deletions.
diff --git a/Assests/CSS/christmasstyle.css b/Assests/CSS/christmasstyle.css
@@ -0,0 +1,296 @@
+/* General Reset & Styles */
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Poppins", sans-serif;
+  list-style-type: none;
+  text-decoration: none;
+  overflow-x: scroll;
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+  scrollbar-width: none;
+  background-color: #f4f4f4; /* Light Snowy Background */
+}
+
+h1 {
+  font-family: Calibri, "Trebuchet MS", sans-serif;
+  color: #b22222; /* Christmas Red for Headers */
+  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.15); /* Shadow for Depth */
+}
+
+/* Button Styling for Christmas */
+.Normal-Button {
+  margin: 5px 10px;
+  background-color: #32cd32; /* Christmas Green */
+  border: 0;
+  color: #ffffff;
+  padding: 0.8em;
+  border-radius: 25px; /* Rounded Button */
+  box-shadow: 0 0 10px 5px #ff6347; /* Red Glow Shadow */
+  transition: 0.75s;
+}
+
+.Normal-Button:hover {
+  cursor: pointer;
+  transition: 0.75s;
+  scale: 1.1;
+  background-color: #ff6347; /* Change to Tomato Red on Hover */
+  box-shadow: 0 0 15px 10px #ff6347; /* Glowing effect */
+}
+
+.Normal-Button img {
+  width: 24px;
+  align-items: center;
+  display: flex;
+}
+
+/* Navigation Bar Styling */
+.Navigation {
+  width: 100%;
+  height: 60px;
+  background: #006400; /* Dark Green */
+  display: flex;
+  border-radius: 0 0 25px 25px;
+}
+
+.Navigation-Image img {
+  margin-top: 5px;
+  height: 36px;
+  padding: 0.5em;
+  padding-left: 0.25em;
+}
+
+.Navigation-Image:hover {
+  animation: shake 5s;
+}
+
+.Navigation-Container {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+}
+
+.Navigation-Container ul {
+  gap: 15px;
+  display: flex;
+  position: absolute;
+  transform: translate(15%);
+}
+
+.Navigation-Button a {
+  display: flex;
+  padding: 0.75em;
+  align-items: center;
+  gap: 5px;
+  color: #ffffff;
+  background-color: #ff6347; /* Red for Buttons */
+  border-radius: 25px;
+  border: 1px solid #ff6347;
+}
+
+.Navigation-Button a:hover {
+  border: 1px solid #ffd700; /* Gold Border Hover */
+  transition: 0.75s;
+}
+
+/* Index Page - Christmas Centered */
+.Index-Container {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  left: 50%;
+  top: 50%;
+  color: #b22222;
+}
+
+.Index-Container div h1 {
+  font-size: 5em;
+  text-shadow: 0 10px 5px rgba(255, 0, 0, 0.3); /* Red Glow */
+}
+
+.Index-SplashText {
+  margin-bottom: 30px;
+  text-shadow: 0 5px 5px rgba(255, 0, 0, 0.3);
+}
+
+.Index-SplashText:hover {
+  cursor: pointer;
+}
+
+.Index-BottomBar {
+  padding: 0.75em;
+  font-size: 0.5rem;
+  width: 99%;
+  position: absolute;
+  display: flex;
+  bottom: 0;
+  justify-content: center;
+  gap: 10px;
+  background-color: #b22222; /* Christmas Red */
+}
+
+.Index-BottomBar-Text {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+/* Projects Section */
+.Projects-Frame {
+  z-index: 9999;
+  display: block;
+  height: 100vh;
+  width: 100%;
+}
+
+.Projects-IFrame {
+  height: 100%;
+  width: 100%;
+  border: none;
+}
+
+.Projects-FrameBar {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+  text-align: center;
+  color: #ffffff;
+  padding: 0.75em;
+  background: #32cd32; /* Christmas Green */
+  border-radius: 25px;
+  width: fit-content;
+  right: 0;
+  height: fit-content;
+  position: absolute;
+  margin: 15px 15px 0 0;
+  font-size: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.Projects-FrameBar:hover {
+  cursor: pointer;
+}
+
+.Projects-Container {
+  padding: 2.5em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 35px;
+  justify-content: center;
+}
+
+.Projects-Project {
+  animation: zoom-in-fade 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border-radius: 25px;
+  padding: 0.75em;
+  height: fit-content;
+  width: 12.5em;
+  background-color: #ff6347; /* Red */
+  color: #ffffff;
+  transition: 0.75s;
+  box-shadow: 0 0 10px 5px rgba(255, 99, 71, 0.7);
+}
+
+.Projects-Project:hover {
+  scale: 1.1;
+  transition: 0.75s;
+  cursor: pointer;
+}
+
+.Projects-Container img {
+  border-radius: 25px;
+  height: 100px;
+  width: 100px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5px;
+}
+
+.Projects-Container h1 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: center;
+  font-size: large;
+  color: #ffffff;
+}
+
+/* Christmas-themed Animations */
+@keyframes shake {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-3px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(3px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes zoom-in-fade {
+  0% {
+    scale: 0;
+    opacity: 0;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
+}
+
+@keyframes snow {
+  0% {
+    top: -10px;
+    opacity: 1;
+  }
+  100% {
+    top: 100vh;
+    opacity: 0;
+  }
+}
+
+.snowflake {
+  position: absolute;
+  top: 0;
+  opacity: 0.8;
+  pointer-events: none;
+  animation: snow 10s linear infinite;
+}
+
+.snowflake::before {
+  content: "❄"; /* Snowflake Symbol */
+  font-size: 1.5em;
+  color: #ffffff;
+}
+
+/* Hidden Class */
+.hidden {
+  display: none !important;
+}