responsive navigation bar with animations in HTML,CSS,JavaScript

NavBarAnimated/Chucho-Kun/README.md

@@ -0,0 +1,19 @@
+# NavBar Animated HTML / Javascript / CSS
+A responsive navigation bar with animations controlled by CSS and JavaScript, include CSS variables
+## 🚀 Tech Stack
+![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
+![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
+![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
+
+<img width="864" height="705" alt="desktop version" src="screenshots/desktop.png" />
+<img width="409" height="814" alt="mobile version" src="screenshots/mobile.png" />
+
+## Technologies
+HTML + CSS + JavaScript
+## Developer Notes
+The project can be run locally without any additional requeriments, or if you prefer, you can use a LiveServer from your development IDL or as an npm package
+```
+npm install live-server --save-dev
+
+live-server
+```

NavBarAnimated/Chucho-Kun/css/styles.css

@@ -0,0 +1,177 @@
+:root {
+  --colorA: #FCD22D;
+  --colorB: #a38300;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+}
+
+nav {
+  position: fixed;
+  top: -85px;
+  left: 0;
+  width: 95%;
+  background: var(--colorA);
+  border-bottom: solid 4px var(--colorB);
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 30px;
+  transition: top 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 1000;
+}
+
+nav.show {
+  top: 0;
+}
+
+nav .logo {
+  font-size: 20px;
+  font-weight: bold;
+  width: 68px;
+  height: auto;
+  mix-blend-mode: multiply;
+  transition: background-color 0.3s ease;
+  border-radius: .5rem;
+}
+
+.logo:hover {
+  background-color: var(--colorA);
+  cursor: pointer;
+}
+
+nav .nav-links {
+  list-style: none;
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  nav .nav-links {
+  list-style: none;
+  gap: 20px;
+  display: flex
+}
+}
+
+nav .nav-links li {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+nav.show .nav-links li {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+nav .nav-links li:nth-child(1) { transition-delay: 0.1s; }
+nav .nav-links li:nth-child(2) { transition-delay: 0.2s; }
+nav .nav-links li:nth-child(3) { transition-delay: 0.3s; }
+nav .nav-links li:nth-child(4) { transition-delay: 0.4s; }
+nav .nav-links li:nth-child(5) { transition-delay: 0.5s; }
+
+nav .nav-links li a {
+  font-family: "Jost", sans-serif;
+  text-transform: uppercase;
+  color: var(--colorB);
+  font-weight: bold;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+nav .nav-links li a:hover {
+  color: black;
+}
+
+.toggle {
+  display: none;
+  font-size: 24px;
+  cursor: pointer;
+  margin-right: 2rem;
+}
+
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
+    flex-direction: column;
+    background: var(--colorA);
+    position: absolute;
+    top: 68px;
+    right: 0;
+    width: 200px;
+    padding: 10px;
+  }
+  .nav-links.show {
+    display: flex;
+    animation: fadeSlide 0.6s ease forwards;
+  }
+  .toggle {
+    display: block;
+    color: black;
+  }
+}
+
+@keyframes fadeSlide {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Sections */
+.section {
+  text-align: center;
+  max-width: 600px;
+  padding: 2rem;
+  margin: 0 auto;
+}
+
+.section-header {
+    color: black;
+    padding: 5px 0px;
+    display: inline-block;
+    text-transform: uppercase;
+    background-color: #FCD22D;
+    font-family: "Jost", sans-serif;
+    font-weight: bold;
+    width: 100%;
+    max-width: 500px;
+    font-size: 20px;
+}
+
+.section-text {
+  text-align: left;
+  margin: 1rem 0;
+  line-height: 2;
+}
+
+.section-text span {
+  font-weight: bold;
+}
+
+.section-image{
+  width: 100%;
+  max-width: 60rem;
+}
+
+.footer {
+  background-color: black;
+  text-align: center;
+}
+
+.footer-text {
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Jost", sans-serif;
+  margin-top: 16px;
+  width: 100%;
+  text-transform: uppercase;
+  color: white;
+}

NavBarAnimated/Chucho-Kun/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navbar Animated</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+  <nav id="navbar">
+    <div class="logo">
+      <img class="logo" src="img/logo-car.avif" width="200" heigth="100" alt="workshop logo">
+    </div>
+    <ul class="nav-links">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">About Us</a></li>
+      <li><a href="#">Services</a></li>
+      <li><a href="#">Projects</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+    <div class="toggle" id="toggle">&#9776;</div>
+  </nav>
+
+  <section class="section">
+    <p class="section-header">about us</p>
+
+      <div class="section-text">
+        <span>Our Mission:</span> To provide the best service overall, satisfying the needs of our clients, with the highest possible standard of quality, at the best cost and in the shortest possible time.
+      </div>
+
+      <div class="section-text">
+        <span>Our Vision:</span> To consolidate ourselves as the best mechanical services company in Mexico, continuously exceeding international standards, maintaining a close relationship of trust and honesty, achieving the satisfaction of each of our business partners.
+      </div>
+
+      <img class="section-image" src="img/image.webp" width="700" heigth="500" alt="workshop image">
+
+      <div class="section-text">
+        We are a company founded in January 2015 in Mexico City, initially established as an independent workshop specializing in VAG (Audi, SEAT, VW), Mini, BMW, and Mercedes. Our capabilities are not limited to VAG; we can service all makes and models available in the Mexican market. Thanks to the excellent performance of our qualified staff and their extensive market knowledge, we are increasingly solidifying our position as industry leaders, with a strong community of satisfied customers who trust us because we understand and address their needs. For these reasons, our workshop is one of the best service providers in Mexico City.
+      </div>
+
+      <div class="section-text">
+        Our Values: Responsibility, Honesty, Respect, Trust, Spirit of Service.
+      </div>
+
+      <img class="section-image" src="img/image2.webp" width="700" heigth="500" alt="workshop image 2">
+
+    </section>
+
+    <footer class="footer">
+        <div class="footer-text" style="padding:20px 0px;"> © 2025 Automotriz Mora. All rights reserved.</div>
+    </footer>
+
+  <script src="js/script.js"></script>
+</body>
+</html>

NavBarAnimated/Chucho-Kun/js/script.js

@@ -0,0 +1,15 @@
+window.addEventListener("scroll", () => {
+  const navbar = document.getElementById("navbar");
+  if (window.scrollY > 50) {
+    navbar.classList.add("show");
+  } else {
+    navbar.classList.remove("show");
+  }
+});
+
+const toggle = document.getElementById("toggle");
+const navLinks = document.querySelector(".nav-links");
+
+toggle.addEventListener("click", () => {
+  navLinks.classList.toggle("show");
+});