Skip to content

Latest commit

 

History

History
94 lines (65 loc) · 2.39 KB

README.md

File metadata and controls

94 lines (65 loc) · 2.39 KB
Raw

WaveLength - News Homepage

A Modern News Homepage Design.

Table of contents

Overview

The challenge

Users should be able to:

  • Toggle the mobile Menu.
  • Theme should switch according to the User's device system Theme.
  • See hover and focus states for all interactive elements on the page
  • View the optimal layout for the interface depending on their device's screen size

Screenshot

Light Mode Preview

Links

My process

  • The first step was dividing the preview into sub-grid and then starting to construct HTML Layout.
  • The second step, was styling the HTML.
  • And then, Once the styling was done, added a bit of Javascript to Function Mobile Navbar.
  • Last Step for me was, Cleaning up the page a little bit.
  • And That's it, It took me around 2-2.5 hours to finish this one.
  • It was just a practice project.

Built with

  • Flexbox
  • CSS Grid
  • CSS custom properties
  • Mobile-first workflow
  • Semantic HTML5 markup

Also learned about this Media Funcition of CSS, see below:

@media (prefers-color-scheme: dark) {
      :root {
        --bg: #050412;
        --sidebar: #2F304C;
        --neutral-700: #B3B8EF;
        --svg: hsl(36, 100%, 99%);
        --hover: hsl(5, 85%, 73%);
        --accent: hsl(233, 8%, 79%);
        --primary-400: hsl(34, 84%, 57%);
        --read-hover: hsl(235, 99%, 92%);
        --neutral-900:  hsl(36, 100%, 99%);
    }
}

What I learned

  • Well, didn't learn something new but definitely improved in CSS Grid and Responsive Layouts.
  • And Anyway it was a practicing Project.

Continued development

  • Will continue learning more about the grid and Responsive layout UI.
  • Also, will use more of @Media (prefers-color-scheme).

Author

Acknowledgments

Credits to Google for helping out through the hover effect.