-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (80 loc) · 3.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/middle-section.css">
<title>Chat-App-Illustration | Abubakar-Tamboli</title>
</head>
<body>
<div class="left-background"></div>
<div class="right-background"></div>
<div class="middle-section">
<div class="middle-left-section">
<div class="mobile-background">
<div class="mobile-heading">
<div class="upper"></div>
<div class="heading-container">
<button class="back-icon-btn">
<img class="back-btn" src="images/back.png" alt="back-icon">
</button>
<img class="avatar" src="images/avatar.jpg" alt="avatar-image">
<div class="heading-name">
<h6 class="samuel">Samuel Green</h6>
<p class="available">Available to Walk</p>
</div>
<button class="more-icon-btn">
<img class="more-btn" src="images/more.png" alt="more-btn">
</button>
</div>
</div>
<div class="mobile-chats">
<div class="one">
That sounds great. I’d be happy with that.
</div>
<div class="two">
Could you send over some pictures of your dog, please?
</div>
<div class="three">
<img class="dogs" src="images/dog-image-1.jpg" alt="dog-1">
<img class="dogs" src="images/dog-image-2.jpg" alt="dog-2">
<img class="dogs" src="images/dog-image-3.jpg" alt="dog-3">
</div>
<div class="four">
Here are a few pictures. She’s a happy girl!
</div>
<div class="five">
Can you make it?
</div>
<div class="six">
She looks so happy! The time we discussed works. How long shall I take her out for?
</div>
<div class="seven">
◎ <span class="minute">30 minute walk</span> <span class="dollar-1">$29</span>
</div>
<div class="eight">
◎ <span class="hour">1 hour walk</span> <span class="dollar-2">$49</span>
</div>
<div class="nine">
<input class="type" type="email" placeholder="Type a message…">
<button class="send"><img class="send-btn" src="images/back.png" alt="send-btn"></button>
</div>
</div>
</div>
</div>
<div class="middle-right-section">
<h2 class="simple">Simple booking</h2>
<p class="right-para">
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>
</body>
</html>