Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
5

Lou

@LouMauriegeFrance110 points

I’m a mysterious individual who actually has time to fill out my bio. One thing’s for certain: I still love writing front-end code! PS : Sorry if my English is bad I'm still learning.

Latest solutions

  • Rating card using Angular component

    #angular#web-components

    Lou•110
    Submitted over 1 year ago

    0 comments
  • Todo app with drag and drop on the "All" tab - SCSS & TS & JQuery

    #sass/scss#typescript#jquery

    Lou•110
    Submitted over 1 year ago

    0 comments
  • Web app age calculator - HTML SCSS Javascript


    Lou•110
    Submitted almost 2 years ago

    0 comments
  • Component HTML CSS


    Lou•110
    Submitted almost 2 years ago

    0 comments

Latest comments

  • Ouss_Ach•810
    @OUSSAMAACHICHE
    Submitted almost 2 years ago

    Age calculator app

    1
    Lou•110
    @LouMauriege
    Posted almost 2 years ago

    Hi! You made a pretty good job yet.

    To calculate difference between two dates you can create two dates and subtract them.

    You create the variable date on script.js.line.16, you can create another on with the input values that the user gives you. Then you can subtract those dates, and you'll have the difference between those two dates in milliseconds. After that you just had to divide, this result with the number of milliseconds in one year and the result of it should be the years between your two dates. Then take the modulo of this division and divide it with the numbers of milliseconds in one month and so on till you get the years, month and days between your two dates.

    Hope it will help you :)

    Marked as helpful
  • Ruoo21•20
    @Ruoo21
    Submitted almost 2 years ago

    NFT Preview card with hover effects

    1
    Lou•110
    @LouMauriege
    Posted almost 2 years ago

    Hi,

    First of all congrats for the job you've accomplished ! :) Your classes are well labeled, your code is clean.

    The main problem I can observe is, you didn't use any "display: flex;" instead of it you're using some span tag where you shouldn't.

    But otherwise you put your image in "display: block;" which is a good trick to get ride of any strange comportment do to the "display: inline-block;".

    If you want to learn about flexbox this website is really good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Then to answer to your question, to add the hover effect, you can create another div inside your <div class="image"> which should have the same size and be on top of you image tag but without background color(transparent). Then when the <div class="image"> is hovered add a background to this new div. To get the eye do the same thing but instead of being same size just put it in the middle with an opacity of 0 and on hover opacity of 100.

    I hope it will help you, feel free to ask more questions if needed.

  • Jordan Bugglin•410
    @Jbugglin
    Submitted almost 2 years ago

    Nft preview card challenge using vanilla html5 and css3.

    1
    Lou•110
    @LouMauriege
    Posted almost 2 years ago

    Hi,

    Your code is really good, you did it !

    But I can see one thing witch, for me, could be improved. While hovering your equilibrium picture we can see the eye is half transparent, that because its parent has "opacity: 0.625;". To avoid this transparency on the eye, you could take off the "opacity: 0.625" and rather than editing the opacity of the block you could use a color witch is half transparent. To do this simply adds two numbers to the hex code of your color like so : #00FFFF is your color with an alpha of 100% and if you want 50% you just had to convert it in hex witch gives you 32 and so #00FFFF32 is your #00FFFF color with 50% opacity apply on it and your eye will be more visible.

    Hope it will help you !

    Marked as helpful
  • Jewel•270
    @khinyadanarhtoon14
    Submitted almost 2 years ago

    NFT-preview-card-component

    1
    Lou•110
    @LouMauriege
    Posted almost 2 years ago

    Hi,

    Your code is really good, you did it !

    But I can see one thing witch, for me, could be improved. While hovering your equilibrium picture we can see the eye is half transparent, that because its parent has "opacity: 0.5;". To avoid this transparency on the eye, you could take off the "opacity: 0.5" and rather than editing the opacity of the block you could use a color witch is half transparent. To do this simply adds two numbers to the hex code of your color like so : #00FFFF is your color with an alpha of 100% and if you want 50% you just had to convert it in hex witch gives you 32 and so #00FFFF32 is your #00FFFF color with 50% opacity apply on it and your eye will be more visible.

    Hope it will help you !

  • Ramez Gamel•40
    @samcoding90
    Submitted almost 2 years ago

    Responsive Nft-Card HTML&CSS

    1
    Lou•110
    @LouMauriege
    Posted almost 2 years ago

    Hi,

    Very clean HTML code ;)

    But you have a small gap below your equilibrium picture. This error makes your two bottom corners look awkward, and this gap became even more visible while hovering the picture.

    You can easily solve this issue by adding "display: block;" to your picture element.

    Hope it will help you !

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub