Created
February 7, 2024 15:47
-
-
Save codedstrings/659cfb113052e8aa52d5e6e1fd787fd5 to your computer and use it in GitHub Desktop.
for-discord
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="page-wrapper"> | |
| <aside class="left-sidebar"> | |
| <div class="odin-container"> | |
| <div class="logo-wrapper"><img src="assets/odin-lined.png" alt="odin-logo" width="40px" /></div> | |
| <h2>Dashboard</h2> | |
| </div> | |
| <div class="home tab"> | |
| <i class="bi bi-house-fill"></i> | |
| <a href="#">Home</a> | |
| </div> | |
| <!-- other Navigation Tabs --> | |
| </aside> | |
| <header class="header"> | |
| <div class="header-part1"> | |
| <!-- Search and Profile Section --> | |
| <!-- ... (your search and profile section here) ... --> | |
| </div> | |
| <div class="header-part2"> | |
| <!-- Welcome and Action Buttons --> | |
| <!-- ... (your welcome and action buttons here) ... --> | |
| </div> | |
| </header> | |
| <div class="main"> | |
| <!-- Projects Section --> | |
| <section class="projects-section"> | |
| <h3>All Projects</h3> | |
| <div class="projects"> | |
| <!-- Project Cards --> | |
| <!-- ... (your project cards here) ... --> | |
| </div> | |
| </section> | |
| <!-- Right Sidebar --> | |
| <section class="right-sidebar"> | |
| <div class="announcement-wrapper"></div> | |
| </section> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .page-wrapper { | |
| display: grid; | |
| grid-template-columns: 1fr 4fr; | |
| grid-template-rows: 200px 1fr; | |
| } | |
| /* sidebar */ | |
| .left-sidebar { | |
| position: fixed; | |
| background-color: var(--sidebar); | |
| grid-column: 1/2; | |
| grid-row: 1 / span 2; | |
| min-height: 100vh; | |
| color: var(--left-sidebar-text); | |
| text-align: left; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.371); | |
| } | |
| /* other components inside sidebar, incase required */ | |
| .odin-container { | |
| display: flex; | |
| gap: 15px; | |
| /* justify-content: flex-start; */ | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .tab { | |
| display: flex; | |
| gap: 15px; | |
| padding: 12px; | |
| padding-left: 2rem; | |
| transition: all ease-in 0.1s; | |
| } | |
| .tab:hover { | |
| cursor: pointer; | |
| color: var(--left-sidebar-tab-hover); | |
| background-color: white; | |
| } | |
| .settings { | |
| margin-top: 50px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment