All solutions

Fylo dark theme landing page is the fronendmentor challenge website which I coded after my sem - 4 exam break to hone my html and CSS skill.

There are challenges in this projects -

• Make the website responsive for desktop, tablet and mobile
• Make it looks good

What I learned -

• I have learned many thing about css layout and Pseudo Class.
• This project helped me to hone my html and css skills after a long break.

Built with

Desktop first grid and flexbox position margin, padding & gap media query common style etc

What I learned

Not learned much, But this project helped me to improve my skills

Built with

• Desktop first
• grid and flexbox
• position
• margin, padding & gap
• media query
• common style
• etc

What I learned

Not learned much, But this project

The challenges -

Make the website responsive for desktop, tablet and mobile Make the upper sec of testimonial curved Writing quality code

Built with -

Desktop first grid and flexbox position margin, padding & gap media query common style etc

What I learned Not learned much, But this project helped me to improve my skills

I've just completed my very first landing page website using HTML and CSS! 🌐✨

Check out the stunning design and responsive layout I created for the Clipboard landing page challenge on Frontend Mentor. 🎨💻 It was quite a journey, but I successfully made the website look good and ensured it works seamlessly on desktop, tablet, and mobile devices. 📱💪

Take a look at the screenshots below to get a glimpse of my work:

🖥️📱 Website Preview: https://lnkd.in/eAeJThSg

I utilized various techniques like grid and flexbox, positioning, margin, padding, and gap to achieve the desired layout. 💡💪 This project was a great opportunity for me to enhance my skills and dive deeper into frontend development.

If you're curious to explore my code, feel free to check it out the GitHub Repository of this - Live Website

I'm really proud of my progress, and I can't wait to embark on more exciting web development projects in the future! 🚀✨

What I learned

Learned more about z index from w3school

What I learned Not learned much but it helped to improve my skills

Feel free to give me any suggestion for this code, It will help me a lot

Built with

Semantic HTML5 markup Position, media query CSS custom properties Flexbox :hover, :root Desktop First Padding, margin, border radius

What I learned

Not learned musch but it helped to improve my skills

I have learned lot about position and background-image but I could not make the bg pattern show. Even I watched videos of this challenge but that did not work also i think its because of my laptop or my browser

No difficulty building👨‍💻 this but not sure about the padding and margin size🙄

Please give me your feedback🙆‍♂️about this. It will help me a lot

Manik Maity

1. Found difficult to make the image hover effect
2. Unsure about the measurement of padding and margin size Please give me any suggestion for my code. It will be very helpful to me

My LinkedIn

1. I did not understand where to use the mobile background svg provided because in mobile preview design there is no svg.
2. I am unsure about the measurement of padding and margin size.

Please give me your feedback about this. It will help me a lot to improve

1. I find it difficult to verticaly center the side cards in grid but after some research I somehow did it.
2. I am unsure about the padding, and margin size.
3. feel free to me any suggestion about my code. It wil be very helpful

1. I find it difficult to make the width of the card in percentage for mobile view. when i set the width of .main-container to persecentage like (width : 90%) in @media the card is not center anymone. dont know why?. So I just set the width 330px. But If you reduse the screen size to less then 350px then the card dont look good.

2. I cant properly vertical align the cart icon with the "add to cart" text.

1. I find it difficult to center the card in the body. Though I did it somehow.