All solutions

I couldn't add responsiveness by myself, I had to use bootstrap to do it for me. I can't still figure out how can I send someone to the border country after clicking it, It's because I did not use any backend. It's just plain js html css api. I'm learnt about URLSearchParams and new methods like .join split .map etc. The most thing that was difficult was the search filter. I was using an array taken from the .card class. Thats why when i searched for a country it at first appeared by later i had to refresh the page to make it work properly, as the array was constantly being changed, But now i've fixed that by just changing the display. and one question. sometimes margin auto just dosen't work I dont know why? What is the proper and best way to add responsiveness? I don't understand how this position property works!

It took a hard times to figure how to position the 3 cards down there, I came up with the conclusion of making the cards container a flexbox and it a height, then used the align-self on the second card to bring it into center and the third to the end, which brought the desired results, Although I'm not sure on how to add the loading animation and the cyan color lines are pretty hard to add,

If any one is familiar on how to make a loading animation and integrate it please feel free to comment, when i click the button to generate the link, I have to wait a few seconds, so it would be better if there was an animation for that. While you are at it please do recommend how can I make this page more interactive through Javascript

If you find any piece of code unreliable please tell me I'm really unsure of the copy button, when I bring it in the parent container the ui problem gets fixed and it does not look ugly anymore but then the clicking the copy button does nothing, I'm really unsure of the foreach loop, I mostly did the Js part through Trial and error and I really feel bad about it

The carousel was the most hardest part, I misunderstood the overflow property. I added overflow hidden to the body tag which conflicted with the carousel container, furthermore the background image is pretty hard to position. if one is familiar won how to position an image please feel free to comment.

Lastly after a lot of practice I finally understand that making a layout before adding any text is the best practice, use background colors like #ccc and dark gray for layout creation

I used some bootsrap. otherwise it is pure css! feel free to point out mistakes and also comment on what properties should have been used on an error you see!

it was somewhat difficult to add the javascript logic. feel free to comment on this! what things should i make it to do better. i didnt find the need to add the color changes in theme and its pretty simple and straight forward to add.

I am still unsure of responsiveness. how do I make my content adapt to its surroundings, I mean how can I make my content automatically smaller according to my screen size. I can make the text manually smaller but it creates confusion, is there a reliable way? If u look into my code there are a lot of media queries syntaxes so that creates a lot of confusion.

What could have been done to make the code better? All your feedback is welcome

What could've been a better way to make this project responsive? I am unsure of responsiveness and that is what I found the most hard to build. it took me 3 days jut to figure out some things

Where do think things has been done the wrong way? What could have been done to make the code shorter and better? All your comments are welcome!