final
This commit is contained in:
ak
commit
4682b953a0
24 changed files with 962 additions and 0 deletions
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# admin-dashboard
|
||||||
|
|
||||||
|
Static admin dashboard made in HTML and CSS - no functionality
|
||||||
BIN
images/ avatar.png
Normal file
BIN
images/ avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
images/account-group.png
Normal file
BIN
images/account-group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 599 B |
BIN
images/alex.png
Normal file
BIN
images/alex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
images/bell-ring-outline.png
Normal file
BIN
images/bell-ring-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 B |
BIN
images/card-account-details-outline.png
Normal file
BIN
images/card-account-details-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 B |
BIN
images/clock.png
Normal file
BIN
images/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
BIN
images/cog.png
Normal file
BIN
images/cog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 B |
BIN
images/eye-plus-outline.png
Normal file
BIN
images/eye-plus-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
BIN
images/help-box.png
Normal file
BIN
images/help-box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 479 B |
BIN
images/home.png
Normal file
BIN
images/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
BIN
images/kendall.png
Normal file
BIN
images/kendall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
images/magnify.png
Normal file
BIN
images/magnify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 B |
BIN
images/message-reply.png
Normal file
BIN
images/message-reply.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
BIN
images/morgan.png
Normal file
BIN
images/morgan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
images/note-multiple.png
Normal file
BIN
images/note-multiple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 B |
BIN
images/shield-check.png
Normal file
BIN
images/shield-check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 587 B |
BIN
images/source-fork.png
Normal file
BIN
images/source-fork.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
BIN
images/star-plus-outline.png
Normal file
BIN
images/star-plus-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
BIN
images/tegan.png
Normal file
BIN
images/tegan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/view-dashboard.png
Normal file
BIN
images/view-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
231
index.html
Normal file
231
index.html
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
<!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>
|
||||||
431
normalize.css
vendored
Normal file
431
normalize.css
vendored
Normal file
|
|
@ -0,0 +1,431 @@
|
||||||
|
/* Document
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in
|
||||||
|
* IE on Windows Phone and in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Edge, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dl dl,
|
||||||
|
dl ol,
|
||||||
|
dl ul,
|
||||||
|
ol dl,
|
||||||
|
ul dl {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin on nested lists in Edge 18- and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ol ul,
|
||||||
|
ul ol,
|
||||||
|
ul ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Correct the inheritance of border color in Firefox.
|
||||||
|
* 3. Show the overflow in Edge 18- and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct text decoration in Edge 18-, IE, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in iOS 4-7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images within links in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the overflow in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabular data
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct table border color inheritance in all Chrome, Edge, and Safari.
|
||||||
|
* 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-color: inherit; /* 1 */
|
||||||
|
text-indent: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin on controls in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Show the overflow in IE.
|
||||||
|
* 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button {
|
||||||
|
overflow: visible; /* 1 */
|
||||||
|
text-transform: none; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style buttons in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in Edge 18- and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge 18- and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct display in Edge 18- and IE.
|
||||||
|
* 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the margin in Firefox and Safari.
|
||||||
|
* 2. Remove the default vertical scrollbar in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin: 0; /* 1 */
|
||||||
|
overflow: auto; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10-.
|
||||||
|
* 2. Remove the padding in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: inherit;
|
||||||
|
opacity: 0.54;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding of focus outlines in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus outline styles unset by the previous rule in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the additional :invalid styles in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge 18- and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct styles in Edge 18-, IE, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
background-color: white;
|
||||||
|
border: solid;
|
||||||
|
color: black;
|
||||||
|
display: block;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog:not([open]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scripting
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* User interaction
|
||||||
|
* ========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
297
style.css
Normal file
297
style.css
Normal file
|
|
@ -0,0 +1,297 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
lrgrid, right, rbottom, rtop, namegrid, projectgrid, .projectbox, .maincontent, trendinggrid, announcementsgrid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
left, logobox, firstbox, secondbox, .sidebar, rtophalf, rbottomhalf, wrapper, buttons, .trendingentryflex, .buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
logobox, firstbox, secondbox, buttons {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
left, firstbox, secondbox {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
logobox, .sidebar {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph, trendinggrid, .trendingimage, announcementsgrid, line {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rbottomheader {
|
||||||
|
padding-top: 1vh;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rbottomheader, left, projectgrid, .announcementheader, .announcementtext, .trendingtag, .trendingsubtitle {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
left, .rbottomheader, greeting, .paragraphheader {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logotext, rtophalf, wrapper {
|
||||||
|
flex: 2 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar, rtophalf, wrapper, buttons, .buttons, .trendingentryflex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
right, #searchbar {
|
||||||
|
background-color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logotext, #name, .announcementheader, .trendingtag, .trendingsubtitle {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logotext, #name, .announcementheader, .announcementtext, .trendingtag, .trendingsubtitle {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name, nameandtag, .headerbuttons, .announcementheader {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
left, nameandtag {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
left, .headerbuttons {
|
||||||
|
background-color: #1992d4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchbar, .headerbuttons {
|
||||||
|
border-radius: 50px;
|
||||||
|
border-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons, .paragraphcontent, trendinggrid, announcementsgrid, .announcementtext, line {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectbox, trendinggrid, announcementsgrid {
|
||||||
|
border-radius: 7.5px;
|
||||||
|
box-shadow: 1px 1px 5px -.25px darkgray;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons, trendinggrid, announcementsgrid {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
lrgrid {
|
||||||
|
grid-template-columns: 21% 1fr;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
right {
|
||||||
|
grid-template-rows: 17.5% 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
logobox {
|
||||||
|
flex: 0.75 0 auto;
|
||||||
|
align-items: flex-start;
|
||||||
|
column-gap: 10px;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
margin-left: -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logotext {
|
||||||
|
font-size: 30px;
|
||||||
|
padding-top: 7.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
firstbox {
|
||||||
|
flex: 1 10 auto;
|
||||||
|
row-gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
secondbox {
|
||||||
|
flex: 7 1 auto;
|
||||||
|
row-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebartext, #searchbar {
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
rtop {
|
||||||
|
box-shadow: -5px 7px 5px -5px darkgray;
|
||||||
|
grid-template-rows: 40% 60%;
|
||||||
|
padding-left: 30px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
rbottom {
|
||||||
|
grid-template-columns: 72.5% 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
rtophalf {
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchbar {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
flex: 1 1 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchicon {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notificationbell {
|
||||||
|
margin-left: 20vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatar {
|
||||||
|
max-width: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
margin-left: 1.5vw;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatarlower {
|
||||||
|
max-width: 72px;
|
||||||
|
max-height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
namegrid {
|
||||||
|
grid-template-rows: 10% 1fr;
|
||||||
|
gap: 5px;
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
buttons {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
buttons:last-child {
|
||||||
|
margin-right: .75vw;
|
||||||
|
}
|
||||||
|
.headerbuttons {
|
||||||
|
width: 88px;
|
||||||
|
height: 38px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
projectgrid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
height: auto;
|
||||||
|
gap: 25px;
|
||||||
|
max-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectbox {
|
||||||
|
grid-template-columns: 2.5% 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftsliver {
|
||||||
|
background-color:goldenrod;
|
||||||
|
border-top-left-radius: 7.5px;
|
||||||
|
border-bottom-left-radius: 7.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
justify-content: flex-end;
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph, trendinggrid, announcementsgrid {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraphheader {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraphcontent {
|
||||||
|
font-size: max(1.5vh,11px);
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
trendinggrid {
|
||||||
|
row-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trendingentryflex {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trendingsubtitle {
|
||||||
|
color: #666;
|
||||||
|
margin-top: -.75rem;
|
||||||
|
padding-top: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trendingimage {
|
||||||
|
max-width: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
announcementsgrid {
|
||||||
|
row-gap: 10px;
|
||||||
|
grid-template-rows: 1fr 1px 1fr 1px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementheader {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementtext {
|
||||||
|
font-size: 11px;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: #666;
|
||||||
|
line-height: .9vw;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 15vw;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementparas {
|
||||||
|
border-color: black;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
line {
|
||||||
|
background-color: #dddddd;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue