-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (74 loc) · 2.89 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
<!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 -->
<script src="https://kit.fontawesome.com/abf3b07d0c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Frontend Mentor | [Chat app css illustration master]</title>
</head>
<body>
<main class="container">
<div class="background"></div>
<div class="background background-right"></div>
<section class="illustration">
<div class="illustration__header">
<div class="header-dock"></div>
<i class="icon fa-solid fa-chevron-left"></i>
<img class="user-image" src="./images/avatar.jpg" alt="Samuel Green image">
<div class="user-info">
<p class="user-name">Samuel Green</p>
<p class="user-status">Available to Walk</p>
</div>
<i class="icon nav-icon fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="illustration__body">
<p class="message message--receptor">
That sounds great. I'd be happy to discuss more.
</p>
<p class="message message--receptor">
Could you send over some pictures of your dog, please?
</p>
<div class="message-img">
<img src="./images/dog-image-1.jpg" alt="dog image">
<img src="./images/dog-image-2.jpg" alt="dog image">
<img src="./images/dog-image-3.jpg" alt="dog image">
</div>
<p class="message message--sender">
Here are a few pictures. She's a happy girl!
</p>
<p class="message message--sender">
Can you make it?
</p>
<p class="message message--receptor">
She looks so happy! The time we discussed works. How
long shall I take her out for?
</p>
<p class="message message--receptor message--price">
<span class="radio-button"></span> 30 minute walk <span class="price">$29</span>
</p>
<p class="message message--receptor message--price">
<span class="radio-button"></span> 1 hour walk <span class="price">$49</span>
</p>
<div class="send-textarea">
<p class="send-text">Type a message...</p>
<div class="send-button">
<i class="icon fa-solid fa-chevron-right"></i>
</div>
</div>
</div>
</section>
<section class="content">
<h1 class="title">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 they walk has been completed
you can rate your walker and book again all through
the chat.
</p>
</section>
</main>
</body>
</html>