All solutions

Hello Everyone!! 👋 It's been a long time since I submitted a solution to this site. This is my solution to the results summary component. Most of the layout I've designed with CSS Grid and the rest CSS Flex along with other CSS custom properties. I've tried my best to build out this component and get it looking as close to the design as much as possible.

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the News homepage. Most of the layout I've designed with CSS Grid and the rest CSS Flex along with other CSS custom properties. Currently I am learning JavaScript, so somehow I managed to create the mobile menu for this challenge. But I couldn't figure out how to change the background color of the whole body while mobile menu is open. I've tried my best to build out this landing page and get it looking as close to the design as much as possible.

HELP NEEDED for changing the background color of the body while mobile menu is open

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the chat app css illustration challenge. Most of the layout I've designed with CSS Flex and the rest CSS Grid along with other CSS custom properties. Designing the mobile device was quite challenging along with the background images. But I've tried my best to to build out this landing page and get it looking as close to the design as much as possible. If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the huddle landing page with curved sections. Most of the layout I've designed with CSS Flex and the rest CSS Grid along with other CSS custom properties. I've tried my best to build out this landing page and get it looking as close to the design as much as possible.

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the fylo landing page with two column layout. Most of the layout I've designed with CSS Flex and the rest CSS Grid along with other CSS custom properties. I've tried my best to build out this landing page and get it looking as close to the design as much as possible.

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the huddle landing page with alternating feature blocks challenge. I've used CSS display flex and grid along with other CSS custom properties to build out this landing page. This time I took a different approach to make the webpage responsive. My overall CSS properties unit measurements are rem and my CSS media queries unit measurements are em. Most of the time I've used px unit to CSS properties . This is my first time using rem, em instead of px unit. I don't know if I used this (rem, em) unit correctly or not. But I've tried my best to build out this page as close to design as possible using those rem, em unit measurement.

If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

Hello everyone!! This is my solution to the clipboard landing page challenge. I've used CSS display flex and grid along with other CSS custom properties to build out this landing page. I hope I build out this landing page as close to the design as possible. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone!! 👋 This is my solution to the Fylo data storage component challenge. This time I've used CSS display flex property along with other CSS custom properties to build out this data storage component. This component has some interesting CSS challenges in the design which I'm not really good at. But I've tried my best to build out this data storage component and get it looking as close to the design as mush as possible. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone!!👋 This is my solution to the testimonials grid section challenge. I've used CSS display Flex property to center those cards and used CSS display Grid property to design the overall layout of the testimonials. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone !! 👋 This is my solution to the Huddle landing page with single introductory section challenge. I've used CSS display Grid property to design the overall layout of the landing page along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone!! 👋 This my solution to the Single Price Grid Component challenge. I've used CSS display Grid property to the page along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone !! 👋 This is my solution to the Four card feature section challenge. I've used CSS display Grid property to design the whole four card feature section along with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section.

Feedback is welcome ✨

Hello Everyone!!👋 Here's my solution to the profile card component challenge. To solve this challenge I've used CSS display Flex and Grid property also with other CSS custom properties. I hope I build out this project to the design provided. If there are any mistakes or I missed something let me know in the comment section. Feedback is welcome ✨

EDIT: I forgot to add box-shadow. It's added now.

Hello Everyone!! 👋 This is my solution to the 3 Column Preview Card Component. I've used CSS display Flex property to horizontally and vertically align the whole 3 column card center and CSS display Grid property to design the preview card. I hope my solution looks as close to the design. If I made any mistakes or if I missed something let me know in the comment section. Feedback is welcome!! ✨

Hello Everyone!! 👋 This is my solution to the Stats Preview Card Component Challenge. I've used CSS display Flex property to horizontally and vertically align the card center, and used CSS display Grid property to design the card component. I'm concerned about the overlay color on the image. I don't know if I chose the color right or wrong. Here's the CSS rule for the overlay selector:

.violet-overlay {
  background-color: hsla(277, 89%, 48%, 0.445);
}

Feedback is welcome ☺️

Hello Everyone 👋 Here's my solution for Order Summary Component Challenge. I've used CSS display flex property to solve this challenge. I'm concerned about the box-shadow property on card and btn 1(Proceed to Payment)

.card {
 box-shadow: 0 25px 20px 1px var(--card-box-shadow-clr);
}

.btn1 {
   box-shadow: 0 15px 20px 1px var(--btn-box-shadow-clr);
}

Did I do this right?

Feedback welcome.☺️

Hello Everyone!! 👋 Here's my solution for Product preview card component challenge. I've used CSS display flex property to solve the challenge. If there are any mistakes or any room for improvement please let me know in the comment section. Thanky You!!! 😃

Hello Everyone! Here's my solution to the Social proof section challenge. I hope there's no mistake in my code. If you find any mistakes please feel free to correct my mistakes. Thank you!!! 😊

Hello everyone! This is my second solution to the Frontend Mentor Challenge. I hope there is no mistake in my coding to this solution, but if you find any please feel free to correct my mistakes.

1. What did you find difficult while building the project? Ans: Adding box-shadow to the card and positioning the hover able eye icon top of the Equilibrium image

2. Which areas of your code are you unsure of? Ans: CSS box-shadow property.

3. Do you have any questions about best practices? Ans: Best practices for CSS Position property and box-shadow property.

I recently finished learning basics of HTML and CSS, so I wanted to test my knowledge via this challenge. It's my first solution in this website.