- Frontend Mentor challenge
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Samuel Green
+ Available to walk
+
+
+
+
+
+
+
+
+
+
+ That sounds great. I'd be happy to discuss more.
+
+
+
+
+ Could you send over some pictures of your dog,
+ please?
+
+
+
+
+ 
+
+ 
+
+ 
+
+
+
+
+
+
+
+
+ Here are some few pictures. She's a happy girl.
+
+
+
+ Can you make it.
+
+
+
+
+
+ She looks so happy! The time we discussed works. How long
+ shall I take her out for?
+
+
+
+
+
+
+
+ 30 minute walk
+
+
+ $29
+
+
+
+
+
+ 1 hour walk
+
+
+ $49
+
+
+
+
+ Type a message...
+
+
+
+
+
- for
- Optimum BH
+
-
- Internship.
+ Simple booking
+
+ 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.
+
+
- Source code
+
diff --git a/challenges/chat_app_css_illustration/style.css b/challenges/chat_app_css_illustration/style.css
index b5c61c95..63e305a9 100644
--- a/challenges/chat_app_css_illustration/style.css
+++ b/challenges/chat_app_css_illustration/style.css
@@ -1,3 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
diff --git a/challenges/chat_app_css_illustration/tailwind.config.js b/challenges/chat_app_css_illustration/tailwind.config.js
index 726456da..2af3535f 100644
--- a/challenges/chat_app_css_illustration/tailwind.config.js
+++ b/challenges/chat_app_css_illustration/tailwind.config.js
@@ -6,6 +6,29 @@ module.exports = {
'optimum-blue': '#009efc',
'optimum-darkblue': '#0389e1',
},
+ colors: {
+ 'optimum-blue': '#009efc',
+ 'optimum-darkblue': '#0389e1',
+ // Text
+ 'pale-violet': 'hsl(276, 100%, 81%)',
+ 'moderate-violet': 'hsl(276, 55%, 52%)',
+ 'desaturated-dark-violet': 'hsl(271, 15%, 43%)',
+ 'grayish-blue': 'hsl(206, 6%, 79%)',
+ 'very-dark-desaturated-violet': 'hsl(271, 36%, 24%)',
+ 'dark-grayish-violet': 'hsl(270, 7%, 64%)',
+ // Gradient
+ 'light-magenta': 'hsl(293, 100%, 63%)',
+ 'light-violet': 'hsl(264, 100%, 61%)',
+ // Secondary
+ white: 'hsl(0, 0%, 100%)',
+ 'light-grayish-violet': 'hsl(270, 20%, 96%)',
+ 'very-dark-desaturated-violet': 'hsl(271, 36%, 24%)',
+ 'very-light-magenta': 'hsl(289, 100%, 72%)',
+ 'left-text-bg': '#ede5f9',
+ },
+ fontFamily: {
+ rubik: ['Rubik', 'sans-serif'],
+ },
},
},
plugins: [],
+
+ Frontend Mentor challenge + for + Optimum BH + Internship +
++ Source code +