/
index.html
94 lines (73 loc) · 2.97 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
<!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="stylesheet" href="style.css">
<title>Frontend Mentor | [Chat App Illustration Master]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
footer { font-size: 11px; text-align: center;
display: none; }
footer a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<figure>
<div class="screen">
<div class="top-screen">
<div class="notch"></div>
<div class="profile">
<img src="./images/back.svg" alt="back" class="back">
<img src="./images/avatar.jpg" class="avatar" alt="profile pict" style="border-radius: 15px; border: 1px solid white; margin-left: 10px;">
<p>Samuel Green<br> <span class="status">Available to Walk</span></p>
<img src="./images/more.svg" alt="more" class="more" style="margin-left: 40px;">
</div>
</div>
<div class="interlocutors side-spacing">
<p>That sounds great. I’d be happy with that.</p>
</div>
<div class="interlocutors side-spacing">
<p>Could you send over some pictures of your dog, please?</p>
</div>
<div class="sender-img">
<img src="./images/dog-image-1.jpg" alt="dog 1">
<img src="./images/dog-image-2.jpg" alt="dog 2">
<img src="./images/dog-image-3.jpg" alt="dog 3">
</div>
<div class="sender">
<p>Here are a few pictures. She’s a happy girl!</p>
</div>
<div class="sender spacing">
<p>Can you make it?</p>
</div>
<div class="interlocutors side-spacing">
<p>She looks so happy! The time we discussed works. How long shall I take her out for?</p>
</div>
<div class="price-bubble side-spacing">
<p>30 minute walk</p>
<p style="text-align: end; font-weight: 700;">$29</p>
</div>
<div class="price-bubble side-spacing">
<p>1 hour walk</p>
<p style="text-align: end; font-weight: 700;">$49</p>
</div>
<div class="message-box side-spacing">
<p>Type a message…</p>
<img src="./images/enter.svg" alt="enter">
</div>
</div>
</figure>
<section>
<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>
</section>
<footer>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Arbase</a>.
</footer>
</body>
</html>