-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (175 loc) · 10.1 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
<!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="style.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header1">
<img src="images/magnify.svg" alt="magnify glass" width="20" height="20" />
<input type="text" />
</div>
<div class="header2">
<img src="images/bell-ring.svg" alt="bell ring" width="20" height="20">
<img src="images/panda.png" alt="user avatar small" height="40" width="40" />
<span>Morgan Oakley</span>
</div>
<div class="header3">
<img src="images/panda.png" alt="user avatar" height="60" width="60" />
<div>
<span class="header3-intro">Hi there,</span>
<span class="header3-user">Morgan Oakley (@morgan)</span>
</div>
</div>
<div class="header4">
<button>New</button>
<button>Upload</button>
<button>Share</button>
</div>
</div>
<div class="sidebar">
<div class="logo">
<img src="images/cube_628870.png" alt="cube logo" height="30" width="30">
<span>Dashboard</span>
</div>
<div class="nav">
<ul>
<li><img src="images/home.svg" alt="home" height="20" width="20"><span>Home</span></li>
<li><img src="images/card-account-details-outline.svg" alt="home" height="20"
width="20"><span>Profile</span></li>
<li><img src="images/message.svg" alt="home" height="20" width="20"><span>Messages</span></li>
<li><img src="images/history.svg" alt="home" height="20" width="20"><span>History</span></li>
<li><img src="images/file-multiple.svg" alt="home" height="20" width="20"><span>Tasks</span></li>
<li><img src="images/account-group.svg" alt="home" height="20" width="20"><span>Communities</span>
</li>
</ul>
</div>
<div class="settings">
<ul>
<li><img src="images/cog.svg" alt="home" height="20" width="20"><span>Settings</span></li>
<li><img src="images/help-box.svg" alt="home" height="20" width="20"><span>Support</span></li>
<li><img src="images/shield-check.svg" alt="home" height="20" width="20"><span>Privacy</span></li>
</ul>
</div>
</div>
<div class="content">
<span class="projects-header">Your Projects</span>
<span class="announcements-header">Announcements</span>
<div class="projects">
<div class="card">
<span class="card-header">Super Cool Project</span>
<span class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis
mauris condimentum ex mattis imperdiet a vel lorem. Integer pulvinar libero sed libero
pellentesque dapibus.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
<div class="card">
<span class="card-header">Less Cool Project</span>
<span class="card-content">Duis vestibulum enim sit amet odio eleifend, posuere placerat lorem
luctus.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
<div class="card">
<span class="card-header">Impossible App</span>
<span class="card-content">Maecenas lobortis ultrices massa, id placerat ipsum consequat eget. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum aliquet nisi, quis posuere
ante viverra eu.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
<div class="card">
<span class="card-header">Easy Peasy App</span>
<span class="card-content">Quisque porta ornare justo quis mollis. Integer sed dictum turpis. Nam ac
ante at nulla suscipit scelerisque quis vitae sapien. Donec sit amet lacinia nisi. Nunc
scelerisque vitae arcu vel aliquet.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
<div class="card">
<span class="card-header">Ad Blocker</span>
<span class="card-content">Phasellus eu dictum nisi. Nam sagittis lacus metus, eget consectetur erat
aliquet sed. Vivamus id quam a sem convallis maximus. Aliquam erat volutpat.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
<div class="card">
<span class="card-header">Money Maker</span>
<span class="card-content">Curabitur ut lobortis sem. Donec consequat porttitor lectus at accumsan.
Mauris enim nulla, ultricies ut sem vel, venenatis suscipit ex.</span>
<div>
<img src="images/star-plus-outline.svg" alt="star-plus" width="20" height="20" />
<img src="images/eye-plus-outline.svg" alt="eye-plus-outline" width="20" height="20" />
<img src="images/source-fork.svg" alt="source-fork" width="20" height="20" />
</div>
</div>
</div>
<div class="misc">
<div class="annoucements">
<div class="annoucement-card">
<span class="annoucement-card-header">Site Maintenance</span>
<span class="annoucement-card-desc">Pellentesque et dui non lorem interdum faucibus. Fusce
tincidunt nulla quis dui blandit, eget bibendum nulla aliquam.</span>
</div>
<div class="annoucement-card">
<span class="annoucement-card-header">Community Share Day</span>
<span class="annoucement-card-desc">Etiam non ullamcorper tellus. Nullam et neque est.
Suspendisse potenti.</span>
</div>
<div class="annoucement-card">
<span class="annoucement-card-header">Updated Privacy Policy</span>
<span class="annoucement-card-desc">Phasellus rhoncus erat eros, ut varius orci scelerisque vitae. Vestibulum ut hendrerit dolor, sit amet maximus ante.</span>
</div>
</div>
<div class="trending">
<div class="trending-header">
<span>Trending</span>
</div>
<div class="trending-content">
<div class="trending-card">
<img src="images/dinosaur.png" alt="dinosaur" width="30" height="30">
<span class="trending-card-user">@tegan</span>
<span class="trending-card-summary">World Peace Builder</span>
</div>
<div class="trending-card">
<img src="images/dog.png" alt="dog" width="30" height="30">
<span class="trending-card-user">@morgan</span>
<span class="trending-card-summary">Super Cool Project</span>
</div>
<div class="trending-card">
<img src="images/meerkat.png" alt="meerkat" width="30" height="30">
<span class="trending-card-user">@kendall</span>
<span class="trending-card-summary">Life Changing App</span>
</div>
<div class="trending-card">
<img src="images/sea-lion.png" alt="sea-lion" width="30" height="30">
<span class="trending-card-user">@alex</span>
<span class="trending-card-summary">No Traffic Maker</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>