Scribd
Upload
3 views

userlist

Uploaded by

xhcnkh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

userlist

Uploaded by

xhcnkh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User List</title>
<style>
.Content{
display: flex;
/*flex-direction: row;*/
}
.vertical-line{
width:1px;
height:100vh;
background-color:black;
}

.AddPrt{

}
.AddPrt h1{
font-size:x-large;
margin-bottom: 30px;
}
.AddPrt .addprt{
display: flex;
}
.addprt .prtinfo{

}
.addprt .prtfunc{

.prtfunc .func1{
display: grid;
font-weight: bold;
font-size: larger;
}
.prtinfo h2{
font-size:larger;
margin-bottom: 10px;
}
.prtinfo .info{
display:grid;
font-weight: bold;
font-size: larger;
gap: 20px;
}
.gnr-inpbox{
border-radius: 4px;
border: 1px solid;
padding: 7px;
padding-inline:15px;
font-size:medium
}
.lb-ipb{
gap:6px;
display: grid;
}
.gnr-chkbox{
border-radius: 2px;
border: 1px solid;
padding: 6px;
}
.gnr-chklb{
margin:1px; margin-left: 6px;
}
.submit{
background-color:orange;
color:white;
border-radius: 10px;
border-color: orange;
padding: 5px;
padding-inline:15px;
font-size:medium;
}
.Filter{
background-color:lightgoldenrodyellow;
color:black;
border-radius: 13px;
border-color: orange;
padding-inline: 40px;
font-size: 15px;
}
.Filter h1{
font-size:x-large;
}
.Filter .filform{
display: grid;
gap:20px;
font-size:large;
font-weight: bold;
}
.date-date{
display:flex;
gap:12px;

}
.date-date .in-date{
display:grid;
gap:6px;
}
select{
font-size:1000%;
}
.filter-userlist{
display:flex;
gap:10vw;
}

.usrlist
}
/*
.userlist column{
display:flex;
}
.userlist .Username{
display:flex;
flex-direction: column;
}
.userlist .Fullname{
display:flex;
flex-direction: column;
}
.userlist .Roll{

}
.userlist .Action{

}
.userlist .Status{

.User header{
font-weight: bold;
font-size:larger;
margin-bottom: 10px;
}
.User-table{
width:50vw;
text-align: left;
table-layout: fixed;
}
.User th{
font-weight: bold;
font-size: larger;

}
.User-table tbody{
}
.User-table tr{
}
.User-table thead{
}

.userlist .tbl{
display:flex;
flex-direction: column;
gap:10px;
}
.User .tbl-heads{
gap:10px;
display:flex;
font-weight: bold;
font-size: larger;
margin-bottom: 10px;
}
.User .tbl-heads .head{
width:100px;
}
.User .tbl-row{
display:flex;
gap:10px;
font-size:medium;
}
.User .tbl-bd .data{
width:100px;
}
*/
.tbl{

}
table{
border-spacing:40px 20px;

.tbl thead{
font-weight: bold;
font-size: x-large;
}
.tbl tbody{
font-size: large;
}
.tbl tr{
text-align: left;
padding:10px;
}
</style>
</head>
<body>
<div class="Content">
<div class="TableContent">

</div>
<div class="vertical-line"></div>
<div style="margin-left: 45px;"></div>
<div class="UserList">
<div style="margin-top: 15vh;"></div>
<div class="filter-userlist"">
<div class=Filter>
<h1>Filter</h1>
<form class="filform">
<input type=text class=gnr-inpbox style="width: auto;" placeholder="Enter
Info">
<div class="date-date">
<div class=in-date>
<label>Start Date</label>
<input type=date class=gnr-inpbox style="width:auto"
placeholder="Enter Date">
</div>
<div class=in-date>
<label>End Date</label>
<input type=date class=gnr-inpbox style="width:auto"
placeholder="Enter Date">
</div>
</div>
<div class="lb-ipb"">
<label>Campus</label>
<select>
<option>LTK</option>
<option>Di An</option>
</select>
</div>
<div class="lb-ipb"">
<label>Buiding</label>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div class="lb-ipb"">
<label>Date & Time</label>
<input type="datetime" class=gnr-inpbox placeholder="Enter Date &
Time"">
</div>

<div style="display: flex;justify-content:right;">


<button class="submit" type="submit">Proceed</button>
</div>
<div style="margin-bottom:20px;"></div>
</form>
</div>
<div class=usrlist>
<!--
<div class="User-tbl">
<div class="tbl-heads">
<div class="head">Username</div>
<div class="head">Fullname</div>
<div class="head">Roll</div>
<div class="head">Action</div>
<div class="head">Status</div>
</div>
<div class="tbl-row"">
<div class="data">hoang2k4</div>
<div class="data">Nguyen Viet Hoang</div>
<div class="data">Admin</div>
<div class="data">Config Printer</div>
<div class="data">Active</div>
</div>
</div>
-->
<table class="tbl">
<thead>
<tr>
<th>Username</th>
<th>Fullname</th>
<th>Roll</th>
<th>Action</th>
<th>Status</th>
</tr>
</thead>
<tbody class=tbl-row>
<tr>
<td>Nguyen Hoang</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
<tr>
<td>Ngueynm Van An</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
<tr>
<td>Hoang Van Thu</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
<tr>
<td>Hoang Quan</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
<tr>
<td>Nguyen Hoang thai an</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
<tr>
<td>Nguyen an binh</td>
<td>Nguyen vieethoan</td>
<td>Admin</td>
<td>baidjcnaji</td>
<td>qajdkcfancajkcn</td>
</tr>
</tbody>
</table>
<!--
<div class=Username>
<header >Username</header>
<span>Huynh Duy Tan</span>
</div>
<div class=Fullname>
<header>Full Name</header>
<span>Huynh Duy Tan</span>
<span>Huynh Duy Tan</span>
<span>Huynh Duy Tan</span>
</div>
<div class=Roll>
<header>Roll</header>
</div>
<div class="Action">
<header>Action</header>
</div>
<div class=Status>
<header>Status</headerf>
</div>
-->
</div>
</div>
</div>
</div>
</body>
</html>

You might also like