-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (83 loc) · 3.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | Chat app CSS illustration</title>
<link rel="stylesheet" href="./assets/styles/css/style.min.css">
</head>
<body>
<main>
<div class="bg-element bg-element-dark"></div>
<div class="bg-element bg-element-light"></div>
<div class="container">
<div class="mobileContainer">
<span class="mobileCamere"></span>
<div class="screenContainer">
<div class="chatTopPanel">
<div class="topArrow"></div>
<img src="./assets/images/avatar.jpg" alt="avatar" class="topAvatar">
<div>
<h5 class="id-name">Samuel Green</h5>
<p class="id-info">Available to Walk</p>
</div>
<div class="chatTopPanelDots">.</div>
</div>
<div class="leftContainer">
<p class="leftText">That sounds great. I’d be happy with that.</p>
</div>
<div class="leftContainer">
<p class="leftText">Could you send over some pictures of your dog, please?</p>
</div>
<div class="imgContainer">
<img src="./assets/images/dog-image-1.jpg" alt="happy dog close up" class="dogImg">
<img src="./assets/images/dog-image-2.jpg" alt="happy dog close up" class="dogImg">
<img src="./assets/images/dog-image-3.jpg" alt="happy dog close up" class="dogImg">
</div>
<div class="RightContainer">
<p class="RightText">Here are a few pictures. She’s a happy girl!</p>
</div>
<div class="RightContainer">
<p class="RightText">Can you make it?</p>
</div>
<div class="leftContainer">
<p class="leftText">She looks so happy! The time we discussed works. How long shall I take her out for?</p>
</div>
<div class="priceContainer">
<p class="walkTime">30 minute walk</p>
<p class="priceAmount">$29</p>
</div>
<div class="priceContainer">
<p class="walkTime">1 hour walk</p>
<p class="priceAmount">$49</p>
</div>
<div class="msgSendContainer">
<p class="msgPlaceholder">Type a message…</p>
<div class="msgSendBtn">></div>
</div>
</div>
</div>
<div class="content">
<h1 class="contentTitle">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>
<footer>
<div class="attribution">
<p>
Challenge by
<a href="https://www.frontendmentor.io">Frontend Mentor</a>. Coded
by
<a href="https://github.com/faha1999/" title="faha1999">
faha1999
</a>
</p>
</div>
</footer>
</main>
</body>
</html>