chat-illustrator/index.html at main · Codeindeed/chat-illustrator · GitHub

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
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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="stylesheet" href="style.css" />
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | [Challenge Name Here]</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  </head>
  <body>
    <main class="body">
      <div class="container">
        <div class="phone">
          <div class="phone__contents">
            <div class="header">
              <img
                src="images/bx-first-page.svg"
                class="chevron__image"
                alt=""
              />
              <img src="images/avatar.jpg" class="header__image" alt="" />
              <ul class="header__name">
                <li class="name__1">samuel Green</li>
                <li class="available">Available to walk</li>
              </ul>
              <img
                src="images/bx-dots-vertical-rounded.svg"
                class="chevron__image end"
                alt=""
              />
            </div>
            <div class="containers">
              <div class="first__text">
                <div class="text__1">
                  <h2 class="text">That sounds great i'd be happy with that</h2>
                </div>
                <div class="text__1">
                  <h2 class="text">
                    Could you send over some pictures of your dog, please?
                  </h2>
                </div>
              </div>
              <div class="image__text">
                <div class="img__texts">
                  <img
                    src="images/dog-image-1.jpg"
                    alt=""
                    class="card__image"
                  />
                  <img
                    src="images/dog-image-2.jpg"
                    alt=""
                    class="card__image"
                  />
                  <img
                    src="images/dog-image-3.jpg"
                    alt=""
                    class="card__image"
                  />
                </div>
                <div class="second__text">
                  <div class="text__2">
                    <h2 class="text">
                      That sounds great i'd be happy with that
                    </h2>
                  </div>
                  <div class="text__2">
                    <h2 class="text">Can you make it</h2>
                  </div>
                </div>
              </div>

              <div class="first__text">
                <div class="text__1">
                  <h2 class="text">
                    She looks so happy! The time we discussed works. How long
                    shall I take her out for?
                  </h2>
                </div>
                <div class="text__3">
                  <span class="circle"></span>
                  <h3 class="text">30 minute walk</h3>
                  <span class="number">$29</span>
                </div>
                <div class="text__3">
                  <span class="circle"></span>
                  <h3 class="text">1 hour walk</h3>
                  <span class="number">$49</span>
                </div>
              </div>
              <div class="input">
                <span class="message"> Type a message…</span>
                <span class="button">
            <i class='bx bx-lg wi bx-fade-right-hover bxs-chevron-right' ></i>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="text__container">
          <h1 class="text__header">  Simple booking</h1>
          <p class="text__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.
          </p>
        </div>
      </div>
    </main>
    <!-- <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </div> -->
  </body>
</html>

<!--
  Samuel Green
  Available to Walk


  -->