-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (74 loc) · 2.52 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
<!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="stayle.css">
<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=Barlow+Semi+Condensed:ital,wght@0,500;0,600;1,600&family=Fraunces:ital,opsz,wght@1,9..144,700&family=Hanken+Grotesk:wght@500;700;800&family=Montserrat:wght@500;700&family=Outfit:wght@200;300;400;500;600;700&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="phone">
<div class="top">
<div class="img">
<img src="images/avatar.jpg" alt="">
</div>
<div class="flex-group">
<h1>Samuel Green</h1>
<p>Available to Walk</p>
</div>
</div>
<div class="massege-1">
That sounds great. I’d be happy with that.
</div>
<div class="massege-2">
Could you send over some pictures of your dog, please?
</div>
<div class="imgs">
<img class="img-1" src="images/dog-image-1.jpg" alt="">
<img class="img-2" src="images/dog-image-2.jpg" alt="">
<img class="img-3" src="images/dog-image-3.jpg" alt="">
</div>
<div class="massege-3">
Here are a few pictures. She’s a happy girl!
</div>
<div class="massege-4">
Can you make it?
</div>
<div class="massege-5">
She looks so happy! The time we discussed works. How long shall I take her out for?
</div>
<div class="massege-6">
30 minute walk
<span>$29</span>
</div>
<div class="massege-7">
1 hour walk
<span>$49</span>
</div>
<div class="bottom">
<input type="text" placeholder="Type a message…">
</div>
</div>
<div class="text">
<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>
</body>
</html>