Jeluxe
Jeluxe
PostsComments
KPCKevin Powell - Community
Created by Faker on 11/7/2024 in #front-end
How to make varying labels width and input-fields take same horizontal space
Btw what is this code do? body { min-height: 100vh; min-height: 100svh; }
74 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
i dont really understand grid myself so i wanted to know why you used it as you did, didnt mean to sound criticizing
34 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}
css 
.grid-lines .grid__text {
  grid-column: text;
  grid-row: text;
}

.grid-lines  .grid__image {
  grid-column: image;
  grid-row: image;
  z-index: -1;
}

.grid-lines  .grid__button {
  grid-column: button;
  grid-row: button;
  justify-self: start;
}
34 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
so i wanna know if there is one line for it
34 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
for ea
34 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
you used grid-row and grid-column, right?
34 replies
KPCKevin Powell - Community
Created by snxxwyy on 9/17/2024 in #front-end
named grid lines not working as expected
I got question for your example, where you set grid "area"s with grid row and grid column, is there no one prop that do both? or use grid-area?
34 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
well i tried to make it as fast as i can https://codepen.io/jeluxe/pen/zYVpyee?editors=1100
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
Interesting solution
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
If it is img then this issue disappears, the problem appears when you try to do it with div or something like that, and i didn't had image so i thought of using for now a colored div, and then that issue appeared
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
well i still trying to understand what made this issue to appear, but anyway i want to thank you for you help.
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
also the solution from the forum was only partially solution, because when you move to mobile view, well let's say it is getting even worse. (i updated my code, sorry i wasn't explaining properly...) and your solution is nice but in case you only want the "img" to be only part of height, then you can't really use it as background
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
well it seems like if i just used real image, it would solve everything...
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
No description
20 replies
KPCKevin Powell - Community
Created by Jeluxe on 8/16/2024 in #front-end
weird border-radius behavior
Here is my card css file: 
.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}
.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}
20 replies
KPCKevin Powell - Community
Created by anes039 on 8/15/2024 in #front-end
Items issue
np good luck
41 replies
KPCKevin Powell - Community
Created by anes039 on 8/15/2024 in #front-end
Items issue
Yes xd
41 replies
KPCKevin Powell - Community
Created by anes039 on 8/15/2024 in #front-end
Items issue
So now is it working?
41 replies
KPCKevin Powell - Community
Created by anes039 on 8/15/2024 in #front-end
Items issue
And i also think that if it pushes the item as another item and does not increase the quantity, then it means that it is getting to the else which indicates that itemInCart does not exists, i assuming...
41 replies
KPCKevin Powell - Community
Created by anes039 on 8/15/2024 in #front-end
Items issue
And here i meant where is the state updating inside addToCart function
41 replies