All solutions

I couldn't figure out the way to make the active state of the mobile version work the way I wanted it to. I wanted to keep the original button from the non-active state without having to make a fake button that serves for nothing but just the looks during the active state. I ended up making a separate div with the fake button for the active state and used the classList to show and hide elements.

I'm planning to check other people's codes, but any feedback is welcome!

This was quite challenging for me. Any feedback is welcome, especially with JavaScript!

edited: I fixed the bug and now the codes are simplified!

This is my first Frontend Mentor JS challenge. I'm learning JavaScript but I realized it's still quite challenging for me to adapt what I learned into actual project, even for a small one like this.

I couldn't follow the DRY principle (Do not Repeat Yourself) and ended up writing a ton of codes that were repeated over and over again.

Please let me know if there is a better way to fix this :)

In the process of adding animation, I noticed that a scrollbar appears on the right side of the animated elements when the screen size is smaller(non-desktop versions) and I'm trying to search how to get rid of it, but I'm having a bit of difficulty figuring out how to do that. Is there a way to fix this?

I used position: absolute on the two images(bg-pattern files) to make the background. I had to adjust their sizes and positions in media queries multiple times. Is there a different way to use multiple image files to create the background of the website?

Also, I spent way too much time on my queries.css file and it became quite long. I was wondering if there are good tips to make the file look more organized and not so repetitive.

I've also noticed that on the phone, the mobile version of my website is super hard to scroll. Is there a way to fix this?

I was challenged by making the background have the two circle images on the top left corner and the bottom right corner.

Initially, I started out using background property in CSS, but the two images kept on changing their positions when the screen size changed.

Eventually, I just put the two images in the HTML and used position: absolute in CSS to make them stay at specific locations, no matter the screen size.

Please let me know if there are better ways to create a background with multiple images that need to be positioned in specific places.

I couldn't use h1 in this challenge since there can't be three h1s each for SEDANS, SUVS, and LUXURY. Please let me know how I can address this issue.

I couldn't match the color of the tinted image to the given design. 😅 At first, I tried using the accent color provided in the style guide, but it wasn't the right color. I ended up just coming up with a color to use.

I struggled to find a way to overlay color on the image (on hover). I eventually used absolute positioning with an empty div(.overlay) and managed to make it work.

I also had some problems with the eye icon that would appear when hovering over the main image. Initially, I tried making the eye icon a child element of the empty div for overlay, but the eye icon would lose its color and become cloudy. So I had to get it out of that empty div and have it be positioned over the overlay using absolute positioning. Please let me know if you have any good ideas on how to fix this problem with the icon becoming cloudy

Also, I think the hovering effect of the image isn't working on the mobile version. I wonder why that is, since it seems to work fine on the desktop version. 🥲

Edited: I got rid of absolute positioning and switched it out for flexbox and also fixed the issue I had with the attribution. Thanks for the feedback, everyone!

I used Flexbox for the main QR Code card and absolute positioning to center it vertically and horizontally. I was a bit confused at first because the top percentage from the absolute positioning wasn't working. After Googling a bit, I found out that it could've been because I didn't initially specify the height of the parent container. So I just gave the height of 100vh to the body. I'm wondering if this is the right way to center an element horizontally and vertically. Please let me know if I did anything wrong or if there is a better way to do this.

Additionally, I couldn't figure out what to do with the attribution class and its content. Since I use absolute positioning for the main QR code part, the attribution part was automatically stuck to the top of the page. I was wondering if there is a way to position this somewhere else like right underneath the QR code card.