RanitManik · May 20, 2024
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/active-states.jpg
53.9 KB b/‎FrontendMentor32—project-tracking-intro-component/design/active-states.jpg
53.9 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/desktop-design.jpg
53.3 KB b/‎FrontendMentor32—project-tracking-intro-component/design/desktop-design.jpg
53.3 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/desktop-preview.jpg
33.4 KB b/‎FrontendMentor32—project-tracking-intro-component/design/desktop-preview.jpg
33.4 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/mobile-design.jpg
30.7 KB b/‎FrontendMentor32—project-tracking-intro-component/design/mobile-design.jpg
30.7 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/mobile-navigation.jpg
26.1 KB b/‎FrontendMentor32—project-tracking-intro-component/design/mobile-navigation.jpg
26.1 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/design/style-guide.md
+41 b/‎FrontendMentor32—project-tracking-intro-component/design/style-guide.md
+41
diff --git a/‎FrontendMentor32—project-tracking-intro-component/images/favicon-32x32.png
1.04 KB b/‎FrontendMentor32—project-tracking-intro-component/images/favicon-32x32.png
1.04 KB
diff --git a/‎FrontendMentor32—project-tracking-intro-component/images/icon-close.svg
+1 b/‎FrontendMentor32—project-tracking-intro-component/images/icon-close.svg
+1
diff --git a/‎FrontendMentor32—project-tracking-intro-component/images/icon-hamburger.svg
+1 b/‎FrontendMentor32—project-tracking-intro-component/images/icon-hamburger.svg
+1
diff --git a/‎FrontendMentor32—project-tracking-intro-component/images/illustration-devices.svg
+1 b/‎FrontendMentor32—project-tracking-intro-component/images/illustration-devices.svg
+1
diff --git a/‎FrontendMentor32—project-tracking-intro-component/images/logo.svg
+1 b/‎FrontendMentor32—project-tracking-intro-component/images/logo.svg
+1
diff --git a/‎FrontendMentor32—project-tracking-intro-component/index.html
+27 b/‎FrontendMentor32—project-tracking-intro-component/index.html
+27
diff --git a/‎FrontendMentor32—project-tracking-intro-component/package.json
+15 b/‎FrontendMentor32—project-tracking-intro-component/package.json
+15
diff --git a/‎FrontendMentor32—project-tracking-intro-component/src/input.css
+3 b/‎FrontendMentor32—project-tracking-intro-component/src/input.css
+3
@@ -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.
@@ -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>
@@ -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"
+    ]
+  }
+}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`