KPC

Kevin Powell - Community

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

Join

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

BimmerG87

12/13/2022

How to add saturation to a background gradient?

 background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

 background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);

This gradient is inside body{}....

lko

12/12/2022

How to animate translateY with limits

I have this simple setup https://codepen.io/Lko3001/pen/oNyRPrr, and the .shifted columns are translated vertically of 128px, how can I do such that the more I scroll the more the translate value decreases until it becomes -128px? 128 and -128 are the max and lowest value the translate should have, how do I do that?

Gold240sx

12/12/2022

Switch Statement vs Console.log() discrepency.

Hi, I have a switch statement that takes in a function that when it returns true, still goes via the false case route. I'm not aware as to why or how I can fix it? I've created a codesandbox with a built in terminal and details described in the DOM here: https://codesandbox.io/s/epic-lederberg-puf1v5?file=/index.html

Muhct

12/12/2022

Creating a 2-column 2-row flexbox structure

Hi there, how can I create a 2-column 2-row flexbox structure? Here's a pic of what I mean, and also the code of what I have so far: https://codesandbox.io/s/2-column-2-row-pnk4rw?file=/styles.css

Gold240sx

12/11/2022

Regex help

I have a regex I've created here: regexr.com/74b4n. it tests that emails end in .org or uspi.com but not uspi.org I've gotten it to work with everything but the last condition. I could greatly use someones help. my regex so far: /[a-z-]+(?!@uspi.org)((@+[a-z-]+(.org))|(@uspi.com))?$/...

aevitas

12/11/2022

SCSS in React

I've build like 8 small projects in Reacts so far, in every project I just made a new folder (Navigation for example) with a index.js and index.scss, import the scss in the JS file and then style that specific component. I'm making a bigger project now and wanted to seperate my SCSS completely. Just make a folder called SCSS with a global SCSS import file and then make about 4 folders which contains SCSS files for the entire project. I ran into a problem when trying to use a background image.. Now obviously I could just use inline SCSS for this, but I want to use the image in an ::after, which doesn't seem possible with inline styling.....

Avinash

12/11/2022

[Blackjack game] Cannot read property 'append' of null in code and also webpage keeps on reloading.

hello, there are few issues with my code. i tried looking up the stack, it says the function is running before html and also i wanted to implement black jack cards to the corresponding values when the user clicks on hit. when doing so the webpage keeps on reloading. i tried moving the script file below the body in the html still same issue. Any help is appreciated. https://github.com/Avinash-Tallapaneni/Black-Jack...

Aleksandr M.

12/11/2022

Weird space below my page

Hi everyone! For some reason, I have a weird empty space below my page, and I can't figure out where is it coming from. It's definitely not some rogue margin or padding. Even the whole html component won't stretch all the way to the bottom. How can I fix it? I use React with TailwindCSS. Here is a screenshot of how it looks like. I want to toggle between dark and light mode, and this white stripe remains white no matter what I do. It goes away if I just change the color on <body>, but I don't think it's possible in React....

Eighth

12/11/2022

How to make a slider like on this site

Who can throw off or suggest how to make such a slider as the one on the link, otherwise I'm a beginner, I still don't understand well https://fancyapps.com/docs/ui/fancybox/...

iLoveCoffee

12/10/2022

Border not taking Radius

How can I make it look like the attached design? ```html <tr bgcolor="#f5f5f5"><td align="center"><table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr> <td class="cta" align="center" style="border-radius:45px; border:5px solid #000002; background:#d62828; padding:15px 75px; font-family:'Roboto',Helvetica,Arial,sans-serif; font-size:16px; line-height:24px; color:#ffffff; font-weight:700; "> <a href="https://www.google.com" target="_blank" style="color:#ffffff; text-decoration:none; display:block; ">...

Dovah

12/10/2022

Clicking on one element sets it a class, while removing classes from other elements, dynamically.

This, I'm guessing, simple problem is giving me a headache for 3rd straight project in a row. If I for example have 6 buttons of the same class, and I click on any of them, that one gets class of "active". However, if I click on different button, any other button that has that "active" class should lose it. Or simplified, one 1 button can be "active" at the time. ...

penso78

12/10/2022

how to highlight menu on submenu clicked

Hi all, i have a tag which is the menu and <li>s as submenus. How i can target via Javascript the upper element when li is clicked? ```<ul class="sub-menu " id="products"> 1st Year...

ramtam92

12/9/2022

Seeking help regarding tricky image gallery layout

Hello everyone. I'm working on a project where a designer gave me a very specific image gallery for which I don't find any suitable CSS solutions. I thought about many ways of solving it but I don't find a respectable solution. So my hope is this nice community, for which I reach out with the mentioned problem. The image gallery is a two column somehow masonry design, which always has the 2/3 proportions. It will contain images with different proportions and will sometimes also have quotes embedded (which will take up more space then the image in this column.)....

Aditya Kirad

12/9/2022

need a little bit of code review

hey folks this is my jsx ```jsx <Box className={styles.container}> <Box sx={{display: 'grid', placeItems: 'center', height: '100vh'}}> <Box sx={{border: 'solid black', borderRadius: '2rem', padding: '2rem', boxShadow: '0 1rem black', background: 'white'}}>...

penso78

12/8/2022

Side Navigation or Menu creation

Hi guys, i want to know how i can do like this side menu? if anyone have any clue, idea or code for this kind of side menu please share it, Many thanks❤️...

Vanilla

12/8/2022

i got problem about background-image

i created div and gave class of background-image then i wrote it background-image: url("./pictures/background.png"); but image is not showing up but it works on body

Aditya Kirad

12/8/2022

need to give gap between the elements in div

hey folks when the

display: flex;

display: flex;

we use the gap property to give gap between the elements in that div but what if ...

iLoveCoffee

12/8/2022

How can I fix my SASS List?

```sass $rainbow: #dc3545, #fd7e14, #ffc107, #198754, #0d6efd, #6610f2, #8F00FF @each $color in $rainbow .#{$color} background-color: #{$color}...

Gold240sx

12/8/2022

Tailwind config file embed

is there a way to embed a config file into an html document so i can include the tailwind config file within an html doc similar to how you can embed JS and css? I looked at Tailwinds docs and didn't see anything, and additionally, I looked ad MDN Docs at embedding different file types but I'm not sure if config files behave differently, and I didn't see anything specific or similar in nature. Maybe I can embed it in a JS script tag?

Aditya Kirad

12/8/2022

difference between these two media query

hey folks what's the difference between these two

@media (max-width: 600px) {
}

@media (max-width: 600px) {
}

and ...

Previous Next

Gaming

Programming

Kevin Powell - Community

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

Kevin Powell - Community

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