style.css

:root {
    /* colors */
    --clr-blue: #1992D4;
    --clr-border: #F0B429;
    --clr-gray: #E2E8F0;
    --clr-shadow: #aeaeae3a;
    /* Thanks to StackOverflow: https://stackoverflow.com/a/53336754/21600888 */
    --clr-sidebar-icon: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    --clr-sidebar-text: white;

    /* fonts */
    --ff-main: 'Roboto', sans-serif;

    /* font weight */
    --fw-regular: 400;
    --fw-light: 300;
    --fw-bold: 700;
    /* font sizes */
    --fs-title: 1.5rem;
    --fs-card: 0.8rem;

    /* widths */
    --w-dash-icon: 3.5rem;
    --w-sidebar-icon: 1.6rem;
    --w-card-icon: 1.3rem;
    --w-search-bar: 1rem;
    --w-avatar-small: 3.8rem;
    --w-avatar-large: calc(var(--w-avatar-small) + 1.5rem);

    /* padding */
    --pd-card: 1rem;
}

/* reset styles */
ul {
    list-style: none;
}

body,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0;
}

button {
    appearance: none;
    border: none;
}

/* page styling starts here */
.dashboard {
    font-family: var(--ff-main);
    display: grid;
    grid-template-columns: 1fr 3.5fr;
}

.projects {
    display: grid;
    grid-template-areas: 
        'one    two   news'
        'one    two   news'
        'three  four  news'
        'three  four  trending'
        'five   six   trending'
        'five   six   trending';
}

.project-1 {
    grid-area: one;
}
.project-2 {
    grid-area: two;
}
.project-3 {
    grid-area: three;
}
.project-4 {
    grid-area: four;
}
.project-5 {
    grid-area: five;
}
.project-6 {
    grid-area: six;
}
.news {
    grid-area: news;
    margin-bottom: 1.5rem;
}
.trending {
    grid-area: trending;
}
/* .trending {
    grid-column: 3;
    grid-row: 3 / 5;
} */

.card img.icon,
.user-info img.icon {
    width: var(--w-card-icon);
}

/* SIDEBAR */
.sidebar,
button {
    background-color: var(--clr-blue);
    color: var(--clr-sidebar-text);
    font-weight: var(--fw-bold);
    padding: 1rem;
}

.navbar {
    display: grid;
    gap: 30px;
    position: fixed;
}

.navbar .title,
.navbar ul li {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-items: center;
    align-items: center;
    gap: 0.5rem;
}
.navbar ul li p { 
    justify-self: start;
}
.navbar li:nth-child(7) {
    margin-top: 2rem;
}

.navbar ul {
    display: grid;
    gap: 1.3rem;
}

.navbar > .title {
    margin-bottom: 1.3rem;
    font-size: var(--fs-title);
}

.sidebar img.icon {
    filter: var(--clr-sidebar-icon);
}

.sidebar .title img.icon {
    width: var(--w-dash-icon);
}

.sidebar li > img.icon {
    width: var(--w-sidebar-icon);
}

.search-bar img.icon {
    width: var(--w-search-bar);
}

.user-info img.avatar,
.trending img.avatar {
    width: var(--w-avatar-small);
}
.hello-msg img.avatar {
    width: var(--w-avatar-large);
}

/* HEADER */
.header {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    justify-items: center;
}

.header .search-bar {
    justify-self: stretch;

    display: grid;
    grid-template-columns: 0.3fr 3fr;
    align-items: center;
    gap: 15px;
}

.search-bar img {
    justify-self: right;
}

.search-bar input {
    background-color: var(--clr-gray);
    border-radius: 15px;
    border: none;
    padding: 0.2rem;
}

.header .user-info {
    margin-left: 4rem;
    align-items: center;
    gap: 15px;
}

.header .actions {
    gap: 30px;
}

.user-info,
.actions {
    display: grid;
    grid-auto-flow: column;
    justify-self: center;
}

button {
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
}

.header .hello-msg {
    justify-self: start;
    margin-left: 1rem;

    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.hello-msg p {
    display: grid;
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

span.name {
    font-weight: var(--fw-bold);
}

.hello-msg span.name {
    font-size: 1.2rem;
}

/* PROJECTS */
.projects {
    background-color: var(--clr-gray);
    gap: 25px;
    padding: 3rem 1.5rem;
}
.projects .card {
    background-color: white;
    border-radius: 10px;
    border-left: 9px solid var(--clr-border);
    padding: var(--pd-card);
    box-shadow: 5px 5px 5px var(--clr-shadow);
}
.card p {
    font-size: var(--fs-card);
    font-weight: var(--fw-light);
    opacity: 80%;
}

.projects-1,
.news,
.trending {
    position: relative;
}

.projects h5.title {
    position: relative;
    bottom: 2.5rem;
    right: 1rem;
    margin-bottom: -1rem;
    font-size: 1rem;
    opacity: 70%;
}

.news,
.trending {
    border: none !important;
}

.projects > div[class*="project"]{
    display: grid;
    align-items: center;
    gap: 25px;
}

.projects .actions {
    justify-self: right;

    display: grid;
    grid-auto-flow: column;
    gap: 30px;
}

.news > div {
    border-bottom: 1px solid black;
    padding: 15px;
}
/* TRENDING */
.trending div {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.trending .username {
    font-weight: var(--fw-regular);
}