Skip to content
OverviewSolutions
5
Comments
5

Louie

@PaletteJack170 points

Hi all, I'm a web developer / IT jack of all trades. I love diving head first into new situations and making order out of chaos. I'm looking to improve my front end skills and learn what makes the web tick!

I’m currently learning...

Supabase, Go, Skeleton UI

Latest solutions

Latest comments

  • Louie•170
    @PaletteJack

    Awesome job! The animations look good, especially the cart!

    So you aren't able to change the color of the tags on hover since the icons are svgs. What you're looking for is the fill or stroke attribute. Problem is, you can't access this since the picture was added using an img tag.

    What you'll want to do is put the SVG markup for the image on the page. Then in your css access the path or SVG tags like so:

    svg {
    fill: white;
}

    Or if the color is nested in a path tag:

    svg path {
    fill: white;
}

    It could also be the stroke attribute. This is what I've used in the past. Don't know if this is standard practice. Either way, I hope it helps!

  • Louie•170
    @PaletteJack

    Hi Laurel, great job on the card! The styling looks spot on.

    So to answer your question on positioning, I see that you used position: absolute; on your main tag to get the card in the middle. You can use that and transform, but what i think would help you out is to have your main tag cover the page, then use flex to position your content to the middle.

    For you main tag:

    main {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    align-items: center;
    justify-content: center;
}

    You would have to move the card styling of your main tag to your .card class:

    .card {
    display: flex;
    width: 36rem;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 2.2rem;
}

    And finally since your main tag is now covering the page and we've set the position of the main tag to relative, you can use absolute positioning on the footer to set the position much easier:

    .attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    You worked with what you had to complete it and it's to spec so great job! Hope to see more from you.

    Marked as helpful
  • Louie•170
    @PaletteJack

    Nice, I like the styling of the background! Personally, I would add some padding around the card to give everything a little more space to breathe.

    So normally you'd want to use the :focus on the label tag to show which button was pressed last. However, the label tag is not focusable. The only thing I could suggest is adding a div around your input and adding focus to that rather than the label.

    Marked as helpful
  • Louie•170
    @PaletteJack

    That's awesome, I would say pretty good for your first project using flex! So in my experience, flex works really well at positioning things within a component (like a card or a navbar), but it's harder to get the elements how you want them for page layouts like this. What I think might help you out is to use grid. Grid makes these sectional layouts much easier and you can use it to clearly set columns and rows for content (then you can style the content within using flex). Here's a helpful video from fireship that I found useful: https://www.youtube.com/watch?v=uuOXPWCh-6o

    I had a lot of issues with getting the fonts right too. I ended up using font-weight: 900 for the "Barlow" font. From what i've read, there's some inconsistency between browsers and what font weights are available, so the browser will just grab the closest matching one. Tested on Brave, Firefox, Chrome, and Opera. It drove me crazy!

    For the colored underline under the "Learn More" parts, what i did for mine was wrap the anchor tag in a div called 'wrapper', then placed one more div right after the anchor tag. After that, I used position: relative; for the wrapper and position: absolute; on the div after the a tag. From there, I just set the background-color and width and height and used top + left to position it under LEARN MORE. This sets it so that it always positions itself relative to the parent tag (the wrapper). Also Z-index to make sure that the words showed up up front.

    But congrats on finishing the project! I look forward to seeing the next one

    Marked as helpful
  • Louie•170
    @PaletteJack

    That's good! I would say you're pretty close.

    So three things that I think would help you, you'll probably want to grab all the elements instead of one by one using querySelectorAll(). You already have them in the class .abut, so this should work for getting a list (array). document.querySelectorAll('.abut') This link should help you out if it's confusing: https://www.w3schools.com/jsref/met_document_queryselectorall.asp

    Also, I see that onClick you are adding this code: document.getElementById('myClick').style.backgroundColor = "#959eac" document.getElementById('myClick').style.color = "white"

    Instead of tapping into the style and adding the css that way, what you could do is put both of those styles into their own class, let's call it the .clicked class. then you toggle the class using classList.toggle('clicked'). Some more reading that would help you out: https://www.w3schools.com/howto/howto_js_toggle_class.asp

    Last thing is using the innerHTML property. when you select an element, you'll need a way to get the text contained inside of it. You can also use this to set the text in an element. for example: document.getElementById('myClick').innerHTML would return '4' https://www.w3schools.com/jsref/prop_html_innerhtml.asp

    I wish you luck! Hope to see the completed project soon!

    Marked as helpful