2024-01-26 13:33:40 +00:00
|
|
|
<!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">
|
2024-01-26 19:57:36 +00:00
|
|
|
<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" />
|
2024-01-26 13:33:40 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-01-26 19:57:36 +00:00
|
|
|
<div id="container">
|
|
|
|
|
<div id="sidebar">
|
2024-01-26 20:29:15 +00:00
|
|
|
<div id="title" class="split">
|
2024-01-26 19:57:36 +00:00
|
|
|
<i class="fa-solid fa-house"></i>
|
|
|
|
|
<h1>Home</h1>
|
2024-01-26 20:29:15 +00:00
|
|
|
</div>
|
2024-01-26 19:57:36 +00:00
|
|
|
|
|
|
|
|
<ul>
|
2024-01-26 20:29:15 +00:00
|
|
|
<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>
|
2024-01-26 19:57:36 +00:00
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<ul>
|
2024-01-26 20:29:15 +00:00
|
|
|
<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>
|
2024-01-26 19:57:36 +00:00
|
|
|
</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>
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<span id="name">Tony Kowalski</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="welcome">
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<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">
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<div id="text">
|
|
|
|
|
<h4>@account</h4>
|
|
|
|
|
<span id="description">Very cool account page</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="trend">
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<div id="text">
|
|
|
|
|
<h4>@account</h4>
|
|
|
|
|
<span id="description">Very cool account page</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="trend">
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<div id="text">
|
|
|
|
|
<h4>@account</h4>
|
|
|
|
|
<span id="description">Very cool account page</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="trend">
|
2024-01-26 20:29:15 +00:00
|
|
|
<img src="user.svg" alt="">
|
2024-01-26 19:57:36 +00:00
|
|
|
<div id="text">
|
|
|
|
|
<h4>@account</h4>
|
|
|
|
|
<span id="description">Very cool account page</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-01-26 13:33:40 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
