Border inside grid (animated if possible)
any ideas how to make this borders inside of the grid?
with little dots at the ends
and maybe draw them at first load...
Best way to get this harp instrument working
I'm working with a musician/artist who has installed a wind sensor at a site and wants to hook it up to a virtual Aeolian harp interface. The instrument itself is working so now I need to make it look good. Here's a draft layout from the client, which I think looks good but I've got concerns about how the knobs will work in the UI. I'm worried they're going to be tricky to get right with a mouse and even harder to use on touchscreen devices. Is that unfounded? Or am I better switching those to r...
Web design responsiveness
Hello everyone, just want to ask for help regarding the responsiveness of my practice project(website portfolio). The issue is that when I view it on Google like in the live server, it does look good, however, if I shrink the browser tab it doesn't look good. When I shrink it on Google inspect elements it shows like this:
I will share the codepen link here and some screenshots.
Codepen link: https://codepen.io/Atleastre14/pen/yyByWmb
...
Are you unable to use numbers on CSS font family names?
So I was last night coding a little thing to randomize the font used in a part of the title of my page, and it works perfectly. However, I ran into an issue regarding numbers in the font name. As you can see in the image, I have an array of fonts, pick one at random, and then use a template literal to change the font to the element's style. The font is called 1942 Report, and so I called it 1942 in the @font-face declaration in CSS. However, this didn't seem to work within the javascript code. It did however, work when I manually set that font into the font-family attribute within the stylesheet. Are font names not supposed to ever have numbers? Or is it the javascript that inserts it in a different way? I couldn't find anything about this online except for one person that seemingly had a similar issue with numbers, so I'm curious about it
Of course, I don't need to have numbers in my fonts and I'll just avoid using them if it causes issue, but I would like to know what is going on...
Overlaying half of a logo on top of an image
I'm trying to get half of the 'RixtMixt' logo to be on top of the first image, as seen in the design (1st image attached). My previous attempts resulted in the section overflowing, or there being some weird whitespace. The section needs to be 100vh. Here's the code (Astro & Tailwind):
`<section
id="streetwear"
class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7"
>...
Why image appears "pixelated" despite object-fit cover used
Hello guys, can someone explain why the image appears to be pixelated when kind of zooming out, the same image in the upper right hand-side, there it appears "beautiful" but in the middle doesn't appear in good quality, is the problem related to the resolution itself ?
Question about a bug in my website
Hi! I have a question about this ss from my code. I am COMPLETE beginner and I just started with coding. So far, I aspire to learn HTML, Css, and Javascript. I do know that there is a better way to do what I am doing in the picture, but I don't really know much so I'm just taking this way. Anyways, as you can see in the javascript, I tell it to assign the value keyCode to document.getElementById("keyPass").innerHTML and then I add a window alert to tell me what the value is. However, for some r...
GSAP Animation HELP
Hello guys...
I am tasked to create a layout similar to this one on this page https://www.designclub.global/and add to it the similar scroll animation. I am aware that I need to use gsap and scrollTrigger but I have no idea from where I should start.
Any help is welcome......
Help needed to code a specific part of a design
Hi everyone, I’ve been working on this design and need help with the part marked in red in the screenshot. It’s a specific shape, and I’m not sure how to create it. Any guidance would be greatly appreciated. Thanks in advance!
