generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
messenger-icons.html
167 lines (161 loc) · 5.24 KB
/
messenger-icons.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Silver Connections</title>
</head>
<body>
<!-- The header will contain the Title for the website and a breaf introduction informing
the website mission and directions how to start -->
<header>
<h1>Facebook Messenger</h1>
<div class="topandbotton">
<div>
<p>
What are the Icons in Messenger?
</p>
</div>
</div>
</header>
<!-- The main section will be presenting the cards with options to be chosen by the user -->
<section class="main">
<!-- A card container created to hold all the cards and be able to make them responsible -->
<div class="card-container">
<div class="card">
<h3>Sidebar View</h3>
<p>
There are 5 icons beside the Messenger name, these icons stand for:
</p>
<ol>
<li>
<img
class="img-size"
src="assets/img/messenger/messenger-sidebar-fullscreen-icon.png"
alt=""
/>Make Messenger full screen
</li>
<li>
<img
class="img-size"
src="assets/img/messenger/messenger-sidebar-new-room.png"
alt=""
/>Create a new room - This is for video calling contacts
</li>
<li>
<img
class="img-size"
src="assets/img/messenger/messenger-sidebar-new-message.png"
alt=""
/>New Message - This will open a new message tab.
</li>
<li>
<img
class="img-size"
src="assets/img/messenger/messenger-sidebar-settings.png"
alt=""
/>
Options/Chat settings where you can adjust preferences on sounds
and colours.
</li>
</ol>
</div>
<div class="card">
<h3>Search Messenger</h3>
<img
class="img-size"
src="assets/img/messenger/messenger-sidebar-search.png"
alt=""
/>
<p>
The search bar at the top of Messenger allows you to search
conversations that you and a contact are involved in by typing their
name, whether it's a one to one converstaion or if you are in any
group conversations with them.
</p>
</div>
<div class="card">
<h3>Fullscreen View</h3>
<p>
You may have noticed some icons either side of the text area, from
left to right:
<img
class="img-size"
src="assets/img/messenger/messenger-full-plus.png"
alt=""
/>
</p>
<ol>
<li>
Plus sign - Pressing this reveals 3 more icons
<ul>
<li>Camera - To take and send a picture in the message.</li>
<li>
Game Controler - To challenge yor contact to a game on
Facebook.
</li>
<li>
Microphone - To send a voice recorded message. Simple press
the microphone, press the record button, record your message,
press the stop button and it will automatically send.
</li>
</ul>
</li>
</ol>
</div>
<div class="card">
<h3>Fullscreen View cont</h3>
<ol>
<li>
Gif Icon - Used to send images or short animations.
</li>
<li>
Sticker Icon - To send stickers to show emotional responses
without using words.
</li>
<li>
Add File Icon - This will open your computers folders so you can
send stored information like photos or bills that are stored on
your device.
</li>
<li>
<img
class="img-size"
src="assets/img/messenger/messenger-full-thumb.png"
alt=""
/>
Emoji Icon - Lets you add emojis like smiley faces to text
messages.
</li>
<li>
Thumbs Up Icon - This will send a quick response of a thumbs up in
to the conversation instead of a texted reply.
</li>
</ol>
</div>
</div>
</section>
<footer>
<div class="topandbotton">
<div id="foot">
<p>
To return to the main page or back, please click one of the buttons
bellow:
</p>
<div id="double-button">
<a href="index.html">
<p class="button">HOME</p>
</a>
<a href="messenger.html">
<p class="button">BACK</p>
</a>
</div>
</div>
</div>
<div class="designby">
<p>Designed by BI Team 10 - Hackathon 2020</p>
</div>
</footer>
</body>
</html>