I just recently completed the basics of HTML, CSS, and Javascript. Now, I am trying to clone the home page of this website: https://www.startech.com.bd/. But I have run into a small problem. The webpage has an image slider, where the…
I'm trying to resize an image within a circle, but I can only change the size of the image and the circle together. I'm assuming this is because of border-radius, but I'm not sure else to do it. I'm trying…
I have a countdown timer on my website, and I want it to overlay a generic explosion GIF when the timer runs out. I have a function call when it runs out, now I just need to know what will…
I have a JavaScript slideshow that displays images of various dimensions in a browser window. It uses object-fit: scale-down to resize the image to fit the container. I'd like to add a border to the image, but when I apply…
I have these two markup up patterns: <h3> <span>Title</span> <span></span> </h3> and <h3> <span>Title</span> <span><a>link</a><a>link</a></span> </h3> I want to target the former but not the latter with CSS and use ::after to insert a visual flourish. I prefer not to…
I'm trying to create a circular graph using only CSS and HTML, where each segment has a border with rounded ends at both the start and end. However, I'm struggling with positioning the ::before and ::after pseudo-elements to correctly mark…
.CategoryBlock { margin-top: 0.5rem; gap: 1rem; display: flex; overflow-x: scroll; scrollbar-width: thin; } .CategoryBlock>*:first-child { margin-left: auto; } .CategoryBlock>*:last-child { margin-right: auto; } .CategoryBlock button { font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 2rem; border: 0; color: #2e652d; background-color:…
I'm trying to get the nav to position to the left as relative. I've been encountering this issue quite a lot and can't get my head around it. **HTML. ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…
So I implemented a navbar on the right side of the wrapper which I centered. I made the wrapper height automatically adjust to the amount of content in it (Since I didn't want to give the wrapper a pixel height…
I tried to get the container style query working, but found some oddities. Consider the following code: html <div class="parent"> <div class="child"> ... </div> </div> CSS .parent { --test-var: red; background-color: grey; } @container style(background-color: grey) /* @container style(--test-var: red)…