viniciusshenri96 / creative-agency-single-page-site

My solution to the Creative agency single-page site challenge from the Mentor frontend site with HTML, CSS and JS

Creative agency single-page site

 

🚧 Creative agency single-page site 🟢 Completed 🚀 🚧

 

Project description 📚

This is a solution to the challenge Creative agency single-page site.

This project was a great challenge to put JavaScript into practice, and deepen my knowledge in HTML, CSS

 

What did I put into practice?

• I learned to use the keydown event to use the keyboard arrows to move the slide with short circuit

// Slide with keydown
document.addEventListener("keydown", function (e) {
  // short circuit
  e.key === "ArrowRight" && nextSlide();
  e.key === "ArrowLeft" && prevSlide();
});

• I developed my first mobile menu in this project

• Revealing Elements on Scroll with IntersectionObserver

• Implementing Smooth Scrolling with scrollIntoView

• Menu mobile setTimeout, bubble and events

• Menu fade animation with Closures, closest() and Math strategy, mouseover, mouseout

• Revealing Elements on Scroll with new IntersectionObserver

• Building a Slider Component with Events and quite logica.

• I used grid area, so that the elements were in the same row and in the same column, with that I just positioned inside the grid. this is only possible by defining the parent element with display:grid and the children grid-area: 1/1, for that I also used reusable class, and in HTML I put the class where it should

.grid-layout {
  display: grid;
}
.grid-area {
  grid-area: 1 / 1;
}

• The function created inside the menuAnimation function, will have access to the parameter of the parent function (opacity), even after it is executed, this happens because of the closure

const menuAnimation = function (opacity) {
  return function (e) {
    const clicked = e.target.closest(".nav__link");

    if (!clicked) return;

    if (clicked.classList.contains("nav__link")) {
      const link = e.target;
      const sibling = document.querySelectorAll(".nav__link");
      const logo = nav.closest(".header-box").querySelector(".header__logo");

      sibling.forEach((el) => {
        if (el !== link) el.style.opacity = opacity;
      });
      logo.style.opacity = opacity;
    }
  };
};

nav.addEventListener("mouseover", menuAnimation(0.5));
nav.addEventListener("mouseout", menuAnimation(1));

 

Links

• Preview Site
• Frontend Mentor Solution Page

 

My process

Built with

• HTML
• CSS
• Vanilla Js

 

Responsive 📱 - Mobile/Tablet/Desktop

 

👨‍💻 Author

• Frontend Mentor
• Linkedin