-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (105 loc) · 3.51 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
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/1fdc9ca04b.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="CSS/normalize.css" />
<link rel="stylesheet" href="CSS/style.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=Rubik:wght@400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="phone-container">
<div class="phone">
<div class="white-container"></div>
<header class="phone-header">
<div class="header-texts">
<div class="chevron"></div>
<div class="profile">
<img src="images/avatar.jpg" alt="" />
</div>
<div class="text-container">
<h4 class="name">Samuel Green</h4>
<p>Available For Walk</p>
</div>
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</header>
<div class="message-container">
<div class="message-left">
<p>that sounds greate id be happy with taht</p>
</div>
<div class="message-left">
<p>could you send over some pictures of your dog , please?</p>
</div>
<div class="dog-photo">
<img src="images/dog-image-1.jpg" alt="" />
<img src="images/dog-image-2.jpg" alt="" />
<img src="images/dog-image-3.jpg" alt="" />
</div>
<div class="message-right message-one">
<p>Here are a few pictures She is a happy girl</p>
</div>
<div class="message-right">
<p>Can you make it?</p>
</div>
<div class="message-left">
<p>
She looks so happy! the time we discused works How long shall i
take her out for?
</p>
</div>
<div class="price-container">
<div class="price">
<div class="price-txt-container">
<div class="white-border-circle"></div>
<p>30 minutes Walk</p>
</div>
<div>
<h2>$29</h2>
</div>
</div>
<div class="price">
<div class="price-txt-container">
<div class="white-border-circle"></div>
<p>1 hour Walk</p>
</div>
<div>
<h2>$49</h2>
</div>
</div>
</div>
<div class="input-container">
<input class="input" type="text" placeholder="Type a message .. " />
<span class="icon">
<i class="fa-solid fa-circle-chevron-right"></i>
</span>
</div>
</div>
</div>
</div>
<div class="text-box">
<h1>Simple booking</h1>
<p>
Stay in touch with our dog walkers through the chat interface. This
makes it easy to discuss arrangments and make booking. Once the walk has
been completed you can rate your walker and book again all through the
chat.
</p>
</div>
<div class="right-box"></div>
</body>
</html>