Scribd
Upload
9 views

report

Uploaded by

xhcnkh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views

report

Uploaded by

xhcnkh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Layout with Sections</title>
<style>
body {
/*margin: 0; /* Remove default margin */
/*padding: 0; /* Remove default padding */
font-family: Arial, sans-serif; /* Set a default font */
font-size: 16px; /* Set base font size */
line-height: 1.5; /* Improve readability */
background-color: #fff; /* Set background color */
color: #333; /* Set default text color */
text-rendering: optimizeLegibility; /* Improve text rendering for
better legibility */
-webkit-font-smoothing: antialiased; /* Improve text rendering on
webkit browsers */
-moz-osx-font-smoothing: grayscale; /* Improve text rendering on macOS
*/
word-wrap: break-word; /* Ensure long words break correctly */
box-sizing: border-box; /* Include padding and border in element's
total width and height */
min-height: 100vh; /* Ensure body takes full height of viewport */
/* Enable flexbox for better layout control */
flex-direction: column; /* Set default flexbox layout direction */
overflow-x: hidden; /* Prevent horizontal overflow */
}

.TableContent{
width:21%;
}

.vertical-line {
width: 1px;
background-color: black;
height: 100vh; /* Set the height of the line */
}

.OtherContent{
margin-left: 50px;
display: flex;
}

.MainElm{
MARGIN: 20PX;

}
.MainElm IMG{
WIDTH: 20px; HEIGHT:AUTO;
margin-right: 10px;
}

.UserLogo{
display:flex;
}
.UserLogo1 {
width: 40%;
}
.UserLogo1 img{
width: 70px; Height: auto;
}
.UserAcc{
width: 65%;
}
.Logout{

}
.Logout img{
margin-top: 10px;
width: 25px; Height: auto;
}

.Report{
margin-top: 50px;
}
.Report h1{
font-weight: bolder;
font-size:xx-large;

}
.Report select{
background-color: rgb(255, 255, 255);
width: 250px; height: 50px;
border-color: blueviolet;
border-width:medium;

}
.Report .report{
display:flex;
}

.required-indicator {
color: red;
font-size: 1.5em; /* Make the asterisk slightly bigger */
}

#month1{
font-size:medium;
}

#year{
font-size: medium;
}

.generate-button{
font-size:medium;
border-radius: 7px;
background-color: orange;
padding: 2.7px;
color: white;
}
</style>
</head>
<body>
<div style="display:flex">
<div class="TableContent">
<header class="LOGO_HEADER">
<img width="40" height="auto"
src="https://cdn-icons-png.freepik.com/256/11860/11860449.png?
semt=ais_hybrid">
<span style="font-size: 120%;">
<b style="font-size: 1.4em;">Smart</b>
<i style="color:orange">printing service</i>
</span>
</header>

<div class="Dashboard" style="margin:20px">


<img width="20" height="auto"
src="https://cdn-icons-png.freepik.com/256/17740/17740838.png?
semt=ais_hybrid">

<span style="margin-left:10px">
Dashboard
</span>
</div>

<div class="PrinterList" style="margin:20px">


<img style="width:20px; height:auto;"
src="https://cdn-icons-png.freepik.com/256/5337/5337035.png?
semt=ais_hybrid">

<span style="margin:10px">
Printer List
</span>
</div>

<div class="MainElm">
<img src="https://cdn-icons-png.freepik.com/256/16762/16762938.png?
semt=ais_hybrid">
<span>User List</span>
</div>

<div class="MainElm">
<img src="https://cdn-icons-png.freepik.com/256/4340/4340067.png">
<span>View History</span>
</div>

<div class="MainElm">
<img src="https://cdn-icons-png.freepik.com/256/2912/2912773.png?
semt=ais_hybrid">
<span>Report</span>
</div>

<div style="margin-top: 60%;"> </div>

<div class="UserLogo">

<div class="UserLogo1">
<img src="https://cdn-icons-png.freepik.com/256/8599/8599062.png?
semt=ais_hybrid">
</div>

<div class="UserAcc">
<span>
Nguyen Viet Hoang
</span>
<span style="font-size: 13px;">
[email protected]
</span>
</div>

<div class="Logout">
<img src="https://img.icons8.com/?size=100&id=2445&format=png">
</div>

</div>

</div>

<div class="vertical-line"></div>

<div class="OtherContent">
<div class="Report">
<h1>Report</h1>
<div class="report">
<select id="month1" name="month">
<option>Choose month...</option>
</select>
<span style="margin: 20px;"></span>
<select value="" id="year" name="year">
<option>Choose year...</option>
</select>
<span style="margin-left:5px;"></span>
<span class="required-indicator">*</span>
<div style="padding: 10px; margin-left: 30px;">
<div class="generate-button">Generate report</div>
</div>
</div>
<p style="font-size:medium; margin-top:20px;">
Choosing year is mandatory. Choose month to generate corresponding
report.
</p>
</div>
</div>
</div>
</body>
</html>

You might also like