Skip to content
OverviewSolutions
26
Comments
6
P
BigDaddyFlo
@FloRiouffreyt

All comments

  • Farrel Priambodo•30
    @FarrelPSubmitted over 1 year ago

    Working on this challenges makes me want to learn more about CSS Variables, such as on how to make and use global scoped variable and etc. Other than w3schools, are there any good resource to learn this? Thank you

    3 Column Preview Card Component

    2
    BigDaddyFlo•570
    @FloRiouffreytPosted over 1 year ago

    Take a look at Kevin Powell's channel on Youtube, this guy is a super good tutorial maker, has plenty of super interesting videos, and A LOT of things to learn! https://www.youtube.com/@KevinPowell/videos CSS Custom Properties are really powerful and useful, for example on multi-theme pages. Check out KP's videos on the subject, and the rest too, it goes from super simple to mind blowingly clever. Hope this helps! And good job on the challenge, by the way :)

    Marked as helpful
    0
  • BigDaddyFlo•570
    @FloRiouffreytPosted over 1 year ago

    Hi @matiasluduena23, just remove the first "/" in front of the URL. This one gets you back to the root of your github folder, and that is not what you want. You want to stay in the folder containing the index.html file, so simply write "url("images/image-product-desktop.jpg")", I believe that should do it. https://www.w3schools.com/html/html_filepaths.asp Also try to pay attention in HTML to the order of your headings (h1, h2 ...). It is not good practice to have any other "hX" before the "h1" (in your case, "Perfume" is h4, and "Gabrielle eau de parfum" is h1). Hope this helps! EDIT: @Titodelux is right, you actually need to go back one folder, so "../images/[...]", my bad

    Marked as helpful
    2
  • Darren-Coder34•350
    @Darren-Code34Submitted over 1 year ago

    This project allows me to work with the Date object. The tricky part is to calculate the exact age. If you have a tool or the best way to do that, please help me.

    Age calculator

    2
    BigDaddyFlo•570
    @FloRiouffreytPosted over 1 year ago

    Hi! It's tough to work on dates and time with vanilla JS, good work! Take a look at the Day JS library, great for manipulating time! https://day.js.org/docs/en/installation/installation. FrontEndMentor wants me to write a longer feedback to validate the post, so here are a few useless words... but still, Days JS is awesome

    Marked as helpful
    0
  • Kay•40
    @KayGeorgesonSubmitted over 1 year ago

    Overall I didn't find this project too difficult, but weirdly, out of everything, the one thing that gave me a slight-headache, was trying to figure out how to turn the social media icons from green to white on hover.

    I thought it would work with simple CSS, but nope, that apparently won't work in Firefox or Chrome, so I had to do what might be considered to be quite 'hacky' and have more than one set of icons in different colours and use z-index to hide the green on hover.

    This challenge looks quite basic to look at, but definitely quite a challenge for a beginner.

    Sunnyside Agency Landing Page with React

    2
    BigDaddyFlo•570
    @FloRiouffreytPosted over 1 year ago

    It's definitely possible to do the color change with CSS, by using directly the <svg> and not an <img> tag. Feel free to check to way I did it, it works perfectly fine.

    Import the <svg>, add the "fill" attribute with the default green color on it, and then in CSS, locate your svg and create the hover rule.

    It's even better to put the <svg> inside an element which will be the one pointed by the hover. If you hover an SVG, every part that is not filled will not be considered "hovered" (like the hollow part of the F of Facebook for example".

    If you put it inside an <ul> then each <svg> in <li>, give a common class to all your <li>, and in CSS, simply add " .your-li-class:hover > svg { fill:#yourcolor }. Hope this helps!

    Marked as helpful
    0
  • BigDaddyFlo•570
    @FloRiouffreytPosted over 1 year ago

    Great job! A bit of feedback, regarding date verification: 31st July for example returns an error, but not 31st August which is correct. Also, you can have a 29th February on non-leap years, and actually a 30th February every year... If you manage to get around that, it will be pretty much flawless! Hope this helps

    Marked as helpful
    0
  • BigDaddyFlo•570
    @FloRiouffreytPosted almost 2 years ago

    Hi there! Noob answer, I'm not an expert but here are my 2 cents: use a CSS "width: max-content;" on your <h1>Equilibrium #3429</h1>, this way the hover will not happen when you're not directly on the text. I also used an ::after pseudo-element for the hover on the image, don't know if it's a better practice... The rest looks really good to me, good job (but again, I'm no expert) Hope this helps!

    Marked as helpful
    0