Skip to content
Submitted 4 months ago

Responsive page using google fonts

Megha S Patil•100
@meghaspatil1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proude of to post web in live page got to know in detail. web live using github pages, and how to make page responsive using google fonts.

What challenges did you encounter, and how did you overcome them?

challenge was not able to fix image in box, it took a lot time to fix, but lot of fresh study i got the changes in px , height, weight, border-radius , i did it.

What specific areas of your project would you like help with?

i need help in css stylesheet,some more responsive page, and need to know any more better i would done to make it QR-component more good.

Community feedback

  • py-code314•340
    @py-code314Posted 3 months ago

    Hi,

    A few suggestions from my end:

    1. Card is centered horizontally but not vertically. You can use height property and display: flexto do that
    2. In HTML, for <img> alt attribute you might wanna add some description
    3. In CSS, for body selector you have two values for font-size. font-size: 700 overrides font-size: 400 and that's why the text in .card_desp is bold
    4. I don't think you have to nest <img> inside .card_banner because there's only one <img> element in whole HTML
    5. Text in .card_title supposed to have some text-shadow

    Feel free to ask for any help in 'help' channel or here. All the best!

    0
  • eros77sc•160
    @eros77scPosted 4 months ago

    Oi, Megha!

    Acabei de finalizar este desafio e vou te dizer... tentar centralizar esse card foi bem desafiante! Você pode tentar usar Flexbox para isso, eu usei assim:

    • Envolvi o <div> do card com um <main>, que também já auxilia a escrever um HTML semântico (lá naquele último <div class="attribution"> esse div pode ser trocado por footer pela mesma função), e no CSS fiz assim: html, body { background-color: hsl(212, 45%, 89%); height: 100%; margin: 0; display: flex; flex-direction: column; }

      main { flex: 1; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
      }

    Isso traz o desafio de alinhar esse rodapé, o que também se faz com flexbox! Boa jornada e espero que você tenha ficado muito feliz por ter construído uma página, celebremos!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord