How you summarizes the design using HTML and CSS
I was looking around for different design to improve my skill and came across to this design but I am confused how what will be HTML structure and ofcourse CSS.
I have done a little work, Below is my code
```
<div class="pizza--container">
<div class="container--img">...

Why does prefers-color-scheme need duplication of styles?
I was watching KP's video on using dark / light themes:
https://www.youtube.com/watch?v=zFFuV_vXNhY&t=36s
And it works nicely, but it bothers me that the styles are duplicated in :root definitions as well as the theme switcher ":has" definition.
Why is the duplication needed if I have selected the theme using color-scheme: [dark|light] declaration? It seems to override behaviour for system styles, but not anything I've defined.
G...
SVG and position absolute.
Hi, I would like to acomplish the design shown in image but with ability to use width 100% so it is responsive. The arrow is svg. And if I could I would like to in the end animate it that the line shortens on hover to the right, but I didnt yet get to it becose it didnt work in first place.
```<svg xmlns="http://www.w3.org/2000/svg" height="50">
<!-- Define an arrowhead marker -->
<defs>...

best way to implement for responsibility
hey! :) I need someone to tell me, whats the best and correct way to recreate this image

Cut-out effect with decal
I have a similar thread here, and I tried following this article, but this time I couldn't do this decal. Any tips?

Tailwind has with aria
Hey!
Is there a better way to use tailwind
has
with aria than doing has-[[aria-invalid="true"]]:...
?
I have aria-invalid="true"
added to tailwind as aria-invalid
but can't really figure out how to combine it?
Also sorry if it's the wrong tag....Product dot hover
I'm thinking of using absolute position to place the dot on the product image but I'm worried that this wont work if the image change sizes when it's responsive and messed up the actual correct position.
is using
position
a good idea for this scenario?...
Img being dragged down? Unsure
If you take a look at my landing page it looks perfect, One thing I don't understand is on the bottom of the page there's a black line showing up with the design continuing that isn't meant to be there and I have no idea how to get rid of it I've tried viewing my code and fixing it myself with no luck.
help with footer the scrolls
done research and need assistance on how to make the footer scroll with the browser vertically , does anyone know?

how to check if user lost internet connection
Sometimes losing time on the web I noticed some websites have specific ways to deal with a user who has lost his connections. I wonder how. Is there an event that fires when this happens?
The maxlength attribute for input: text doesn't work for mobile devices?
I'm generating <input> tags through js and each input should have a maxlength attribute. It works fine on pc but don't on mobile. I mean, on PC I can only type 1 digit on each input box, but the same doesn't apply on mobile. Why?
Codepen: https://codepen.io/leoncelestino/pen/wvObBax...
How to achieve this cool hover/animation with CSS
Hello! Upon opening discord this morning I saw this cool hover effect on some cards on the Nitro page and decided as a morning "warm up" I would try and recreate as a coding challenge. Low and behold I got stuck so I thought I would see how anyone else might approach this.
Here's the effect: https://www.loom.com/share/20bb18705b22479a9f3c6f2863b3d55d?sid=52808e73-95d7-4033-865f-d87fc0bf7e0a
Here's my codepen so far: https://codepen.io/Jon-D-the-vuer/pen/RwOboox?editors=1100
...
Next JS routing got me confused
Hey, I have this simple link in my component but im kinda confused with the routing.
```ts
<Link key={product.id}
data-type={product.type}...

help with aligning images
so I have this pop-up in which there is the background that represents the shelve,
then there are individual "books" which take you to different pages
I want them all to be clicked differently
I want them to be responsive
I want them to stay inside the popup, not get bigger...

'Jotai' Best practices
I've been exploring Jotai to grasp its capabilities and use cases. I created a basic application for filtering a list and adding and removing items from it. Seeking opinions on whether my implementation aligns with best practices and effectively leverages Jotai's functionalities.
Store
```js...
Is is wrong or bad to add padding to represent hierarchy in tables?
I got data that is a list of items, got a name and category. Each item could have children, with name and categories there too. And I would like to show all of them. I was thinking of adding a left-padding on the children, making them indented.
Am I thinking about this wrong? Is there a better way?...
Testimonial slider responsiveness problem
how to make flex child take the full width of the available screen and other childs take the same width as first one but they should overflows. I want the output to be like the attached image. but in responsiveness it is creating problem, how to solve it? check video
https://codepen.io/hamzacodepen951/pen/LYvPPzj...

Translation of item in hover
Hi everyone I want realise this animation
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself ...
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself ...
Section not loading correctly
I'm unsure on how to describe this situation so I'll try to the best of my abilities I'll send a screenshot below. (Explanation: Basically when I reload my website and scroll down the "My Work" portion doesn't load fast and requires the user to scroll down fully to the section for it to load. What can be causing this? The rest of the page loads perfectly BUT some times it does become laggy I've never had to deal with issue before it started two days ago.