Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
11
P
Micha Huhn
@MichaHuhn

All solutions

  • Article preview component using Vue and Headless UI

    #accessibility#vue#sass/scss

    P
    Micha Huhn•200
    Submitted 10 months ago

    1 comment
  • Meet landing page using Vue

    #accessibility#sass/scss#vue#typescript

    P
    Micha Huhn•200
    Submitted 10 months ago

    I would like help with the hero section on desktop. It was really challenging to find a solution.

    • Why is the text-content element inside the hero section exactly 448.3px wide. What element/constraint is the width based on?
    • How did you create the hero section on desktop, do you have any tips?

    1 comment
  • Testimonials grid section using Vue

    #accessibility#vue#sass/scss

    P
    Micha Huhn•200
    Submitted 11 months ago

    1 comment
  • Four card feature section using Vue

    #accessibility#vue#sass/scss

    P
    Micha Huhn•200
    Submitted 11 months ago

    border-top creates those curved borders.

    How to create such straight borders like in the mockup?


    2 comments
  • Product preview card component using Vue

    #accessibility#vue#sass/scss

    P
    Micha Huhn•200
    Submitted 11 months ago

    1 comment
  • Recipe page using Vue

    #sass/scss#vue#accessibility

    P
    Micha Huhn•200
    Submitted 11 months ago

    1 comment
  • Social links profile using Vue

    #sass/scss#vue#accessibility

    P
    Micha Huhn•200
    Submitted 11 months ago

    I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.


    3 comments
  • Blog preview card using Vue

    #sass/scss#vue#accessibility

    P
    Micha Huhn•200
    Submitted 11 months ago

    I implemented the typography design system like this to reuse the presets given in the style guide:

    %typography-text-preset-1 {
      font-family: 'Figtree', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.5;
    }
    
    .blog-title {
      @extend %typography-text-preset-1;
    }
    

    Do you think that's a good approach or is there a better one?

    I'm using so called "SCSS placeholders".


    2 comments
  • QR code component using Vue

    #vue#sass/scss

    P
    Micha Huhn•200
    Submitted 11 months ago

    I didn't understand how to deal with the typography.

    I was able to use the design system for the colors and the spacing like so:

    html {
      --color-white: hsl(0deg 0% 100%);
      --color-slate-900: hsl(218deg 44% 22%);
      --color-slate-500: hsl(216deg 15% 48%);
      --color-slate-300: hsl(212deg 45% 89%);
    }
    
    html {
      --spacing-500: 2.5rem;
      --spacing-300: 1.5rem;
      --spacing-200: 1rem;
    }
    

    I just applied the typography related CSS declarations to the individual HTML elements like so:

    body {
      font-family: 'Outfit', sans-serif;
    }
    
    .heading {
      font-size: 1.375rem;
      line-height: 1.2;
    }
    
    p {
      font-size: 0.9375rem;
      line-height: 1.4;
      letter-spacing: 0.2px;  
    }
    

    Is it beneficial in this exercise to utilize a design system also for the typography? I don't know how to do that. How would you do it?

    In the provided style guide the typography is documented like so:

    Text Preset 1: Outfit Bold
    22px
    120% Line Height
    0px Letter Spacing
    
    Text Preset 2: Outfit Regular
    15px
    140% Line Height
    0.2px Letter Spacing
    

    1 comment
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