Hi, Ford Ulbata! 👋

Good job on this challenge! 👏

In addition to SzymonRojek's helpful advice, one small suggestion that I think will improve your solution would be to use the font from the original design to make the text on the page look better. 😉

Also, using CSS background images to add and position the background SVGs might be a good idea, since that'll keep your markup cleaner and I think makes a little more sense to do for background images such as these.

Keep coding (and happy coding, too)! 😁

Hello there, seyide hundeyin! 👋

Good work on this challenge! 👍 Your solution looks great and is responsive! 🙌

I'd just like to suggest centering the content of the page when the width of the screen increases in the desktop layout (currently, everything sticks to the right side of the page).

Like janegca mentioned, don't let JS get to you! It all gets easier (and funner) with practice! Good luck with that! 😊

Keep coding (and happy coding, too)! 😁

Hey, Shreya Bera! 👋

Nice effort on this challenge! 👏 The desktop layout of your solution looks pretty good! 👍

Like SeyideHundeyin helpfully suggested, looking into and using CSS grid to create layouts like this will make things much easier for you when creating the layout itself and making it responsive! 😉

I also suggest taking a look at your solution report and trying to clear up some of the errors that are there (it seems that you used some backslashes instead of forward slashes in your file paths).

Keep coding (and happy coding, too)! 😁

Hello, Jesús Alejandro Atao! 👋

It's great to see you completing so many challenges! 😃 Well done on this one! 👍 Your solution looks great and responds nicely! I also really like the hover states of the navigation links in the header of the page and the transition of the mobile navigation! 🙌

A super tiny suggestion might be to add cursor: pointer to the "Request Invite" button in the hero section of the page. 😉

As always, keep coding (and happy coding, too)! 😁

Hello there, Florian Andrieux! 👋

Well done on this challenge! 👍 I think your solution looks great and you did a nice job on the flipping animation! 🙌

I'd like to suggest,

• Making sure the attribution and the social media icons do not overlay the countdown cards in the mobile layout when the height of the screen is small.
• Vertically aligning the countdown cards in the mobile layout with each other (the bottom cards seem to be pushed to the right a bit).
• Adding a <title> tag to your inline SVGs to make them more accessible and get rid of those errors on your solution report.

Keep coding (and happy coding, too)! 😁

Hi, Jeremiah Zagada! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍 The card component looks good and you placed the background images quite nicely (something that can be a little tricky)! 🙌

I suggest,

• Allowing the width of the card component to decrease with the width of the screen so that all of it can be seen on screens with small widths (such as mobile devices).
• Perhaps using CSS background images to add and position the background SVGs, since that'll keep your markup cleaner and I think makes a little more sense to do for background images such as these. 😉

Keep coding (and happy coding, too)! 😁

Hi there, Rene Breslauer! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Well done on this one! 👍 Overall, your solution look good and responds well! 🙌

A couple of things I'd like to suggest are,

• Adding a title to the page using the <title> tag.
• Adding the provided text for the answers to the first, third, fourth, and fifth FAQs (they seem to be missing at the moment).

Keep coding (and happy coding, too)! 😁

Hi, Elliot Case! 👋

Amazing work on this challenge! 👍 You've done a really good job in matching the design preview and everything on each page looks great and responds very nicely! 👏

Your attention to detail has been great (especially for such a large project as this). 😀

And I totally agree that PRO is pretty awesome and makes things so much easier when completing challenges! 😆

Well, keep coding (and happy coding, too)! 😁

Hey there, Aaron Gonzalez! 👋

Just wanted to drop in to say nice job on this challenge! 👏 Overall, I think your solution looks pretty good and it responds well! 🙌 Simply follow emestabillo's helpful suggestions, and I think you'll be good to go! 👍

Keep coding (and happy coding, too)! 😁

Greetings, Dušan! 👋

It's great to see you completing so many challenges! 😃 Nice job on this one! 👏

I think your solution looks pretty good and responds well. The only thing I noticed that I think you should look into is that certain styles from the mobile navigation appear in the desktop navigation when it is clicked in the desktop layout. I suggest disabling the mobile navigation in the desktop layout entirely to prevent this from happening. 😉

Keep coding (and happy coding, too)! 😁

Hi, wenadev! 👋

It's good to see you complete this challenge! 😀 Nice job on it! 👍 I actually really like your idea to make the header navigation sticky! 👏

I only suggest allowing the backgrounds of the hero section and the footer to grow with the width of the page so that there isn't any empty space to the sides of those sections when the width of the page increases in the desktop layout. 😉

Keep coding (and happy coding, too)! 😁

Hi, Marta! 👋

Of course, nice to see you complete yet another challenge! 😀 Good work on this one! 🙌

Like ChamuMutezva mentioned, overall, the site looks great and responds well, but the search function doesn't seem to be working. Looking into that would be a good idea, I think! 😉

Also, making the map interactive by allowing users to move around the map by clicking and dragging with their cursor, for example, would be nice.

As usual, keep coding (and happy coding, too)! 😁

Hello there, Monica! 👋

Nice to see you complete another challenge! 😀 Good work on this one! 👍

A few things I'd like to suggest are,

• Adding a max-width to the main container or wrapper to ensure that the content of the site doesn't become too wide or stretched on extra-large screens.
• Doing a little more work on the responsiveness of the site. Currently, the design doesn't scale down between the desktop and mobile layouts very well (things get quite squished before the layout transitions from desktop to mobile). It's important to make sure that your site looks good on desktop and mobile screens and everything in between so that the maximum number of users can enjoy your work. 😉

Of course, keep coding (and happy coding, too)! 😁

Greetings, Vanessa Martin! 👋

Nice to see you complete yet another challenge! 😀 Good work on this one! 🙌 Your solution looks pretty good and is responsive! 👍

I noticed that the navigation links and the social media icons in the footer of the page jump up a bit when they are hovered over. I think this is because of the bottom border that is added to them upon hover. You can make the hover state of those elements smoother by adding an invisible bottom border and then changing the color of that border to white when they are hovered over. That way, the links and the icons will remain in their place and not be moved upwards when the bottom border is added. 😉

Besides that, I just suggest allowing the background of the hero section of the page to expand with the width of the page in the desktop layout so that there is no empty grey space to the sides of the image when the width of the page increases.

Keep coding (and happy coding, too)! 😁

Hi, Nafsuki! 👋

Nice to see you complete another challenge! 😀 Good job on this one! 👏

Your solution looks good and responds rather well! 👍

I noticed that vertical scrolling is disabled in the desktop layout of the site. This means that users will not be able to scroll to reach some of the content of the page if their screen isn't high enough. I suggest allowing vertical scrolling so that users will be able to see all of the content on your site! 😉

Keep coding (and happy coding, too)! 😁

Haha, Mesut Çifci—I think you've done pretty well on this challenge! 👍

Your solution looks good, is responsive, and I like the sliding in/out of the mobile navigation! 🙌

I only really suggest adding a max-width to the main container or wrapper of the site to keep the content of the page together when the width of the page increases. 😉

Of course, keep coding and learning and improving (and happy coding, too)! 😁

Hey, Dušan! 👋

Always nice to see you complete another challenge! 😀 Just wanted to drop in to say good job on this one! 👏

Everything looks great and responds well and using prefers-color-scheme to change the theme of the site to suit user's preferences is a cool idea! 👍

As for your question, maybe you could try defining the colors of the site as CSS variables and using classes to overwrite those variables depending on what theme you want the site to be. Simply append the proper class to the body of the page or something and use JS to change the theme of the page when either the toggle-switch is clicked or the user changes their preferences or something. Just a thought! 😉

Of course, keep coding (and happy coding, too)! 😁

Hello there, Melissa U! 👋

Well done on this challenge! 👍 Your solution looks pretty good and is responsive! 🙌 (I like the smooth transition of the mobile navigation.) Good to hear you enjoyed it and are pretty happy with the result! 😀

A few things I suggest are,

• Turning the cards in the "OUR CREATIONS" section into links and giving them a hover state would be a nice touch.
• Turning the social media icons in the footer of the page into actual links using the anchor tag.
• Perhaps giving the navigation links in the footer of the page a hover state like the links in the header.
• The text in the "THE LEADER IN INTERACTIVE VR" section begins to overflow the body of the page and create a horizontal scroll bar along the bottom of the page in the desktop layout (at around 1200px and below). You might want to look into that and fix it!

BTW, if you want to link your JS file to your HTML file in the head of the HTML file, make sure to include the defer attribute in the script tag. This will instruct the browser to load the HTML file and the JS file at the same time but only run the JS file once the HTML file is completely loaded. If you do not include this attribute, the JS might load and try to run before the HTML is loaded (and that will be a problem since there is not HTML for the JS to work with yet). You could also move your script tag to the bottom of the HTML file to resolve this issue, but keeping the script tag in the head of the HTML file and using the defer attribute is slightly faster.

Hope this helps. 😊

Keep coding (and happy coding, too)! 😁

Hello there, Sarah! 👋

Good work on this challenge! 👍 Your solution looks good and responds nicely! 🙌 The transition between light/dark themes is quite smooth! 👏

A few things I suggest are,

• Making the toggle-switch tabbable so that keyboard users can access and use the toggle-switch.
• Adding a max-width to the content of the page to prevent it from becoming too wide on extra-large screens.
• Adding a transition to the color of the text on the page to make the transition between light/dark themes even smoother! 😉

Keep coding (and happy coding, too)! 😁

Hey, Marta! 👋

Nice to see you complete another challenge! 😀 Good effort on this one! 👍

A few things I'd like to suggest are,

• Adding some space to the right of the option icons in the box to the left and decreasing the border-top-right-radius a little (as in the original design).
• Making sure the background image fills the entire screen and doesn't repeat and make a tiling pattern on certain screen sizes.
• Aligning the right side of the little white popup and the triangle below it.

I don't think you need to use GSAP for the animations you want to add to your solution. If you want to move things around using CSS animations, I think one of the best properties to animate would be the transform property (since you can do all sorts of things with it like move, scale, and rotate elements and it's optimized for animations, anyway). 😉

Keep coding (and happy coding, too)! 😁

Greetings, gianicolajara! 👋

Nice job on this challenge! 👏 Your solution looks great and is responsive! 👍

I only suggest adding a max-width to the content of the page in the tablet layout so that the content isn't too wide when the layout first changes from desktop to mobile. Oh, and adding a title to your page using the <title> tag would be a nice touch! 😉

Keep coding (and happy coding, too)! 😁

Hello there, Astrid! 👋

Nice to see you complete another challenge (it's been quite a while)! 😀 Good job on this one! 👏 Your solution looks good, is responsive, and the social media popup works well, too! 👍

A small thing I might suggest is adding cursor: pointer to the social media popup button. I think your JS for the popup looks fine! 😉

Keep coding (and happy coding, too)! 😁

Greetings, wenadev! 👋

Nice job on yet another challenge! 👏 Your solution looks great and responds nicely and I quite like the hover states you added to the social media icons in the footer of the page! 👍

I'd like to suggest,

• Adding a max-width to the content of the page to prevent it from becoming too wide on extra-large screens (I personally like to wrap the content of each section of the page in a div called content-wrapper or something and add the styles max-width: 1440px and margin: 0 auto to that div to keep the content centered on larger screens). 😉
• Not adding a hover state to the paragraph below the heading in the hero section of the page (since it isn't a clickable element and hovering over it makes the text disappear).

Of course, as always, keep coding (and happy coding, too)! 😁

Hello, ElieB77! 👋

Wonderful job on this challenge! 👍 Everything looks pretty good and responds quite nicely! 👏 As emestabillo mentioned, your attention detail is great! 🙌

I just suggest adding some alt text to the logos on the page to clear up your solution report a bit. 😉

Keep coding (and happy coding, too)! 😁