commit 4682b953a04b735625bbc5a8851e8879f18c8ec9 Author: ak Date: Thu May 4 12:11:21 2023 -0700 final diff --git a/README.md b/README.md new file mode 100644 index 0000000..fac2d1f --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# admin-dashboard + +Static admin dashboard made in HTML and CSS - no functionality \ No newline at end of file diff --git a/images/ avatar.png b/images/ avatar.png new file mode 100644 index 0000000..77234ab Binary files /dev/null and b/images/ avatar.png differ diff --git a/images/account-group.png b/images/account-group.png new file mode 100644 index 0000000..cf03b00 Binary files /dev/null and b/images/account-group.png differ diff --git a/images/alex.png b/images/alex.png new file mode 100644 index 0000000..063b2a9 Binary files /dev/null and b/images/alex.png differ diff --git a/images/bell-ring-outline.png b/images/bell-ring-outline.png new file mode 100644 index 0000000..d238816 Binary files /dev/null and b/images/bell-ring-outline.png differ diff --git a/images/card-account-details-outline.png b/images/card-account-details-outline.png new file mode 100644 index 0000000..a3d86a8 Binary files /dev/null and b/images/card-account-details-outline.png differ diff --git a/images/clock.png b/images/clock.png new file mode 100644 index 0000000..168330a Binary files /dev/null and b/images/clock.png differ diff --git a/images/cog.png b/images/cog.png new file mode 100644 index 0000000..af8b899 Binary files /dev/null and b/images/cog.png differ diff --git a/images/eye-plus-outline.png b/images/eye-plus-outline.png new file mode 100644 index 0000000..b23a8a3 Binary files /dev/null and b/images/eye-plus-outline.png differ diff --git a/images/help-box.png b/images/help-box.png new file mode 100644 index 0000000..6a770b3 Binary files /dev/null and b/images/help-box.png differ diff --git a/images/home.png b/images/home.png new file mode 100644 index 0000000..a5830b8 Binary files /dev/null and b/images/home.png differ diff --git a/images/kendall.png b/images/kendall.png new file mode 100644 index 0000000..d2f3d92 Binary files /dev/null and b/images/kendall.png differ diff --git a/images/magnify.png b/images/magnify.png new file mode 100644 index 0000000..318a637 Binary files /dev/null and b/images/magnify.png differ diff --git a/images/message-reply.png b/images/message-reply.png new file mode 100644 index 0000000..8179e9a Binary files /dev/null and b/images/message-reply.png differ diff --git a/images/morgan.png b/images/morgan.png new file mode 100644 index 0000000..da16f73 Binary files /dev/null and b/images/morgan.png differ diff --git a/images/note-multiple.png b/images/note-multiple.png new file mode 100644 index 0000000..9285fd2 Binary files /dev/null and b/images/note-multiple.png differ diff --git a/images/shield-check.png b/images/shield-check.png new file mode 100644 index 0000000..edb843e Binary files /dev/null and b/images/shield-check.png differ diff --git a/images/source-fork.png b/images/source-fork.png new file mode 100644 index 0000000..b26eb0f Binary files /dev/null and b/images/source-fork.png differ diff --git a/images/star-plus-outline.png b/images/star-plus-outline.png new file mode 100644 index 0000000..4aeac41 Binary files /dev/null and b/images/star-plus-outline.png differ diff --git a/images/tegan.png b/images/tegan.png new file mode 100644 index 0000000..7658faa Binary files /dev/null and b/images/tegan.png differ diff --git a/images/view-dashboard.png b/images/view-dashboard.png new file mode 100644 index 0000000..118dfd5 Binary files /dev/null and b/images/view-dashboard.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e959cb1 --- /dev/null +++ b/index.html @@ -0,0 +1,231 @@ + + + + + + + Admin Dashboard + + + + + + + + + +

Dashboard

+ + + + Home + Home + + + Profile + Profile + + + Messsages + Messages + + + History + History + + + Tasks + Tasks + + + Communities + Communities + + + + + Settings + Settings + + + Support + Support + + + Privacy + Privacy + + + + + + + + + Bell + User avatar +

John Doe

+ + + + + + Hi there, + John Doe (@johndoe) + + + + + + + + + + + +

Your Projects

+ +
+
+
+
+

Super Cool Project

+

+ 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.

+
+ +
+
+
+
+
+
+
+

Less Cool Project

+

+ 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. +

+
+
+ +
+
+
+
+
+
+
+

Impossible App

+

+ 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. +

+
+
+ +
+
+
+
+
+
+
+

Easy App

+

+ 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. +

+
+
+ +
+
+
+
+
+
+
+

Ad Blocker

+

+ 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. +

+
+
+ +
+
+
+
+
+
+
+

Money Maker

+

+ 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. +

+
+
+ +
+
+
+ + + + +

Announcements

+ + +

Site Maintenance

+

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.

+ + + +

Community Share Day

+

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.

+ + + +

Updated Privacy Policy

+

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.

+ + + + +

Trending

+ +
+ + +

@tegan

+

World Peace Builder

+ +
+
+ + +

@morgan

+

Amazing Project

+ +
+
+ + +

@kendall

+

Life Changing App

+ +
+
+ + +

@alex

+

The Next Paradigm

+ +
+ + + + + + + + + \ No newline at end of file diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..da84267 --- /dev/null +++ b/normalize.css @@ -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; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..4453e56 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file