Frontend Mentor - Blogr landing page solution

This is a solution to the Blogr landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Links
• html, css, js
• js
• w3schools
• Webie

Overview

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

function product() {
  if (intViewportWidth <= 375) {
    if (navProduct.style.display === "block") {
      titlePro.style.color = "hsl(208, 49%, 24%)";
      navProduct.style.display = "none";
      document.querySelector("#arrow2").style.transform = "rotate(360deg)";
    } else {
      titlePro.style.color = "hsl(240, 2%, 79%)";
      navProduct.style.display = "block";
      document.querySelector("#arrow2").style.transform = "rotate(180deg)";
    }
  } else {
    if (navProduct.style.display === "block") {
      titlePro.style.color = "hsl(240, 2%, 79%)";
      navProduct.style.display = "none";
      document.querySelector("#arrow1").style.transform = "rotate(360deg)";
    } else {
      titlePro.style.color = " hsl(0, 0%, 100%)";
      navProduct.style.display = "block";
      document.querySelector("#arrow1").style.transform = "rotate(180deg)";
    }
  }
}

Useful resources

• Example w3schools - This is an amazing article which helped me finally understand media queries in css. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @webie