HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="/DOM.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="container1">
<div class="incident">
<h2 class="incident1">
Incident assigned to me
</h2>
<div class="box">
<p class="eight">8</p>
</div>
</div>
<span class="para">
<p class="small">
Last refreshed on 2024-03-01 23:08:50
</p>
</span>
</div>
<div class="container2">
<div class="boxes">
<div class="box1">
<i class="fa-regular fa-border-all"></i>
</div>
<div class="box2">
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="box3">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</div>
</div>
</div>
</div>
<div class="container_in">
<div class="container_in1">
<div class="progress">
<div class="progress_box">
<div class="progress_box1">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000027
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove">
Please remove the latest hotfix from my PC
</div>
<div class="date1">
2023-10-09 12:52:24
</div>
<div class="priority_1">
<div class="priority_11">
<p class="pp111">
Priority
</p>
<p class="pp112">
2-High
</p>
</div>
<div class="priority_12">
<p class="pp121">
Resolution SLA
</p>
<p class="pp122">
Breached
</p>
</div>
<div class="priority_13">
<p class="pp131">
SLA
</p>
<p class="pp132">
Priority 2 resoiution (8 hour)
</p>
</div>
<div class="priority_14">
<p class="pp141">
Assigned to
</p>
<p class="pp142">
ITIL User
</p>
</div>
</div>
</div>
</div>
<div class="container_in2">
<div class="progress">
<div class="progress_box">
<div class="progress_box2">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000041
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove2">
My desk phone does not work
</div>
<div class="date2">
2023-10-09 12:52:15
</div>
<div class="priority_2">
<div class="priority_21">
<p class="pp211">
<!-- Priority -->
</p>
<p class="pp212">
<!-- 2-High -->
</p>
</div>
<div class="priority_22">
<p class="pp221">
<!-- Resolution SLA -->
</p>
<p class="pp222">
<!-- Breached -->
</p>
</div>
<div class="priority_23">
<p class="pp231">
Priority
</p>
<p class="pp232">
3 - Moderate
</p>
</div>
<div class="priority_24">
<p class="pp241">
Assigned to
</p>
<p class="pp242">
ITIL User
</p>
</div>
</div>
</div>
</div>
<div class="container_in3">
<div class="progress">
<div class="progress_box">
<div class="progress_box1">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000027
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove3">
Rain is leaking on main DNS Server
</div>
<div class="date3">
2023-10-09 12:51:23
</div>
<div class="priority_3">
<div class="priority_31">
<p class="pp311">
<!-- Priority -->
</p>
<p class="pp312">
<!-- 2-High -->
</p>
</div>
<div class="priority_32">
<p class="pp321">
<!-- Resolution SLA -->
</p>
<p class="pp322">
<!-- Breached -->
</p>
</div>
<div class="priority_33">
<p class="pp331">
Priority
</p>
<p class="pp332">
1 - Critical
</p>
</div>
<div class="priority_34">
<p class="pp341">
Assigned to
</p>
<p class="pp342">
ITIL User
</p>
</div>
</div>
</div>
</div>
<div class="container_in4">
<div class="progress">
<div class="progress_box">
<div class="progress_box4">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000027
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove4">
JavaScript error on hiring page of corporate website
</div>
<div class="date1">
2023-10-09 12:46:30
</div>
<div class="priority_4">
<div class="priority_41">
<p class="pp411">
Priority
</p>
<p class="pp412">
1 - Moderate
</p>
</div>
<div class="priority_42">
<p class="pp421">
Resolve in
</p>
<p class="pp422">
2 Days 12 Hours 16 Minutes
</p>
</div>
<div class="priority_43">
<p class="pp431">
SLA
</p>
<p class="pp432">
Priority 2 resoiution (1 day)
</p>
</div>
<div class="priority_44">
<p class="pp441">
Assigned to
</p>
<p class="pp442">
ITIL User
</p>
</div>
</div>
</div>
</div>
<div class="container_in5">
<div class="progress">
<div class="progress_box">
<div class="progress_box5">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000027
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove5">
I need a replacement iphone, please
</div>
<div class="date5">
2023-10-09 12:45:32
</div>
<div class="priority_5">
<div class="priority_51">
<p class="pp511">
<!-- Priority -->
</p>
<p class="pp512">
<!-- 2-High -->
</p>
</div>
<div class="priority_52">
<p class="pp521">
<!-- Resolution SLA -->
</p>
<p class="pp522">
<!-- Breached -->
</p>
</div>
<div class="priority_53">
<p class="pp531">
Priority
</p>
<p class="pp532">
5 - planning
</p>
</div>
<div class="priority_54">
<p class="pp541">
Assigned to
</p>
<p class="pp542">
ITIL User
</p>
</div>
</div>
</div>
</div>
<div class="container_in6">
<div class="progress">
<div class="progress_box">
<div class="progress_box5">
<p class="progress_para1">
In Progress
</p>
<p class="progress_para2">
INC0000027
</p>
</div>
<div class="progress_box2">
<div class="three_icon">
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
</div>
</div>
<div class="remove6">
Need to add more memory to laptop
</div>
<div class="date6">
2023-10-09 12:44:35
</div>
<div class="priority_6">
<div class="priority_61">
<p class="pp611">
<!-- Priority -->
</p>
<p class="pp612">
<!-- 2-High -->
</p>
</div>
<div class="priority_62">
<p class="pp621">
<!-- Resolution SLA -->
</p>
<p class="pp622">
<!-- Breached -->
</p>
</div>
<div class="priority_63">
<p class="pp631">
Priority
</p>
<p class="pp632">
1 - Critical
</p>
</div>
<div class="priority_64">
<p class="pp641">
Assigned to
</p>
<p class="pp642">
ITIL User
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: "Inter", sans-serif;
}
.container{
height: 100px;
width: 100%;
display: inline;
display: flex;
/* border: 2px solid green; */
}
.container1{
width: 50%;
/* display: inline;
display: flex; */
/* border: 2px solid blue; */
}
.incident{
color: brown;
padding: 6px 0px 10px 4px;
display: inline;
display: flex;
}
.incident1{
/* justify-content: center;
align-items: center; */
margin-top: 10px;
}
.box{
height: 40px;
width: 40px;
border: 2px solid black;
background-color: thistle;
margin: 8px;
/* padding: 6px; */
/* justify-content: center;
font-size: 10px; */
}
.eight{
font-size: 25px;
font-weight: bold;
color: brown;
margin: 4px 0px 0px 8px;
}
.small{
margin-bottom: 4px;
font-weight: bold;
}
.container2{
width: 50%;
/* border: 2px solid black; */
}
.boxes{
display: inline;
display: flex;
margin: 5px;
justify-content: end;
/* font-size: 40px; */
}
.box1{
/* background-color: blue; */
height: 50px;
width: 50px;
/* border: 2px solid greenyellow; */
margin: 3px;
font-size: 35px;
/* padding: 3px 0px 0px 10px; */
display: flex;
justify-content: center;
align-items: center;
border-radius: 9px;
}
.box1:hover{
font-size: 35px;
color: white;
background-color: black;
}
.box2{
/* background-color: blue; */
height: 50px;
width: 50px;
/* border: 2px solid greenyellow; */
margin: 3px;
font-size: 35px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 9px;
/* padding: 3px 0px 0px 10px; */
}
.box2:hover{
font-size: 35px;
color: white;
background-color: black;
}
.box3{
/* background-color: blue; */
height: 50px;
width: 50px;
/* border: 2px solid greenyellow; */
margin: 3px;
font-size: 35px;
/* padding: 3px 0px 0px 10px; */
display: flex;
justify-content: center;
align-items: center;
border-radius: 9px;
}
.box3:hover{
font-size: 35px;
color: white;
background-color: black;
}
.container_in{
display: grid;
height: 650px;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 12px;
/* border: 2px solid blue; */
padding-top: 15px;
font-size: 18px;
}
/* .container_in1{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box1{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.progress_para1{
background-color: aquamarine;
}
.three_icon{
display: flex;
justify-content: end;
/* padding-top: 2px; */
}
.remove{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date1{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_1{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_11{
height: 75px;
/* border: 2px solid; */
}
.priority_12{
height: 75px;
/* border: 2px solid; */
}
.priority_13{
height: 75px;
/* border: 2px solid; */
}
.priority_14{
height: 75px;
/* border: 2px solid; */
}
/* .container_in2{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box2{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.remove2{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date2{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_2{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_21{
height: 75px;
/* border: 2px solid; */
}
.priority_22{
height: 75px;
/* border: 2px solid; */
}
.priority_23{
height: 75px;
/* border: 2px solid; */
}
.priority_24{
height: 75px;
/* border: 2px solid; */
}
/* .container_in3{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box3{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.remove3{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date3{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_3{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_31{
height: 75px;
/* border: 2px solid; */
}
.priority_32{
height: 75px;
/* border: 2px solid; */
}
.priority_33{
height: 75px;
/* border: 2px solid; */
}
.priority_34{
height: 75px;
/* border: 2px solid; */
}
/* .container_in4{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box4{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.remove4{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date4{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_4{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_41{
height: 75px;
/* border: 2px solid; */
}
.priority_42{
height: 75px;
/* border: 2px solid; */
}
.priority_43{
height: 75px;
/* border: 2px solid; */
}
.priority_44{
height: 75px;
/* border: 2px solid; */
}
/* .container_in5{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box5{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.remove5{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date5{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_5{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_51{
height: 75px;
/* border: 2px solid; */
}
.priority_52{
height: 75px;
/* border: 2px solid; */
}
.priority_53{
height: 75px;
/* border: 2px solid; */
}
.priority_54{
height: 75px;
/* border: 2px solid; */
}
/* .container_in6{
border: 2px solid black;
} */
.progress_box{
display: grid;
grid-template-columns: 3fr 1fr;
height: 30px;
width: 100%;
/* border: 2px solid red; */
}
.progress_box6{
display: grid;
grid-template-columns: 1fr 2fr;
height: 30px;
width: 100%;
}
.remove6{
display: grid;
grid-template-columns: 1fr;
height: 30px;
/* border: 2px solid red; */
font-weight: bold;
margin-top: 7px;
margin-top: 15px;
}
.date6{
display: grid;
grid-template-columns: 1fr;
height: 25px;
/* border: 2px solid red; */
margin-top: 15px;
}
.priority_6{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* border: 2px solid red; */
margin-top: 22px;
/* font-weight: bold; */
}
.priority_61{
height: 75px;
/* border: 2px solid; */
}
.priority_62{
height: 75px;
/* border: 2px solid; */
}
.priority_63{
height: 75px;
/* border: 2px solid; */
}
.priority_64{
height: 75px;
/* border: 2px solid; */
}
RESULT
0 Comments