-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (165 loc) · 7.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="top">
<div class="search-bar">
<img src="./img/search.svg" alt="Magnifying glass" class="search-icon">
<input type="text" name="search-bar" id="search-bar" placeholder="Search...">
</div>
<div><img src="./img/notification-bell.svg" alt="Notifacation bell" class="notification-icon"></div>
<div class="top-right-profile">
<img src="./img/monica-garniga-XClNDg9Z9Ag-unsplash.jpg" alt="Profile picture" class="profile-picture">
<div>Bob Smith</div>
</div>
</div>
<div id="nav">
<div><img src="./img/monica-garniga-XClNDg9Z9Ag-unsplash.jpg" alt="Profile picture" class="large-picture profile-picture"></div>
<div class="admin-greeting">
<p>Hi there,</p>
<p class="large-font">Bob Smith (@Bob)</p>
</div>
<div class="admin-btns">
<div class="nav-btns">New</div>
<div class="nav-btns">Upload</div>
<div class="nav-btns">Share</div>
</div>
</div>
</header>
<div id="sidebar">
<div class="dashboard">
<img src="./img/dashboard.svg" alt="Dashboard icon" class="dashboard-icon">
<span>Dashboard</span>
</div>
<div class="main-links margin-right">
<div class="home-link">
<img src="./img/home.svg" alt="Home icon" class="home-icon">
<span>Home</span>
</div>
<div class="profile-link">
<img src="./img/profile.svg" alt="profile icon" class="profile-icon">
<span>Profile</span>
</div>
<div class="messages-link">
<img src="./img/messages.svg" alt="messages icon" class="messages-icon">
<span>Messages</span>
</div>
<div class="history-link">
<img src="./img/history.svg" alt="history Icon" class="history-icon">
<span>History</span>
</div>
<div class="tasks-link">
<img src="./img/tasks.svg" alt="tasks icon" class="tasks-icon">
<span>Tasks</span>
</div>
<div class="communities-link">
<img src="./img/communities.svg" alt="communities icon" class="community-icon">
<span>Communities</span>
</div>
</div>
<div class="extra-links margin-right">
<div class="settings-link">
<img src="./img/settings.svg" alt="settings icon" class="settings-icon">
<span>Settings</span>
</div>
<div class="support-link">
<img src="./img/support.svg" alt="support icon" class="support-icon">
<span>Support</span>
</div>
<div class="privacy-link">
<img src="./img/privacy.svg" alt="privacy icon" class="privacy-icon">
<span>Privacy</span>
</div>
</div>
</div>
<div id="main-content">
<p class="main-content-title">Your Projects</p>
<div class="main-content-cards">
<div class="card">
<p>Super Cool Project</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere doloribus repudiandae distinctio inventore ad non tempora debitis. Corrupti vero esse minus tempora nostrum fugit omnis nulla tenetur iusto et in molestiae illum porro veniam consectetur, eum commodi dolore doloribus rerum facere perspiciatis ab odio placeat! Qui ad earum sapiente eveniet.</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
<div class="card">
<p>Less Cool Project</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt debitis, possimus modi enim quisquam id perferendis nulla autem quod magni rerum suscipit quam provident excepturi magnam velit ab, sed consequatur. Lorem ipsum dolor sit amet.</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
<div class="card">
<p>Impossible App</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem ut possimus commodi aliquid nostrum nihil, repellendus libero ducimus!</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
<div class="card">
<p>Easy Peasy App</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora sed optio ratione quasi alias placeat. Explicabo tempore esse minus? Illum nihil eaque laboriosam.</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
<div class="card">
<p>Ad Blocker</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae iste aut nisi nobis recusandae voluptatum doloremque, ratione aliquid sint dicta, ea optio, natus veritatis. Ex aspernatur, excepturi error earum saepe rerum dolore similique nostrum delectus.</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
<div class="card">
<p>Money Maker</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsum voluptate ducimus illo eius!</p>
<img src="./img/favorite-plus.svg" alt="favorite this project icon" class="favorite-icon">
<img src="./img/share.svg" alt="share this project icon" class="share-icon">
</div>
</div>
</div>
<div id="announcements">
<div class="announcements-title">Announcements</div>
<div class="announcements-content">
<p>Site Maintenance</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero debitis consequuntur expedita eligendi, voluptas quaerat blanditiis. Cum nihil eum in a? Neque aut soluta iste possimus accusantium reiciendis, doloribus eaque.</p>
</div>
<div class="announcements-content">
<p>Community Share Day</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam ipsam veniam quas molestias quibusdam cumque odit quo tempora illum?</p>
</div>
<div class="announcements-content">
<p>Updated Privacy Policy</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consequuntur ipsa facere molestiae soluta minima tempore eum a earum voluptatibus.</p>
</div>
</div>
<div id="trending">
<div class="trending-title">Trending</div>
<div class="trending-content">
<img src="./img/jeet-dhanoa-sR1BaDlRSKM-unsplash.jpg" alt="user tegan icon" class="profile-picture">
<p>@tegan</p>
<p>World Peace Builder</p>
</div>
<div class="trending-content">
<img src="./img/monica-garniga-XClNDg9Z9Ag-unsplash.jpg" alt="user smith icon" class="profile-picture">
<p>@bob</p>
<p>Super Cool Project</p>
</div>
<div class="trending-content">
<img src="./img/kobby-mendez-d0oYF8hm4GI-unsplash.jpg" alt="user kendall icon" class="profile-picture">
<p>@kendall</p>
<p>Life Changing App</p>
</div>
<div class="trending-content">
<img src="./img/shubham-dhage-WtolM5hsj14-unsplash.jpg" alt="user alex icon" class="profile-picture">
<p>@alex</p>
<p>No Traffic Maker</p>
</div>
</div>
</body>
</html>