Personal Finance Dashboard Interface

? CSS Breakdown (styles.css)

? 1. General Reset

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

• Purpose: Sets default font, margin, padding, and background color to ensure consistent styling across browsers.

? 2. Dashboard Layout with Flexbox

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

• Explanation:
  • display: flex: Makes the main container a flex container, allowing the sidebar and main content to sit side by side.
  • min-height: 100vh: Ensures the dashboard takes up the full height of the viewport.

? 3. Sidebar Styling

.sidebar {
  background-color: #2a3f54;
  color: white;
  padding: 20px;
  width: 250px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #1abc9c;
}

• Key Concepts:
  • Background Color: Sets a dark theme for the sidebar.
  • Links: Styled with a hover effect using transition for a smooth color change.

? 4. Main Content and Header

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

• Flexbox for Header:

  • justify-content: space-between: Positions the title on the left and the profile icon on the right.
  • align-items: center: Vertically aligns the items.

• Rounded Image:

  • border-radius: 50% makes the profile icon circular.

? 5. Overview Cards

.overview-cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #1abc9c;
  color: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

• Flexbox Layout:

  • display: flex arranges the cards horizontally.
  • gap: 20px creates spacing between cards.
  • flex: 1 ensures cards are evenly distributed.

• Styling Techniques:

  • Background Color for visual appeal.
  • Box Shadow adds depth to the cards.

? 6. Transactions Table

.transactions table {
  width: 100%;
  border-collapse: collapse;
}

.transactions th, .transactions td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.transactions th {
  background-color: #2a3f54;
  color: white;
}

• Table Styling:
  • border-collapse: collapse removes spacing between table borders.
  • Consistent padding and border for cells.
  • Header row (th) styled with a dark background for contrast.

? Concepts Taught

1. Semantic HTML:
   
   Improves readability and structure.

2. Flexbox:
   
   Simplifies layout design, making it easier to create responsive interfaces.

3. Navigation Menus:
   
   How to structure and style sidebars with links.

4. Cards and Panels:
   
   Creating visually appealing and reusable components.

5. Tables:
   
   Formatting data in a structured manner.

6. Hover Effects and Transitions:
   
   Adding interactivity to navigation links.

View Project on GitHub

The above is the detailed content of Personal Finance Dashboard Interface. For more information, please follow other related articles on the PHP Chinese website!