Skip to content
Submitted 6 months ago

Recipe Page using CSS Border-box

BobFisherman18•50
@BobFisherman18
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am starting to understand on how to use the web development tools in Google Chrome and Firefox. Learning and understanding the box model in CSS is a fundamental tool to designing websites.

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

One challenge is that I overcame is adjusting the proper width and height when it comes to mobile and desktop environments.

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

Specific areas I would like to work with is that I need to figure out how to implement the font family in CSS. Another thing is I need to adjust the colors of the words.

Community feedback

  • Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there!

    So, there are two ways to get the font: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.

    • First, go to style-guide.md and copy the font link on Google.
    • Then, on the top right, click on the blue button get font
    • Click the button get embed code
    • On the left, you can see the selected fonts and the weights they have, you can change that and select the ones you want, or leave it like it is and get all the weights.
    • On the right, select web, and there will appear two options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whichever you want, and then copy the text and paste it on your CSS body or classes that require the font.

    Here is an example:

    With <link>: In the <head> of your HTML:

    <head>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet">
</head>

    In the CSS (the selected elements are just an example): 

    h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}

    With @import: In your CSS:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap');

h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}
    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