Article Preview Component

hey @0xabdulkhalid ! just wanted to say thankyou so much and ask one more thing why i had to write !important in svg class style it was being overridden and not toggling the classes and how were you able to read my code and point out mistakes so quicklyyy

I'm glad to hear that my feedback was helpful to you @hirashabeer.

Actually the first you need to do is to add the image directory inside your Github repository in order to display the images.

Currently no images are being displayed because you still not added the image directory, So make sure to do it first!

You can easily upload the entire image directory including all images by simply dragging and dropping into the upload field in your repository.

now @0xabdulkhalid ?

You asked a question right @hirashabeer ?

" why i had to write !important in svg class style it was being overridden and not toggling the classes ", It simply because of the usage of id selector for styling the menu.

You have used body #popup.active, Actually you don't need to use this much of selectors to do a thing. You just overwritten things here so that you need to override the display: none for .svg rule using !important flag.

Don't worry you simply fix this by changing the selectors and a little bit of js.

You want to add this refactored css,

.popup {
  height: 100px;
  width: 200px;
  clip-path: polygon(0 24%, 100% 23%, 100% 73%, 61% 76%, 50% 100%, 38% 75%, 0 73%);
  background-color: var(--dark-gblue);
  display: none;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: 42%;
  right: 18%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.popup-active {
  display: flex;
}

Now remove the id from div and add class of "popup"

Then for Javascript you need to toggle popup-active instead of svg.

This is how we need to maintain readability of our code.

Hope this suggestion helpful to you!

@0xabdulkhalid images are still not appearing i have added the images folder in git hub ... and due to making the changes you last told of popup classes the toggling is not working as expectation this is becoming worst...i am gonna die

@hirashabeer don't be worried, If you need to fix this so badly i need to contribute on your repository.

Can i contribute? I need your will. Once you say to proceed i will clone you repository and make changes then commit and create a new pull request to yours so that you can easily merge my commits within your repository.

If it done then you don't need to be worried about this issues.

@0xabdulkhalid yes please proceed

It's sounds good @hirashabeer, Now assign this issue on your repository to me.

I can only start working on it after assigning me.

Hey @hirashabeer, it's time to merge this Pull Request.

thank u so much @0xabdulkhalid i loved the new concepts you taught me BTW ,I just came across your amazing work on Frontend Mentor and I have to say, I'm truly impressed! Your attention to detail and the way you've tackled the challenges is really inspiring.

I'm really eager to learn and improve my coding skills, and seeing your work has motivated me even more. I was wondering if you could plzzzzzz share some insights into your process and the resources you've used to hone your coding skills. Your expertise shines through your projects, and I believe there's a lot I could learn from your experiences.

I completely understand if you prefer to keep some of your techniques and resources close to the chest, but I'm genuinely eager to learn and any guidance or pointers you could provide would be immensely valuable to me.

Looking forward to hearing from you and hopefully learning from your expertise!

I'm glad to share my knowledge with you @hirashabeer !

Please don't say "close to the chest", I never been like that. If i act in that way then i could never be in my current position.

Really what makes me to grow is just being open, that's it. We want to seek knowledge by sharing and growing with them.

I suggest you to be open minded, that's what gonna make you a best living being. You can start by setting your Github profile as Public one. Trust me this decision gonna make huge difference after a point of time. Because people can look at your growth live by just viewing your Github history, It greatly helps you to unlock new opportunities.

You can ask me any stuff related to web development, If i doesn't have knowledge regarding your doubt then we'll both can learn and grow.

Stay connected!

i think you @0xabdulkhalid did't got me or i was unable to convey my message to you ,i requested for the resources you used for learning coding and then writing and practicing code ,actually this is my passion or something like that ,that i love to experience an see new things related to my work . bcz i don't have success to any person or informtion in this field ...you didn't gave me that btw i would try to follow your suggestion ,

Best wishes!