-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (180 loc) · 11.4 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
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scheals' admin dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main-container">
<section class="sidebar dark-background light-font-color">
<div class="header">
<img src="./icons/beehive-outline.png" alt="A site logo">
<h2>Dashboard</h2>
</div>
<nav class="top-actions">
<ul>
<li><img src="./icons/home-heart.png" alt="A house with a heart inside symbol">Home</li>
<li><img src="./icons/profile-icon.png" alt="An ID symbol"> Profile</li>
<li><img src="./icons/chat-outline.png" alt="Message bubble symbol"> Messages</li>
<li><img src="./icons/clock-time-four.png" alt="A clock symbol">History</li>
<li><img src="./icons/multiple-files.png" alt="A multiple file symbol">Tasks</li>
<li><img src="./icons/account-group.png" alt="Group of people symbol">Communities</li>
</ul>
</nav>
<nav class="bottom-actions">
<ul>
<li><img src="./icons/cog.png" alt="A cog symbol">Settings</li>
<li><img src="./icons/message-question.png" alt="Square message bubble with a question mark inside symbol">Support</li>
<li><img src="./icons/gavel.png" alt="A gavel symbol">Privacy</li>
</ul>
</nav>
</section>
<section class="main">
<nav class="user-navigation light-background">
<div class="search-profile">
<img src="./icons/magnify.png" alt="A magnifying glass symbol">
<input type="search" name="search-bar" id="search-bar" class="inbetween-background">
<img src="./icons/bell-badge-outline.png" alt="A bell symbol">
<img class= "mini-profile-image" src="./svg/avatar-18-svgrepo-com.svg" alt="User's miniature profile picture">
<h3>User Name</h3>
</div>
<div class="action-bar">
<div class="user-profile">
<img src="./svg/avatar-18-svgrepo-com.svg" alt="User' profile picture">
<div class="greeting">
<p>Hi there,</p>
<h2>User Name (@username)</h2>
</div>
</div>
<div class="action-buttons">
<button class="dark-background light-font-color">New</button>
<button class="dark-background light-font-color">Upload</button>
<button class="dark-background light-font-color">Share</button>
</div>
</div>
</nav>
<section class="dashboard inbetween-background inset-grey-top-shadow">
<div class="projects">
<h2> Your Projects</h2>
<div class="cards">
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>Latin Course 101</h3>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum impedit autem error, dolor, deserunt deleniti est beatae dolorem earum cupiditate enim adipisci pariatur. Impedit exercitationem maxime tempora iure voluptas alias?</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>Latin Manners 101</h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil aut maiores magnam ducimus itaque voluptas veniam minus ea nisi similique eveniet quo impedit eaque mollitia, officia blanditiis optio adipisci soluta quaerat eos recusandae totam placeat.</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>Ceterum censeo</h3>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur qui consequatur reprehenderit facere incidunt officia pariatur autem error tenetur quaerat.</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>History 101</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus ratione dolorem dolor provident omnis eaque consequuntur delectus mollitia adipisci sapiente, ab deserunt atque a doloribus dolores perspiciatis laudantium! Aut maxime ducimus fugit nam veniam laudantium quia facilis hic numquam.</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>IKEA Shopping</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti consequuntur itaque cumque quidem iusto, illo alias ullam provident fugit quaerat minus non sed, eum voluptatum esse similique velit.</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
<div class="card light-background round-box-shadow">
<div class="card-text">
<h3>School construction</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores, quam, doloremque natus modi sunt, mollitia libero nisi ipsa odio magni debitis eius recusandae. Totam, excepturi est eius et provident sunt eum?</p>
</div>
<div class="card-images">
<img src="./icons/seed-plus-outline.png" alt="Seed with a plus symbol">
<img src="./icons/eye-plus.png" alt="Eye with a plus symbol">
<img src="./icons/source-fork.png" alt="Fork symbol">
</div>
</div>
</div>
</div>
<div class="dashboard-sidebar">
<div class="announcements-container">
<h2>Announcements</h2>
<div class="announcements light-background round-box-shadow">
<h4>Site Maintenance</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam vero sequi dolorum quaerat est quod enim doloribus animi!</p>
<h4>Community Share Day</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nobis obcaecati nulla alias aperiam quis fugiat quibusdam quia id possimus?</p>
<h4>Updated Privacy Policy</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum similique eos quis quam cumque.</p>
</div>
</div>
<div class="trending">
<h2>Trending</h2>
<div class="profiles light-background round-box-shadow">
<div class="profile">
<img class= "mini-profile-image" src="./svg/avatar-17-svgrepo-com.svg" alt="User's miniature profile picture">
<div class="profile-name">
<p>@nice</p>
<p>The nicest person around!</p>
</div>
</div>
<div class="profile">
<img class= "mini-profile-image" src="./svg/avatar-18-svgrepo-com.svg" alt="User's miniature profile picture">
<div class="profile-name">
<p>@username</p>
<p>That's me, cool!</p>
</div>
</div>
<div class="profile">
<img class= "mini-profile-image" src="./svg/avatar-21-svgrepo-com.svg" alt="User's miniature profile picture">
<div class="profile-name">
<p>@gorilla</p>
<p>King Kong trembles on my sight!</p>
</div>
</div>
<div class="profile">
<img class= "mini-profile-image" src="./svg/avatar-5-svgrepo-com.svg" alt="User's miniature profile picture">
<div class="profile-name">
<p>@plepo</p>
<p>Plepperoni</p>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</main>
</body>
</html>