News homepage w/ (HTML + SASS + Bootstrap + JS Dark/Light Mode) π¨βπ»
Design comparison
Solution retrospective
π¨βπ» Hello everyone.
This was a really fun project to do, I really liked the colors in both dark mode and light mode, and I'm very satisfied with the layout structure, it was a great way to practice grid manipulation with Bootstrap!
I have a question for you, how do I make it so that when the burger menu is open, the background is dark?
I added:
- π¨βπ» Burguer Menu in the mobile version!
- π¨ Dark/Light Mode!
Feel free to leave comments on how I can improve my code.
Thanks! π
Community feedback
- @WebDevCamposPosted about 2 years ago
Hi man! I just had a peek from your final result and it is very impressive! However, if you allow me, I have a few suggestions to point out. First thing, the paragraphs' colors in the "New" section are difficult to read, because of contrast. And I'm afraid the side menu isn't working. I really like your design and how you give the images a "cover when hover" object-fit thing. And the navigation items are really cool with the underline on hover. That's that. Just improve the contrast and check the side menu. Kind regards!
Marked as helpful3@AdrianoEscarabotePosted about 2 years ago@WebDevCampos Thank you for the tips! Here the menu is working normally! tested in two different browsers and on mobile
1@WebDevCamposPosted about 2 years ago@AdrianoEscarabote Hi there! Recorded for better explanation. https://youtu.be/9h0qzEYoneM
Marked as helpful0@AdrianoEscarabotePosted about 2 years ago@WebDevCampos thanks for the record!
I really don't know why it's not working that way, but if you go to dev tools and shrink the screen, you'll see that it's working normally
0 - @BeatrizKurikiPosted almost 2 years ago
I saw your code and I am really impressed, your work is perfect!! Congratulations. And are you available for teaching?? hahaha Just kidding, but I like your site.
Marked as helpful1@AdrianoEscarabotePosted almost 2 years ago@BeatrizKuriki ahauaauhauh valeu demais Beatriz! fico feliz que tenha gostado!
0 - @VCaramesPosted about 2 years ago
Very impressive! Love your color choices!
Regarding you question,
You can do apply the following code to you javascript for when the "mobile nav" opens:
document.body.style.backgroundColor = "hsla(0, 0%, 26%, 0.5)";The other way is creating a div with an "opacity" and "hidden" class (in CSS give it the color you want the background to be) and use JS to remove the "hidden" class when the "mobile nav" opens.
Here are some suggestions to help improve your code:
-
The Header Element should be outside the Main Element.
-
Currently your Mobile nav is is not opening,
-
You can wrapped each ".block" in the Aside in Article Elements since they make sense on their own and can be independently distributed.
-
For these "Will hydrogen-fueled cars ever catch up to EVs?". They are not quotes they are sub-headings so they should be wrapped in a Heading Element..
Here's an example of how the Medium website uses theirs.
If you have any questions or need further clarification, let me know.
Happy Coding! π»π
Marked as helpful1@AdrianoEscarabotePosted about 2 years ago@vcarames Thanks for the js part! I will test it in future projects!
about the
maintag was an improvisation hahaha I needed a tag to put themax-width, other than thebody! but it was worth remembering0 -
- @correlucasPosted about 2 years ago
Great content as always π₯
I have only one tip about the dark mode, the boz in the right size has a low contrast between the textand and the bg. You wver check your colors with this tool
https://coolors.co/contrast-checker/112a46-acc8e5to see the contrast ratio.Keep it up ππ
Marked as helpful1@AdrianoEscarabotePosted about 2 years ago@correlucas Thanks bro, it will help a lot!
0 - @AndresFelipeForeroPosted almost 2 years ago
Hi,
about your question, you can use a dataAttribute, then you can use foreach and finally add the class you need.
example:
HTML
<body data-dark ></body> <main data-dark ></main>Javscript
$darkElements = document.querySelectorAll([data-dark]) $darkElements.forEach(el => el.classList.toggle("night"))CSS
.night { styles }that would be the summary, remember you have to use an event.
Marked as helpful0@AdrianoEscarabotePosted almost 2 years ago@AndresFelipeForero Thanks! I will test!
0 - @SinisaVukmirovicPosted almost 2 years ago
Hello!
How are you this damn good!
Amazing!
1 - @AbiekatkamPosted about 2 years ago
Great Work Bruh! Loved your style and themes.
1
Please log in to post a comment
Log in with GitHub
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