added challenges

RanitManik · May 20, 2024 · 1c1298d · 1c1298d
1 parent 170c292
commit 1c1298d
Show file tree

Hide file tree

Showing 18 changed files with 679 additions and 660 deletions.
diff --git a/FrontendMentor32—project-tracking-intro-component/design/active-states.jpg b/FrontendMentor32—project-tracking-intro-component/design/active-states.jpg
diff --git a/FrontendMentor32—project-tracking-intro-component/design/desktop-design.jpg b/FrontendMentor32—project-tracking-intro-component/design/desktop-design.jpg
diff --git a/FrontendMentor32—project-tracking-intro-component/design/desktop-preview.jpg b/FrontendMentor32—project-tracking-intro-component/design/desktop-preview.jpg
diff --git a/FrontendMentor32—project-tracking-intro-component/design/mobile-design.jpg b/FrontendMentor32—project-tracking-intro-component/design/mobile-design.jpg
diff --git a/FrontendMentor32—project-tracking-intro-component/design/mobile-navigation.jpg b/FrontendMentor32—project-tracking-intro-component/design/mobile-navigation.jpg
diff --git a/FrontendMentor32—project-tracking-intro-component/design/style-guide.md b/FrontendMentor32—project-tracking-intro-component/design/style-guide.md
@@ -0,0 +1,41 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
+
+## Colors
+
+### Primary
+
+- Red: hsl(0, 100%, 68%)
+
+### Neutral
+
+- Very Dark Blue: hsl(230, 29%, 20%)
+- Dark Grayish Blue: hsl(230, 11%, 40%)
+- Grayish Blue: hsl(231, 7%, 65%)
+- Light Grayish Blue: hsl(207, 33%, 95%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 18px
+
+### Headings, Call-to-actions, Navigation
+
+- Family: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed)
+- Weights: 400, 700
+
+### Body
+
+- Family: [Barlow](https://fonts.google.com/specimen/Barlow)
+- Weights: 400
+
+> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
diff --git a/FrontendMentor32—project-tracking-intro-component/images/favicon-32x32.png b/FrontendMentor32—project-tracking-intro-component/images/favicon-32x32.png
diff --git a/FrontendMentor32—project-tracking-intro-component/images/icon-close.svg b/FrontendMentor32—project-tracking-intro-component/images/icon-close.svg
diff --git a/FrontendMentor32—project-tracking-intro-component/images/icon-hamburger.svg b/FrontendMentor32—project-tracking-intro-component/images/icon-hamburger.svg
diff --git a/FrontendMentor32—project-tracking-intro-component/images/illustration-devices.svg b/FrontendMentor32—project-tracking-intro-component/images/illustration-devices.svg
diff --git a/FrontendMentor32—project-tracking-intro-component/images/logo.svg b/FrontendMentor32—project-tracking-intro-component/images/logo.svg
diff --git a/FrontendMentor32—project-tracking-intro-component/index.html b/FrontendMentor32—project-tracking-intro-component/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./images/favicon-32x32.png"
+    />
+    <title>Frontend Mentor | Project tracking intro component</title>
+    <link rel="stylesheet" href="./src/output.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="font-body">
+    Product Features Pricing Login New Monograph Dashboard Powerful insights
+    into your team Project planning and time tracking for agile teams Schedule a
+    demo to see a live preview
+    <script src="./src/script.js"></script>
+  </body>
+</html>
diff --git a/FrontendMentor32—project-tracking-intro-component/package.json b/FrontendMentor32—project-tracking-intro-component/package.json
@@ -0,0 +1,15 @@
+{
+  "scripts": {
+    "start": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
+  },
+  "devDependencies": {
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  }
+}
diff --git a/FrontendMentor32—project-tracking-intro-component/src/input.css b/FrontendMentor32—project-tracking-intro-component/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;