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

How can I make my video background stay paused on all pages?

(Codepen for context: https://codepen.io/BravoLima2k4/pen/zYmrzox) I have a custom video background for my site, which you can pause if you don't like the moving background. There is also background music which is paused via the same method. However, I want it so that if you pause the background video on one page, it stays paused on all other pages, and vice-versa for when you unpause, it unpauses on all pages. Also as you many notice when you scroll, after a certain distance a blurred background will slide down behind the primary nav, but when you scroll back up it just disappears, and I can't figure out how to make it reverse the transition....

How to recreate this background effect?

I'm stuck trying to recreate this, but I've not progressed with anything. It responds to mousemove and the lines move away from the mouse....

Is this a bad approach?

``` *, :after, :before { background-color: inherit; border-color: inherit; color: inherit;...

[TS] Differentiate class instance from pojo

I'm looking for some type Differentiator which will satisfy the following type checks; ```ts // types type Differentiator = ......

Can someone explain me this?

<html> <head> <title>QUESTION</title> </head> <body>...

simple CSS animation of sliding into view and out of view, and how to approach it

so i want to make a simple animation of a box with content in it (similair to a spam popup "singles in your area" type of feel) moving in from bottom of the screen (what the user sees without scrolling), take up about about 1/6 of the screen and then after a click somewhere (button?) , animate out again. i think i can solve the javascript on my own. but im unsure on how to CSS animate it and how to make the box responsive on mobile or desktop.
im guessing there are different ways to approach it, so id appriciate if you could name some of em just to get me started, or give me your general approach on how to solve it....

Scrollbar-x and scrollbar-y intersection color issues.

so i changed scrollbar color but this white pixel where x and y intersect is in different color how to change this? not i used overflow:hidden property

Z-index Issue

Hi everyone! For the life of me I can't figure out why I can't get my boxes to z-index ontop of the black horizontal line. The issue starts on line 22 in the css on the code pen. Could anyone give to a hint as to what I'm missing? I've been stuck on this since yesterday. https://codepen.io/ezekielswanson/pen/rNqOwWO ...

HTML Accessibility

Can you guys suggest some good resources for keeping up with a11y in HTML.

grid template area

I want build a grid with grid template area this my html: https://pastebin.com/F7NwHVpU my css:...

What is the best unit to use in Mediaqueries?

I would like to know what do you suggest to mediaqueries? I'm using this, its ok??? $breakpoint-xxs: 19.999rem; // 319,98px $breakpoint-xs: 35.999rem; // 575,98px...

Cannot hit a Url and fetch the data.

First of all here is the code: import React, { useEffect, useState } from 'react' import {useParams} from "react-router-dom" import { fetchApi } from '../../api/Api' import "./player.css"...

Why is the footer squeezing.

Note! Well the question is not very practical, as such situations wont happen. But i find it interesting as other site dont do it. Everything works great as long as it's not that extreme. Problem: When I keep squeezing the site preview. At very extreme the footer and other elements like header, nav start squeezing. It's apparent as they've background color and it starts going back. I've tried doing this on other website and even if their content overflows such thing dont happen. Images for reference....

dealing with dynamic components

given this code, how should i close that alert? that onHandleError() never gets called :/ ```html //auth.component.html...

Flickering responsive nav menu on screen resize

So I'm working on a responsive nav menu, and it flickers on the resizing of the screen. See added video. It also does it when there is no JS. Codepen of a very simplified version of the nav (the same still happens): https://codepen.io/-evecodes/pen/GRYpKmW I tried following one of Kevin's nav tutorials for it. His navigation does work without the flickering, but when I try to make it, it fails. The tutorial was this one: ...

Need help with json in typescript

I have a json file ```json { "1a": { "mainHint": "hello",...

recreate overlapping multiple images

Anyone knows how to recreate this? i thought of making each image position: absolute but the problem is the images are dynamic and if it fills the container its going to wrap. So how to proceed? 🤔

Margin top from somewhere

Im following one of Kevins tutorials: https://www.youtube.com/watch?v=8QKOaTYvYUA&t=1446s I've tried to set it up exactly as Kevin, but I still have a gap between the navbar and top. https://i.imgur.com/41lBfPS.png...

multiple animations with transition on one of them

Hey everyone, I've got this code ```css .contactLinksAnimation { outline-color: theme(colors.primaryColor); animation-name: contactLinksBlink; animation-duration: 0.2s;...