This project is a responsive dashboard layout implemented using HTML and CSS. It includes a left vertical menu, a header with two rows, and a main section containing a card section, announcements, and a trending section. The layout uses CSS Grid to achieve a flexible and responsive design.
- Responsive design using CSS Grid
- Left vertical menu with logo and navigation options
- Header with two rows, including search bar, notification icon, avatar, and user information
- Main section with a card section, announcements, and a trending section
- Customizable styles and colors
To use this layout in your project, simply copy the provided HTML and CSS code into your project files.
- Copy the entire HTML code from the provided example and paste it into your project's HTML file.
- Copy the entire CSS code from the provided example and paste it into your project's CSS file.
Now you can open your HTML file in a web browser to see the dashboard layout in action.
This dashboard layout uses basic colors and styles, which you can easily customize to match your preferences or project requirements.
To customize the layout:
- Open the CSS file and look for the style rules related to colors and typography.
- Modify the color and font values to suit your desired look and feel.
For example, you can change the background color of the left menu by modifying the background-color property in the .left-menu rule.
This layout has been tested and is compatible with modern web browsers, including:
- Google Chrome
- Mozilla Firefox
- Apple Safari
- Microsoft Edge
Please note that this layout may not work as expected in older browsers, such as Internet Explorer, due to their limited support for CSS Grid.
This project is available under the MIT License. See the LICENSE file for more information.