Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
118 lines (101 loc) · 5 KB
/
Copy pathindex.html
File metadata and controls
118 lines (101 loc) · 5 KB
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
<!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="style.css">
<link rel="stylesheet" href="font/Rubik-VariableFont_wght.ttf">
<link rel="stylesheet" href="fontawesome/css/all.css">
<title>Chat app</title>
</head>
<body>
<div class="design">
<div class="circle-1">
<div class="round-design1"></div>
</div>
<div class="page">
<div class="mobile-design">
<div class="mob-outline">
<div class="mob-innerline">
<div class="abt-authour">
<div class="circle-design"></div>
<!-- <div class="all-abt-authour"> -->
<div class="icon-back">
<i class="fas fa-chevron-left"></i>
</div>
<div class="abt-authour-info">
<img src="images/avatar.jpg" alt="avatar" class="avatar">
<div class="abt-authour-info-cont">
<p class="authour-txt">Samuel Green</p>
<p class="authour-status">Available to Walk</p>
</div>
</div>
<div class="icon-setting">
<i class="fas fa-ellipsis-v"></i>
</div>
<!-- </div> -->
</div>
<!-- --------------message box----------------- -->
<div class="message-area">
<div class="message-area-container">
<div class="clear-fix">
<div class="message-left">That sounds great. I’d be happy with that.</div>
<div class="message-left">Could you send over some pictures of your dog, please? </div>
<div class="img-grid">
<img src="images/dog-image-1.jpg" alt="dog">
<img src="images/dog-image-2.jpg" alt="dog">
<img src="images/dog-image-3.jpg" alt="dog">
</div>
<div class="message-right">Here are a few pictures. She’s a happy girl! </div>
<div class="message-right">Can you make it?</div>
<div class="message-left">She looks so happy! The time we discussed works. How long shall I take her out for? </div>
<div class="price">
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<div class="pice-info">
<div class="price-info-txt">30 minute walk
<span>$29</span>
</div>
</div>
</label>
</div>
<div class="price gap">
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<div class="pice-info">
<div class="price-info-txt">1 hour walk
<span>$49</span>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- -------------------------------message send area------------------------------ -->
<div class="message-send-area">
<div class="message-send-area-container">
<input type="text" placeholder="Type a message…" class="sendmessage">
<i class="fas fa-chevron-circle-right icon"></i>
</div>
</div>
</div>
</div>
</div>
<div class="txt-container">
<div class="tx-container-txt">
<h1>Simple booking</h1>
<p>Stay in touch with our dog walkers through the chat interface. This makes it easy to discuss arrangements and make bookings. Once the walk has been completed you can rate your walker and book again all through the chat.</p>
</div>
</div>
</div>
<div class="circle-2">
<div class="round-design2"></div>
</div>
</div>
<script src="fontawesome/js/all.js"></script>
</body>
</html>