Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

spacetourism using Figma

@sanjaymukherji

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. Home page> how to make a link working inside of transparent block ?
  2. Home page > how to create the path inside the small oval?
  3. Technology > how to create the link oval with neumeric inside?

Community feedback

Valeriia 200

@Magic1vy

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some recommendations for your code that I believe will be helpful.

1.To create a blurred background for your navbar, use the following:

css

.menu {
  backdrop-filter: blur(40.7742px);
  background-color: hsla(0,0%,100%,.04);
}
  1. To make * path* create a link, use:

html

<a href="./destination.html">EXPLORE</a>

And style the <a> instead of a <div>.

  1. As mentioned in point 2, style the <a>, not the <div>.

Additional tips:

When working on large projects with multiple files, organize them into folders according to their purpose. For example, you could place all files related to the "Crew" section in a "Crew" folder, or store all images in a single folder. This will make it easier for others to read your files 🙃

To improve content recognition and display by the system, use tags like <h1>, <p>, and wrap numbers inside <div> tags with <span>. You can find a list of all HTML tags here

To set an image as the background, remove it from the HTML and add it to the CSS as follows:

css

body {
  background-image: url("path/to/the/image");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
}

Read more about background images here

I hope you find these suggestions helpful 😄 Your submitted solution is already great!

Happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord