<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="title" class="split">
<i class="fa-solid fa-house"></i>
<h1>Home</h1>
</div>
<ul>
<li>
<div class="split">
<i class="fa-solid fa-message"></i>
<span class="text">Messages</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-list-check"></i>
<span class="text">Tasks</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-user"></i>
<span class="text">Profile</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-timeline"></i>
<span class="text">History</span>
</div>
</li>
</ul>
<ul>
<li>
<div class="split">
<i class="fa-solid fa-gear"></i>
<span class="text">Settings</span>
</div>
</li>
<li>
<div class="split">
<i class="fa-solid fa-circle-info"></i>
<span class="text">Help</span>
</div>
</li>
</ul>
</div>
<div id="header">
<div id="search">
<label for="search-box"><i class="fa-solid fa-magnifying-glass"></i></label>
<input type="text" id="search-box">
</div>
<div id="profile">
<i class="fa-regular fa-bell"></i>
<img src="user.svg" alt="">
<span id="name">Tony Kowalski</span>
</div>
<div id="welcome">
<img src="user.svg" alt="">
<div id="text">
<span id="hi">Hi there,</span>
<span id="person">Tony Kowalski (@tkowal)</span>
</div>
</div>
<div id="actions">
<button type="button">New</button>
<button type="button">Upload</button>
<button type="button">Share</button>
</div>
</div>
<div id="main">
<div id="projects">
<div class="project">
<h3>Project 1</h3>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam soluta, voluptatum, asperiores deleniti dolores perferendis</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 2</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptatem libero, sint vel aliquam</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 3</h3>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque vel hic exercitationem alias.</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 4</h3>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos minima at vero sint aspernatur</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 5</h3>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium pariatur nam molestiae eveniet</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
<div class="project">
<h3>Project 6</h3>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero soluta nam consequuntur. Harum aspernatur</span>
<div class="icons">
<div class="star"><i class="fa-regular fa-star"></i></div>
<div class="watch"><i class="fa-solid fa-eye"></i></div>
<div class="share"><i class="fa-solid fa-share"></i></div>
</div>
</div>
</div>
<div id="announcements">
<div class="announcement">
<h3>Announcement 1</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
<div class="announcement">
<h3>Announcement 2</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
<div class="announcement">
<h3>Announcement 3</h3>
<span id="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorum accusantium.</span>
</div>
</div>
<div id="trending">
<div class="trend">
<img src="user.svg" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="user.svg" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="user.svg" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
<div class="trend">
<img src="user.svg" alt="">
<div id="text">
<h4>@account</h4>
<span id="description">Very cool account page</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>