Submitted about 1 month ago

Responsive page using google fonts

Megha S Patil• 70

@meghaspatil1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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• 290

@py-code314

Posted about 1 month ago

Hi,

A few suggestions from my end:

Card is centered horizontally but not vertically. You can use height property and display: flexto do that
In HTML, for <img> alt attribute you might wanna add some description
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
I don't think you have to nest <img> inside .card_banner because there's only one <img> element in whole HTML
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!

eros77sc• 100

@eros77sc

Posted about 1 month 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!

Please log in to post a comment

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