Magnific-Popup | Light and responsive lightbox script with focus | Frontend Framework library

I have the first carousel slider fiddle example and I need to make it look like second carousel slider I have, the difference between the two carousels is that the first carousel has better transition effects than the second which I have implemented in my study website.

What I need is to make the example 1 carousel:

to look like the example 2 carousel:

(full screen responsive) I have uploaded the examples to a demo website so you can play with the values of elements in inspection tool of chrome or Mozilla at f12, I also will post detailed code with comments so you can understand what code does

here is the demo website so you can see the 2 examples

I am using the free websites from hostinger.com which is 000webhost.com ( to display test sites as fiddles) ( you perhaps will see this error which is a false positive cause the website is not phishing, not even scam not even malware it is just plain html with CSS and js) I already reported to Google the false positive:

what I need is the first slider to look like the second slider (full screen) I will show you the approach I have tried so you can save time.

as I am not very experienced on this what I tried at first is to use the code used in #home id, in the example 2

applying to the example slider 1 CSS, since by logic I assume due to the lack of html code for display the slider #2 the code taking part in the resize and width of the image is this and should have worked on slider #1, but it did not work:

Sticky sidebar is not working at all in my website, I have tried all the things from below stack overflow threads.

How does the "position: sticky;" property work?

Why is my position:sticky not working?

Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

It is not working at all on my pages. and the detailed blog post pages.

Can anyone please help me with this? you can check any post on the website for reference. https://polestartechno.com/blog/how-push-notifications-increases-user-engagements

Here is the code:

I am trying to add defer and async to my script tags to increase it is performance

here is the code that I am using

I'm moving my html/css/js website to Nuxt.js to get it updated automatically from an API.

I want to keep the same website so I splitted my code in components, imported my css to :

/assets/css/*

and added this in nuxt.config.js

Am doing an Api call in flutter.

But the response is coming in format.

Is it possible to handle this type of response?

Or is it possible to convert that response in json format?

If yes? Please share your answer. Thanks in Advance.

The following is the response:

I'm creating django site, I have some template and for some reason I'm getting this in django terminal.

I can't seem to find a way to replace an image (used cats as an example) when I click one panel that isn't the one i've clicked before.

I'm trying to learn Asp.Net Core MVC using .net 5 with the pre-built, scaffolded razor identity pages. I'm getting this rendered result when I click login or register from the sticky header. How do I format the (razor) login page(s) to start below the sticky header? The sticky header is from a bootstrap theme that worked fine prior to the scaffolled pages. I did not touch the css code as I don't know what I'm doing there.

Razor page under sticky header

The Login Page looks like this...

I'm trying to add jQuery in my project although i get an error that it is not defined