-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
64 lines (49 loc) · 2.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="main.css">
<title>Chat App CSS Illustration | By Marc Bellido</title>
</head>
<body>
<div class="left-purple-column"></div>
<div class="phone">
<div class="phone-header">
<div class="phone-header-overlay"></div>
<span class="arrow"><</span>
<img src="/images/avatar.jpg" alt="avatar samuel green">
<div class="name">
<p class="name-samuel">Samuel Green</p>
<p class="available">Available to Walk</p>
</div>
<span class="dots">⁝</span>
</div>
<div class="phone-main">
<p class="message samuel">That sounds great. I’d be happy with that.</p>
<p class="message samuel">Could you send over some pictures of your dog, please?</p>
<ul>
<li><img src="/images/dog-image-1.jpg" alt="dog 1"></li>
<li><img src="/images/dog-image-2.jpg" alt="dog 2"></li>
<li><img src="/images/dog-image-3.jpg" alt="dog 3"></li>
</ul>
<p class="message propietario">Here are a few pictures. She’s a happy girl!</p>
<p class="message propietario">Can you make it?</p>
<p class="message samuel">She looks so happy! The time we discussed works. How long shall I take her out for?</p>
<p class="message pay">◯ 30 minute walk <span>$29</span></p>
<p class="message pay">◯ 1 hour walk <span>$49</span></p>
<p class="message type">Type a message… <span>></span></p>
</div>
</div>
<div class="simple-booking">
<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 class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.linkedin.com/in/marc-bellido-dorador-97721b175/">Marc Bellido</a>.
</div>
<div class="right-grey-column"></div>
</body>
</html>