This project, named DashVendas, was developed as part of the CSS module in the FIAP Post-Tech program. The main goal was to apply the knowledge gained in styling using Sass/Scss and the Animate.css library to create an attractive and responsive design.
The project consists of an HTML file (index.html) and a Sass file (style.scss), which is compiled to generate the final CSS file (style.css). Sass was chosen as the preprocessor to facilitate the writing of more organized and reusable styles.
The project's content consists of two main sections: the sidebar and the main area.
The sidebar contains the DashVendas logo, navigation with links to the Dashboard and the List of Orders. It was styled using Sass variables for colors and mixins to simplify the writing of styles.
The main area includes a header with tool icons, a table section to list orders, and a numbers section with general information and a monthly sales graph.
-
Order Table: A responsive table displaying information about orders, including customer name, product, and address. A "See more" button allows for expanded viewing.
-
General Information and Monthly Sales Graph: A section displaying general statistics about total sales. It presents a simple graph of monthly sales with bars representing the values.
The style.scss file utilizes advanced features of Sass/Scss, such as variables, mixins, and nesting, to make styling more efficient and readable. The choice of Google Fonts adds a modern touch to the design, while the Animate.css library brings dynamic animations to enhance the overall user experience.