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

help

Marquee problem

Hello, I'm trying to create a CSS marquee animation but the animation is starting back from zero each time. Here is the code: ```html <div class="floating-banner"> <div>...

Dark Overlay on Hero section

Could someone help in getting this cool dark overlay done on Netflix homepage?? I initially had an image on the page but it won’t show up so I used a random image from the web… ...

Styling sibling elements on hover

Hey all! I've a navbar where I want the sibling nav-items to have a particular css when I hover over a nav-item. For example, if I've 5 nav-items and I hover on the 1st one, the next 4 nav-items should have another css. I'm not able to figure out how to do that. Please help! Here's the code: ```<nav id="navbar"> <div className="nav-item">...

Deploying React app

Hello guys. My dev sent me the source code. Everything is okay. Everything works on the local host. But when I create a production-ready build and deploy it on my website only the homepage is displaying. What could be the problem? How can I build and deploy all pages?

Angular: How to use local json with my content/assets?

Hi, maybe is very basic question but I don't know. I had a project in React and I was trying to do the same in Angular. My JSON is like this: `//Import CV File import cvES from "../assets/files/CV.pdf";...

Pseudo-class: Letter-by-letter Animation

I'm trying to replicate the style and animation of the outline text behind a subheading on this page: https://wilmer.qodeinteractive.com/. For SEO and cleanliness of HTML, I decided to only use a pseudo-class. Now the only thing I need is to animate the letters one-by-one. Can you please suggest how can I possibly do that? ```CSS #services h2:after { content: 'Services';...

Vite/Rollup plugin to import CSS into React web component

I also asked on StackOverflow. Please refer to it for more info https://stackoverflow.com/questions/76509761/vite-rollup-plugin-hodtdiw-to-get-styling-css-module-into-a-react-web-component I am trying to create a Web Component from React. Web Components need you to import styles inside the Shadow DOM raw. Vite will normally inject your CSS into the document body (I think). I'd like to write a Vite plugin to collect all CSS imports from a starting component. It might have sub components that have their own CSS that I'd need to know about as well. ...

::before, :: after requires transition to be added on parent ?

or do we have to add tranisiton to each of these pseudo elements seperately?

checkbox size on apple devices

I have an issue of checkboxes as their size is too big on iphone ansd ipad .Why is this happening? How can I fix them ?I s it a general isssue with everyone ?

React: sending useState results object to grandparent

This is currently my App.js return ```javascript
export default function App() { carList.forEach((car, i) => {...

scrollIntoView() scrolls the parent document

I have an iframe inside a document and when i execute scrollIntoView in the iframe it scrolls the parent document as well how can i prevent that from happing. #javascript #front-end...

REACT APP

I need a front-end DEV to help me finish my website. Please DM

Astro frontmatter images to client script

Hey, I'm trying to import images from frontmatter and have them inside a client-side script. I'm doing this because I want the assets' paths to be rendered during build time and then passed to the client-side script, hopefully avoiding that split second where the assets haven't been found yet if I put it on the client if that makes sense. Hopefully that logic is correct. Here is the code I have now: ```js...

Different Background Blur Behavior in Firefox and Chrome: Seeking Solution

Hello, I need some kind of help How can I achieve the same effect? In Firefox, I have the background blur applied to all list items, but in Chrome, it's not working as intended. Here is the repository for the code and the link of the page. https://github.com/Leviakc/link-bio https://gomen-links.netlify.app/ I used the backdrop-filter property but it's not working as expected ...

Nav links stuck to top of page.

I've tried every way I know how to change this. Flex direction, justify content, align items etc. I can't seem to find the cause anywhere. Thanks in advance. My GitHub repo (for a fully styled nav): https://github.com/alanrobert/2Nfibre-site-built-from-scratch or a quick Codepen I made to isolate the issue: https://codepen.io/alanrobert/pen/WNYwWzj...

How to make a Scroll snap align effect

Hi! i'm trying to make it so when you scroll on the page, like this: https://curly.qodeinteractive.com/elementor/split-slider/ I've looked at this page to make it work: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type But i seem to be doing something wrong. I make my website using wordpress so can't really show code...

My GeoLocation redirection code makes my website go in a infinite loading loop

This is the code for the geolocation function redirectBasedOnLocation() { // Make a request to the Geolocation API fetch('https://ipapi.co/json/')...

Container Size Queries and Firefox version

Hello everyone, I've been putting off learning Size Queries due to the fact that Firefox support was missing. But Firefox supports it from version 110 onwards. ...

Invert text color when elements overlap

Hey guys! I was trying to re-create the "inversion" effect with the cursor and text that I saw here, and it got me thinking a bit: https://drigmatic.com/ This site uses mix-blend-mode: difference and setting the color of the cursor to white to get this effect, so it seems it only really works with the specific colors they picked. I've seen a few other examples of this effect in action as well, but they mainly stick to black and white due to the nature of blend modes. In a lot of cases, you won't have the perfect set of complimentary colors, or be working in exclusively black and white. Is there a way to have more control over blend modes so you can control which color gets displayed when elements overlap? For example, if you wanted to keep the background and the overlapped text colors the same, but have the default text and cursor colors be red, you would end up with some really wonky colors on the cursor and the overlapped text due to the blend modes....

Nav menu disappeared on desktop

I had a fully functioning nav and mobile button menu but styled my mobile nav for so long, that I created an issue somewhere and can't seem to solve it 🥲 Somehow my desktop nav menu is in the mobile menu, only when you widen the screen whilst in the mobile menu after clicking the hamburger button. I've tried cancelling each class in the media query and hiding them all together but can't seem to crack it. This may be a start again for my last commit, but hopefully someone can help 😄 My codepen has the isolated issue in with nothing extra, however you can also view the full build on my github below. ...