A fully responsive implementation using flexbox so it displays as it should at mobile and desktop sizes as well as sizes in-between. Implemented without using javascript.
I actually completed this a while back and never got round to submitting it. I used sass and sass variables but if I were to redo it I would probably use css custom properties.
Hi @blndcat,
very well done on this challenge, I like it 💪🏻
I do have a small improvement, to get it even closer to the original design:
You can center the entire content with flexbox. For this you initially have to give the body {min-height: 100vh;} to cover the entire viewport. Then you can center it as follows:
Display: flex;
align-items: center;
justify-content: center;
This is not the only wat to center elements, but I do find it the easiest. I highly recommend checking out this small guide on centering, to have a full range of tools you can use anytime.
Hope this helps!
Happy coding 🙂
Patrick
Margin is difficult, but I try my best to learn it...
Hi @obhasa12,
congrats on the challenge!
I really like your approach and the code looks pretty clean too, well done 💪
As a small improvement, I suggest centering the card properly with flexbox. For it to work, you need to give the body a min-height: 100vh, to cover the full viewport, and then simply the following (also on the body):
display: flex;
align-items: center;
justify-content: center;
Hope this is helpful and I am looking forward to more completed challenges 😉
Happy coding!
Patrick
I would be happy about feedback!
Hey @Damianeks,
congrats on completing your first challenge, it's looking very good 👍
There is a much easier way to center the card in this case.
If you give the body a min-height: 100vh to cover the full viewport and then give the .content-box a width, let's say of 20.6rem (according to the size you are aiming for), the card will be perfectly centered without having to specify the margins for the card, thanks to flexbox.
The code would look like this:
margin: 0px; padding: 0px; background-color: hsl(212, 45%, 89%); align-items: center; justify-content: center; display: flex; font-family: "Outfit", "sans-serif"; min-height: 100vh; } .content-box { box-sizing: border-box; background-color: hsl(0, 0%, 100%); padding: 15px 15px; border-radius: 20px; height: 550px; width: 20.6rem; }
If you keep this in mind when centering something on the page, it will make your life much easier and the code cleaner.
If you have any questions, let me know, I'm here to help 😉
Happy coding 💪
Patrick
Hello people! When I did this challenge in Visual Studio Code it shows me the background .svg (pseudo-element ::before) but when I upload it to Github it doesn't show it. I am sorry.
I appreciate your comments.
Hi @sneiderDev,
congrats on completing the challenge, well done!
To improve the code a bit, I suggest placing the content inside a <main> tag. You can then give the body a min-width: 100vh to cover the full screen and set the background with background-image: url("").
Depending on how the background displays then, you can adjust it with background-position and make the necessary tweaks.
I hope this feedback helps!
Well done again and keep going 💪
Happy coding 🙂
Patrick
Wasn't too sure how to do a side bar drop down for the mobile view instead it drops down from the top.
Hey @lgorvin,
congrats to completing this challenge! I did it myself and know how difficult this one can get.
Regarding the dropdown on the side: You can create a div with the entire navigation in it, give it a height of the entire page (I recommend specifying a height and not using 100vh, as the div will end sooner than the end of the page, if you scroll down).
You then give it a class and toggle it with javascript.
I still like your approach a lot and am even thinking that the navigation looks very good from the top too!
Feel free to check my solution to get a better idea of what I am trying to convey.
Hope this helps!
Happy coding and happy weekend to you :)
Patrick
Hello everyone,
Here is my solution for the " Intro section with dropdown navigation" challenge.
Any constructive comments are welcome.
Good coding !
Hi @Demyttenaere,
very well done on this challenge, I like it!
The only little improvements I would suggest, is to apply the eventlistener for the dropdowns, to the Features and Company text too, as users would most likely first click on the text instead of only the arrows.
You could also add en Eventlistener on the window, for when it resizes to remove all the dropdown classes. This way they will not stay open when changing screen size.
As a last point, I also suggest to toggle the classes for the dropdowns within the eventlistener functions. If you then click on one dropdown while the other one is open, the previous one closes automatically.
My solution is not perfect, but you can check it here to see what I mean.
Hope this little feedback helps!
Happy coding and happy weekend :)
I think I did terrible with the dropdowns. I want to learn the best practices and feedbacks would be greatly appreciated.
Hey @kiangopez,
nice job on this challenge. I also assume you do not have access to the figma file, which gives it even more merit!
Regarding the dropdowns, they are working fine, I would only make some adjustments:
Add an eventlistener for the window when it resizes and remove the dropdown classes when activated. This will ensure that the dropdown doesn't stay open, when changing screen sizes (for example turning the phone to landscape mode).
In the eventlisteners for each dropdown, also toggle the classes to be able to close one dropdown, when another one opens.
My approach is far from perfect, but you can check my code here to get an idea of what I mean.
Hope this helps!
Happy coding and happy weekend :)
Patrick
. Nothing was difficult . Both CSS and HTML, and also the way I displayed my repository on GitHub . I want to learn more about GitHub and how to display repositories in a better way
Hi @Hicham2012!
Well done on your first challenge here, good job!
You could improve the code a bit, by only using one div or main as container element and position everything inside of it. For this challenge, no more divs are needed. This will make it simpler for you to code and more readable for the future, if you work within a team.
I also suggest getting comfortable with using rem and em units instead of px, as these are scalable and will make everything easier in terms of responsiveness.
Hope this helps.
Great job again on the first challenge, can't wait to see more!
Happy coding and happy weekend :)
Patrick
Hello everyone, I need your help, I am really struggling with responsive design, I struggled with this one too, how do I go about it, I have read about fluid layouts, fluid images, and even media queries but it just doesn't seem to help because I'm having trouble implementing them. I will appreciate any feedback.
Hi @mukwende2000, congrats on the solution, it's looking really good!
I see that you are already familiar with media queries. The only thing missing to make your life much easier in terms of responsiveness, is using relative units like rem or em instead of px, as these will adjust automatically, depending on the root font-size you choose. If you for example declare html {font-size: 18px} and then use, let's say 1rem for the paragraphs, that means that the paragraph will have a font-size of 18px. 2rem would be 36px and so on.
I recommend checking out this little guide to get familiar with these.
Hope it helps and looking forward to see more of your solutions!
Happy Coding :)
Patrick
Hello Everyone !! 👋 This is my solution to the Four card feature section challenge. I've used CSS display Grid property to design the whole four card feature section along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.
Feedback is welcome ✨
@Mr-NotSoCreative Looking much better already! I would still add a min-width to the .card , just to make sure it won't resize when lowering the screen size.
This is my solution for the project as a begginer with simple concepts I've being learning. any advice to improve it will be welcome.
Hi @mcarpegna, very nicely done on this challenge, congrats!
You nailed it regarding the desktop size design.
To further improve the solution, I recommend also adding media queries for smaller screen sizes, by just changing the flex-direction to column in this case.
Great job again, keep going :)
Patrick
Hello Everyone !! 👋 This is my solution to the Four card feature section challenge. I've used CSS display Grid property to design the whole four card feature section along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.
Feedback is welcome ✨
Hey @Mr-NotSoCreative!
Very well done on this challenge, good job!
I saw that the screenshot solution is almost perfect, but when opening the website link, the card shrinks a lot on 1440px, due to the min-width: fit-content. I recommend changing it to min-width: 23rem, for example, to better define the dimensions on bigger screen sizes.
Very nice job again! Hope my short feedback helps :)
Patrick
