Flexbox-gap-em&rem

Hello @introxiety, Congrats on completing this challenge hope it was fun.🎉🎉

For CSS:

You should aim to make your code DRY (Don't Repeat Yourself) by grouping elements that share same or some of the attributes together, or you can make Utility Classes which are basically one or more(usually one) CSS attributes and then assigning those classes to HTML elements.

ex: instead of .div1{display: flex; justify-content: center; align-items: center;} .div2{display: flex; justify-content: center; align-items: center;} write like it .div1,.div2{display:flex; justify-content: center; align-items: center;}.

Or you can use utility classes like .flex{display: flex} .justify-content-center{justify-content: center}; .align-items-center{align-items: center}; <div class="flex justify-content-center align-items-center"></div> <div class="flex justify-content-center align-items-center"></div this is the same as CSS frameworks as they are built on the notion of utility classes.

You can organize your CSS attributes alphabetically .

You can better organize your CSS code using Variables as they provide an easy to manipulate attribute value for elements that share the same attribute value.

For media queries it is better to use PX as it is an absolute value and doesn't change relative to font-size such as EM or REM.

Hope this was helpful and as always Happy Coding.😊

Hi there!! Congrats on completing this challenge 🥳🥳🎉

To resolve the error you can do the following:

body {
background-image: url(images/pattern-background-desktop.svg);
background-size: contain;
background-position: top;
background-color: hsl(225deg, 100%, 94%);
}

I hope I have been helpful

Happy coding! ✌️🙃