Submitted
Time Tracking Dashboard
- HTML
- CSS
- JS
@User9511
Submitted
Submitted
Submitted
Submitted
1.Mark All as Read Button: Users can click the "Mark all as read" button to mark all unread notifications as read. The notification count is updated accordingly.
2.Interactive Notifications: Users can click on individual notifications to mark them as read. The notification count is updated dynamically.
3.Responsive Design: The page is designed to be responsive, providing a seamless experience on screens of various sizes.
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
I had a horizontal scrolling issue with my project on mobile devices.
I have solved this issue by using the following code
header {
overflow-x: hidden;
max-width: 100vw;
}
and then adding this .is-active
class to the header using Javascript:
.is-active {
overflow: visible;
}
Submitted
Submitted
.image-original-dt {
background-image: url(.images/image-product-desktop.jpg)
}
I removed the images from the CSS and instead placed them directly into the HTML
<img src="./images/image-product-desktop.jpg" alt="bottle of Gabrielle Essence Eau De Parfum" class="image-original-dt">
Which of the methods of placing images is best practise ? Placing images into HTML or CSS?
Any feedback is welcome!
Thanks, Shane
Submitted
I had issues getting the .SVG's to change colour on :hover
My solution was to specify 'svg path' i.e
svg path:hover { fill: var(--Strong-Cyan); }
I had issues getting this to work on Tablet sized devices.
My solution was to add a media query for tablets:
@media only screen and (min-width: 481px) and (max-width: 820px) { }
I wasn't sure exactly how to use correct semantic HTML.
Any feedback on this would be appreciated
Thanks!