bulma | Modern CSS framework based on Flexbox | Theme library

I have a small page with a blurred background image. On top of that, I have divs set up as cards that have their transparent overlay on a background image. I'm trying to set up a text effect using blending modes without taking into account the overlay.

The text effect I want to replicate is at this codepen: https://codepen.io/thebabydino/pen/JNWqLL

Specifically, I want to replicate the example on the left, where the drop shadow is inverted along with the text, and the text is the invert of the image underneath.

In my attempts to do so, I have been unable to get the blend mode effect to ignore the opaque layer and only focus on the image.

The point of the opaque layer is to help the text stand out more, but it seems to be having the opposite effect as it influences the blending, making everything darker.

The text is only orange because it is being constantly inverted due to the darker opaque layer and ignoring the image underneath completely.

This is my attempt so far:

I have been following this tutorial to build a chat application.

I have been facing WebSocket connection to 'ws://127.0.0.1:8000/ws/lobby/' failed: Error during WebSocket handshake: Unexpected response code: 500 error. I checked other solutions too but they don't seem to work.

The console displays the error at (room.html)

Is it possible to give only MM/YYYY option in bulma-calendar extension ? The default option shows dd-mm-yyyy?

I am trying to put a columns inside a level-item, but it seems to shrink to a small width. Is there a way to make the columns occupy the full width of the level-item?

Below is the code:

I am trying to align my modal to the right (like this question here: align Modal on the right side in Bootstrap 4) but using Bulma and overriding the modal class in that answer did not work.

I tried adding some random flexbox helpers (I don't really what I am doing here...) but that did not seem to make a different either. Could someone please show me how to align the modal to the right using Bulma?

Thanks!

Edit: I have created a jsfiddle here.

it's my firstime using Firebase and I think that I've followed all step to connect my project to firebase. I tried to run my project with a small js console.log(firebase) When I went to my console I received this error message Failed to resolve module specifier "firebase/app"

I want to mention that I've create a node_module folder and I did npm i firebase.

html file:

So i want to take a couple of values from an HTML input-form, and basically be able to generate a csv file to download for the user when they click a button which will consist of the data they entered into the form. However, I am confused about how i would go about this and can't find a good guide online.

I also would like to customize how the csv format will be if possible, hope somehow knows what iam trying to do! thanks.

Edit: iam not asking to do this in just html, i assume javascript is best option

MY HTML CODE

I'm trying to create a 3 Column Card Grid with Bulma in Nextjs. The data comes from JSON Endpoint.

I successfully fetched the data and it's fetching perfectly.

But, I can't find what I'm doing wrong in this case.

Is there anyway I can limit the column. In Bootstrap I did Col sm={4} to limit to 3 column. Not sure how to do that in Bulma

It's appearing like this.

I got the code for SplitEvery from this SO Question (Add new columns container every 3 column elements in React.js with Bulma.css)

This is exactly what I want. I just want 3 column (3 Cards in a row) like below

Here is the code of my index.js

I realized that the Bulma dropdown embeded in a modal card body gets covered by the modal body, so this causes an UX issue, imaging if the dropdown is higher than the card body it self, user has to scroll down or move the mouse cursor and move down the scrollbar, what would be the appropriate CSS fix for this? i.e. having the dropdown appear at the top layer (i increased the z-index for the ddl but no luck, please note: I DO need the overflow-y: scroll or auto for the modal card body section.