Currently trying to learn html and css. I am an internship student at a company and i am making a carousel/slideshow for their 3D models. I am using iframe inside a list and controling the list items by adjusting the opacity. However 3D models in the list spawns on eachother and makes a mess. 3D models also embedded by code. I just starting working on HTML and CSS maybe it has an easy solution but i cant think about it. Apreciate for some help.

result on webpage

So I was building a website layout with a mobile-first approach and then using media query for laptop width: 1024px size. The design has 11 items and follows a flex that wraps. All the items are numbered and colored.

enter image description here

I am trying to create a bracket for a sports tournament in HTML and CSS (using JS later to be able to interact with it).

I am trying to create a bracket for a sports tournament in HTML and CSS (using JS later to be able to interact with it).

I want the green and red line to go only on the border how do I do that?
I was expecting two lines circulating the card not two huge blocks circulating.
The problem is in the “card.css” in “.box::before” and “.box::after”
I can’t figure out what to do.

I’m trying to make images stick to the top when scrolled past while not affecting each others position, also I’d prefer to keep it simple with no javascript

I’ve been trying to complete this challenge project for Web Dev on Codecademy and I’m stuck on trying to center images in a grid. I’ve tried to use justify-content and justify-items in just about every selector within the grid and the grid container itself and cannot figure out what is wrong.

I’m a Django web developer and I’m beginner to html and CSS.
i have box in a html page and i use it as food list. I want it get more height when an element (new food) added to it. Thank you.