Skip to content

Commit d313041

Browse files
RanitManikRanitManik
committed
added challenges
1 parent f76e413 commit d313041

22 files changed

+1177
-12
lines changed

‎FrontendMentor24—faq-accordion/Screen Shot.png

85.7 KB
Loading

‎FrontendMentor24—faq-accordion/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
<title>Frontend Mentor | FAQ accordion</title>
2020
</head>
2121
<body
22-
class="grid min-h-screen place-items-center content-center bg-grayish-purple font-body"
22+
class="grid min-h-screen place-items-center content-center bg-light-pink font-body"
2323
>
2424
<div
2525
class="fixed bottom-2/3 left-0 right-0 top-0 bg-[url('../images/background-pattern-mobile.svg')] bg-cover bg-no-repeat md:bg-[url('../images/background-pattern-desktop.svg')]"
2626
></div>
27-
<main class="z-10 m-4 max-w-2xl rounded-xl bg-white p-10">
27+
<main class="z-10 m-4 max-w-2xl rounded-xl bg-white p-10 shadow-2xl shadow-dark-purple/20">
2828
<div class="mb-6 flex items-center gap-4 lg:mb-8">
2929
<img src="images/icon-star.svg" alt="" />
3030
<h1 class="text-4xl font-bold text-dark-purple md:text-5xl">FAQs</h1>

‎FrontendMentor24—faq-accordion/src/output.css

+54-9
Original file line numberDiff line numberDiff line change
@@ -639,18 +639,18 @@ video {
639639
border-radius: 0.75rem;
640640
}
641641

642-
.bg-grayish-purple {
643-
--tw-bg-opacity: 1;
644-
background-color: hsl(292 16% 49% / var(--tw-bg-opacity));
642+
.bg-grayish-purple\/80 {
643+
background-color: hsl(292 16% 49% / 0.8);
645644
}
646645

647646
.bg-white {
648647
--tw-bg-opacity: 1;
649648
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
650649
}
651650

652-
.bg-\[url\(\'\.\.\/assets\/images\/background-pattern-mobile\.svg\'\)\] {
653-
background-image: url('../assets/images/background-pattern-mobile.svg');
651+
.bg-light-pink {
652+
--tw-bg-opacity: 1;
653+
background-color: hsl(275 100% 97% / var(--tw-bg-opacity));
654654
}
655655

656656
.bg-\[url\(\'\.\.\/images\/background-pattern-mobile\.svg\'\)\] {
@@ -696,16 +696,61 @@ video {
696696
color: hsl(292 16% 49% / var(--tw-text-opacity));
697697
}
698698

699+
.shadow-lg {
700+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
701+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
702+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
703+
}
704+
705+
.shadow {
706+
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
707+
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
708+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
709+
}
710+
711+
.shadow-md {
712+
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
713+
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
714+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
715+
}
716+
717+
.shadow-2xl {
718+
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
719+
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
720+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
721+
}
722+
723+
.shadow-dark-purple {
724+
--tw-shadow-color: hsl(292, 42%, 14%);
725+
--tw-shadow: var(--tw-shadow-colored);
726+
}
727+
728+
.shadow-dark-purple\/50 {
729+
--tw-shadow-color: hsl(292 42% 14% / 0.5);
730+
--tw-shadow: var(--tw-shadow-colored);
731+
}
732+
733+
.shadow-dark-purple\/20 {
734+
--tw-shadow-color: hsl(292 42% 14% / 0.2);
735+
--tw-shadow: var(--tw-shadow-colored);
736+
}
737+
738+
.shadow-dark-purple\/10 {
739+
--tw-shadow-color: hsl(292 42% 14% / 0.1);
740+
--tw-shadow: var(--tw-shadow-colored);
741+
}
742+
743+
.shadow-dark-purple\/15 {
744+
--tw-shadow-color: hsl(292 42% 14% / 0.15);
745+
--tw-shadow: var(--tw-shadow-colored);
746+
}
747+
699748
.hover\:text-dark-pink:hover {
700749
--tw-text-opacity: 1;
701750
color: hsl(281 83% 54% / var(--tw-text-opacity));
702751
}
703752

704753
@media (min-width: 768px) {
705-
.md\:bg-\[url\(\'\.\.\/assets\/images\/background-pattern-desktop\.svg\'\)\] {
706-
background-image: url('../assets/images/background-pattern-desktop.svg');
707-
}
708-
709754
.md\:bg-\[url\(\'\.\.\/images\/background-pattern-desktop\.svg\'\)\] {
710755
background-image: url('../images/background-pattern-desktop.svg');
711756
}

‎FrontendMentor25—interactive-rating-component/README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Frontend Mentor - Interactive rating component solution
2+
3+
This is a solution to
4+
the [Interactive rating component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI).
5+
Frontend Mentor challenges help you improve your coding skills by building realistic projects.
6+
7+
## Table of contents
8+
9+
- [Overview](#overview)
10+
- [The challenge](#the-challenge)
11+
- [Screenshot](#screenshot)
12+
- [Links](#links)
13+
- [My process](#my-process)
14+
- [Built with](#built-with)
15+
- [Author](#author)
16+
- [Acknowledgments](#acknowledgments)
17+
18+
## Overview
19+
20+
### The challenge
21+
22+
Your challenge is to build out this FAQ accordion from the designs provided in the starter code.
23+
24+
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice,
25+
feel free to give it a go.
26+
27+
Your users should be able to:
28+
29+
- View the optimal layout for the page depending on their device's screen size
30+
- See hover states for all interactive elements on the page
31+
32+
### Screenshot
33+
34+
![Screen Shot.png](Screen%20Shot.png)
35+
36+
### Links
37+
38+
- Solution
39+
URL: [click here to see the solution](https://www.frontendmentor.io/solutions/faq-accordion-solution-49a9G8k5ql)
40+
- Live Site
41+
URL: [click here to see the Live Site](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor24%E2%80%94faq-accordion/index.html)
42+
43+
## My process
44+
45+
### Built with
46+
47+
- Semantic HTML5 markup
48+
- Tailwind CSS
49+
- JavaScript
50+
51+
## Author
52+
53+
- Website - [Ranit Manik](https://ranitmanik.github.io/Portfolio-1.0)
54+
- Frontend Mentor - [@RanitManik](https://www.frontendmentor.io/profile/RanitManik)
55+
- LinkedIn - [@ranit-manik](https://www.linkedin.com/in/ranit-manik/)
56+
57+
## Acknowledgments
58+
59+
I would like to express my gratitude to the creators of the Frontend Mentor platform for providing an engaging and
60+
practical challenge in the form of the Blog Preview Card. The hands-on experience gained through tackling this project
61+
has significantly contributed to my growth as a web developer.
62+
63+
I want to acknowledge the supportive community at Frontend Mentor. The platform's collaborative environment and
64+
constructive feedback from peers have been invaluable in refining my skills and pushing me to strive for excellence.
65+
66+
This project has been a rewarding learning experience, and I look forward to applying these insights in future
67+
endeavors. Thank you to everyone who has played a part in my journey of continuous improvement.
68+
69+
Best regards,<br>
70+
Ranit Manik

‎FrontendMentor25—interactive-rating-component/design/active-states.jpg

15.5 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/desktop-design.jpg

14.5 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/desktop-preview.jpg

29.9 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/desktop-thank-you-state.jpg

16.3 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/mobile-design.jpg

11.7 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/mobile-thank-you-state.jpg

12.2 KB
Loading

‎FrontendMentor25—interactive-rating-component/design/style-guide.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
> 💡 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.
11+
12+
## Colors
13+
14+
### Primary
15+
16+
- Orange: hsl(25, 97%, 53%)
17+
18+
### Neutral
19+
20+
- White: hsl(0, 0%, 100%)
21+
- Light Grey: hsl(217, 12%, 63%)
22+
- Medium Grey: hsl(216, 12%, 54%)
23+
- Dark Blue: hsl(213, 19%, 18%)
24+
- Very Dark Blue: hsl(216, 12%, 8%)
25+
26+
## Typography
27+
28+
### Body Copy
29+
30+
- Font size (paragraph): 15px
31+
32+
### Font
33+
34+
- Family: [Overpass](https://fonts.google.com/specimen/Overpass)
35+
- Weights: 400, 700
36+
37+
> 💎 [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.

‎FrontendMentor25—interactive-rating-component/images/favicon-32x32.png

1.04 KB
Loading

‎FrontendMentor25—interactive-rating-component/images/icon-star.svg

+1
Loading

‎FrontendMentor25—interactive-rating-component/images/illustration-thank-you.svg

+1
Loading

‎FrontendMentor25—interactive-rating-component/index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link
6+
rel="icon"
7+
type="image/png"
8+
sizes="32x32"
9+
href="images/favicon-32x32.png"
10+
/>
11+
<title>Frontend Mentor | Interactive rating component</title>
12+
<link rel="stylesheet" href="./src/output.css" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"
17+
rel="stylesheet"
18+
/>
19+
</head>
20+
<body class="bg-very-dark-blue grid min-h-screen place-items-center">
21+
<main id="main"
22+
class="bg-main-bg grid min-h-96 max-w-sm content-between rounded-3xl p-6 font-sans text-body md:p-8"
23+
>
24+
<img
25+
class="bg-dark-blue rounded-full p-4"
26+
src="./images/icon-star.svg"
27+
alt=""
28+
/>
29+
<div>
30+
<h1 class="mb-2 text-3xl font-bold text-white">How did we do?</h1>
31+
<p class="text-light-gray">
32+
Please let us know how we did with your support request. All feedback
33+
is appreciated to help us improve our offering!
34+
</p>
35+
</div>
36+
<div id="btnDiv" class="flex justify-between">
37+
<button
38+
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
39+
>
40+
1
41+
</button>
42+
<button
43+
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
44+
>
45+
2
46+
</button>
47+
<button
48+
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
49+
>
50+
3
51+
</button>
52+
<button
53+
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
54+
>
55+
4
56+
</button>
57+
<button
58+
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
59+
>
60+
5
61+
</button>
62+
</div>
63+
<button
64+
class="rounded-full bg-primary py-3 mt-2 font-semibold uppercase tracking-wider text-white hover:bg-white hover:text-primary" type="submit" id="btnSubmit"
65+
>
66+
Submit
67+
</button>
68+
</main>
69+
<script src="./src/script.js"></script>
70+
</body>
71+
</html>

‎FrontendMentor25—interactive-rating-component/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"scripts": {
3+
"start": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
4+
},
5+
"devDependencies": {
6+
"prettier": "^3.2.5",
7+
"prettier-plugin-tailwindcss": "^0.5.14",
8+
"tailwindcss": "^3.4.3"
9+
},
10+
"prettier": {
11+
"plugins": [
12+
"prettier-plugin-tailwindcss"
13+
]
14+
}
15+
}

‎FrontendMentor25—interactive-rating-component/src/input.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.active {
6+
background-color: hsl(25 97% 53%);
7+
color: white;
8+
}

0 commit comments

Comments
 (0)