-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (83 loc) · 3.24 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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/basic.css">
<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; margin-top:8rem;margin-bottom: 1rem;}
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner">
<section id="sim-mobil">
<div class="sim-mobil-inner">
<div class="head-app">
<div class="contact">
<div><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<img src="images/avatar.jpg" alt="">
<div>
<h2>Samuel Green</h2>
<p>Available to Walk</p>
</div>
<div class="menu"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
</div>
</div>
<div class="chat-left">
That sounds great. I’d be happy with that.
</div>
<div class="chat-left">
Could you send over some pictures of your dog, please?
</div>
<div class="myMessages">
<div class="chat-right-photos">
<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="chat-right">
Here are a few pictures. She’s a happy girl!
</div>
<div class="chat-right fit">
Can you make it?
</div>
</div>
<div class="chat-left">
She looks so happy! The time we discussed works. How long shall I take her out for?
</div>
<div class="options">
<p class="time">30 minute walk</p>
<p class="price">$29</p>
</div>
<div class="options">
<p class="time">1 hour walk</p>
<p class="price">$49</p>
</div>
<div class="message">
<span>Type a message…</span>
<div class="send">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section class="info">
<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>
</section>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="http://www.javiersam.blogspot.com">JavierSam</a>.
</div>
</body>
</html>