-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (165 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<script src="/script.js" defer></script>
</head>
<body>
<div class="page">
<aside class="sidebar secondary">
<a class="sidebar--header" href="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--monogram">
<path d="M2 2V22H22V2H2M20 12H16V16H20V20H16V16H12V20H8V16H4V12H8V8H4V4H8V8H12V4H16V8H20V12M16 8V12H12V8H16M12 12V16H8V12H12Z" />
</svg>
<span class="sidebar--wordmark">Dashboard</span>
</a>
<div class="sidebar--main-items">
<ul>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M22,3H2C0.91,3.04 0.04,3.91 0,5V19C0.04,20.09 0.91,20.96 2,21H22C23.09,20.96 23.96,20.09 24,19V5C23.96,3.91 23.09,3.04 22,3M22,19H2V5H22V19M14,17V15.75C14,14.09 10.66,13.25 9,13.25C7.34,13.25 4,14.09 4,15.75V17H14M9,7A2.5,2.5 0 0,0 6.5,9.5A2.5,2.5 0 0,0 9,12A2.5,2.5 0 0,0 11.5,9.5A2.5,2.5 0 0,0 9,7M14,7V8H20V7H14M14,9V10H20V9H14M14,11V12H18V11H14" /></svg>
<span>Profile</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>
<span>Messages</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M17 13H11V7H12.5V11.5H17V13Z" /></svg>
<span>History</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M16,9H21.5L16,3.5V9M7,2H17L23,8V18A2,2 0 0,1 21,20H7C5.89,20 5,19.1 5,18V4A2,2 0 0,1 7,2M3,6V22H21V24H3A2,2 0 0,1 1,22V6H3Z" /></svg>
<span>Tasks</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" /></svg>
<span>Communities</span>
</a>
</li>
</ul>
</div>
<div class="sidebar--bottom-items">
<ul>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M11,18H13V16H11V18M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" /></svg>
<span>Support</span>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sidebar--icon"><path d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" /></svg>
<span>Privacy</span>
</a>
</li>
</ul>
</div>
</aside>
<header class="header">
<div class="header--upper">
<div class="header--search-bar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="header--search-icon"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
<input type="text" class="header--search-input">
</div>
<div class="header--user-details">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="header--notifications"><path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" /></svg>
<button class="header--user-avatar avatar"></button>
<span class="header--user-name" id="user-name">User name</span>
</div>
</div>
<nav class="header--nav">
<div class="header--handle-section">
<button class="header--handle-avatar avatar"></button>
<p class="header--greeting">Hi There,</p>
<h1 class="header--user-handle header--user-name" id="user-handle">User Name (@userhandle)</h1>
</div>
<div class="header--nav-buttons">
<button class="nav--button">New</button>
<button class="nav--button">Upload</button>
<button class="nav--button">Share</button>
</div>
</nav>
</header>
<main class="main tertiary">
<div class="projects">
<h2 class="projects--header main-header">Your Projects</h2>
<div class="projects--cards-container" id="project-card-container">
<!-- Card Template -->
<!-- <div class="projects--card primary">
<div class="projects--card-side accent"></div>
<div class="projects--card-upper">
<h3 class="projects--card-title">Template Header</h3>
<p class="projects--card-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla, expedita accusantium. Suscipit delectus ad iste voluptatibus error maxime perspiciatis alias, officiis expedita a cupiditate laboriosam aspernatur dolores nulla consequatur fugiat?</p>
</div>
<div class="projects--card-lower">Icons</div>
</div> -->
</div>
</div>
<aside class="main--aside">
<div class="announcements">
<h2 class="announcements--header main-header">Announcements</h2>
<div class="announcements--card primary" id="announcements-container">
<!-- Announcements section template -->
<!-- <a class= "announcements--link" href="#">
<div class="announcements--card-section">
<h3 class="announcements--title">Test Announcement</h3>
<p class="announcements--body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, facere accusantium. Perspiciatis error sequi, velit soluta at hic vitae quis, enim, voluptatum nesciunt impedit laudantium unde. Asperiores temporibus odio maiores.</p>
</div>
</a> -->
</div>
</div>
<div class="trending">
<h2 class="trending--header main-header">Trending</h2>
<div class="trending--card primary">
<div class="trending--section">
<button class="trending--project-avatar avatar"></button>
<p class="trending--project-user">@user</p>
<p class="trending--project-title">Project Name</p>
</div>
<div class="trending--section">
<button class="trending--project-avatar avatar"></button>
<p class="trending--project-user">@user</p>
<p class="trending--project-title">Project Name</p>
</div>
<div class="trending--section">
<button class="trending--project-avatar avatar"></button>
<p class="trending--project-user">@user</p>
<p class="trending--project-title">Project Name</p>
</div>
<div class="trending--section">
<button class="trending--project-avatar avatar"></button>
<p class="trending--project-user">@user</p>
<p class="trending--project-title">Project Name</p>
</div>
</div>
</div>
</aside>
</main>
</div>
</body>
</html>