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

Anyone know how the gradient mixing works why color mixing is not uniform?

linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)
linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)
there is a visible line patch of cyan...

how to achieve this design.

Hey, would anyone be able to give me some insight on how to achieve the purple backdrop in this frontend mentor project? I assume it would be done with a pseudo element or position absolute but due to where it ends perhaps it somehow living on the hero grid would be more appropriate? i'm not entirely sure. Thank you in advance.

How do I recreate this using CSS?

the green and the gray background specifically

NAV Position Absolute of parent

I have a NAV bar with buttons on it. Each button is inside a container class. The container has position relative and as well as the button I have a box DIV which has 0 opacity until clicked. Once click it has opacity and position absolute. The issue I have is my position absolute flows over and off the right of my screen giving me a overflow-x scrollbar or white space. How can I force is to flow left of the parent not outwards to the right?...

Line Number Alignment in Text Wrapping

As you can see in the video, when line wrapping is enabled, line numbers do not represent the corresponding lines. On the other hand, in the screenshot, the way lines wrap around and create space between the line numbers positions the line numbers with the corresponding lines. I asked ChatGPT for help but he wasn't that helpful :(...

animation to make List Items, "LI", float to the top like a bubble

Where could I look up lessons to do this or does anyone know how could this be done easy or easier

tabindex on the main tag

Hey, i sometimes see people applying tabindex="-1" to the main tag on their sites, what does this achieve? Thanks in advance.

Still a lot of trial and error after 6 months, what am I missing?

Hi guys,Although i've been doing css for a while now i still struggle to get things right in the first place like.. there's still a lot of back and forth after all this time. which makes me question if i know what am i doing? Is there a method or structure i should be following that i don't know of or does it really takes a long time to get there? Thanks in advance.

responsive login form with flex

I am trying to create a login form for my university project. But unfortunately when I try it in dev-tools it looks fine, but when I try to open it on my phone, it does not look like it should. Any ideas? You can look at the site here: https://32chnb9g-4200.euw.devtunnels.ms/#/login Why is my form overflowing when it does not need to?...

Div opacity affecting the content in it

i lowered opacity of an div and now the image in the div also got opacity, i have used z-index: too but im still stuck on the same problem https://codepen.io/SirYido/pen/gOJPgxZ

Height Adjustment for StPageFlip

Hello everyone, I'm working on a Vue 3 project where I'm using the StPageFlip https://nodlik.github.io/StPageFlip/ library to create a flipbook interface. The content of each page will vary in height, and I'm struggling to dynamically adjust the height of the PageFlip container to fit the content. The goal is to make sure the height of the flipbook adjusts to fit its content without any overflow or fixed height. I've tried a few approaches, but the container height doesn't seem to adjust correctly. The height either remains fixed or doesn't fully fit the content....

Stumped on typewriter effect

I have some JavaScript where I need to create a typewriter effect that types and then backspaces. I've gotten something to work on this codepen: https://codepen.io/vince1444/pen/xxNZKQE?editors=1111 The problem is, I need to do this for an array of words, and this is really stumping me. It seems like promises are key here, but I can't get my promises to work correctly. ...

How to update the content in google search results

Hey, how can I add/edit pages, and descriptions here?

Trying to solve mysterious problem with Display: Grid

okay so this is my current page and distrubition with my sections, since I want to be rem perfect with the gaps, I made that logical distribution, but take a close attention to section 3 where I had to put all these 3 elements together because the gaps between them is smaller than the gap between each section:
No description

Parallax container somewhere in the page

I have recreated the stunning parallax effect from @Kevin s youtube video "true parallax with css-only is now possible". And, what should I say. it looks great. But, it is just working on top of the page properly. I was wondering if I can create a container within this parallax effect, to bring it anywhere I want in my page. But I wasn't able to find a solution. Is it possible, and if it is, how?...

Struggling with creating layouts and using correct size units

I'm trying to recreate the hero section of this design. I've tried different size units from pixels,vh to % and i cant get the edges of the images to touch like in the design. I''ve made a div with 2 containers, 1 has the text and one has the image. I applied display:flex and they allign correctly but its not as pixelperfect as the design. What should i do to recreate the design? i've tried css grid and gotten the same results. I can look up the solution but for now i would like to figure it out myself with some pointers. Any advice would be appreciated. ...

navbar sub-menu doesn't function properly

I'm working on a website and in hizmetler.php page I have three section (2nd photo). When I click a title in that menu, the div related to that title shows and other divs hide. I want to add the same function to the sub-menu in navbar (1st photo). If I'm in hizmetler.php page, the navbar sub-menu works. But if I am another page when i click a title in that menu it takes me to hizmetler.php but to the default not the related div. And when I try to go there from index.php it doesn't go to even hizmetler.php. I am not that good at javascript/jquery so any help would be really appreciated. This is navbar code: ```html <header>...

Bitwise operations

Please help me solve the task, I can't make it shorter than 38 characters. Maybe someone understands code golf. Given a natural number x, it is less than 2 to the power of 31, return 1 if at least 1 odd bit of the number = 1, otherwise 0 if the numbering starts from the right with 0 and the rightmost bit 0 has a black position. Condition (code no longer than 23 characters)