Submitted over 1 year ago

News homepage w/ (HTML + SASS + Bootstrap + JS Dark/Light Mode) 👨‍💻

#accessibility#bootstrap#sass/scss

Adriano• 33,960

@AdrianoEscarabote

Preview site View code

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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

Marcus Rangel• 460

@WebDevCampos

Posted over 1 year 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 helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@WebDevCampos Thank you for the tips! Here the menu is working normally! tested in two different browsers and on mobile

Marcus Rangel• 460

@WebDevCampos

Posted over 1 year ago

@AdrianoEscarabote Hi there! Recorded for better explanation. https://youtu.be/9h0qzEYoneM

Marked as helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year 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

Beatriz Kuriki• 60

@BeatrizKuriki

Posted over 1 year 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 helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@BeatrizKuriki ahauaauhauh valeu demais Beatriz! fico feliz que tenha gostado!

バレンタイン 😈• 64,250

@VCarames

Posted over 1 year 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.

https://medium.com

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Marked as helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@vcarames Thanks for the js part! I will test it in future projects!

about the main tag was an improvisation hahaha I needed a tag to put the max-width, other than the body! but it was worth remembering

Lucas 👾• 104,580

@correlucas

Posted over 1 year 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-acc8e5 to see the contrast ratio.

Keep it up 👍👆

Marked as helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@correlucas Thanks bro, it will help a lot!

Andrés Forero• 150

@AndresFelipeForero

Posted over 1 year 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 helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@AndresFelipeForero Thanks! I will test!

Sinisa Vukmirovic• 1,690

@SinisaVukmirovic

Posted over 1 year ago

Hello!

How are you this damn good!

Amazing!

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@SinisaVukmirovic Thanks!!

POTB• 330

@Peteonthebeat

Posted over 1 year ago

Better than the original. What more can I say, I envy your skills! Keep up the great work!

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@Peteonthebeat Thanks bro!!

Abhishek katkam• 290

@Abiekatkam

Posted over 1 year ago

Great Work Bruh! Loved your style and themes.

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@Abiekatkam thanks!!

Please log in to post a comment

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