-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (237 loc) · 13.7 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>MailMe App</title>
</head>
<body>
<div id="main-container" class="container">
<!-- Menu Container -->
<div class="flex flex-col space-y-10 bg-lightBlue p-5 py-8 drop-shadow-xl shadow-gray-400">
<!-- User Profile -->
<div class="flex items-center space-x-2">
<div class="w-16 h-16">
<img src="img/mike-avatar.png" alt="">
</div>
<div class="flex flex-col">
<h4 class="text-lg text-skyBlue font-bold">Mike Manson</h4>
<p>iammike.gmail.com</p>
</div>
</div>
<!-- Primary Buttons -->
<div class="flex flex-col space-y-6">
<a href="#"
class="flex items-center space-x-10 hover:font-bold active:font-bold focus:font-bold hover:text-skyBlue focus:text-skyBlue active:text-skyBlue">
<i class="fa-solid fa-envelope px-2"></i>
Inbox
<span class="bg-brightRed rounded-full text-sm px-2 text-white text-center">20</span>
</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-skyBlue focus:text-skyBlue active:text-skyBlue"><i
class="fa-solid fa-suitcase px-2"></i> Draft</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-skyBlue focus:text-skyBlue active:text-skyBlue"><i
class="fa-solid fa-paper-plane px-2"></i> Sent</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-skyBlue focus:text-skyBlue active:text-skyBlue"><i
class="fa-solid fa-trash px-2"></i> Trash</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-skyBlue focus:text-skyBlue active:text-skyBlue"><i
class="fa-solid fa-table-cells-large px-2"></i> More</a>
</div>
<!-- Folders Container -->
<div class="flex flex-col space-y-6">
<div class="flex justify-between">
<h3 class="text-xl font-bold">Folders</h3>
<button class="px-3 text-center text-sm bg-lightSkyBlue rounded-full">Add</button>
</div>
<!-- Folder Buttons -->
<div class="flex flex-col space-y-6">
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-darkBlue active:text-darkBlue focus:text-darkBlue"><i
class="fa-solid fa-folder text-darkBlue px-2"></i> Office</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-lightRed active:text-lightRed focus:text-lightRed"><i
class="fa-solid fa-folder text-lightRed px-2"></i> Personal</a>
<a href="#"
class="hover:font-bold active:font-bold focus:font-bold hover:text-lightYellow active:text-lightYellow focus:text-lightYellow"><i
class="fa-solid fa-folder text-lightYellow px-2"></i> Freelance</a>
</div>
</div>
<!-- Compose Button -->
<div class="py-8">
<button
class="rounded-md bg-brightRed text-white p-5 px-14 py-1 shadow-sm shadow-shadowColor">Compose</button>
</div>
</div>
<!-- Mail List -->
<div class="flex flex-col items-center space-y-6 p-4 pt-10 bg-grayBluish">
<!-- Search Bar -->
<div class="relative drop-shadow-md shadow-gray-500 w-full">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<i class="fa-solid fa-magnifying-glass text-gray-500"></i>
</span>
<input type="text"
class="py-2 px-24 w-full text-sm text-white rounded-xl pl-10 focus:outline-none focus:bg-white focus:text-gray-900"
placeholder="Search..." autocomplete="off">
</div>
<!-- Mail List Container -->
<div class="scroll-style flex flex-col space-y-4 overflow-y-auto scroll-mx-32"
style="max-height: 40rem;">
<!-- Item 01 -->
<div
class="cursor-pointer flex flex-col items-center space-y-2 bg-white rounded-xl px-10 pl-5 pr-5 py-5 drop-shadow-md shadow-gray-400">
<div class="w-full flex justify-between">
<div class="flex items-center space-x-2">
<div>
<img src="/img/sam-avatar.png" alt="">
</div>
<div>
<h1 class="text-lg font-bold">Sam Miller</h1>
<p class="text-base">Portfolio</p>
</div>
</div>
<p class="mt-3 font-semibold text-sm">Today 08:45 PM</p>
</div>
<div class="flex flex-col items-start space-y-2 pl-20">
<p class="text-justify">Stop wasting time looking for files buried in folders. Visually organize
all your assets in one place</p>
<button class="text-skyBlue"><i class="fa-solid fa-paperclip pr-2"></i><span
class="pr-1">4</span>Attachments</button>
</div>
</div>
<!-- Item 02 -->
<div
class="flex flex-col items-center space-y-2 bg-white rounded-xl px-10 pl-5 pr-5 py-5 drop-shadow-md shadow-gray-400">
<div class="w-full flex justify-between">
<div class="flex items-center space-x-2">
<div>
<img src="/img/sam-avatar.png" alt="">
</div>
<div>
<h1 class="text-lg font-bold">Lily Jones</h1>
<p class="text-base">Invitations</p>
</div>
</div>
<p class="mt-3 font-semibold text-sm">Yesterday 01:11 PM</p>
</div>
<div class="flex flex-col items-start space-y-2 pl-20">
<p class="text-justify">Its always a pleasure to have you all at my birthday parties. So, please
dont be late for this one.</p>
<!-- <button class="text-skyBlue"><i class="fa-solid fa-paperclip pr-2"></i><span class="pr-1">4</span>Attachments</button> -->
</div>
</div>
<!-- Item 03 -->
<div
class="flex flex-col items-center space-y-2 bg-white rounded-xl px-10 pl-5 pr-5 py-5 drop-shadow-md shadow-gray-400">
<div class="w-full flex justify-between">
<div class="flex items-center space-x-2">
<div>
<img src="/img/smith-avatar.png" alt="">
</div>
<div>
<h1 class="text-lg font-bold">Smith</h1>
<p class="text-base">Assignment Submission</p>
</div>
</div>
<p class="mt-3 font-semibold text-sm">Monday 04:45 PM</p>
</div>
<div class="flex flex-col items-start space-y-2 pl-20">
<p class="text-justify">If you want to set up an assignment with additional reviews, you can
enable Moderated Grading...</p>
<!-- <button class="text-skyBlue"><i class="fa-solid fa-paperclip pr-2"></i><span class="pr-1">4</span>Attachments</button> -->
</div>
</div>
<!-- Item 04 -->
<div
class="flex flex-col items-center space-y-2 bg-white rounded-xl px-10 pl-5 pr-5 py-5 drop-shadow-md shadow-gray-400">
<div class="w-full flex justify-between">
<div class="flex items-center space-x-2">
<div>
<img src="/img/patrick-avatar.png" alt="">
</div>
<div>
<h1 class="text-lg font-bold">Patrick</h1>
<p class="text-base">Interview Scheduled</p>
</div>
</div>
<p class="mt-3 font-semibold text-sm">Monday 05:35 PM</p>
</div>
<div class="flex flex-col items-start space-y-2 pl-20">
<p class="text-justify"> Hi Mike, thanks for applying for UI/UX Designer. We are reviewing
resume's and will follow up in the...</p>
<!-- <button class="text-skyBlue"><i class="fa-solid fa-paperclip pr-2"></i><span class="pr-1">4</span>Attachments</button> -->
</div>
</div>
</div>
</div>
<!-- Mail Box -->
<div class="scroll-style flex flex-col space-y-10 p-5 overflow-y-auto scroll-mx-32" style="">
<!-- Mail Box Header -->
<div class="flex space-x-8 pl-20">
<a href="" class="text-gray-400"><i class="fa-solid fa-reply"></i></a>
<a href="" class="text-gray-400"><i class="fa-solid fa-reply-all"></i></a>
<a href="" class="text-gray-400"><i class="fa-solid fa-folder"></i></a>
<a href="" class="text-gray-400"><i class="fa-solid fa-trash"></i></a>
</div>
<!-- Mail Box Message -->
<div class="container">
<div class="flex flex-col space-y-6">
<div class="flex space-x-2">
<div>
<img src="/img/sam-avatar.png" alt="">
</div>
<div>
<h1 class="text-lg font-bold">Sam Miller</h1>
<p class="text-base">Portfolio</p>
<p class="text-sm text-gray-400">sammiller@gmail.com</p>
</div>
</div>
<p class="pl-20 font-semibold">Today 8:45 PM</p>
<h1 class="font-bold text-lg pl-20">Hi Mike,</h1>
<p class="text-base pl-20">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum facilisis libero,
venenatis mattis orci hendrerit eget. Etiam ultrices mollis justo, nec fermentum elit viverra
eu. Cras at cursus turpis. Nullam magna sem, vulputate quis massa nec, mollis sollicitudin dui.
Sed eu massa in arcu pharetra posuere. Phasellus maximus neque non ex dapibus fringilla.
Praesent nec lacinia enim. Curabitur a dui nisl.
</p>
<div class="pl-20">
<button class="text-skyBlue"><i class="fa-solid fa-paperclip pr-2"></i><span
class="pr-1">4</span>Attachments</button>
</div>
<!-- Attachments Gallary -->
<div class="grid grid-cols-2 px-10 pl-20 gap-4">
<img src="/img/gal-img-1.jpg" alt="">
<img src="/img/gal-img-2.jpg" alt="">
<img src="/img/gal-img-3.jpg" alt="">
<img src="/img/gal-img-4.jpg" alt="">
</div>
<div class="flex space-x-2 pl-20">
<button class="border-2 border-gray-400 text-gray-400 px-2 rounded-md font-light"><i
class="fa-solid fa-download"></i> Download</button>
<p class="text-gray-400 font-light">5.6 mb total</p>
</div>
<!-- Search Bar -->
<div class="relative pl-20 pr-10">
<input type="text" class="py-3 px-14 w-full text-sm text-white rounded-md pl-2 focus:outline-none border-2 border-gray-300"
placeholder="Type Message..." autocomplete="off">
<span class="absolute inset-y-0 flex items-center" style="padding-left: 23rem;">
<i class="fa-solid fa-paper-plane text-skyBlue"></i>
</span>
<span class="absolute inset-y-0 flex items-center" style="padding-left: 21rem;">
<i class="fa-solid fa-paperclip text-gray-400"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>