Step-by-step guide to building a custom bank dashboard concept with HTML and CSS. Source code included for free.
.jpg "Create a Stunning Bank Dashboard using HTML & CSS (Source Code)")
Table of Contents
In today's fast-paced digital world, banks and financial institutions need powerful tools to manage their operations efficiently and provide their customers with an excellent user experience. A well-designed bank dashboard can play a pivotal role in achieving these goals. A bank dashboard is a centralized platform that enables bankers and financial professionals to monitor critical data, analyze trends, and make data-driven decisions.
In this comprehensive tutorial, we will guide you through the step-by-step process of creating a dynamic and visually appealing bank dashboard concept using HTML and CSS. Whether you are a seasoned web developer or a beginner, this guide will equip you with the knowledge and skills to design and implement your own custom bank dashboard.
What You Will Learn:
- Setting up the HTML Structure: We'll start by creating the foundation of our bank dashboard with HTML. You will learn how to structure the dashboard layout using semantic HTML elements. Proper structuring ensures better accessibility and makes the dashboard easier to maintain.
- Styling the Bank Dashboard with CSS: Next, we'll dive into the world of CSS to add style, color, and layout to our bank dashboard. You'll learn how to use CSS properties effectively to create an aesthetically pleasing and professional-looking interface.
- Optimizing for Responsiveness: We'll ensure that the bank dashboard looks and functions flawlessly on various devices, including desktops, tablets, and smartphones. A responsive design is essential to accommodate users with different screen sizes and devices.
Prerequisites:
To get the most out of this tutorial, a basic understanding of HTML and CSS is recommended. However, even if you are new to web development, we'll provide explanations and code samples to help you grasp the concepts.
Now that you understand what awaits you in this tutorial let's dive into the exciting world of bank dashboard development. So, let's get started with step one - Setting up the HTML structure!
Code by: Havard Brynjulfsen
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our dashboard.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Below is a detailed explanation of the different sections and elements within the HTML code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: The root element of the HTML document, and it specifies the language of the document (English in this case).
3. <head>: This section contains meta-information about the web page, such as the title, character encoding, viewport settings, and links to external resources (stylesheets and icon library).
4. <title>Bank dashboard concept</title>: The title of the web page that will be displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: Sets the character encoding to UTF-8, which supports a wide range of characters and is commonly used for multilingual content.
6. <meta name="viewport" content="width=device-width" />: Defines the viewport settings for responsive design, ensuring that the width of the page adapts to the width of the device.
7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">: Links to an external CSS reset stylesheet. The CSS reset helps to normalize default styling across different browsers.
8. <link rel="stylesheet" href="styles.css" />: Links to an external CSS file named "styles.css" that contains custom styles for the web page.
9. <body>: The body element contains the visible content of the web page.
10. <div class="app">: A container div that wraps the entire application.
11. <header class="app-header">: The header section of the web page containing the bank dashboard's top navigation, logo, user profile, and action buttons.
- Navigation elements: The navigation links to different sections of the bank dashboard, such as "Overview," "Payments," "Cards," "Account," "System," and "Business."
- User profile: A button displaying the user's name and profile picture.
- Action buttons: Two icon buttons, one with a magnifying glass icon and another with a bell icon.
12. <div class="app-body">: The main content area of the bank dashboard.
13. <div class="app-body-navigation">: The left sidebar navigation containing links to various sections of the dashboard.
14. <nav class="navigation">: A navigation list containing links to "Dashboard," "Scheduled," "Transfers," "Templates," "SWIFT," and "Exchange."
15. <footer class="footer">: The footer section of the sidebar, displaying the bank name and copyright information.
16. <div class="app-body-main-content">: The main content section of the dashboard, where different sections like "Service" and "Latest transfers" are presented.
17. <section class="service-section">: A section representing the "Service" area of the dashboard.
- Service section header: Contains a search field, a dropdown field, and a search button.
- Tiles: Each tile represents a different service, showing its name and relevant information.
- Service section footer: Displays information about payment for services.
18. <section class="transfer-section">: A section representing the "Latest transfers" area of the dashboard.
- Transfer section header: Contains filter options and buttons to manage transfers.
- Transfers: Each transfer represents a recent transaction, displaying information like the merchant, last four digits of the card used, and transaction amount.
19. <div class="app-body-sidebar">: The right sidebar section of the dashboard containing the "New Payment" section.
20. <section class="payment-section">: The "New Payment" section, displaying payment card options, recent payments, and frequently asked questions.
- Payment cards: Displaying different cards (Mastercard and Visa) for the user to choose from.
- Payments: Each payment card represents a recent payment, showing its type, amount, and an arrow button for more details.
- FAQ: A section with a search input for frequently asked questions.
- Payment section footer: Contains buttons for saving and accessing more settings.
21. <script src="https://unpkg.com/phosphor-icons"></script>: Loads an external JavaScript file that contains the Phosphor Icons library, which provides icons used throughout the web page.
This is the basic structure of our bank dashboard using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the dashboard concept is in place, the next step is to add styling to the bank dashboard using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our bank dashboard concept.
Let's go through the code and understand its different sections:
1. @import: This rule imports an external font from the Google Fonts API, specifically the "Be Vietnam Pro" font with various font weights and styles. The imported font will be used for the page's text.
2. :root: This selector defines custom CSS variables, which can be used throughout the entire CSS code to specify colors, fonts, and other styles. The colors specified are shades of gray, green, olive, and white.
3. body: This style block defines the styles for the body element of the page. It sets the font family to "Be Vietnam Pro" and sans-serif as a fallback, and sets the background color to a dark gray (#000000). The text color is set to the primary text color specified in the custom CSS variables.
4. *, *:before, *:after: This block applies the "box-sizing: border-box" property to all elements, including pseudo-elements (::before and ::after). This ensures that padding and borders are included in the specified width and height, making layout calculations easier.
5. img: This block applies styles to all img elements, making them display as block-level elements (occupying the full width of their parent container) and setting their maximum width to 100% to prevent images from overflowing their containers.
6. button, select, input, textarea: This block sets the font property of buttons, select elements, input fields, and text areas to "inherit", meaning they will inherit the font styles from their parent elements.
7. a: This block applies styles to anchor (link) elements, setting their color to "inherit," which means the link color will inherit the color of its parent element.
Next, there are several style blocks that define the layout and appearance of different components in the web page. The key components and their styles are as follows:
8. .app: This class styles a container for the main content of the web page. It sets the background color to a dark gray (#1f1f1f), adds padding, and displays its content in a flex column layout.
9. .app-header: This class styles the header section of the app. It uses a grid layout with three columns, defining their minimum and maximum sizes. The alignment of items within the header is also specified.
10. .app-body: This class styles the main content area of the app, using a grid layout with three columns, similar to the app-header.
11. .footer: This class styles the footer section of the app. It sets the margin at the top to auto, pushing the footer to the bottom of its parent container.
12. .logo: This class styles the logo section in the app-header. It aligns its items and sets some padding and border properties.
13. .navigation: This class styles the navigation section in the app-body. It applies styles to the links inside the navigation, including some hover effects.
14. .tiles: This class styles a container for tiles in the app-body. It uses a grid layout to display tiles in three columns, with responsive adjustments for smaller screens.
15. .tile: This class styles individual tiles within the .tiles container. It sets the background color, border radius, and applies some hover effects.
16. .transfer-section, .transfer, .payment-section, .faq: These classes define styles for different sections of the app, providing spacing and alignment.
17. .search-field, .dropdown-field: These classes style form elements, such as input fields and select elements, with custom designs.
18. .icon-button: This class styles buttons with icons inside, providing a circular shape, border, and some hover effects.
19. .card: This class styles payment cards with different colors (green, olive, and gray).
20. .flat-button, .save-button, .settings-button, .card-button: These classes define various button styles, each with its own appearance and hover effects.
21. input:focus, select:focus, a:focus, textarea:focus, button:focus: These styles apply the focus state of form elements, providing a box shadow to indicate focus.
This will give our bank dashboard an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-gray-900: #000000;
--c-gray-800: #1f1f1f;
--c-gray-700: #2e2e2e;
--c-gray-600: #313131;
--c-gray-500: #969593;
--c-gray-400: #a6a6a6;
--c-gray-300: #bdbbb7;
--c-gray-200: #f1f1f1;
--c-gray-100: #ffffff;
--c-green-500: #45ffbc;
--c-olive-500: #e3ffa8;
--c-white: var(--c-gray-100);
--c-text-primary: var(--c-gray-100);
--c-text-secondary: var(--c-gray-200);
--c-text-tertiary: var(--c-gray-500);
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: var(--c-gray-900);
color: var(--c-text-primary);
display: flex;
padding-top: 3vw;
padding-bottom: 3vw;
justify-content: center;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
button,
select,
input,
textarea {
font: inherit;
}
a {
color: inherit;
}
.responsive-wrapper {
width: 90%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.app {
min-height: 80vh;
width: 95%;
max-width: 1600px;
background-color: var(--c-gray-800);
padding: 2vw 4vw 6vw;
display: flex;
flex-direction: column;
}
.app-header {
display: grid;
grid-template-columns: minmax(min-content, 175px) minmax(max-content, 1fr) minmax(max-content, 400px);
-moz-column-gap: 4rem;
column-gap: 4rem;
align-items: flex-end;
}
@media (max-width: 1200px) {
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--c-gray-600);
}
}
@media (max-width: 1200px) {
.app-header-navigation {
display: none;
}
}
.app-header-actions {
display: flex;
align-items: center;
}
@media (max-width: 1200px) {
.app-header-actions {
display: none;
}
}
.app-header-actions-buttons {
display: flex;
border-left: 1px solid var(--c-gray-600);
margin-left: 2rem;
padding-left: 2rem;
}
.app-header-actions-buttons > * + * {
margin-left: 1rem;
}
.app-header-mobile {
display: none;
}
@media (max-width: 1200px) {
.app-header-mobile {
display: flex;
}
}
.app-body {
height: 100%;
display: grid;
grid-template-columns: minmax(min-content, 175px) minmax(max-content, 1fr) minmax(min-content, 400px);
-moz-column-gap: 4rem;
column-gap: 4rem;
padding-top: 2.5rem;
}
@media (max-width: 1200px) {
.app-body {
grid-template-columns: 1fr;
}
.app-body > * {
margin-bottom: 3.5rem;
}
}
.app-body-navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 1200px) {
.app-body-navigation {
display: none;
}
}
.footer {
margin-top: auto;
}
.footer h1 {
font-size: 1.5rem;
line-height: 1.125;
display: flex;
align-items: flex-start;
}
.footer h1 small {
font-size: 0.5em;
margin-left: 0.25em;
}
.footer div {
border-top: 1px solid var(--c-gray-600);
margin-top: 1.5rem;
padding-top: 1rem;
font-size: 0.75rem;
color: var(--c-text-tertiary);
}
.logo {
display: flex;
align-items: center;
padding-bottom: 1rem;
padding-top: 1rem;
border-bottom: 1px solid var(--c-gray-600);
}
@media (max-width: 1200px) {
.logo {
border-bottom: 0;
}
}
.logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.logo-title {
display: flex;
flex-direction: column;
line-height: 1.25;
margin-left: 0.75rem;
}
.logo-title span:first-child {
color: var(--c-text-primary);
}
.logo-title span:last-child {
color: var(--c-text-tertiary);
}
.navigation {
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--c-text-tertiary);
}
.navigation a {
display: flex;
align-items: center;
text-decoration: none;
transition: 0.25s ease;
}
.navigation a * {
transition: 0.25s ease;
}
.navigation a i {
margin-right: 0.75rem;
font-size: 1.25em;
flex-shrink: 0;
}
.navigation a + a {
margin-top: 1.25rem;
}
.navigation a:hover, .navigation a:focus {
transform: translateX(4px);
color: var(--c-text-primary);
}
.tabs {
display: flex;
justify-content: space-between;
color: var(--c-text-tertiary);
border-bottom: 1px solid var(--c-gray-600);
}
.tabs a {
padding-top: 1rem;
padding-bottom: 1rem;
text-decoration: none;
border-top: 2px solid transparent;
display: inline-flex;
transition: 0.25s ease;
}
.tabs a.active, .tabs a:hover, .tabs a:focus {
color: var(--c-text-primary);
border-color: var(--c-text-primary);
}
.user-profile {
display: flex;
align-items: center;
border: 0;
background: transparent;
cursor: pointer;
color: var(--c-text-tertiary);
transition: 0.25s ease;
}
.user-profile:hover, .user-profile:focus {
color: var(--c-text-primary);
}
.user-profile:hover span:last-child, .user-profile:focus span:last-child {
box-shadow: 0 0 0 4px var(--c-gray-800), 0 0 0 5px var(--c-text-tertiary);
}
.user-profile span:first-child {
display: flex;
font-size: 1.125rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--c-gray-600);
font-weight: 300;
}
.user-profile span:last-child {
transition: 0.25s ease;
display: flex;
justify-content: center;
align-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
margin-left: 1.5rem;
flex-shrink: 0;
}
.icon-button {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: transparent;
border: 1px solid var(--c-gray-500);
color: var(--c-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.25s ease;
flex-shrink: 0;
}
.icon-button.large {
width: 42px;
height: 42px;
font-size: 1.25em;
}
.icon-button i {
transition: 0.25s ease;
}
.icon-button:hover, .icon-button:focus {
background-color: var(--c-gray-600);
box-shadow: 0 0 0 4px var(--c-gray-800), 0 0 0 5px var(--c-text-tertiary);
}
.tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
margin-top: 1.25rem;
}
@media (max-width: 700px) {
.tiles {
grid-template-columns: repeat(1, 1fr);
}
}
.tile {
padding: 1rem;
border-radius: 8px;
background-color: var(--c-olive-500);
color: var(--c-gray-900);
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: 0.25s ease;
}
.tile:hover {
transform: translateY(-5px);
}
.tile:focus-within {
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
}
.tile:nth-child(2) {
background-color: var(--c-green-500);
}
.tile:nth-child(2):focus-within {
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-green-500);
}
.tile:nth-child(3) {
background-color: var(--c-gray-300);
}
.tile:nth-child(3):focus-within {
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-gray-300);
}
.tile a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.tile a .icon-button {
color: inherit;
border-color: inherit;
}
.tile a .icon-button:hover, .tile a .icon-button:focus {
background-color: transparent;
}
.tile a .icon-button:hover i, .tile a .icon-button:focus i {
transform: none;
}
.tile a:focus {
box-shadow: none;
}
.tile a:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tile-header {
display: flex;
align-items: center;
}
.tile-header i {
font-size: 2.5em;
}
.tile-header h3 {
display: flex;
flex-direction: column;
line-height: 1.375;
margin-left: 0.5rem;
}
.tile-header h3 span:first-child {
font-weight: 600;
}
.tile-header h3 span:last-child {
font-size: 0.825em;
font-weight: 200;
}
.service-section > h2 {
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.service-section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.service-section-header > * + * {
margin-left: 1.25rem;
}
@media (max-width: 1000px) {
.service-section-header {
display: none;
}
}
.service-section-footer {
color: var(--c-text-tertiary);
margin-top: 1rem;
}
.search-field {
display: flex;
flex-grow: 1;
position: relative;
}
.search-field input {
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border: 0;
border-bottom: 1px solid var(--c-gray-600);
background-color: transparent;
padding-left: 1.5rem;
}
.search-field i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.dropdown-field {
display: flex;
flex-grow: 1;
position: relative;
}
.dropdown-field select {
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border: 0;
border-bottom: 1px solid var(--c-gray-600);
background-color: transparent;
padding-right: 1.5rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: var(--c-text-tertiary);
}
.dropdown-field i {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flat-button {
border-radius: 6px;
background-color: var(--c-gray-700);
padding: 0.5em 1.5em;
border: 0;
color: var(--c-text-secondary);
transition: 0.25s ease;
cursor: pointer;
}
.flat-button:hover, .flat-button:focus {
background-color: var(--c-gray-600);
}
.mobile-only {
display: none;
}
@media (max-width: 1000px) {
.mobile-only {
display: inline-flex;
}
}
.transfer-section {
margin-top: 2.5rem;
}
.transfer-section-header {
display: flex;
align-items: center;
width: 100%;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--c-gray-600);
}
.transfer-section-header h2 {
font-size: 1.5rem;
}
.payments {
display: flex;
flex-direction: column;
margin-top: 1.5rem;
}
.payment {
display: flex;
align-items: center;
}
.payment + * {
margin-top: 1rem;
}
.card {
width: 125px;
padding: 0.375rem;
aspect-ratio: 3/2;
flex-shrink: 0;
border-radius: 6px;
color: var(--c-gray-800);
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.75rem;
font-weight: 600;
}
.card.green {
background-color: var(--c-green-500);
}
.card.olive {
background-color: var(--c-olive-500);
}
.card.gray {
background-color: var(--c-gray-300);
}
.card span:last-child {
align-self: flex-end;
}
.payment-details {
display: flex;
width: 100%;
flex-direction: column;
margin-left: 1.5rem;
}
.payment-details h3 {
font-size: 1rem;
color: var(--c-text-tertiary);
}
.payment-details div {
margin-top: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-top: 1px solid var(--c-gray-600);
border-bottom: 1px solid var(--c-gray-600);
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
.payment-details div span {
font-size: 1.5rem;
}
.filter-options {
margin-left: 1.25rem;
padding-left: 1.25rem;
border-left: 1px solid var(--c-gray-600);
display: flex;
align-items: center;
flex: 1 1 auto;
}
.filter-options p {
color: var(--c-text-tertiary);
font-size: 0.875rem;
}
.filter-options p + * {
margin-left: auto;
margin-right: 0.75rem;
}
@media (max-width: 1000px) {
.filter-options p {
display: none;
}
}
.transfers {
display: flex;
flex-direction: column;
margin-top: 1.5rem;
}
.transfer {
display: flex;
align-items: center;
width: 100%;
font-size: 0.875rem;
}
@media (max-width: 1000px) {
.transfer {
align-items: flex-start;
flex-direction: column;
}
}
.transfer + * {
margin-top: 2rem;
}
.transfer-logo {
background-color: var(--c-gray-200);
border-radius: 4px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.transfer-logo img {
width: 45%;
}
.transfer-details {
margin-left: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
@media (max-width: 1000px) {
.transfer-details {
flex-wrap: wrap;
margin-left: 0;
margin-top: 1rem;
}
}
.transfer-details div {
width: calc(100% / 3 - 1rem);
}
@media (max-width: 1000px) {
.transfer-details div {
width: 100%;
}
}
.transfer-details div + div {
margin-left: 1rem;
}
@media (max-width: 1000px) {
.transfer-details div + div {
margin-left: 0;
margin-top: 1rem;
}
}
.transfer-details dd {
color: var(--c-text-tertiary);
margin-top: 2px;
}
.transfer-number {
margin-left: 2rem;
font-size: 1.125rem;
flex-shrink: 0;
width: 15%;
display: flex;
justify-content: flex-end;
}
@media (max-width: 1000px) {
.transfer-number {
margin-left: 0;
margin-top: 1.25rem;
width: 100%;
justify-content: flex-start;
}
}
.payment-section > h2 {
font-size: 1.5rem;
}
.payment-section-header {
display: flex;
align-items: center;
margin-top: 1rem;
}
.payment-section-header p {
color: var(--c-text-tertiary);
font-size: 0.875rem;
}
.payment-section-header div {
padding-left: 1rem;
margin-left: auto;
display: flex;
align-items: center;
}
.payment-section-header div > * + * {
margin-left: 0.5rem;
}
.card-button {
display: flex;
width: 50px;
height: 34px;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: transparent;
transition: 0.25s ease;
border-radius: 4px;
border: 2px solid var(--c-gray-600);
color: var(--c-text-primary);
cursor: pointer;
}
.card-button.mastercard svg {
max-height: 15px;
}
.card-button:focus, .card-button:hover, .card-button.active {
color: var(--c-gray-800);
background-color: var(--c-white);
border-color: var(--c-white);
}
.faq {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
}
.faq p {
color: var(--c-text-tertiary);
font-size: 0.875rem;
}
.faq div {
margin-top: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-top: 1px solid var(--c-gray-600);
border-bottom: 1px solid var(--c-gray-600);
font-size: 0.875rem;
display: flex;
align-items: center;
}
.faq div label {
padding-right: 1rem;
margin-right: 1rem;
border-right: 1px solid var(--c-gray-600);
}
.faq div input {
border: 0;
background-color: transparent;
padding: 0.25em 0;
width: 100%;
}
.payment-section-footer {
display: flex;
align-items: center;
margin-top: 1.5rem;
}
.save-button {
border: 1px solid currentColor;
color: var(--c-text-tertiary);
border-radius: 6px;
padding: 0.75em 2.5em;
background-color: transparent;
transition: 0.25s ease;
cursor: pointer;
}
.save-button:focus, .save-button:hover {
color: var(--c-white);
}
.settings-button {
display: flex;
align-items: center;
color: var(--c-text-tertiary);
background-color: transparent;
border: 0;
padding: 0;
margin-left: 1.5rem;
cursor: pointer;
transition: 0.25s ease;
}
.settings-button i {
margin-right: 0.5rem;
}
.settings-button:focus, .settings-button:hover {
color: var(--c-white);
}
input:focus,
select:focus,
a:focus,
textarea:focus,
button:focus {
outline: 0;
box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-gray-300);
} Final Output:
.gif "Create a Stunning Bank Dashboard using HTML & CSS (Source Code)")
Conclusion:
In conclusion, this tutorial has guided you through the process of creating a dynamic bank dashboard concept using HTML and CSS. You learned to structure the dashboard with semantic HTML elements and add style and layout with CSS.
Optimizing the dashboard for responsiveness ensured seamless user experiences on various devices. Throughout the tutorial, you gained valuable insights into UI/UX principles and performance optimization.
By building a custom bank dashboard, you can tailor it to meet specific needs, enhancing efficiency and customer satisfaction. Remember to stay updated with the latest web development trends for continued success.
Happy coding, and best of luck with your future projects!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
