diff --git a/Night Fire Camp/index.html b/Night Fire Camp/index.html new file mode 100644 index 00000000..39520865 --- /dev/null +++ b/Night Fire Camp/index.html @@ -0,0 +1,26 @@ + + + + + + Night Camp Animation + + + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + diff --git a/Night Fire Camp/output.mp4 b/Night Fire Camp/output.mp4 new file mode 100644 index 00000000..7afc0ea6 Binary files /dev/null and b/Night Fire Camp/output.mp4 differ diff --git a/Night Fire Camp/style.css b/Night Fire Camp/style.css new file mode 100644 index 00000000..59b6be9b --- /dev/null +++ b/Night Fire Camp/style.css @@ -0,0 +1,176 @@ +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + overflow: hidden; + background: #0b0b2c; + height: 100vh; + font-family: 'Poppins', sans-serif; +} + +/* Night sky */ +.night-sky { + position: relative; + width: 100vw; + height: 100vh; + background: linear-gradient(to top, #0b0b2c 0%, #1a1a40 100%); + overflow: hidden; +} + +/* Moon */ +.moon { + position: absolute; + top: 50px; + right: 50px; + width: 100px; + height: 100px; + background: radial-gradient(circle at 30% 30%, #fff, #ddd); + border-radius: 50%; + box-shadow: 0 0 60px #fff; + animation: moonMove 30s linear infinite alternate; +} +@keyframes moonMove { + 0% { transform: translateY(0) translateX(0);} + 50% { transform: translateY(10px) translateX(-20px);} + 100% { transform: translateY(0) translateX(0);} +} + +/* Stars */ +.stars span { + position: absolute; + width: 2px; + height: 2px; + background: #fff; + border-radius: 50%; + opacity: 0.8; + animation: twinkle 2s infinite alternate; +} +.stars span:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; } +.stars span:nth-child(2) { top: 15%; left: 50%; animation-delay: 0.5s; } +.stars span:nth-child(3) { top: 40%; left: 70%; animation-delay: 1s; } +.stars span:nth-child(4) { top: 30%; left: 30%; animation-delay: 1.2s; } +.stars span:nth-child(5) { top: 50%; left: 80%; animation-delay: 0.8s; } +.stars span:nth-child(6) { top: 60%; left: 20%; animation-delay: 1.5s; } +.stars span:nth-child(7) { top: 70%; left: 60%; animation-delay: 1.8s; } +.stars span:nth-child(8) { top: 80%; left: 40%; animation-delay: 2s; } +.stars span:nth-child(9) { top: 25%; left: 75%; animation-delay: 2.2s; } +.stars span:nth-child(10){ top: 35%; left: 15%; animation-delay: 0.3s; } +@keyframes twinkle { + 0% { opacity: 0.3; transform: scale(1);} + 50% { opacity: 1; transform: scale(1.5);} + 100% { opacity: 0.3; transform: scale(1);} +} + +/* Shooting star */ +.shooting-star { + position: absolute; + width: 2px; + height: 100px; + background: linear-gradient(45deg, #fff, rgba(255,255,255,0)); + top: 0; + left: -10%; + transform: rotate(-45deg); + animation: shoot 4s linear infinite; +} +@keyframes shoot { + 0% { left: -10%; top: 0; opacity: 0;} + 10% { opacity: 1;} + 100% { left: 110%; top: 100%; opacity: 0;} +} + +/* Ground */ +.ground { + position: absolute; + bottom: 0; + width: 100%; + height: 120px; + background: linear-gradient(to top, #0d0d0d, transparent); +} + +/* Tent */ +.tent { + position: absolute; + bottom: 120px; + left: 50%; + transform: translateX(-50%); + width: 160px; + height: 100px; + background: linear-gradient(135deg, #ff4500, #8b0000); + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + box-shadow: 0 0 20px rgba(255, 69, 0, 0.3); + border-left: 2px solid #fff4; + border-right: 2px solid #fff4; +} + +/* Campfire */ +.campfire { + position: absolute; + bottom: 120px; + left: calc(50% + 140px); + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: flex-end; +} + +/* Logs */ +.logs { + position: absolute; + width: 40px; + height: 8px; + background: #6b4226; + transform: rotate(25deg); + border-radius: 2px; +} +.logs::after { + content: ''; + position: absolute; + width: 40px; + height: 8px; + background: #6b4226; + transform: rotate(-50deg); + top: 2px; + left: 0; + border-radius: 2px; +} + +/* Flame */ +.flame { + position: absolute; + bottom: 12px; + width: 14px; + height: 28px; + background: radial-gradient(circle, #fffa70 0%, #ff7f00 60%, #ff0000 100%); + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + animation: flicker 0.3s infinite alternate; +} + +/* Smoke */ +.smoke { + position: absolute; + bottom: 35px; + width: 10px; + height: 30px; + background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); + border-radius: 50%; + animation: smokeRise 3s linear infinite; +} + +/* Animations */ +@keyframes flicker { + 0% { transform: scale(1) translateY(0);} + 25% { transform: scale(1.1) translateY(-2px);} + 50% { transform: scale(0.9) translateY(1px);} + 75% { transform: scale(1.05) translateY(-1px);} + 100% { transform: scale(1) translateY(0);} +} +@keyframes smokeRise { + 0% { transform: translateY(0) scaleX(1);} + 50% { transform: translateY(-40px) scaleX(1.2);} + 100% { transform: translateY(-80px) scaleX(1); opacity: 0;} +} diff --git a/README.md b/README.md index 2b8f3ce7..944fdb77 100644 --- a/README.md +++ b/README.md @@ -1328,6 +1328,14 @@ An interactive resume built entirely using **HTML and CSS** — featuring animat ]() +## Night fire camp + +[ +]() + + **[⬆ back to top](#quick-links)** --- diff --git a/images/nightfirecamp.mp4 b/images/nightfirecamp.mp4 new file mode 100644 index 00000000..7afc0ea6 Binary files /dev/null and b/images/nightfirecamp.mp4 differ