-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (92 loc) · 3.64 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
<!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">
<title>Frontend Mentor | chat app css illustration</title>
<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@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/56fe5f46b6.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="mobile-illustration">
<div class="mobile-app">
<div class="app-header">
<div class="left-items">
<i class="fa-solid fa-angle-left"></i>
<img src="images/avatar.jpg" alt="">
<p><span>Samuel Green</span>Available to Walk</p>
</div>
<i class="fa-solid fa-ellipsis-vertical"></i>
</div>
<div class="app-chats">
<div class="text-chat-received">
<p>
That sounds great. I’d be happy with that.
</p>
</div>
<div class="text-chat-received">
<p>
Could you send over some pictures of your dog, please?
</p>
</div>
<div class="chat-sent">
<img src="images/dog-image-1.jpg" alt="image of the first dog">
<img src="images/dog-image-2.jpg" alt="image of the second dog">
<img src="images/dog-image-3.jpg" alt="image of the third dog">
</div>
<div class="chat-sent chat-sent-paragraph-1">
<p>
Here are a few pictures. She’s a happy girl!
</p>
</div>
<div class="chat-sent chat-sent-paragraph-2">
<p>
Can you make it?
</p>
</div>
<div class="text-chat-received">
<p>
She looks so happy! The time we discussed works. How long shall I take her out for?
</p>
</div>
<div class="payment-chat-received">
<div class="payment-chat-left">
<div class="circle"></div>
<p>30 minute walk</p>
</div>
<span>$29</span>
</div>
<div class="payment-chat-received">
<div class="payment-chat-left">
<div class="circle"></div>
<p>1 hour walk</p>
</div>
<span>$49</span>
</div>
</div>
<div class="message">
<p>Type a message…</p>
<div class="send-btn">
<i class="fa-solid fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="promotion">
<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>
</main>
</body>
</html>