Multipage Website Final Project Frontend Developer Course Progate Indonesia

Project Multipage Website ini adalah project akhir HTML&CSS serta Javascript DOM dari Frontend Developer Course Learning Path Progate Indonesia. Dibangun dengan menslicing design dari figma menjadi sebuah multipage website

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

Screenshot

Links

• Live Site URL: live site URL here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Javascript

What I learned

• Cara membuat accordion dengan javascript

const accordion = document.getElementsByClassName("accordion");

for (let i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener("click", function () {
    const panel = this.nextElementSibling;

    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

• Membuat css animation scroll dengan javascript

.reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 0.7s ease-in;
}
.active.fade-left {
  animation: fade-left 0.7s ease-in;
}
.active.fade-right {
  animation: fade-right 0.7s ease-in;
}

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 200;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

Useful resources

• How to Create CSS Animations on Scroll - Sumber artikel ini saya pakai untuk belajar bagaimana cara membuat css animation scroll dengan javascript