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

Help with stacked tesimonial cards

https://codepen.io/ahad4387/pen/qBQxewK I'm trying to modify this stacked testimonial card animation. I trying get the front card to translate to left then fade away and then the below card should scale to 1. ```css...

How can I work on project?

I want to create some html, css, and javascript projects for my portfolio works. Since I am not a web designer, it is very hard to work on a completely new project as a web developer. The question is how can I find a unique project for my work? I need design but I do not want to copy other people's work. Thanks....

How to make a little bit more tidy and responsive section

when its in mobile view the checkbox place looks very ugly but i cant put them in div cuz it will mess up my css selectors here's my code https://codepen.io/Dennyyan/pen/vYQVqRV...

Convert css variables into sass

Hi, I'm learning sass and I was wondering how can I write this code in sass? --item-color is what gives me most trouble to write in sass. Taken from Kevin gh (https://github.com/kevin-powell/results-summary-component-main)...

How to create an overflow navbar dropdown menu?

I'm trying to replicate the navbar from the World of Warcraft website using mostly Bootstrap, here: https://worldofwarcraft.blizzard.com/en-gb/ I've gotten pretty close but struggling with the responsive feature where nav links get put into a dropdown menu when reducing the screen size up until the mobile menu shows. It's pretty clever. Here's my version: https://codepen.io/Fotek/pen/oNQaQGq...

Split slider with progress bar

Hey kevin could you please make this with css go to joinclyde.com scroll down to the bottom you will find split slider with progress bar could you make it please make a video of it

Which is the better option?

So I am not sure if there's a big performance difference between using JavaScript instead of JSON for my array filled with data (Reason I am not using JSON for my big array with data is because I don't know how to setup a usable JSON-file, I tried before but couldn't get my JavaScript-file to use it) If there is a huge difference in performance and speed, could someone show or tell me how to make a JSON-file that I can use in JavaScript? I can just create a .JSON in my program (visual studio code) but I don't know how to allow my JavaScript file to run it....

Media Queries Override rules

I need help with these styles for each of the media queries. Some headings are positioned more right than they need to be for certain media queries. I have explored every avenue/option but can't find a resolution to this.

Helping fixing menu bar spazzing out when resizing?

https://hastebin.com/share/guyotiwutu.xml As the pastebin shows, when the menu expands it does some weird movement. This website was only an example so I can stop this issue in the future. Thanks in advance...

Input elements fixed-width not visible in dev tools.

When I inspect, I'm not able understand how the elements inside the form are overflowing, can you please check what is causing the issue. https://aitrendsindia.com/contact-us/...

SVG Mask-Images

This is less of a code question, so I am not positive that this is the right place to ask but I'll try it anyway. Does anyone know a good site to search for Creative Commons SVG files that are usuable for Commercial use aswell? Something similar to what pexels.com is for pixel images and videos but for SVG files to use as mask image bases?...

Border Image for video

I want this TV like border around all the videos, how do I achieve this,

help with Canvas api for cropping an image

https://codesandbox.io/s/exciting-lederberg-t3df9x?file=/index.html Looking for help with a crop image feature for images . The issue is the image moves to top left corner to default coordinates (0,0) but when i use translate method to centre the image , as it doesn't calculate the selected crop area coordinates correctly. The image should remain centered, but when attempting to crop the area selected by the crosshair, it ends up cropping some other coordinates instead(it calculates coordinates according to canvas not the image). The problem seems to be related to handling image aspect ratio, especially when the image height is greater than the width, leading to unexpected zooming. Any guidance or assistance on resolving this issue would be appreciated. Thank you!...

I don't get Safari

I have 2 pages: https://fluffy-pasca-93524f.netlify.app/plan-builder/ https://fluffy-pasca-93524f.netlify.app/home/ They both work great on the browsers and devices I tested it on EXCEPT Safari....

text width

Why doesn't the auto margin work if I put spaces between the text?

Random Distribution of images on web page

I am trying to create a website that loads random images from a folder through a json file, place the images with random size on a randomly position on the website and load more when scrolling...i have a prototype, the raw version is working but there's issue with the random distribution and the loading while scrolling, also the images are heavily overlapping. I am making 10 images to show initially and rest on scroll but all 10 images get stack on each other and there is no scroll so can't achieve the infinite scroll thing as well. I want something similar to this website https://www.steigerconcept.ch/ I don't need the parallax effect and rounded images ...

word in label on the same line with the field

Hi everyone Can I get know how to have the word in label on the same line with he field input ? ...

Hi everyone!

with and ,and I'm a beginner (for real) in the front-end world. I'm doing an online course which at the end of each session there's a little project. In sum, I can't understand the last project we were supposed to do. I saw the solution video, the solution code and I just can't understand what's happening there. I googled, search for videos on Yt, but honestly I can't understand 😦 If someone can please help me understand what's going on with that solution, I would be absolutely grateful. ...

Build a space travel website > background-size: cover and background-position

Hi everyone, I just completed the above-mentioned Scrimba course. My questions are related to this video: https://scrimba.com/learn/spacetravel/adding-the-background-images-cof4b40e185ce1ca26fd638c0, where Kevin adds background images to the homepage. I couldn't understand how exactly background-size: cover works together with background-position . My questions:...