In this blog, You’ll learn how to create Responsive Task Dashboard With HTML, CSS & JavaScript.
code is for a section that display a list of tasks that need to be complete. The section is divid into several parts, each with its own specific information.
The first part, “tasksHead,” displays a heading with the text “My Tasks.” This section also includes a button with three dots, which likely serves as a drop-down menu for additional options or actions related to the tasks.
The next part, “tasksList,” shows a list of the tasks that need to be complete. Each task is display in its own box, with a checkbox to indicate if the task is complete, a title, and a description. The tasks are also group into different categories, such as “To-Do,” “In Progress,” and “Completed.”
The “priority” section shows the priority level of each task, with a color-coded label indicating the level of urgency.
The “due” section display the due date for each task, providing a clear deadline for each task and helping to ensure that they are complete on time.
Overall, this code provides an easy-to-read and visually pleasing way to display important information about tasks, making it easy for team members and stakeholders to stay updated on the progress of each task. The use of color-coding and grouping helps to quickly identify which tasks are most urgent and which are already complete.
Video Tutorial of Responsive Task Dashboard
To see a live demonstration of the Task Dashboard, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Task Dashboard
HTML:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!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>Responsive Task Dashboard</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<!-- container start -->
<div class="container">
<!-- left start -->
<div class="left">
<!-- header start -->
<header>
<!-- logo start -->
<div class="logo">
<h2>Nikhil's Code</h2>
<div class="close">
<span class="material-symbols-outlined">
close
</span>
</div>
</div>
<!-- nav start -->
<nav>
<ul>
<li>
<a href="#">
<span class="material-symbols-outlined full">
dashboard
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="material-symbols-outlined">
check_box
</span>
<span class="title">Project</span>
</a>
</li>
<li>
<a href="#">
<span class="material-symbols-outlined">
group
</span>
<span class="title">My Client</span>
</a>
</li>
<li>
<a href="#">
<span class="material-symbols-outlined">
task
</span>
<span class="title">My Task</span>
</a>
</li>
<li>
<a href="#">
<span class="material-symbols-outlined">
chat_bubble
</span>
<span class="title">Message</span>
</a>
</li>
<li>
<a href="#">
<span class="material-symbols-outlined">
account_balance_wallet
</span>
<span class="title">My Billing</span>
</a>
</li>
</ul>
</nav>
<!-- nav end -->
</header>
<!-- header end -->
<!-- upgrade start -->
<div class="upgrade">
<h4>Upgrade to <bold>PRO</bold> for<br> more features</h4>
<div class="upBtn">
<button>Upgrade</button>
</div>
</div>
<!-- upgrade end -->
</div>
<!-- left end -->
<!-- right start -->
<div class="right">
<!-- top start -->
<div class="top">
<!-- searchBx start -->
<div class="searchBx">
<h2>Dashboard</h2>
<div class="inputBx">
<span class="material-symbols-outlined searchOpen">
search
</span>
<input type="text" placeholder="Search...">
<span class="material-symbols-outlined searchClose">
close
</span>
</div>
</div>
<!-- searchBx end -->
<!-- user start -->
<div class="user">
<span class="material-symbols-outlined">
notifications
</span>
<div class="userImg">
<img src="./user.png" alt="user">
</div>
<h2>Nikhil's Code<br><span>Administrator</span></h2>
<div class="arrow">
<span class="material-symbols-outlined">
expand_more
</span>
</div>
<div class="toggle">
<span class="material-symbols-outlined">
menu
</span>
<span class="material-symbols-outlined">
close
</span>
</div>
</div>
<!-- user end -->
</div>
<!-- top end -->
<!-- main start -->
<main>
<!-- projectCard start -->
<div class="projectCard">
<!-- projectTop start -->
<div class="projectTop">
<h2>Project Name<br><span>Company Name</span></h2>
<div class="projectDots">
<span class="material-symbols-outlined">
more_horiz
</span>
</div>
</div>
<!-- projectTop end -->
<!-- projectProgress start -->
<div class="projectProgress">
<div class="process">
<h2>In Progress</h2>
</div>
<div class="priority">
<h2>High Priority</h2>
</div>
</div>
<!-- projectProgress end -->
<!-- groupImg start -->
<div class="groupImg">
<a href="#">
<img src="./groupImg/img1.jpg" alt="img1">
</a>
<a href="#" style="--left: -10px;">
<img src="./groupImg/img2.jpg" alt="img2">
</a>
<a href="#" style="--left: -20px;">
<img src="./groupImg/img3.jpg" alt="img3">
</a>
<a href="#" style="--left: -30px;">
<img src="./groupImg/img4.jpg" alt="img4">
</a>
<a href="#" style="--left: -40px;">
<img src="./groupImg/img5.jpg" alt="img5">
</a>
<a href="#" style="--left: -50px;">
<span class="number">+3</span>
</a>
</div>
<!-- groupImg end -->
<!-- task start -->
<div class="task">
<h2>Task Done: <bold>35</bold> / 50</h2>
<span class="line"></span>
</div>
<!-- task end -->
<!-- due start -->
<div class="due">
<h2>Due Date: 25 August</h2>
</div>
<!-- due end -->
</div>
<!-- projectCard end -->
<!-- projectCard2 start -->
<div class="projectCard projectCard2">
<div class="projectTop">
<h2>Project Name<br><span>Company Name</span></h2>
<div class="projectDots">
<span class="material-symbols-outlined">
more_horiz
</span>
</div>
</div>
<div class="projectProgress">
<div class="process">
<h2>In Progress</h2>
</div>
<div class="priority">
<h2>High Priority</h2>
</div>
</div>
<div class="groupImg">
<a href="#">
<img src="./groupImg/img1.jpg" alt="img1">
</a>
<a href="#" style="--left: -10px;">
<img src="./groupImg/img2.jpg" alt="img2">
</a>
<a href="#" style="--left: -20px;">
<img src="./groupImg/img3.jpg" alt="img3">
</a>
<a href="#" style="--left: -30px;">
<img src="./groupImg/img4.jpg" alt="img4">
</a>
<a href="#" style="--left: -40px;">
<img src="./groupImg/img5.jpg" alt="img5">
</a>
<a href="#" style="--left: -50px;">
<span class="number">+3</span>
</a>
</div>
<div class="task">
<h2>Task Done: <bold>35</bold> / 50</h2>
<span class="line"></span>
</div>
<div class="due">
<h2>Due Date: 25 August</h2>
</div>
</div>
<!-- projectCard2 end -->
<!-- myTasks start -->
<div class="myTasks">
<!-- tasksHead start -->
<div class="tasksHead">
<h2>My Tasks</h2>
<div class="tasksDots">
<span class="material-symbols-outlined">
more_horiz
</span>
</div>
</div>
<!-- tasksHead end -->
<!-- tasks start -->
<div class="tasks">
<ul>
<li>
<span class="tasksIconName">
<span class="tasksIcon done">
<span class="material-symbols-outlined">
check
</span>
</span>
<span class="tasksName">
My Task 1
</span>
</span>
<span class="tasksStar full">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon notDone"></span>
<span class="tasksName">
My Task 2
</span>
</span>
<span class="tasksStar half">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon notDone"></span>
<span class="tasksName">
My Task 3
</span>
</span>
<span class="tasksStar half">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon done">
<span class="material-symbols-outlined">
check
</span>
</span>
<span class="tasksName tasksLine">
<underline>My Task 4</underline>
</span>
</span>
<span class="tasksStar half">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon done">
<span class="material-symbols-outlined">
check
</span>
</span>
<span class="tasksName tasksLine">
My Task 5
</span>
</span>
<span class="tasksStar full">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon notDone"></span>
<span class="tasksName">
My Task 6
</span>
</span>
<span class="tasksStar full">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
<li>
<span class="tasksIconName">
<span class="tasksIcon notDone"></span>
<span class="tasksName">
My Task 7
</span>
</span>
<span class="tasksStar half">
<span class="material-symbols-outlined">
star
</span>
</span>
</li>
</ul>
</div>
<!-- tasks ens -->
</div>
<!-- myTasks end -->
<!-- timeline start -->
<div class="timeline">
<!-- timelineHead start -->
<div class="timelineHead">
<h2>Timeline</h2>
<div class="timelineDots">
<span class="material-symbols-outlined">
more_horiz
</span>
</div>
</div>
<!-- timelineHead end -->
<!-- timelineVideos start -->
<div class="timelineVideos">
<ul>
<li>
<span class="videoText">
<span class="material-symbols-outlined full">
slideshow
</span>
<span class="text">
Create wireframe
</span>
</span>
<span class="timelineTime">
32:54
</span>
</li>
<li>
<span class="videoText">
<span class="material-symbols-outlined">
slideshow
</span>
<span class="text">
Logo Design
</span>
</span>
<span class="timelineTime">
30:00
</span>
</li>
<li>
<span class="videoText">
<span class="material-symbols-outlined">
slideshow
</span>
<span class="text">
Dashboard Design
</span>
</span>
<span class="timelineTime">
30:00
</span>
</li>
<li>
<span class="videoText">
<span class="material-symbols-outlined">
slideshow
</span>
<span class="text">
Landing Page
</span>
</span>
<span class="timelineTime">
30:00
</span>
</li>
</ul>
</div>
<!-- timelineVideos end -->
</div>
<!-- timeline end -->
<!-- calendar start -->
<div class="calendar">
<!-- calendarHead start -->
<div class="calendarHead">
<h2>October 2022</h2>
<div class="calendarIcon">
<span class="material-symbols-outlined">
chevron_left
</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
</div>
<!-- calendarHead end -->
<!-- calendarData start -->
<div class="calendarData">
<ul class="weeks">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="days">
<li class="inactive">25</li>
<li class="inactive">26</li>
<li class="inactive">27</li>
<li class="inactive">28</li>
<li class="inactive">29</li>
<li class="inactive">30</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li class="active">21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li class="inactive">1</li>
<li class="inactive">2</li>
<li class="inactive">3</li>
<li class="inactive">4</li>
<li class="inactive">5</li>
</ul>
</div>
<!-- calendarData end -->
</div>
<!-- calendar end -->
<!-- messages start -->
<div class="messages">
<!-- messagesHead start -->
<div class="messagesHead">
<h2>Messages</h2>
</div>
<!-- messagesHead end -->
<!-- messagesUser start -->
<div class="messagesUser">
<div class="messagesUserImg">
<img src="./groupImg/img1.jpg" alt="img1">
</div>
<h2>Marvin McKinney<br><span>Commodo volutpot noc</span></h2>
</div>
<!-- messagesUser end -->
<!-- messagesUser start -->
<div class="messagesUser">
<div class="messagesUserImg">
<img src="./groupImg/img2.jpg" alt="img2">
</div>
<h2>Wade Warren<br><span>Commodo volutpot noc</span></h2>
</div>
<!-- messagesUser end -->
<!-- messagesUser start -->
<div class="messagesUser">
<div class="messagesUserImg">
<img src="./groupImg/img3.jpg" alt="img3">
</div>
<h2>John Cooper<br><span>Commodo volutpot noc</span></h2>
</div>
<!-- messagesUser end -->
<!-- messagesUser start -->
<div class="messagesUser">
<div class="messagesUserImg">
<img src="./groupImg/img4.jpg" alt="img4">
</div>
<h2>Darlene Robertson<br><span>Commodo volutpot noc</span></h2>
</div>
<!-- messagesUser end -->
<!-- messagesUser start -->
<div class="messagesUser">
<div class="messagesUserImg">
<img src="./groupImg/img5.jpg" alt="img5">
</div>
<h2>Kristin Watson<br><span>Commodo volutpot noc</span></h2>
</div>
<!-- messagesUser end -->
</div>
<!-- messages end -->
</main>
<!-- main end -->
</div>
<!-- right end -->
</div>
<!-- container end -->
</body>
</html>
Left Side (Navigation Menu):
The menu is containe within a div element with the class “left”, and it includes a header and a navigation section.
The header starts with a div element for the logo, which displays the text “Nikhil’s Code” and a close button with a Material Design icon. The navigation section is create using an unordered list (ul) and list items (li) for each menu item. Each menu item includes a link (a) with a Material Design icon and a title for the menu item.
The menu also includes an “upgrade” section at the bottom of the menu, which prompts the user to upgrade to a PRO version of the website or application for additional features. This section includes a heading with the text “Upgrade to PRO for more features” and a button to initiate the upgrade process.
Overall, this code creates a visually appealing and easy-to-use navigation menu that is easy to customize and update. The use of Material Design icons adds a modern and professional touch to the menu. The upgrade section is a clever way to encourage users to upgrade and gain access to more features.
Top (Search Bar):
The code we will be looking at today is a simple and clean design that includes a search bar and a user profile section.
The search bar includes a search icon, input field, and close icon, allowing easy opening and closing without navigating away from the page.
Next, we have the “user” section, which is where users can access their personal profile and settings. This section includes a “notifications” icon, an image of the user, the user’s name and title, and an “expand_more” arrow. The user also has the option to toggle the menu by clicking on the “menu” and “close” icons.
The overall design of this code is clean and easy to navigate, making it user-friendly for anyone visiting the website. The use of icons also adds a modern touch to the design and helps to keep the code simple and streamlined.
This code is a simple and effective dashboard feature that can be integrated into any website. It allows users to search for information and access their personal settings without navigating away from the page.
Project Card:
This code is for a project card that displays information about a specific project. The project card is divide into several sections, each with its own specific information.
The first section, “projectTop,” displays the name of the project and the company it belongs to. It also includes a button with three dots, which likely serves as a drop-down menu for additional options or actions related to the project.
The next section, “projectProgress,” shows the current status of the project and its priority level. The “In Progress” text indicates that the project is currently being work on, while the “High Priority” text highlights that the project is considere important.
The “groupImg” section displays a group of images related to the project. Each image is a link, and the images are stack on top of each other with a small offset, creating a unique visual effect. The last image in the group shows a “+3” text, indicating that there are more images not shown.
The “task” section shows the progress of the tasks associated with the project, with a percentage of tasks completed out of the total number of tasks. A line is also display, likely to indicate the completion percentage.
Lastly, the “due” section displays the due date for the project. This provides a clear deadline for the project, helping to ensure that it is complete on time.
Overall, this code provides an easy-to-read and visually pleasing way to display important information about a project, making it easy for team members and stakeholders to stay updated on the project’s progress.
My Tasks:
This code is for a section that displays a list of tasks assigned to the user. The section is divide into two parts: “tasksHead” and “tasks.”
The “tasksHead” section includes a title “My Tasks” and a button with three dots, which likely serves as a drop-down menu for additional options or actions related to the tasks.
The “tasks” section displays the list of tasks assigned to the user in an unordered list. Each task is represente by a list item with two parts: “tasksIconName” and “tasksStar.”
The “tasksIconName” section includes an icon indicating the status of the task. If the task is complete, the icon will be a green checkmark, and if the task is not done, the icon will be an empty circle. The name of the task is also display in this section.
The “tasksStar” section includes a star icon that serves as a way to indicate the priority level of the task. The full star indicates that the task is consider high priority, while the half star indicates medium priority.
Overall, this code provides an easy-to-read and visually pleasing way to display important information about the tasks assigned to the user, making it easy for the user to stay updated on the task’s progress and priority level.
TimeLine:
This code is for a section that displays a timeline of different tasks or events. The section is divid into two parts: “timelineHead” and “timelineVideos.”
The “timelineHead” section includes a title “Timeline” and a button with three dots, which likely serves as a drop-down menu for additional options or actions related to the timeline.
The “timelineVideos” section displays a list of tasks or events in an unordered list. Each task or event is represent by a list item with two parts: “videoText” and “timelineTime.”
The “videoText” section includes an icon indicating the type of event, in this case, a slideshow icon. The name of the event or task is also display in this section.
The “timelineTime” section includes the duration of the task or event, in minutes.
Overall, this code provides an easy-to-read and visually pleasing way to display important information about the tasks or events in the timeline, making it easy for the user to stay updated on the progress of the project and the duration of each task.
Calendar:
This code is for a section that displays a calendar for a specific month. The section is divide into two parts: “calendarHead” and “calendarData.”
The “calendarHead” section includes the title of the current month, “October 2022” and two icons, one with a left chevron and one with a right chevron. These icons are likely use to navigate to the previous and next months.
The “calendarData” section displays the calendar for the current month. It includes two unordered lists: “weeks” and “days.”
The “weeks” list displays the days of the week, starting with Sunday and ending with Saturday.
The “days” list displays the days of the month, starting with the first day and ending with the last day. It also includes classes to indicate the status of the day, like “inactive” for days that are not in the current month, “active” for the current day, and no class for days that are in the current month.
Overall, this code provides an easy-to-read and visually pleasing way to display the current month’s calendar, making it easy for the user to navigate through different months and stay updated on the current day.
Message:
This code is for a section that displays a list of users that the user can message. The section is divide into two parts: “messagesHead” and “messagesUser.”
The “messagesHead” section includes a title “Messages” and serves as a header for the list of users.
The “messagesUser” section displays the list of users. Each user is represent by a div with two parts: “messagesUserImg” and “h2.”
The “messagesUserImg” section includes an image of the user.
The “h2” section includes the name of the user and a subtitle, “Commodo volutpot noc.”
Overall, this code provides an easy-to-read and visually pleasing way to display a list of users that the user can message, making it easy for the user to stay updated on the conversation.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Dubai;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#f4dbfb, #d8dbfe);
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: #f4dbfb;
}
::-webkit-scrollbar-thumb{
background: #f4dbfb;
border-radius: 10px;
border: 3px solid #fff;
}
.full {
font-variation-settings:
'FILL'1,
'wght'400,
'GRAD'0,
'opsz'48
}
/* container start */
.container {
position: relative;
width: 95%;
height: 95vh;
background: rgba(255, 255, 255, .2);
border-radius: 25px;
backdrop-filter: blur(10px);
border: 5px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .1),
0 0 10px rgba(0, 0, 0, .2),
0 0 15px rgba(0, 0, 0, .2);
padding: 20px;
display: flex;
gap: 20px;
overflow: hidden;
}
/* left start */
.container .left {
position: relative;
width: 250px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 20px 0;
}
/* header start */
.container .left header {
position: relative;
width: 100%;
}
/* logo start */
.container .left header .logo {
position: relative;
margin-bottom: 15px;
padding-left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .left header .logo h2 {
font-size: 1.2em;
font-weight: 500;
cursor: pointer;
color: #000;
}
.container .left header .logo .close {
position: relative;
left: -20px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: none;
cursor: pointer;
}
/* nav start */
.container .left header nav {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.container .left header nav ul {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.container .left header nav ul li {
position: relative;
width: 100%;
height: 50px;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.container .left header nav ul li a {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
text-decoration: none;
padding-left: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: .3s ease;
}
.container .left header nav ul li:first-child a,
.container .left header nav ul li a:hover {
transition: 0s;
background: #f1f3ff;
}
.container .left header nav ul li a::before {
content: '';
position: absolute;
right: 0;
width: 0;
height: 100%;
background: #6577ff;
transition: .3s ease;
}
.container .left header nav ul li:first-child a::before,
.container .left header nav ul li a:hover::before {
width: 4px;
}
.container .left header nav ul li a .material-symbols-outlined {
color: #999;
font-size: 1.7em;
margin-right: 10px;
}
.container .left header nav ul li a .title {
color: #999;
font-size: 1.1em;
}
.container .left header nav ul li:first-child a .material-symbols-outlined,
.container .left header nav ul li:first-child a .title,
.container .left header nav ul li a:hover .material-symbols-outlined,
.container .left header nav ul li a:hover .title {
color: #6577ff;
}
/* nav end */
/* upgrade start */
.container .upgrade {
position: relative;
width: calc(100% - 30px);
height: 180px;
background: linear-gradient(145deg, #d488ea, #8389f9);
border-radius: 20px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 10px;
z-index: -1;
overflow: hidden;
}
.container .upgrade h4 {
color: #fff;
font-size: 1.2em;
font-weight: 400;
margin-top: 25px;
}
.container .upgrade .upBtn {
position: relative;
width: 100%;
height: 40px;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.container .upgrade .upBtn button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
outline: none;
border: none;
font-size: 1.2em;
color: #000;
font-weight: 500;
cursor: pointer;
}
/* upgrade end */
/* left end */
/* right start */
.container .right {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
/* top start */
.container .right .top {
position: relative;
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #fff;
border-radius: 20px;
}
/* searchBx start */
.container .right .top .searchBx {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.container .right .top .searchBx h2 {
color: #000;
font-size: 1.4em;
cursor: pointer;
}
.container .right .top .searchBx .inputBx {
position: relative;
width: 250px;
height: 40px;
background: #f8f2fe;
border-radius: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
gap: 10px;
overflow: hidden;
}
.container .right .top .searchBx .input span {
color: #999;
cursor: pointer;
}
.container .right .top .searchBx .inputBx input {
position: relative;
width: 100%;
height: 25px;
outline: none;
border: none;
background: transparent;
margin-right: 10px;
font-size: 1.2em;
color: #000;
}
.container .right .top .searchBx .inputBx span.searchClose {
position: absolute;
right: 10px;
cursor: pointer;
display: none;
}
/* user start */
.container .right .top .user {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.container .right .top .user span {
color: #000;
cursor: pointer;
}
.container .right .top .user .userImg {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
cursor: pointer;
}
.container .right .top .user .userImg img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .right .top .user h2 {
font-size: 1.1em;
line-height: 18px;
white-space: nowrap;
cursor: pointer;
}
.container .right .top .user h2 span {
color: #999;
font-size: 0.8em;
}
.container .right .top .user .arrow {
position: relative;
width: 40px;
height: 40px;
border: 3px solid #999;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.container .right .top .user .arrow span {
color: #000;
font-size: 2em;
font-weight: 600;
transition: all .3s ease;
}
.container .right .top .user .arrow:hover span {
transform: scale(1.2);
}
.container .right .top .user .toggle {
position: relative;
width: 40px;
height: 40px;
border: 3px solid #999;
border-radius: 10px;
cursor: pointer;
text-align: center;
line-height: 50px;
display: none;
}
.container .right .top .user .toggle span {
color: #000;
font-size: 1.5em;
font-weight: 900;
transition: .3s ease, opacity 0s, visibility 0s;
}
.container .right .top .user .toggle:hover span {
transform: scale(1.1);
}
.container .right .top .user .toggle span:last-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
}
.container .right .top .user .toggle.active span:first-child {
opacity: 0;
visibility: hidden;
}
.container .right .top .user .toggle.active span:last-child {
opacity: 1;
visibility: visible;
}
/* user end */
/* top end */
/* main start */
.container .right main {
position: relative;
width: 100%;
height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 20px;
}
/* projectCard start */
.container .right main .projectCard {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
grid-row: 1 / 4;
}
.container .right main .projectCard .projectTop {
position: relative;
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .right main .projectCard .projectTop h2 {
color: #000;
font-size: 1.2em;
line-height: 18px;
cursor: pointer;
}
.container .right main .projectCard .projectTop h2 span {
color: #999;
font-size: 0.8em;
}
.container .right main .projectCard .projectTop .projectDots {
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.container .right main .projectCard .projectTop .projectDots span {
color: #000;
font-size: 1.8em;
font-weight: 700;
}
.container .right main .projectCard .projectProgress {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .right main .projectCard .projectProgress .process {
position: relative;
padding: 5px 10px;
background: #f1f3ff;
border-radius: 5px;
cursor: pointer;
}
.container .right main .projectCard .projectProgress .process h2 {
color: #8389f9;
white-space: nowrap;
font-size: 0.9em;
font-weight: 500;
letter-spacing: 0.5px;
}
.container .right main .projectCard .projectProgress .priority {
position: relative;
padding: 5px 10px;
cursor: pointer;
}
.container .right main .projectCard .projectProgress .priority::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: #ff0000;
border-radius: 50%;
box-shadow: 0 0 2px #ff0000,
0 0 5px #ff000077;
}
.container .right main .projectCard .projectProgress .priority h2 {
color: #ff0000;
white-space: nowrap;
font-size: 0.9em;
font-weight: 500;
}
.container .right main .projectCard .groupImg {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 15px 0;
}
.container .right main .projectCard .groupImg::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: rgba(0, 0, 0, .1);
}
.container .right main .projectCard .groupImg a {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
left: var(--left);
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.container .right main .projectCard .groupImg a img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .right main .projectCard .groupImg a:last-child {
border: 3px solid #999;
border-radius: 50%;
background: #fff;
}
.container .right main .projectCard .groupImg a:last-child span {
color: #999;
font-size: 1.2em;
}
.container .right main .projectCard .task {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
margin: 10px 0;
}
.container .right main .projectCard .task h2 {
color: #999;
font-size: 1em;
}
.container .right main .projectCard .task h2 bold {
color: #000;
}
.container .right main .projectCard .task .line {
position: relative;
width: 100%;
height: 5px;
background: rgba(0, 0, 0, .1);
border-radius: 50px;
z-index: -1;
overflow: hidden;
}
.container .right main .projectCard .task .line::before {
content: '';
position: absolute;
left: 0;
width: calc(100% - 25%);
height: 100%;
background: #6577ff;
z-index: 1;
border-radius: 50px;
}
.container .right main .projectCard .due {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.container .right main .projectCard .due h2 {
padding: 0px 10px;
border: 2px solid #f5b5f5;
border-radius: 5px;
font-size: 1.1em;
color: #f5b5f5;
}
/* projectTop end */
/* projectCard2 start */
.container .right main .projectCard.projectCard2 {
grid-row: 4 / 7;
}
.container .right main .projectCard.projectCard2 .projectProgress .process {
background: #dffde0;
}
.container .right main .projectCard.projectCard2 .projectProgress .process h2 {
color: #69bc72;
}
.container .right main .projectCard.projectCard2 .projectProgress .priority::before {
background: #69bc72;
box-shadow: 0 0 2px #69bc72,
0 0 5px #69bc7277;
}
.container .right main .projectCard.projectCard2 .projectProgress .priority h2 {
color: #69bc72;
}
.container .right main .projectCard.projectCard2 .task .line::before {
background: #f5c75f;
}
/* projectCard2 end */
/* myTasks start */
.container .right main .myTasks {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
grid-row: 1 / 5;
grid-column: 2 / 3;
}
.container .right main .myTasks .tasksHead {
position: relative;
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.container .right main .myTasks .tasksHead h2 {
position: relative;
width: 100%;
height: 100%;
line-height: 18px;
color: #000;
font-size: 1.2em;
cursor: pointer;
}
.container .right main .myTasks .tasksHead .tasksDots {
position: relative;
cursor: pointer;
}
.container .right main .myTasks .tasksHead .tasksDots span {
color: #000;
font-size: 1.8em;
font-weight: 700;
}
.container .right main .myTasks .tasks {
position: relative;
width: 100%;
height: 100%;
}
.container .right main .myTasks .tasks ul {
position: relative;
width: 100%;
height: 100%;
}
.container .right main .myTasks .tasks ul li {
position: relative;
width: 100%;
height: calc(100% / 7);
display: flex;
justify-content: space-between;
align-items: center;
}
.container .right main .myTasks .tasks ul li::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: rgba(0, 0, 0, .1);
}
.container .right main .myTasks .tasks ul li:last-child::before {
width: 0;
}
.container .right main .myTasks .tasks ul li .tasksIconName {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksIcon {
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksIcon.done {
color: #fff;
background: #69bc72;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksIcon.notDone {
background: #fff;
border: 3px solid #999;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksName {
position: relative;
color: #000;
cursor: pointer;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksName.tasksLine {
color: #999;
cursor: not-allowed;
}
.container .right main .myTasks .tasks ul li .tasksIconName .tasksName.tasksLine::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1.5px;
background: rgba(0, 0, 0, .3);
}
.container .right main .myTasks .tasks ul li .tasksStar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.container .right main .myTasks .tasks ul li .tasksStar.full {
color: #f5c75f;
}
.container .right main .myTasks .tasks ul li .tasksStar.half {
color: #f5c75f;
}
/* myTasks end */
/* timeline start */
.container .right main .timeline {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
grid-row: 5 / 7;
grid-column: 2 / 3;
padding: 20px;
overflow: hidden;
}
.container .right main .timeline .timelineHead {
position: relative;
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .right main .timeline .timelineHead h2 {
position: relative;
width: 100%;
height: 100%;
line-height: 18px;
color: #000;
font-size: 1.2em;
cursor: pointer;
}
.container .right main .timeline .timelineHead .timelineDots {
position: relative;
height: 100%;
cursor: pointer;
}
.container .right main .timeline .timelineHead .timelineDots span {
color: #000;
font-size: 1.8em;
font-weight: 700;
}
.container .right main .timeline .timelineVideos {
position: relative;
width: calc(100% + 40px);
height: 100%;
}
.container .right main .timeline .timelineVideos ul {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 2px;
}
.container .right main .timeline .timelineVideos ul li {
position: relative;
width: 100%;
height: calc(100% / 4);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
transition: .3s ease;
}
.container .right main .timeline .timelineVideos ul li:first-child::before,
.container .right main .timeline .timelineVideos ul li:hover::before {
content: '';
position: absolute;
left: 0;
background: #f1f3ff;
width: 100%;
height: 100%;
border-left: 4px solid #6577ff;
transition: 0s;
}
.container .right main .timeline .timelineVideos ul li .videoText {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
gap: 15px;
transition: .3s ease;
}
.container .right main .timeline .timelineVideos ul li .videoText .material-symbols-outlined {
color: #999;
transition: .3s ease;
}
.container .right main .timeline .timelineVideos ul li:hover .videoText .material-symbols-outlined,
.container .right main .timeline .timelineVideos ul li:first-child .videoText .material-symbols-outlined {
color: #6577ff;
}
.container .right main .timeline .timelineVideos ul li:first-child .videoText .text,
.container .right main .timeline .timelineVideos ul li:hover .videoText .text {
color: #000;
font-weight: 500;
}
.container .right main .timeline .timelineVideos ul li .timelineTime {
color: #999;
z-index: 1;
font-size: 0.9em;
transition: .3s ease;
}
.container .right main .timeline .timelineVideos ul li:hover .timelineTime,
.container .right main .timeline .timelineVideos ul li:first-child .timelineTime {
color: #000;
}
/* timeline end */
/* calendar start */
.container .right main .calendar {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
grid-row: 1 / 4;
grid-column: 3 / 4;
padding: 20px;
gap: 10px;
}
.container .right main .calendar .calendarHead {
position: relative;
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .right main .calendar .calendarHead h2 {
position: relative;
width: 100%;
height: 100%;
line-height: 18px;
color: #000;
font-size: 1.2em;
cursor: pointer;
}
.container .right main .calendar .calendarHead .calendarIcon {
position: relative;
display: flex;
gap: 10px;
}
.container .right main .calendar .calendarHead .calendarIcon .material-symbols-outlined {
position: relative;
width: 25px;
height: 25px;
border: 3px solid #9fa7d6;
border-radius: 50%;
cursor: pointer;
color: #9fa7d6;
font-size: 1.3em;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
.container .right main .calendar .calendarData {
position: relative;
width: 100%;
height: 100%;
}
.container .right main .calendar .calendarData .weeks {
position: relative;
width: 100%;
height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container .right main .calendar .calendarData .weeks li {
list-style: none;
cursor: pointer;
font-size: 1.1em;
font-weight: 500;
}
.container .right main .calendar .calendarData .days {
position: relative;
width: 100%;
height: calc(100% - 30px);
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, 1fr);
place-items: center;
}
.container .right main .calendar .calendarData .days li {
position: relative;
width: 30px;
height: 30px;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
color: #000;
border-radius: 50%;
cursor: pointer;
transition: .3s ease;
}
.container .right main .calendar .calendarData .days li.inactive {
color: #999;
}
.container .right main .calendar .calendarData .days li:hover {
background: #999;
color: #fff;
transition: 0s;
}
.container .right main .calendar .calendarData .days li.active {
background: #6577ff;
color: #fff;
}
/* calendar end */
/* messages start */
.container .right main .messages {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(5px);
border-radius: 20px;
box-shadow: rgba(255, 255, 255, 0.5) 35px 35px 68px 0px,
inset rgba(255, 255, 255, 0.6) -8px -8px 16px 0px,
inset rgb(255, 255, 255) 0px 11px 28px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
grid-row: 4 / 7;
padding: 20px;
gap: 5px;
}
.container .right main .messages .messagesHead {
position: relative;
width: 100%;
height: 30px;
}
.container .right main .messages .messagesHead h2 {
position: relative;
width: 100%;
height: 100%;
line-height: 18px;
color: #000;
font-size: 1.2em;
cursor: pointer;
}
.container .right main .messages .messagesUser {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
.container .right main .messages .messagesUser .messagesUserImg {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.container .right main .messages .messagesUser .messagesUserImg img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.container .right main .messages .messagesUser h2 {
position: relative;
color: #000;
cursor: pointer;
font-size: 1.2em;
line-height: 18px;
}
.container .right main .messages .messagesUser h2 span {
color: #999;
font-size: 0.8em;
}
/* messages end */
/* Responsive */
@media (max-width: 1176px) {
.container .left {
position: absolute;
left: -300px;
height: calc(100% - 5vh);
z-index: 11;
box-shadow: none;
transition: .5s ease;
}
.container .left.active {
left: 20px;
}
.container .right.overlay::before {
content: '';
position: absolute;
background: rgba(0, 0, 0, .4);
width: 100%;
height: 100%;
z-index: 10;
border-radius: 20px;
}
.container .right .top .user .toggle {
display: block;
}
}
@media (max-width: 927px) {
.container {
height: 100%;
margin: 30px 0;
}
.container .left.active {
width: calc(100% - 40px);
height: calc(100vh - 55px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.container .left header .logo .close {
display: block;
}
.container .right main {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1.4fr 1.4fr 1.6fr 1.3fr 1fr 1.3fr;
}
.container .right main * {
grid-row: unset !important;
grid-column: unset !important;
}
.container .right .top .searchBx h2 {
font-size: 1.2em;
}
.container .right .top .searchBx .inputBx {
width: 45px;
cursor: pointer;
}
.container .right .top .searchBx.active {
position: absolute;
width: calc(100% - 40px);
height: 45px;
background: #f8f2fe;
z-index: 10;
border-radius: 10px;
}
.container .right .top .searchBx.active h2 {
display: none;
}
.container .right .top .searchBx.active .inputBx {
width: 100%;
}
.container .right .top .searchBx.active .inputBx input {
padding-right: 40px;
}
.container .right .top .searchBx.active .inputBx span.searchClose {
display: block;
}
.container .right .top .user {
gap: 10px;
}
}
@media (max-width: 586px) {
.container .right .top .user .arrow {
display: none;
}
.container .right .top .user h2 {
display: none;
}
}
Left Side (Navigation Menu):
The code above is for the left side of a website layout. It includes a container div that holds a left div, which is used to create a sidebar navigation menu. The sidebar has a header section that includes a logo and a nav section. The logo includes an h2 title and a close button. The nav section has an unordered list of links for the website’s different pages. The links have a hover effect where the background color changes and an animation is added to the link’s before element. The upgrade section is also present but its styles have been omitted for brevity. This code is responsible for creating the visual design and functionality of the left sidebar navigation menu on the website.
Top (Search Bar):
The code above is for a project management dashboard that allows users to view and manage their projects in a visually appealing and easy-to-use way. The dashboard is divide into two main sections, the left and the right. The left section contains the navigation menu, logo, and upgrade button. The navigation menu is organize in a vertical list with each menu item represent by an icon and a title. The upgrade button is located at the bottom of the left section and allows users to upgrade their account for access to additional features.
The right section contains the main content of the dashboard, including the project cards, messages, and user information. The project cards are divide into several sections, including the project name and company name, project progress, group images, task progress, and due date. Each project card also has a more_horiz icon that allows users to access additional project details.
The messages section displays a list of users who have sent messages, including their name and profile image. The user information section displays the user’s name, profile image, and a toggle button that allows the user to switch between different views. The top section of the right section also includes a search bar and a user drop-down menu. The search bar allows users to search for specific projects or tasks, and the user drop-down menu allows users to access their account settings and log out.
Project Card:
The code above is for a project card that is display on the project management dashboard. The project card is designe to be visually appealing and easy to read, with a clean and modern layout. The card is divide into several sections, including the project name and company name, project progress, group images, task progress, and due date. Each section is designe to be easy to read and understand, with clear labels and information.
The code displays a project card with project name, company name, project status, priority level, images, task progress, and due date. The more_horiz icon allows access to more project details.
The code also includes CSS styling that is use to create the visual design of the project card. This includes styling for the projectTop, projectProgress, groupImg, task, and due sections, as well as the more_horiz icon. The styling includes colors, fonts, and layout elements that are use to make the project card look professional and visually appealing.
My Tasks:
The above code is for a “My Tasks” section of a project management dashboard. It displays a list of tasks that the user is responsible for completing. The section is designe to be visually appealing and easy to use, with a clean and modern layout.
The section is divide into two main parts: the tasks head and the tasks. The tasks head includes a title, “My Tasks”, and a more_horiz icon that allows users to access additional task details. The tasks section displays a list of tasks that the user is responsible for completing. Each task is represente by an icon and a name. The icon can be either a checkmark or a circle, indicating whether the task is complete or not.
The code also includes some design elements such as background-color, box-shadow, and padding to make the section look more polished. The section also uses flexbox and grid to make the layout more responsive and to ensure that the elements align correctly.
Overall, The code creates a visually appealing and user-friendly “My Tasks” section that allows users to easily manage their tasks and switch between different views with a toggle button.
TimeLine:
The code above is for a project management application and it includes three main sections: project card, my tasks, and timeline. Each section is containe within a
element and has its own unique styles and properties.
The project card section includes information about a specific project such as the project name, company name, progress, priority, group images, task progress, and due date. The section is style to have a white background with a blur effect, rounded corners, and a box shadow. The project top section includes the project name and company name, and the project dots section includes a horizontal ellipsis icon that serves as a dropdown menu.
The my tasks section shows a list of tasks with a completion status icon. It is style with a white background, blur effect, rounded corners, and a shadow. The section also includes a title and a dropdown menu icon.
The timeline section displays a list of videos with titles and timestamps. It is style with a white background, blur effect, rounded corners, and a box shadow. The timeline head section displays a title and a dropdown menu icon.
Overall, the code provides a clean and organized layout for the user to easily navigate and manage their projects and tasks within the application. The use of consistent styling for each section creates a cohesive visual experience for the user.
Calendar:
The code above is for a calendar feature in a web application. It’s a part of the main section of the right side of the web page, and is containe within a larger container div.
The calendar feature is use to take up a specific section of the grid layout, with grid-row spanning from 1 to 4 and grid-column spanning from 3 to 4. It also has a padding of 20px and a gap of 10px between its child elements.
The calendar feature has a header section, which includes a title “Calendar” and a button with a calendar icon. The header is designe to be interactive, with the title and icon being use as a cursor pointer.
Underneath the header is the calendar data section, which is divide into two parts: the weeks and the days. The weeks section display the days of the week and is use up to be responsive with the use of flexbox. The days section is use up as a grid layout with 6 rows and 7 columns, with each day of the month being represent by a circle. The days are also use up to be interactive, with different states for inactive, active, and hover days. The inactive days are gray, the active day is blue, and the hovered day is gray with white text.
Overall, the code creates a visually appealing and interactive calendar feature for the web application.
Message:
The above code is for a section of a website or web application called “messages.” It’s a part of a larger layout that is divide into sections using CSS grid. The section has a white background with a blur effect and a slight box-shadow to give it a modern and clean look.
The messages user section displays a small profile picture of a user, their name, and a subtitle with more information. The image is a circular shape and is use to cover the entire container. The name and subtitle are display in black, with the subtitle being slightly smaller in font size.
Overall, this code creates a simple and clean message section for a website or web application. It is easy to read and understand, making it easy for developers to make changes or updates as needed. The design is modern and visually pleasing, making it easy for users to navigate and understand.
Media Query:
The code includes media queries for responsive design across all devices. It uses CSS grid and media queries for a visually pleasing and responsive layout.
This code uses CSS and media queries to create a responsive layout for a web application. The layout adjusts at different screen sizes, such as hiding the sidebar navigation on smaller screens and changing the search bar to a full-width input field on even smaller screens.
Overall, this code demonstrates the use of CSS grid and media queries to create a responsive and visually appealing design for a web application.
JavaScript:
In between the <body></body> tags, you can include JavaScript code by enclosing it within <script> tags.
let toggle = document.querySelector('.toggle');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let close = document.querySelector('.close');
let body = document.querySelector('body');
let searchBx = document.querySelector('.searchBx');
let searchOpen = document.querySelector('.searchOpen');
let searchClose = document.querySelector('.searchClose');
toggle.addEventListener('click', () => {
toggle.classList.toggle('active');
left.classList.toggle('active');
right.classList.toggle('overlay');
body.style.overflow = 'hidden';
});
close.onclick = () => {
toggle.classList.remove('active');
left.classList.remove('active');
right.classList.remove('overlay');
body.style.overflow = '';
};
searchOpen.onclick = () => {
searchBx.classList.add('active');
};
searchClose.onclick = () => {
searchBx.classList.remove('active');
};
window.onclick = (e) => {
if (e.target == right) {
toggle.classList.remove('active');
left.classList.remove('active');
right.classList.remove('overlay');
body.style.overflow = '';
}
};
This code is for a section that has a toggle button to open and close a menu. The menu is divide into two parts: “left” and “right.”
When the toggle button is click, the class “active” is add to the toggle button and the left section of the menu. The class “overlay” is add to the right section of the menu, and the body’s overflow is use to ‘hidden’.
When the close button is click, the class “active” is remove from the toggle button and left section of the menu. The class “overlay” is remove from the right section of the menu, and the body’s overflow is use to ” (empty).
This code features a toggle button for opening and closing a search bar, which adds and removes the ‘active’ class.
Clicking on the right section of the menu when it’s open will close the menu and remove classes, making it disappear and resetting the body overflow to ” (empty).
