Skip to content

Commit 67c9b23

Browse files
RanitManikRanitManik
committedMay 25, 2024·
added challenges
1 parent 1c1298d commit 67c9b23

File tree

7 files changed

+916
-6
lines changed

7 files changed

+916
-6
lines changed
 

‎FrontendMentor32—project-tracking-intro-component/index.html

+75-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,81 @@
1818
rel="stylesheet"
1919
/>
2020
</head>
21-
<body class="font-body">
22-
Product Features Pricing Login New Monograph Dashboard Powerful insights
23-
into your team Project planning and time tracking for agile teams Schedule a
24-
demo to see a live preview
21+
<body class="m-auto grid min-h-[100svh] max-w-[1920px] items-start font-body">
22+
<header
23+
class="relative z-50 flex items-center justify-between gap-4 px-8 py-8 md:px-[10vw] md:py-14"
24+
>
25+
<img src="./images/logo.svg" alt="" />
26+
<div id="mobile-menu" class="hidden md:block">
27+
<ul
28+
class="absolute left-8 right-8 top-[15vh] z-50 flex flex-col gap-4 bg-white text-center font-heading text-xl uppercase shadow-lg shadow-very-dark-blue/40 md:static md:flex-row md:gap-14 md:bg-transparent md:text-[1rem] lg:shadow-none"
29+
>
30+
<li class="mt-4 md:p-0"><a href="#">Product</a></li>
31+
<li class="mt-4 md:p-0"><a href="#">Features</a></li>
32+
<li class="my-4 md:p-0"><a href="#">Pricing</a></li>
33+
<li
34+
class="border-t p-6 text-grayish-blue md:ml-14 md:border-none md:p-0"
35+
>
36+
<a href="#">Login</a>
37+
</li>
38+
</ul>
39+
</div>
40+
<img
41+
id="hamburger-icon"
42+
class="md:hidden"
43+
src="./images/icon-hamburger.svg"
44+
alt=""
45+
/>
46+
<img
47+
id="close-icon"
48+
class="hidden"
49+
src="./images/icon-close.svg"
50+
alt=""
51+
/>
52+
</header>
53+
<main class="z-20 grid gap-14 overflow-x-hidden md:grid-cols-2 md:gap-4">
54+
<div class="px-8 md:pl-[10vw]">
55+
<div class="mb-4 flex items-center gap-4 font-heading">
56+
<span
57+
class="rounded-full bg-very-dark-blue px-3 py-0.5 font-bold uppercase text-white"
58+
>New</span
59+
>
60+
<p class="uppercase tracking-[3px] text-grayish-blue">
61+
Monograph Dashboard
62+
</p>
63+
</div>
64+
<h1
65+
class="mb-4 font-heading text-4xl font-bold uppercase md:mb-8 md:text-6xl"
66+
>
67+
Powerful insights <br />
68+
into your team
69+
</h1>
70+
<p class="mb-8 text-dark-grayish-blue md:mb-14">
71+
Project planning and time tracking<br />for agile teams
72+
</p>
73+
<div class="flex items-center gap-4 text-sm md:gap-6 md:text-[1rem]">
74+
<button
75+
class="text-nowrap rounded-md bg-light-red px-4 py-2 font-heading font-bold uppercase text-white hover:bg-light-red/70 md:px-8 md:py-3"
76+
>
77+
Schedule a demo
78+
</button>
79+
<p
80+
class="text-nowrap font-heading uppercase tracking-[3px] text-grayish-blue"
81+
>
82+
to see a live preview
83+
</p>
84+
</div>
85+
</div>
86+
<img
87+
class="-order-1 md:order-2 md:ml-[15%]"
88+
src="./images/illustration-devices.svg"
89+
alt=""
90+
/>
91+
</main>
92+
<div
93+
class="absolute right-0 top-0 h-[60%] w-1/2 rounded-bl-[3rem] bg-light-grayish-blue"
94+
></div>
95+
2596
<script src="./src/script.js"></script>
2697
</body>
2798
</html>

‎FrontendMentor32—project-tracking-intro-component/src/input.css

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
@tailwind base;
22
@tailwind components;
3-
@tailwind utilities;
3+
@tailwind utilities;
4+
5+
li {
6+
@apply font-bold;
7+
}
8+
9+
a {
10+
@apply hover:underline;
11+
}

‎FrontendMentor32—project-tracking-intro-component/src/output.css

+777-1
Large diffs are not rendered by default.

‎FrontendMentor32—project-tracking-intro-component/src/script.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const hamburgerIcon = document.getElementById("hamburger-icon");
3+
const closeIcon = document.getElementById("close-icon");
4+
const mobileMenu = document.getElementById("mobile-menu");
5+
6+
hamburgerIcon.addEventListener("click", () => {
7+
mobileMenu.classList.toggle("hidden");
8+
hamburgerIcon.classList.toggle("hidden");
9+
closeIcon.classList.toggle("hidden");
10+
});
11+
12+
closeIcon.addEventListener("click", () => {
13+
mobileMenu.classList.toggle("hidden");
14+
hamburgerIcon.classList.toggle("hidden");
15+
closeIcon.classList.toggle("hidden");
16+
});
17+
});

‎FrontendMentor32—project-tracking-intro-component/tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
"dark-grayish-blue": "hsl(230, 11%, 40%)",
99
"grayish-blue": "hsl(231, 7%, 65%)",
1010
"light-grayish-blue": "hsl(207, 33%, 95%)",
11+
"light-red": "hsl(0, 100%, 68%)"
1112
},
1213
fontFamily: {
1314
heading: ['"Barlow Condensed"', "sans-serif"],

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ files for easy navigation and exploration. Feel free to browse through and check
4141
| 29 | [intro component with signup form](FrontendMentor29—intro-component-with-signup-form) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor29—intro-component-with-signup-form/index.html) |
4242
| 30 | [tip calculator app](FrontendMentor30—tip-calculator-app) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor30—tip-calculator-app/index.html) |
4343
| 31 | [newsletter sign up with success message](FrontendMentor31—newsletter-sign-up-with-success-message) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor31—newsletter-sign-up-with-success-message/index.html) |
44+
| 32 | [project tracking intro component](FrontendMentor32—project-tracking-intro-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor32—project-tracking-intro-component/index.html) |
4445

4546
## How to Use
4647

‎index.html

+36
Original file line numberDiff line numberDiff line change
@@ -1191,6 +1191,42 @@ <h2>Newsletter Sign up Page</h2>
11911191
</div>
11921192
</div>
11931193
</div>
1194+
</a><a href="FrontendMentor32—project-tracking-intro-component/index.html">
1195+
<div class="card" role="article">
1196+
<img src="FrontendMentor32—project-tracking-intro-component/design/desktop-design.jpg"
1197+
alt="">
1198+
<div class="card-tag">
1199+
<p class="card-tag-name">
1200+
HTML
1201+
</p>
1202+
</div>
1203+
<div class="card-tag">
1204+
<p class="card-tag-name">
1205+
Tailwind
1206+
</p>
1207+
</div>
1208+
<div class="card-tag">
1209+
<p class="card-tag-name">
1210+
JavaScript
1211+
</p>
1212+
</div>
1213+
<div class="card-text">
1214+
<p class="publication-date">
1215+
Published on
1216+
<time>25 May 2024</time>
1217+
</p>
1218+
<h2>Project Tracking Intro</h2>
1219+
<p class="card-description">
1220+
Your challenge is to build out this project tracking intro component page and get it
1221+
looking as close to the design as possible.
1222+
</p>
1223+
<div class="card-author">
1224+
<img src="https://avatars.githubusercontent.com/u/138437760?v=4"
1225+
alt="Profile picture of Ranit Manik, the author of the article">
1226+
<p class="card-author-name">Ranit Manik</p>
1227+
</div>
1228+
</div>
1229+
</div>
11941230
</a>
11951231
</main>
11961232
</body>

0 commit comments

Comments
 (0)
Please sign in to comment.