diff --git a/Assests/CSS/christmasstyle.css b/Assests/CSS/christmasstyle.css new file mode 100644 index 0000000..a0bd365 --- /dev/null +++ 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; +}