Skip to content
OverviewSolutions
11
Comments
8
P

Norbert Kulacin

@NorCoolTechNovi Sad120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    skhbabez•160
    @skhbabez
    What are you most proud of, and what would you do differently next time?

    I am proud of how I Used absolute Positioning and z-index to create the toast, while having the button still appear on mobile.

    .card {
  position: relative;
}
.share-links {
  position: absolute;
  bottom: 0;
}
.share-btn {
  z-index: 1;
}
    What challenges did you encounter, and how did you overcome them?

    One issue I faced was inverting the share button color. Since i loaded the svg as an image i had to use a trick I found on stackoverflow to change it through css,

    .share-btn-dark {
  --share-btn-color: brightness(0) invert(1); /*used with filter*/
    What specific areas of your project would you like help with?

    I encountered one issue with overflow that I could not figure out how to solve gracefully. I initially had overflow on the card itself enabled, but this led to an issue with the toast being cut off. But using overflow on the image container for the header image did not work either for some reason. So I just added additional border radius to the image and share links container. Is there a way to handle this better while still keeping the border radius of the card intact (not having the internal containers overflow)? Otherwise, any additional criticism is welcome.

    Article preview component

    1
    P
    Norbert Kulacin•120
    @NorCoolTech

    well done!

  • Gracia Naimora Samosir•180
    @cia2003
    What are you most proud of, and what would you do differently next time?

    I think I can implement grid to arrange the testimonials's placement.

    What challenges did you encounter, and how did you overcome them?

    I found a minor challenge: that's when I just use auto as a value from grid-template-columns, it left some wide spaces to the card. So, I use clamp() to minimize the column's width so that the text can fill the rest of the space.

    What specific areas of your project would you like help with?

    Any suggestions for the improvement.

    fm-testimonial-grid-section

    1
    P
    Norbert Kulacin•120
    @NorCoolTech

    try to center it vertically on desktop view

  • P
    Norbert Kulacin•120
    @NorCoolTech

    nice!

  • P
    Norbert Kulacin•120
    @NorCoolTech

    try to color the bullet points

  • P
    Joel Eguiza•350
    @joeleg96
    What are you most proud of, and what would you do differently next time?

    I am most proud of using css variables to predefine certain values such as text presets, in order to facilitate the correct use of each font type, weight, color, etc in my code solution. I am also proud of the responsiveness of my design.

    What challenges did you encounter, and how did you overcome them?

    One of the challenges that I encountered was finding a way to allow my code to change between the mobile/desktop image files that were provided, based off of the breakpoints. I was able to place both images within the same image container div, but use css to hide the mobile image when the browser size was above my mobile breakpoint, and hide the desktop image when the breakpoint was within the mobile range. This was a fun solution to problem solve through, even though the mobile image file that was provided was not the same as the one that was used in the figma design, which was disappointing because it sort of defeated the purpose of having a mobile file and a desktop file.

    What specific areas of your project would you like help with?

    I feel like I was able to implement a solution that covered all of the figma design specifications: mobile, tablet, desktop, and hover states.

    product-preview-card-component

    1
    P
    Norbert Kulacin•120
    @NorCoolTech

    well done!

  • P
    Norbert Kulacin•120
    @NorCoolTech

    Responsive Images: Consider using max-width: 100% for the image to make it more responsive.

View more comments