+
+
+## 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
+```
diff --git a/NavBarAnimated/Chucho-Kun/css/styles.css b/NavBarAnimated/Chucho-Kun/css/styles.css
new file mode 100644
index 000000000..0d61a4290
--- /dev/null
+++ b/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;
+}
diff --git a/NavBarAnimated/Chucho-Kun/img/image.webp b/NavBarAnimated/Chucho-Kun/img/image.webp
new file mode 100644
index 000000000..b71c8acfd
Binary files /dev/null and b/NavBarAnimated/Chucho-Kun/img/image.webp differ
diff --git a/NavBarAnimated/Chucho-Kun/img/image2.webp b/NavBarAnimated/Chucho-Kun/img/image2.webp
new file mode 100644
index 000000000..d8f841f8d
Binary files /dev/null and b/NavBarAnimated/Chucho-Kun/img/image2.webp differ
diff --git a/NavBarAnimated/Chucho-Kun/img/logo-car.avif b/NavBarAnimated/Chucho-Kun/img/logo-car.avif
new file mode 100644
index 000000000..f6dbcac37
Binary files /dev/null and b/NavBarAnimated/Chucho-Kun/img/logo-car.avif differ
diff --git a/NavBarAnimated/Chucho-Kun/index.html b/NavBarAnimated/Chucho-Kun/index.html
new file mode 100644
index 000000000..5cede860f
--- /dev/null
+++ b/NavBarAnimated/Chucho-Kun/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+ about us
+ +
+ Our Mission: 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.
+
+
+
+ Our Vision: 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.
+
+
+ 
+
+
+ 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.
+
+
+
+ Our Values: Responsibility, Honesty, Respect, Trust, Spirit of Service.
+
+
+ 
+
+