generated from aekiti/hacktoberfest2020
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.htm
157 lines (149 loc) · 5.01 KB
/
index.htm
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
<!DOCTYPE html>
<html lang="en">
<!---header tag-->
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!---links our css file-->
<link rel="stylesheet" href="style.css" />
<!---title of aplication-->
<title>WhatsApp Clone</title>
</head>
<!---body tag-->
<body>
<!---main body container-->
<div class="container">
<div class="chat">
<div class="chat-header">
<div class="profile">
<!---left side-->
<div class="left">
<!---adding images-->
<img class="arrow" src="images/arrow.png" />
<img class="pp" src="images/pp.png" />
<!---header tag-->
<h2>KOKETSO</h2>
<span>online</span>
</div>
<!---right side-->
<div class="right">
<img class="icon" src="images/phone.png" />
<img class="icon" src="images/video.png" />
<img class="icon" src="images/more.png" />
</div>
</div>
</div>
<!---my convo-->
<div class="chat-box">
<!---right side messages-->
<div class="chat-r">
<div class="sp"></div>
<div class="mess mess-r">
<p>
<img class="emoji" src="images/emoji-1.png" />
Hi there Koketso!!
</p>
<div class="check">
<!---the time sent-->
<span>4:00 PM</span>
<!---ticks when its sent-->
<img src="images/check-2.png" />
</div>
</div>
</div>
<!---left side messages-->
<div class="chat-l">
<div class="mess">
<p>
<img class="emoji" src="images/emoji-2.png" />
Hello how you doing???
</p>
<div class="check">
<!---the time sent-->
<span>4:00 PM</span>
<!---ticks when its sent-->
</div>
</div>
<div class="sp"></div>
</div>
<!---right side messages-->
<div class="chat-r">
<div class="sp"></div>
<div class="mess mess-r">
<p>Great man, how are things?</p>
<div class="check">
<!---the time sent-->
<span>4:04 PM</span>
<!---ticks when its sent-->
<img src="images/check-2.png" />
</div>
</div>
</div>
<!---left side messages-->
<div class="chat-l">
<div class="mess">
<p>Exellent and your side?</p>
<div class="check">
<!---the time sent-->
<span>4:05 PM</span>
<!---ticks when its sent-->
</div>
</div>
<div class="sp"></div>
</div>
<!---right side messages-->
<div class="chat-r">
<div class="sp"></div>
<div class="mess mess-r">
<p>Can I get your pic??</p>
<div class="check">
<!---the time sent-->
<span>4:14 PM</span>
<!---ticks when its sent-->
<img src="images/check-2.png" />
</div>
</div>
</div>
<!---left side messages-->
<div class="chat-l">
<div class="mess">
<img
class="img_chat"
src="images/photo-1494790108377-be9c29b29330.jfif"
/>
<div class="check">
<!---the time sent-->
<span>4:25 PM</span>
<!---ticks when its sent-->
</div>
</div>
<div class="sp"></div>
</div>
<!--end of container-->
</div>
<!---the footer-->
<div class="chat-footer">
<img class="emo" src="images/emo.png" />
<textarea placeholder="Type a message"></textarea>
<div class="icons">
<img src="images/attach file.png" />
<img src="images/camera.png" />
</div>
<img class="mic" src="images/mic.png" />
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
<!---footer tag-->
<footer></footer>
</html>