-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (83 loc) · 4.55 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
<!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">
<title>Chat App Illustration Master | Jeffrey Tuason</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- FONTS -->
<link rel="stylesheet" href="font/rubik.css">
<!-- ICONS -->
<script src="https://kit.fontawesome.com/7c2c918ecf.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="landing-page">
<div class="landing-page__container">
<div class="mobile">
<!-- MOBILE VOLUME DESIGN -->
<div class="mobile__volume"></div>
<!-- MOBILE HEADER -->
<div class="mobile__header">
<i class="fas fa-chevron-left"></i>
<div class="user">
<img class="user__profile" src="img/avatar.jpg" alt="user's profile picture">
<div class="user__details">
<p class="user__name">Samuel Green</p>
<p class="user__stats">Available to Walk</p>
</div>
</div>
<i class="fas fa-ellipsis-v"></i>
</div>
<!-- MOBILE BODY -->
<div class="mobile__container">
<div class="mobile__body">
<div class="chat-left">
<p class="chat-left__text">That sounds great. I'd be happy to discuss more.</p>
</div>
<div class="chat-left">
<p class="chat-left__text">Could you send over some pictures of your dog, please?</p>
</div>
<div class="chat-img">
<img class="chat-img__dogs" src="img/dog-image-1.jpg" alt="photo of a dog">
<img class="chat-img__dogs" src="img/dog-image-2.jpg" alt="photo of a dog">
<img class="chat-img__dogs" src="img/dog-image-3.jpg" alt="photo of a dog">
</div>
<div class="chat-right">
<p class="chat-right__text">Here are a few pictures. She's a happy girl.</p>
</div>
<div class="chat-right">
<p class="chat-right__text">Can you make it?</p>
</div>
<div class="chat-left margined">
<p class="chat-left__text">She looks so happy! The time we discussed works. How long shall I take her out for?</p>
</div>
<div class="chat-left gradient-chat">
<div class="gradient-chat__circle"></div>
<p class="gradient-chat__text">30 minute walk</p>
<p class="gradient-chat__salary">$29</p>
</div>
<div class="chat-left gradient-chat">
<div class="gradient-chat__circle"></div>
<p class="gradient-chat__text">1 hour walk</p>
<p class="gradient-chat__salary">$49</p>
</div>
</div>
<div class="mobile-footer">
<input class="mobile-footer__input" type="text" placeholder="Type a message..." disabled>
<div class="mobile-footer__btn"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
</div>
<div class="landing-page__content">
<h3 class="landing-page__heading">Simple booking</h3>
<p class="landing-page__text">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>
</section>
<footer class="footer">
<p class="footer__text">Challenge by: <a class="footer__link" href="https://www.frontendmentor.io/challenges/chat-app-css-illustration-O5auMkFqY">Frontend Mentor</a>. Coded by: <a class="footer__link" href="https://www.facebook.com/Tuason06/">Jeffrey Tuason</a>.</p>
</footer>
</body>
</html>