How to Create Glass Dashboard with HTML and CSS

Hello everyone! Are you eager to learn how to design a stunning glass dashboard using HTML and CSS? In this step-by-step tutorial, we will guide you through the process of building a captivating dashboard that can be customized and utilized for both personal and professional purposes.

Step 1: Setting Up the Project: | HTML And CSS

To kickstart your journey, the first step is to create a new folder on your computer to organize your project files. Within this neatly organized folder, you’ll need to create two essential files: “index.html” and “styles.css”. The “index.html” file will serve as the foundation, establishing the basic structure of your dashboard, while the “styles.css” file will house the CSS rules required for styling your dashboard to perfection.

Image Download

Step 2: HTML Setup:

In the

section of your “index.html” file, include essential meta tags to define the character set, viewport settings, and page title. Additionally, link your “styles.css” file to your HTML file using the tag.

Step 3: Building the Dashboard Structure: | HTML And CSS

To construct the dashboard, we will utilize a combination of HTML and CSS. First, create a

with a class of “dashboard” to serve as the main container. Inside the “dashboard” , create another with a class of “sidebar” to hold the profile, navigation, and Pro section.

Step 4: Sidebar Section: | HTML And CSS

Inside the “sidebar”

, create a with a class of “profile” to contain the user’s picture, name, and description. Following that, create another with a class of “sidebar-items” to house the navigation links. Within the “sidebar-items” , create four tags with a class of “sidebar-item”. Each tag will encompass an image and a title.

Step 5: Pro Section:

Next, create a

with a class of “pro” to accommodate the Pro section. Within the “pro” , add a heading and an image.

Step 6: Main Content Section:

Now, construct another

with a class of “main” to hold the dashboard’s content. Inside the “main” , include a heading and two links with a class of “skill”. Each link will incorporate an image, a title, and a progress bar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div class="dashboard">
        <div class="sidebar">
            <div class="profile">
                <div class="profile-img-box">
                    <img src="assets/images/profile.jpg" alt="">
                </div>
                <h3 class="name">John Doe</h3>
                <p class="desc">Beginner</p>
            </div>
            <div class="sidebar-items">
                <a href="#" class="sidebar-item">
                    <div class="si-img-box">
                        <img src="assets/images/skills.png" alt="">
                    </div>
                    <h4 class="si-name active">Skills</h4>
                </a>
                <a href="#" class="sidebar-item">
                    <div class="si-img-box">
                        <img src="assets/images/courses.png" alt="">
                    </div>
                    <h4 class="si-name">Courses</h4>
                </a>
                <a href="#" class="sidebar-item">
                    <div class="si-img-box">
                        <img src="assets/images/upcoming.png" alt="">
                    </div>
                    <h4 class="si-name">Upcoming</h4>
                </a>
                <a href="#" class="sidebar-item">
                    <div class="si-img-box">
                        <img src="assets/images/library.png" alt="">
                    </div>
                    <h4 class="si-name">Library</h4>
                </a>
            </div>
            <div class="pro">
                <h4 class="pro-text">Join pro for <br> free courses</h4>
                <div class="pro-img-box">
                    <img src="assets/images/premium-quality.png" alt="">
                </div>
            </div>
        </div>
        <div class="main">
            <h1>My English Skills</h1>
            <div class="skill">
                <div class="skill-content">
                    <div class="skill-img-box">
                        <img src="assets/images/read.png" alt="">
                    </div>
                    <div class="skill-detail">
                        <h2 class="skill-title">Reading</h2>
                        <p>211 Days</p>
                        <div class="skill-progress">
                            <div class="progress progress-1"></div>
                        </div>
                    </div>
                </div>
                <h2 class="percent">60%</h2>
            </div>
            <div class="skill">
                <div class="skill-content">
                    <div class="skill-img-box">
                        <img src="assets/images/writing.png" alt="">
                    </div>
                    <div class="skill-detail">
                        <h2 class="skill-title">Writing</h2>
                        <p>114 Days</p>
                        <div class="skill-progress">
                            <div class="progress progress-2"></div>
                        </div>
                    </div>
                </div>
                <h2 class="percent">40%</h2>
            </div>
            <div class="skill">
                <div class="skill-content">
                    <div class="skill-img-box">
                        <img src="assets/images/speaking.png" alt="">
                    </div>
                    <div class="skill-detail">
                        <h2 class="skill-title">Speaking</h2>
                        <p>371 Days</p>
                        <div class="skill-progress">
                            <div class="progress progress-3"></div>
                        </div>
                    </div>
                </div>
                <h2 class="percent">80%</h2>
            </div>

        </div>
    </div>
    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="circle-3"></div>
</body>

</html>

Step 7: Styling the Dashboard:

It’s time to style your dashboard using CSS! Leverage CSS to customize the fonts, colors, backgrounds, borders, and other design elements of your dashboard. You can also employ CSS to create captivating animations, smooth transitions, and appealing effects to enhance the user experience.

Step 8: Testing and Responsiveness: | HTML And CSS

Finally, in Step 8, ensure your dashboard is fully functional and responsive. Thoroughly test it in various web browsers and on different devices to provide a seamless experience for users.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
}

p {
    color: #7351b3;
}

h1,
h2.skill-title {
    color: #4e2599;
}

body {
    background: linear-gradient(35deg, #BA38D7, #7332EB, #A200DA);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard {
    width: 60%;
    min-height: 80vh;
    background: linear-gradient(to right bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2));
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, .5);
    z-index: 3;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background-color: rgba(255, 255, 255, .2);
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-img-box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name {
    margin-top: 1rem;
    color: #4e2599;
}

.si-img-box {
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 1rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    margin-bottom: .7rem;
}

.sidebar-item:hover .si-name {
    color: #A200DA;
}

.si-name {
    color: #4e2599;
    font-weight: 500;
}

.active {
    color: #A200DA;
}

.pro-img-box {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 1rem;
}

.pro {
    display: flex;
    align-items: center;
    background-color: #7332EB;
    padding: 1rem;
    border-radius: 1rem;
    color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: .3s;
}

.pro:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* main */

.main {
    padding: 2rem;
    height: max-content;
}

.skill {
    background-color: rgba(255, 255, 255, .3);
    padding: 1rem 2rem;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: .3s;
}

.skill:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.skill-content {
    display: flex;
    align-items: center;
    width: 80%;
}

.skill-img-box {
    position: relative;
    min-width: 60px;
    height: 60px;
    margin-right: 2rem;
}

.skill-detail {
    width: 100%;
}

.skill-title {
    color: #333;
}

.skill-progress {
    position: relative;
    height: 1rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    overflow: hidden;
}

.progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #7332EB;
}

.progress-1 {
    width: 60%;
}

.progress-2 {
    width: 40%;
}

.progress-3 {
    width: 80%;
}

.percent {
    color: #4e2599;
}


/* circles */

.circle-1 {
    height: 200px;
    width: 200px;
    background-color: aqua;
    position: absolute;
    border-radius: 50%;
    top: 5%;
    right: 13%;
}

.circle-2 {
    height: 300px;
    width: 300px;
    background-color: #d3dfdb;
    position: absolute;
    border-radius: 50%;
    bottom: -5%;
    left: 10%;
}

.circle-3 {
    height: 100px;
    width: 100px;
    background-color: #35d19d;
    position: absolute;
    border-radius: 50%;
    bottom: 65%;
    left: 40%;
}

Conclusion:

Congratulations! You have successfully learned how to create a stunning glass dashboard using CSS HTML.

In conclusion, this tutorial has guided you through the process of designing a stunning glass dashboard using HTML and CSS. By following these steps and incorporating more transition words into your sentences, you can create a visually appealing and user-friendly dashboard. So, let’s dive in and start building your dream dashboard! Feel free to utilize this tutorial as a reference for your future projects. Happy coding!

Blog