Hey Jude, the project looks cool! But it would be great if you fix some issues with it:
For the header you could try this:
[ ] For the header, I suggest you remove the flex-wrap, height, and width properties for now. (let flex manage these for you. Plus this is great because in the mobile version, you just have to give flex-direction as column and you'll have a better result.)
[ ] Remove height and width for .header-column1 and .header-column2
[ ] It seems that the browser defaults are causing unexpected results, you may have to include normalize CSS or custom CSS to remove them.
[ ] Finally, add an appropriate margin or padding to elements inside the header to keep them apart. The Next Web website has used padding: 4px;
For rest of the code:
[ ] Use a single CSS selector for all sections to add max-width and margin auto property.
[ ] You may have to correct the class name given below. It is misspelled as "founding-rounds-items" instead of "funding-round-items"
You have been using multiple similar properties on different selectors. You can refactor this to include the same properties in a single selector. For example, in the below code,
Notice that you have used the same height, width, and margin for all selectors. You don't have to repeat this. Just have a single selector for all these elements and let the selectors for background image be different because that's the only thing that's changing.
Overall you did a great job with top nav and footer 👍
I can't wait to see the finished product! Good luck! 👏
Hey Jude, the project looks cool! But it would be great if you fix some issues with it:
For the header you could try this:
[ ] For the header, I suggest you remove the flex-wrap, height, and width properties for now. (let flex manage these for you. Plus this is great because in the mobile version, you just have to give flex-direction as column and you'll have a better result.)
[ ] Remove height and width for .header-column1 and .header-column2
[ ] It seems that the browser defaults are causing unexpected results, you may have to include normalize CSS or custom CSS to remove them.
[ ] Finally, add an appropriate margin or padding to elements inside the header to keep them apart. The Next Web website has used
padding: 4px;For rest of the code:
[ ] Use a single CSS selector for all sections to add max-width and margin auto property.
[ ] You may have to correct the class name given below. It is misspelled as "founding-rounds-items" instead of "funding-round-items"
You have been using multiple similar properties on different selectors. You can refactor this to include the same properties in a single selector. For example, in the below code,
Notice that you have used the same height, width, and margin for all selectors. You don't have to repeat this. Just have a single selector for all these elements and let the selectors for background image be different because that's the only thing that's changing.
Overall you did a great job with top nav and footer 👍 I can't wait to see the finished product! Good luck! 👏