Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
33

Yokke

@JexinteFrance620 points

"Celui qui ne progresse pas chaque jour recule de la même manière"

Latest solutions

  • Flexbox , Vuejs

    #vue

    Yokke•620
    Submitted almost 3 years ago

    0 comments
  • Flexbox , Grid and Vuejs !


    Yokke•620
    Submitted almost 3 years ago

    0 comments
  • Vuejs , Flexbox

    #vue

    Yokke•620
    Submitted about 3 years ago

    1 comment
  • Flexbox , Grid


    Yokke•620
    Submitted about 3 years ago

    0 comments
  • Flexbox , POSITION ABSOLUTE AND RELATIVE


    Yokke•620
    Submitted about 3 years ago

    0 comments
  • GRID + VUEJS


    Yokke•620
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • aymanelamin•250
    @aymanelamin
    Submitted over 1 year ago

    my solution for base-apparel-coming-soon-page .

    1
    Yokke•620
    @Jexinte
    Posted over 1 year ago

    Hello @aymanelamin,

    It's a good idea to do a left container for the text part and you should done the same for the banner on the right allowing you to use the display flex on the body and do crazy things : Flexbox

    For the images as they are inline elements you should put them on a div apart the main one for the left container. For example you have an <img> tag with the id"logo" put it in a div. Or you have another the solution but I can't say if it's good to do it I hope someone that have more experienced will answer to it is to change the display from inline to block then you won't have to put it on a div.

    The banner is not responsive from tablet size to desktop.

    They're is some other things but I'm not well experienced to comment it.

    Other than that it's a good job.

    PS: I think that for the img tag you can even use the align-self property when flexbox is use to do good things with it.

  • Attrams•130
    @Attrams
    Submitted almost 3 years ago

    Responsive site built with FlexBox

    1
    Yokke•620
    @Jexinte
    Posted almost 3 years ago

    Hello @Attrams ,

    Good job !

    To reduce the space between the name and status you can use the gap property , more details here :

    https://developer.mozilla.org/en-US/docs/Web/CSS/gap

    In hope it helps !

    Marked as helpful
  • Roland•30
    @gonereng
    Submitted almost 3 years ago

    Responsive product card made with tailwindcdd

    #tailwind-css
    1
    Yokke•620
    @Jexinte
    Posted almost 3 years ago

    Hey @gonereng ,

    Good job.

    Sometimes you need to specifie a fix height and width towards the design. Imagine not using fix values ? Your work is gonna strech again and again and it's not great especially on desktop.

    I think you've done a good appreciation of it and if sometimes you need more questions about how approach the design just ask ! We don't have all answers so it's good .

    Keep it up !

  • Marija Havaic•150
    @marijahavaic
    Submitted almost 3 years ago

    Order summary card solution

    4
    Yokke•620
    @Jexinte
    Posted almost 3 years ago

    Hello @marijahavaic ,

    There is convention use with SASS Pre-processor called BEM , more details here :

    https://en.bem.info/methodology/

    In hope it helps !

    Marked as helpful
  • Maria•130
    @maaghia
    Submitted about 3 years ago

    fylo-data-storage-component

    4
    Yokke•620
    @Jexinte
    Posted about 3 years ago

    Hey @maaghia,

    To do style the progress bar you can set a parent div which contains ::after pseudo elements it's very useful to style those kind of things.

    The parent div will be set on relative position and ::after on absolute position then you can style it like the design.

    The white circle is very easy to do I'll let you think about it you've done a good job I'm sure you will find the solution for it .

    More details here :

    :: AFTER https://developer.mozilla.org/en-US/docs/Web/CSS/::after

    POSITION ABSOLUTE , RELATIVE https://developer.mozilla.org/en-US/docs/Web/CSS/position

    In hope it helps !

  • Oliver Tejeda•350
    @ov3rst
    Submitted about 3 years ago

    FAQ accordion card

    1
    Yokke•620
    @Jexinte
    Posted about 3 years ago

    Hey @ov3rst,

    Good job .

    A tips that someone give me few weeks before you can use native html tag call <details> and <summary> that give you the naturel effect that the challenge ask. Then on css you can use his selectors to do what you need when a question is open.

    More details here :

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

    In hope it helps !

    Marked as helpful
View more comments
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

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