-
Notifications
You must be signed in to change notification settings - Fork 0
/
readmail.html
136 lines (112 loc) · 5.46 KB
/
readmail.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--title is text-only and shown in browser title bar -->
<title>Mail</title>
<!-- Meta Tags: To ensure proper rendering and touch zooming, add the following meta tag inside the <head> element: -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS ="bootstrap-5.1.3-dist/css/bootstrap.min.css" -->
<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- container for the main body --> <!-- -->
<div class="container">
<div class="row profile" style="max-width: 200px">
<!-- Buffer Zone -->
<img src="Pics\woman.jpg" class="float-left" >
<p> Username </p>
<a href="#" class="btn">
Details
</a>
<a href="#" class="btn">
Logout
</a>
</div>
<!-- Button Row Main NavBar -->
<div class="row">
<div class="col-4 myplan">
<a href="#" class="btn">
My Plan
<img src="Pics/plan.png" alt="My Plan" class="img-fluid">
</a>
</div>
<div class="col-4 actionplan">
<a href="#" class="btn">
Action Plan
<img src="Pics/goal.png" alt="Action Plan" class="img-fluid">
</a>
</div>
<div class="col-4 mailnote">
<a href="index.html" class="btn">
Mail/Notes
<img src="Pics/mail.png" alt="Mail" class="img-fluid">
</a>
</div>
</div>
<div class="container box">
<!-- Button Row Mail&Notes -->
<div class="row">
<div class="col-sm inbox" aria-labelledby="inbox">
<a href="index.html" class="btn">
Inbox
<img src="Pics/inbox.png" alt="Inbox" class="img-fluid">
</a>
</div>
<div class="col-sm outbox" aria-labelledby="outbox">
<a href="outbox.html" class="btn">
Outbox
<img src="Pics/outbox.png" alt="Outbox" class="img-fluid">
</a>
</div>
<div class="col-sm send" aria-labelledby="send message">
<a href="sendmessage.html" class="btn">
Send Message
<img src="Pics/send.png" alt="Send message" class="img-fluid">
</a>
</div>
<div class="col-sm viewnote" aria-labelledby="view notes">
<a href="notes.html" class="btn">
View Notes
<img src="Pics/notes.png" alt="Notes" class="img-fluid">
</a>
</div>
</div>
<!-- start of Template -->
<!-- Will grab email info from database and display them in these containers-->
<div class="row">
<div class="col-sm-4 read" border>
<h4> From: </h4>
</div>
<div class="col-sm-4 read">
<h4> Received: </h4>
</div>
<div class="col-sm-4 read">
<h4> Subject: </h4>
</div>
</div>
<div class="row read">
<p> Dear User,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur, libero vel eleifend gravida, ipsum tortor lobortis purus, sit amet sollicitudin urna urna vitae tortor. Phasellus at lectus neque. Nulla at ex nulla. Morbi convallis congue pulvinar. Nam posuere, leo eu lacinia convallis, nisi erat viverra neque, a molestie libero tortor id eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam finibus, libero vitae porta semper, nulla velit eleifend quam, ac euismod felis dui ut odio.
Nam sed enim metus. Ut interdum, nunc ut vestibulum condimentum, odio tellus ornare lacus, a egestas erat lacus non dui. Mauris sit amet gravida mi. Ut et arcu pellentesque, placerat turpis et, vestibulum tellus. Suspendisse pretium ligula id tristique imperdiet. Mauris nulla lorem, finibus et nisi id, porttitor feugiat nunc. Duis finibus nunc porttitor, scelerisque risus a, tincidunt neque. Sed a rutrum nunc, in ornare ipsum. Quisque vitae sapien interdum, sodales tellus a, lacinia tortor. Nunc ac leo ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula cursus augue. Ut ut purus ac felis facilisis aliquet.
Praesent euismod dui dolor. Quisque ac gravida sapien. Praesent varius molestie porttitor. Cras sed ligula ut odio elementum laoreet vel sed lacus. Curabitur faucibus feugiat pulvinar. Duis cursus nulla vel condimentum eleifend. Praesent sagittis purus lectus, nec lobortis massa aliquam vel. </p>
</div>
<!-- Button row-->
<div class="row button-row text-center">
<div class="col text-center">
<button type="button" class="btn btn-warning btn-lg ">Forward</button>
</div>
<div class="col-sm ">
<button type="button" class="btn btn-info btn-lg ">Reply</button>
</div>
<div class="col text-center">
<button type="button" class="btn btn-danger btn-lg ">Delete</button>
</div>
</div>
</div>
<!-- End Button row-->
</body>
<footer>
</footer>
</html>