P

Benja.min

@BenjaDotMin
310Points

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

  • Desktop design screenshot for the Space tourism multi-page website coding challenge

    Learning React and Framer

    • HTML
    • CSS
    • JS
    0
    P
    Submitted

    Hello! I struggled with this one! I found it hard to build the content so it doesn't "jump around" when clicked, due to content and images being differing heights and widths. I hope I found a decent workaround. Built with React and framer motion, and data driven by JSON.

    Thanks for looking!

  • Desktop design screenshot for the Time tracking dashboard coding challenge

    Learning JSON and Fetch API (vanilla js)

    • HTML
    • CSS
    • JS
    2
    P
    Submitted

    Hello all! I decided to up the stakes and try my hand at a Junior level challenge.

    Here I learned how to:

    • fetch data from a json file
    • use the data to populate the DOM content (vanilla js, no frameworks)
    • swap the content on click, driven by the available data

    As always, any time spent is very much appreciated!

  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    Learning flex

    • HTML
    • CSS
    10
    P
    Submitted

    Thank you for any time spent!

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    Practice with flex

    • HTML
    • CSS
    • JS
    0
    P
    Submitted

    Thank for any time!

  • Desktop design screenshot for the Single price grid component coding challenge

    Practice with flex.

    • HTML
    • CSS
    0
    P
    Submitted
  • Desktop design screenshot for the Intro component with sign-up form coding challenge

    Learning Form Validation.

    • HTML
    • CSS
    • JS
    0
    P
    Submitted

    Thank you for any time spent reviewing my code!

Latest Comments

    • HTML
    • CSS
    • JS

    Mobile First Approach (FLEXBOX + MEDIA QUERY+ Responsive Dimensions)

    1
    P
    Benja.min310 | Posted 8 days agocommented on Paras Sharma's "E-commerce product page" solution

    Hello Paras!

    The issue is when you hover over the thumbnails, they get an additional border, which changes the height of the parent div by an additional 2px, giving the visual stagger.

    To fix this I would:

    • on ".img-row img" add: border: 2px solid transparent; (so they always have a border)
    • on ".img-row img:hover" change your border style, to: border-color: hsl(26, 100%, 55%);

    Hope that helps!

    1
    • HTML
    • CSS
    • JS

    Sunnyside agency | Responsive landing page using css grid

    8
    P
    Benja.min310 | Posted 9 days agocommented on Martijn's "Sunnyside agency landing page" solution

    Hiya Martijn!

    You can add a z-index:1 to .primary-btn. Then add z-index: -1 to your after class.

    With a z-index and relative parent, the z-index:1 will act as a new scope, for the z-index:-1 (rather than the -1 sending it behind your page, it will send it behind the primary-btn) I hope this makes sense :)

    0
    • HTML
    • CSS

    Just plain HTML and CSS

    2
    P
    Benja.min310 | Posted 11 days agocommented on purplejragon's "NFT preview card component" solution

    Hello!

    I would go for a display flex approach, rather than floats.

    • Remove the padding-top from .logo
    • Add to .logo, .eth and .time: display: flex; align-items: center;

    This should centre them up nicely.

    1
    • HTML
    • CSS

    NFT - Html + CSS

    2
    P
    Benja.min310 | Posted 11 days agocommented on Chris's "NFT preview card component" solution

    Heya Chris,

    Add: .imageContainer .mainImage{display:block;} to your css, and this should fix your issue :)

    Images are display inline by default, so it always causes some weirdness with vertical spacing, as the box model doesn't tend to support top/bottom with inline elements.

    1
    • HTML
    • CSS

    NFT-preview using Grid

    5
    P
    Benja.min310 | Posted 12 days agocommented on Walid Mostafa's "NFT preview card component" solution

    Hello Walid!

    • Remove margin-top:50px from .container
    • Add to body: display: grid; place-items: center; min-height: 100vh;
    1