231 lines
No EOL
16 KiB
HTML
231 lines
No EOL
16 KiB
HTML
<!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>Admin Dashboard</title>
|
|
<link rel="stylesheet" href="normalize.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body style="margin: 0;">
|
|
<lrgrid>
|
|
<left>
|
|
<logobox>
|
|
<img src="images/view-dashboard.png" alt="Dashboard Icon" id="logo">
|
|
<p id = "logotext">Dashboard</p>
|
|
</logobox>
|
|
<firstbox>
|
|
<home class="sidebar">
|
|
<img src="images/home.png" alt="Home">
|
|
<span class="sidebartext">Home</span>
|
|
</home>
|
|
<profile class="sidebar">
|
|
<img src="images/card-account-details-outline.png" alt="Profile">
|
|
<span class="sidebartext">Profile</span>
|
|
</profile>
|
|
<messages class="sidebar">
|
|
<img src="images/message-reply.png" alt="Messsages">
|
|
<span class="sidebartext">Messages</span>
|
|
</messages>
|
|
<history class="sidebar">
|
|
<img src="images/clock.png" alt="History">
|
|
<span class="sidebartext">History</span>
|
|
</history>
|
|
<tasks class="sidebar">
|
|
<img src="images/note-multiple.png" alt="Tasks">
|
|
<span class="sidebartext">Tasks</span>
|
|
</tasks>
|
|
<communities class="sidebar">
|
|
<img src="images/account-group.png" alt="Communities">
|
|
<span class="sidebartext">Communities</span>
|
|
</communities>
|
|
</firstbox>
|
|
<secondbox>
|
|
<settings class="sidebar">
|
|
<img src="images/cog.png" alt="Settings">
|
|
<span class="sidebartext">Settings</span>
|
|
</settings>
|
|
<support class="sidebar">
|
|
<img src="images/help-box.png" alt="Support">
|
|
<span class="sidebartext">Support</span>
|
|
</support>
|
|
<privacy class="sidebar">
|
|
<img src="images/shield-check.png" alt="Privacy">
|
|
<span class="sidebartext">Privacy</span>
|
|
</privacy>
|
|
</secondbox>
|
|
</left>
|
|
<right>
|
|
<rtop>
|
|
<rtophalf>
|
|
<img src="images/magnify.png" id="searchicon">
|
|
<input type="text" id="searchbar">
|
|
<img src="images/bell-ring-outline.png" alt="Bell" id="notificationbell">
|
|
<img src="images/ avatar.png" alt="User avatar" id="avatar">
|
|
<p id="name">John Doe</p>
|
|
</rtophalf>
|
|
<rbottomhalf>
|
|
<wrapper>
|
|
<img src="images/ avatar.png" id="avatarlower">
|
|
<namegrid>
|
|
<greeting>Hi there,</greeting>
|
|
<nameandtag>John Doe (@johndoe)</nameandtag>
|
|
</namegrid>
|
|
</wrapper>
|
|
<buttons>
|
|
<button class="headerbuttons">New</button>
|
|
<button class="headerbuttons">Upload</button>
|
|
<button class="headerbuttons">Share</button>
|
|
</buttons>
|
|
</rbottomhalf>
|
|
</rtop>
|
|
<rbottom>
|
|
<rbottoml>
|
|
<p class="rbottomheader">Your Projects</p>
|
|
<projectgrid>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Super Cool Project</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description. </div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Less Cool Project</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description.
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Impossible App</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description.
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Easy App</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description.
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Ad Blocker</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description.
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projectbox">
|
|
<div class="leftsliver"></div>
|
|
<div class="maincontent">
|
|
<div class="paragraph">
|
|
<p class="paragraphheader">Money Maker</p>
|
|
<p class="paragraphcontent">
|
|
This section is meant to contain information about the projects themselves. It can be any type of data from within the project itself, or maybe a simple short description.
|
|
</p>
|
|
</div>
|
|
<div class="buttons">
|
|
<img src="images/star-plus-outline.png" alt="" class="favorite"><img src="images/eye-plus-outline.png" alt="" class="watch"><img src="images/source-fork.png" alt="" class="fork">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</projectgrid>
|
|
</rbottoml>
|
|
<rbottomr>
|
|
<announcements>
|
|
<p class="rbottomheader">Announcements</p>
|
|
<announcementsgrid>
|
|
<announcementpara1 class="announcementparas">
|
|
<p class="announcementheader">Site Maintenance</p>
|
|
<p class="announcementtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in ante erat. Duis quis nibh vitae justo maximus ultricies. Phasellus pulvinar tortor vitae maximus mollis. Aliquam vitae nisl quis mi sodales porttitor gravida sit amet neque. Sed rhoncus purus ut lectus commodo tempus. Vestibulum rhoncus eros a tortor bibendum, a semper ipsum tincidunt. Phasellus id ipsum sed nisl aliquam tincidunt at eu quam. Pellentesque tristique, nisl ut volutpat lacinia, tortor massa rhoncus metus, at mollis turpis risus nec nisl. Proin ullamcorper laoreet porttitor. Phasellus tempus augue vel arcu egestas, vitae aliquet libero efficitur. Sed convallis eros id mi vehicula vulputate. Vestibulum maximus nunc in magna tincidunt ullamcorper. Praesent consequat, arcu in sodales congue, arcu augue fringilla elit, sodales ullamcorper sapien dui volutpat sapien.</p>
|
|
</announcementpara1>
|
|
<line></line>
|
|
<announcementpara2 class="announcementparas">
|
|
<p class="announcementheader">Community Share Day</p>
|
|
<p class="announcementtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in ante erat. Duis quis nibh vitae justo maximus ultricies. Phasellus pulvinar tortor vitae maximus mollis. Aliquam vitae nisl quis mi sodales porttitor gravida sit amet neque. Sed rhoncus purus ut lectus commodo tempus. Vestibulum rhoncus eros a tortor bibendum, a semper ipsum tincidunt. Phasellus id ipsum sed nisl aliquam tincidunt at eu quam. Pellentesque tristique, nisl ut volutpat lacinia, tortor massa rhoncus metus, at mollis turpis risus nec nisl. Proin ullamcorper laoreet porttitor. Phasellus tempus augue vel arcu egestas, vitae aliquet libero efficitur. Sed convallis eros id mi vehicula vulputate. Vestibulum maximus nunc in magna tincidunt ullamcorper. Praesent consequat, arcu in sodales congue, arcu augue fringilla elit, sodales ullamcorper sapien dui volutpat sapien.</p>
|
|
</announcementpara2>
|
|
<line></line>
|
|
<announcementpara3 class="announcementparas">
|
|
<p class="announcementheader">Updated Privacy Policy</p>
|
|
<p class="announcementtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in ante erat. Duis quis nibh vitae justo maximus ultricies. Phasellus pulvinar tortor vitae maximus mollis. Aliquam vitae nisl quis mi sodales porttitor gravida sit amet neque. Sed rhoncus purus ut lectus commodo tempus. Vestibulum rhoncus eros a tortor bibendum, a semper ipsum tincidunt. Phasellus id ipsum sed nisl aliquam tincidunt at eu quam. Pellentesque tristique, nisl ut volutpat lacinia, tortor massa rhoncus metus, at mollis turpis risus nec nisl. Proin ullamcorper laoreet porttitor. Phasellus tempus augue vel arcu egestas, vitae aliquet libero efficitur. Sed convallis eros id mi vehicula vulputate. Vestibulum maximus nunc in magna tincidunt ullamcorper. Praesent consequat, arcu in sodales congue, arcu augue fringilla elit, sodales ullamcorper sapien dui volutpat sapien.</p>
|
|
</announcementpara3>
|
|
</announcementsgrid>
|
|
</announcements>
|
|
<trending>
|
|
<p class="rbottomheader">Trending</p>
|
|
<trendinggrid>
|
|
<div class="trendingentryflex">
|
|
<img src="images/tegan.png" alt="" class="trendingimage">
|
|
<trendingparas>
|
|
<p class="trendingtag">@tegan</p>
|
|
<p class="trendingsubtitle">World Peace Builder</p>
|
|
</trendingparas>
|
|
</div>
|
|
<div class="trendingentryflex">
|
|
<img src="images/morgan.png" alt="" class="trendingimage">
|
|
<trendingparas>
|
|
<p class="trendingtag">@morgan</p>
|
|
<p class="trendingsubtitle">Amazing Project</p>
|
|
</trendingparas>
|
|
</div>
|
|
<div class="trendingentryflex">
|
|
<img src="images/kendall.png" alt="" class="trendingimage">
|
|
<trendingparas>
|
|
<p class="trendingtag">@kendall</p>
|
|
<p class="trendingsubtitle">Life Changing App</p>
|
|
</trendingparas>
|
|
</div>
|
|
<div class="trendingentryflex">
|
|
<img src="images/alex.png" alt="" class="trendingimage">
|
|
<trendingparas>
|
|
<p class="trendingtag">@alex</p>
|
|
<p class="trendingsubtitle">The Next Paradigm</p>
|
|
</trendingparas>
|
|
</div>
|
|
</trendinggrid>
|
|
</trending>
|
|
</rbottomr>
|
|
</rbottom>
|
|
</right>
|
|
</lrgrid>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |