<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav style="display:flex;" class="navbar navbar-expand-sm navbar-dark" style="height: 90px;">
<h1 class="title" >Logo</h1>
<a href="" style="margin-right:60px; margin-top: 40px; margin-left: 40px; text-decoration: none;">Dashboard</a>
<a href="" style="text-decoration: none; margin-top: 40px; ">Profile</a>
<button style="background-color:red; height: 20px; margin-top: 40px; margin-left: 800px; " value="logout" onClick="next(); ">
Logout
</button>
</nav>
<br/>
<button class="mybtn fas fa-list" onclick="Button(0); List();"><span> list</span></button>
<button class="mybtn Active fas fa-th-large" onclick="Button(1); Grid();"><span> grid</span></button>
<ul id="item">
<li class="myItem">
<tr>
<td class="btn-light">Mounika</td>
<td class="btn-light">
[email protected]</td>
<td class="btn-light">8742506164</td>
<td class="btn-light">crow</td>
</tr>
</li>
<li class="myItem">
<tr>
<td class="btn-light">Faheem</td>
<td class="btn-light">
[email protected]</td>
<td class="btn-light">9642506164</td>
<td class="btn-light">hero</td>
</tr>
</li>
<li class="myItem">
<tr>
<td class="btn-light">Sheru</td>
<td class="btn-light">
[email protected]</td>
<td class="btn-light">9642143164</td>
<td class="btn-light">cat</td>
</tr>
</li>
</ul>
</body>
<script>
function next(){
window.location="fsd.html";
document.write('Loggin out...');
setTimeout('next()',1000);
}
var MyBtn = document.getElementsByClassName("mybtn");
var index = 0 ;
function Button(n){
CurrentShowButton(index = n);
}
function CurrentShowButton(n){
for(var i = 0 ; i < MyBtn.length ; i++){
MyBtn[i].className = MyBtn[i].className.replace(" Active","");
}
MyBtn[n].className +=" Active";
}
function List(){
var Item = document.getElementById("item");
var MyItem = document.getElementsByClassName("myItem");
for(var i = 0 ; i < MyItem.length ; i++){
MyItem[i].style.margin = "10px 0";
}
Item.style.display = "block";
}
function Grid(){
var Item = document.getElementById("item");
var MyItem = document.getElementsByClassName("myItem");
for(var i = 0 ; i < MyItem.length ; i++){
MyItem[i].style.margin = "10%";
}
Item.style.display = "grid";
}
</script>
<style>
.navbar {
background: linear-gradient(90deg,
rgb(163, 128, 218) 0%,
rgb(219, 156, 164) 100%);
}
.title {
margin-left: 50px;
color: #fff;
}
h1 {
font-family: cursive;
font-size: xx-large;
}
body{
margin: 0;
font-family: 'Open Sans', sans-serif;
/* padding: 30px; */
background-repeat: no-repeat;
background-attachment: fixed;
background-image:
linear-gradient(
-160deg,
rgb(231, 175, 175),
rgb(250, 179, 179),
rgb(146, 224, 185)
)
;
}
span{
font-family: 'Open Sans', sans-serif;
}
.comment{
color: #fff;
}
.mybtn{
font-family: 'Open Sans', sans-serif;
padding: 10px 30px;
text-transform: uppercase;
border: none;
background-color: #eee;
border-radius: 5px;
outline: none;
}
.mybtn:hover{
background-color: #aaa;
}
.Active
,.Active:hover{
color: #fff;
background-color: #333;
border: 2px solid rgb(43, 255, 0);
}
#item {
margin-left: -40px;
list-style: none;
display: grid;
grid-template-columns:
repeat(auto-fit,minmax(15rem,1fr))
;
grid-gap: 0.6rem;
}
.myItem{
padding: 10px 20px;
background-image:
linear-gradient(
160deg,
rgb(237, 243, 147),
rgb(183, 241, 156),
rgb(252, 155, 155)
)
;
}
.myItem:hover{
box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.5);
}
</style>
</html>