/
index.html
127 lines (124 loc) · 4.33 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="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."
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Godfred Gameli</title>
</head>
<body>
<!--Main container wrapper-->
<div class="container-fluid main-wrapper">
<div class="row h-100">
<!--Mobile wrapper-->
<div class="col-md h-100 chat-wrapper">
<div class="background-gradient"></div>
<div class="chat-container h-100">
<!--Mobile container-->
<div class="mobile">
<div class="white-panel"></div>
<div class="name-section">
<div>
<i class="fas fa-chevron-left"></i>
<img src="images/avatar.jpg" alt="" />
<p>
Samuel Green <br />
<span>Available to Walk</span>
</p>
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
<div class="chats">
<ul class="chat left">
<li>That sounds great. I’d be happy with that.</li>
<li>
Could you send over some pictures of your dog, please?
</li>
</ul>
<ul class="chat right">
<li class="dog-pics">
<img src="images/dog-image-1.jpg" alt="dog" />
<img src="images/dog-image-2.jpg" alt="dog" />
<img src="images/dog-image-3.jpg" alt="dog" />
</li>
<li>Here are a few pictures. She’s a happy girl!</li>
<li>Can you make it?</li>
</ul>
<ul class="chat left">
<li>
She looks so happy! The time we discussed works. How long
shall I take her out for?
</li>
</ul>
<div class="rates">
<div class="circle"></div>
<div class="charge">30 minute walk <span>$29</span></div>
</div>
<div class="rates">
<div class="circle"></div>
<div class="charge">1 hour walk <span>$49</span></div>
</div>
<div class="message">
Type a message…
<span> <i class="fas fa-chevron-circle-right"></i></span>
</div>
</div>
</div>
</div>
</div>
<!--Introduction container-->
<div class="col-md h-100 text-wrapper">
<header class="w-50 text-content">
<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>
</header>
</div>
</div>
</div>
<footer class="attribution">
Challenge by
<a
href="https://www.frontendmentor.io?ref=challenge"
target="_blank"
rel="noopener"
>Frontend Mentor</a
>. Coded by
<a
href="https://www.github.com/Godfredgameli"
target="_blank"
rel="noopener"
>Godfred Gameli</a
>.
</footer>
</body>
</html>