Add files via upload

gauravgorane · Jun 24, 2024 · 9c579e0 · 9c579e0
1 parent fcd1dc2
commit 9c579e0
Show file tree

Hide file tree

Showing 7 changed files with 469 additions and 0 deletions.
diff --git a/Chat_app_css_illustration/images/avatar.jpg b/Chat_app_css_illustration/images/avatar.jpg
diff --git a/Chat_app_css_illustration/images/dog-image-1.jpg b/Chat_app_css_illustration/images/dog-image-1.jpg
diff --git a/Chat_app_css_illustration/images/dog-image-2.jpg b/Chat_app_css_illustration/images/dog-image-2.jpg
diff --git a/Chat_app_css_illustration/images/dog-image-3.jpg b/Chat_app_css_illustration/images/dog-image-3.jpg
diff --git a/Chat_app_css_illustration/images/favicon-32x32.png b/Chat_app_css_illustration/images/favicon-32x32.png
diff --git a/Chat_app_css_illustration/index.html b/Chat_app_css_illustration/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+  <title>Frontend Mentor | Chat App Css Illustration</title>
+
+</head>
+
+<body>
+
+  <div class="top-bg"></div>
+
+  <main class="container">
+    <section class="booking">
+      <section class="mockup">
+        <div class="screen">
+
+          <div class="app-header">
+
+            <div class="notch"></div>
+
+            <div class="user">
+
+              <i class='bx bx-chevron-left'></i>
+
+              <div class="user-info">
+
+                <div class="user-img">
+                  <img src="./images/avatar.jpg" alt="Avatar">
+                </div>
+
+                <div class="user-name">
+                  <h2>Samuel Green</h2>
+                  <p>Available to Walk</p>
+                </div>
+
+              </div>
+
+              <i class='bx bx-dots-vertical-rounded'></i>
+
+            </div>
+          </div>
+
+          <div class="main-screen">
+
+            <div class="user-left">
+              <div class="left-chat">
+                <p>That sounds great. I'd be happy with that.</p>
+              </div>
+              <div class="left-chat">
+                <p>Could you send over some pictures of your dog, please?</p>
+              </div>
+            </div>
+
+            <div class="user-right">
+              <div class="right-img">
+                <img src="./images/dog-image-1.jpg" alt="Dog 1">
+                <img src="./images/dog-image-2.jpg" alt="Dog 2">
+                <img src="./images/dog-image-3.jpg" alt="Dog 3">
+              </div>
+              <div class="right-chat">
+                <p>Here are a few pictures. She's a happy girl!</p>
+              </div>
+              <div class="right-chat">
+                <p>Can you make it?</p>
+              </div>
+            </div>
+
+            <div class="user-left">
+              <div class="left-chat">
+                <p>She looks so happy! The time we discussed works. How long shall I take her out for?</p>
+              </div>
+              <div class="left-radio">
+                <div class="option-chat">
+                  <input type="radio" id="30-min" name="walk-time"><label for="30-min">30 minute walk</label>
+                  <span>$29</span>
+                </div>
+                <div class="option-chat">
+                  <input type="radio" id="60-min" name="walk-time"><label for="60-min">1hour walk</label>
+                  <span>$49</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="input-section">
+              <input type="text" placeholder="Type a message...">
+              <button class="send-btn"><i class='bx bx-chevron-right'></i></>
+            </div>
+
+          </div>
+
+        </div>
+      </section>
+
+      <section class="data">
+        <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>
+    </section>
+
+  </main>
+
+  <div class="bottom-bg"></div>
+
+  <!-- <div class="attribution">
+    <p>
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by
+      <a href="https://github.com/gauravgorane">Gaurav Gorane</a>.
+    </p>
+  </div> -->
+
+</body>
+
+</html>