https://github.com/blordeus/notifications-page-main
https://github.com/blordeus/notifications-page-main
html-css-javascript tailwind-css
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/blordeus/notifications-page-main
- Owner: blordeus
- Created: 2023-08-22T19:34:31.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T02:12:16.000Z (almost 3 years ago)
- Last Synced: 2025-02-27T07:58:41.271Z (over 1 year ago)
- Topics: html-css-javascript, tailwind-css
- Language: HTML
- Homepage: https://blordeus.github.io/notifications-page-main/
- Size: 1.62 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-template.md
Awesome Lists containing this project
README
# Frontend Mentor - Notifications page solution
This is a solution to the [Notifications page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
* [Overview](#overview)
* [The challenge](#the-challenge)
* [Screenshot](#screenshot)
* [Links](#links)
* [My process](#my-process)
* [Built with](#built-with)
## Overview
### The challenge
Users should be able to:
* Distinguish between "unread" and "read" notifications
* Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
* View the optimal layout for the interface depending on their device's screen size
* See hover and focus states for all interactive elements on the page
### Screenshot
### Links
* Solution URL: [solution](https://github.com/blordeus/notifications-page-main)
* Live Site URL: [live site](https://blordeus.github.io/notifications-page-main/)
## My process
### Built with
* Semantic HTML5 markup
* CSS custom properties
* Flexbox
* CSS Grid
* Mobile-first workflow
* TailwindCSS
## Author
* Frontend Mentor - [@blordeus](https://www.frontendmentor.io/profile/blordeus)
* Twitter - [@bryancreates](https://www.twitter.com/bryancreates)