optimumBA · akinyiv · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
diff --git a/challenges/qr_code_component/images/favicon-32x32.png b/challenges/qr_code_component/images/favicon-32x32.png
diff --git a/challenges/qr_code_component/images/image-qr-code.png b/challenges/qr_code_component/images/image-qr-code.png
diff --git a/challenges/qr_code_component/index.html b/challenges/qr_code_component/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="../images/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../images/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../images/favicon-16x16.png"
+    />
+    <link rel="manifest" href="../site.webmanifest" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div
+      class="bg-Light-gray flex h-screen flex-col items-center justify-center py-40"
+    >
+      <div class="w-80 rounded-xl bg-white">
+        <div class="rounded-lg px-4 py-4">
+          <img src="images/image-qr-code.png" alt="" class="rounded-lg" />
+        </div>
+        <div class="px-4 text-center">
+          <h1 class="font-outfit text-Dark-blue px-4 pb-4 text-xl font-bold">
+            Improve your front-end skills by building projects
+          </h1>
+          <p class="text-Grayish-blue px-6 pb-8 text-sm">
+            Scan the QR code to visit Frontend Mentor and take your coding
+            skills to the next level
+          </p>
+        </div>
+      </div>
+      <div
+        class="mt-6 flex h-[100vh] flex-col place-content-center text-center"
+      >
+        <div>
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H"
+            target="_blank"
+            >Frontend Mentor challenge</a
+          >
+        </div>
+        <div>
+          for
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/optimumBA"
+            target="_blank"
+            >Optimum BH</a
+          >
+          Internship.
+        </div>
+
+        <div class="mt-3">
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/akinyiv/frontend_mentor_challenges/tree/qr-code-component-challenge"
+            >Source code</a
+          >
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/challenges/qr_code_component/style.css b/challenges/qr_code_component/style.css
@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/challenges/qr_code_component/tailwind.config.js b/challenges/qr_code_component/tailwind.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  content: ['./challenges/qr_code_component/index.html'],
+  theme: {
+    extend: {
+      colors: {
+        'optimum-blue': '#009efc',
+        'optimum-darkblue': '#0389e1',
+        White: 'hsl(0, 0%, 100%)',
+        'Light-gray': 'hsl(212, 45%, 89%)',
+        'Grayish-blue': 'hsl(220, 15%, 55%)',
+        'Dark-blue': 'hsl(218, 44%, 22%)',
+      },
+      fontFamily: {
+        outfit: ['Outfit', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+  variants: {},
+}