Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time šŸ™‚.

Join

front-end

resources

back-end

ui-ux

os-and-tools

I want to display Purpose & Benefits of using our product on the landing page.

I have 2 purpose points and 3 Benefits points each with 2 sub points what is best to display them?

open mobile alphanumeric keyboard with numeric showing first

Most US street addresses begin with a number. Is there any way to set an input field to show the numeric part of the alphanumeric keyboard first? The only thing I've been able to find is inputmode=numeric, which doesn't allow alpha at all on my mobile device.

figma prototype & component, why doesn't the interaction return to its original state?

Hi all, I used a component. I want to ask this when I run it, then click on the interaction and click "next" to the next page, then when I return, why doesn't the interaction return to its original state? I mean before clicking the text is white, after clicking it turns purple, but when I return to the previous page why is the text still purple? You can edit my figma, Please help me thank you. Figma link...

Parallax background image in sticky section headers

I have a fully functional CSS only layout for a Kanban component. It works fine. What I am struggling with are the swimlane headers on a gradient background. Attached are two images, one with the swimlane headers with a background gradient (fixed) set and one with the background removed to show what it is hiding (see the second image). What I am trying to do is set a gradient background to each header so that when I scroll, it needs to be transparent. I am struggling to implement parallax background for the headers with only CSS. I could do it with JS but really do not want to....
No description

help me choose one design in terms of both functionality and aesthetic.

this is a library section for an online reading app comprising of the user annotations, bookmarks and current reads. Here are all the versions that I've designed for the annotations page however I can't decide which one is more suitable in term of both functionality and aesthetic, the first & second one are well defined however I think the spacing in the first version is a bit too tight while the third one looks clean & simple. Constructive feedback would be appreciated. ( btw the rectangle just...
No description

CSS background image issues

Hi! I'm trying to make a responsive website, but one of the pages that Im working on is giving me quite the hassle to figure out. I'm trying to get the background photo(The man with the kid) to cover the page and get the form below it to be on top of it, but nothing's working out. I hope I can get your expertise on this matter. Thanks for the help in advance!...
No description

how to use a response from an api request

i got this response from an api request and i jusr want to find out how i can use use this information? Is it like an array where i can access the elements because that does not seem to be working. Also what is the procedure to use this in html or can i only use javascript to use it? Not sure if what i said makes sense lol
No description

make this look less bad

this is a country leaderboard for a geoguesser game. Not sure how I feel about the medal emojis
No description

unclear and grainy background image

i downloaded this netflix background image from the web but its quite grainy and not as clear. How do i get it clearer or to at least look decent? Does the image have to be a certain format?
No description

media queries

i have a question about media queries. For this code ```css @media (min-width: 768px) and (max-width: 1200px) { .logo { height: 90px;...

gradient navbar?

i want to know how this netflix navbar (if it even is a navbar lol idk) is implemented with this kind of blurly/gradient
No description

is this button too much

https://svgzip.com/ would love some general design feedback. I feel like I maybe went a bit overboard with the button CSS animation, but lmk (the background animation is only visiblein dark mode, oop) it looks way better in dark mode so open to suggestions for making the lightmode pretty...

What's a modern simple logical layout I can use for the main logo?

I'm working on a website for my dads business and I just want to keep it really clean and modern. There is almost no functionality to the website its just displaying information (interactive map, probably will add some conact form, etc) I think I'm happy with my landing page, the still image will be replaced with a drone video collage that I will film when its good weather but I'm mainly stuck on what to do with the logo/title of the landing page. It feels out of place up there when I scroll. An...

UX Mobile Page scrolling...

On mobile i have this weird shiftin where container goes up and down when scrolling. I dont understand why it does this, its not because of the gsap animation because i tested it. I also made the font bigger and it does that but why. Or if its not the font, what does that. https://batman4ever87.github.io/jussi/...

UI design tools

Iā€™m looking at getting into UI/UX design, has anyone got any free tools/resources, that they use?

I am not happy with the visual appeal of this UI design.

Can you suggest any changes that I can make. So it look more cool
No description

I dont now what to put here

I don't know what to put to a farewell button after the customer is done shopping, its the (Fatality!) button, any suggestions please šŸ™
No description

I am using framer motion, but the animation on exist for front-card is not working

```jsx //--------------------------------------------------- const FrontCard = ({ phrase, open }) => { return ( <motion.div...

how to make this layout.

šŸ˜© how can i create these four spaces while leaving space for center logo which i will get in using absolute.
No description