Skip to content
Submitted almost 3 years ago

3-column-preview-card-component using html-css

Luigi•240
@luigi-perone
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Advice are appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-Montano

    Hello Luigi!

    I suggest you load the fonts from the HTML and not from the CSS, this way they will load faster and therefore your website will have a better performance, keep in mind that the browser has to read the code to render it, and the first thing it reads is the HTML, for this reason. I'm going to leave you an example of how it would look from the HTML.

    <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=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap" rel="stylesheet">

    The above code ☝ goes inside the head tag.

    The rel="preconnect" attribute to a link informs the browser that your page intends to establish a connection to another domain and that you want the process to begin as soon as possible. The resources will load faster because the setup process is already complete when the browser requests them.

    Cheers!

    Marked as helpful
  • kounik•300
    @Valhalla-2

    first you have to add the font families from google fonts using <link> tag inside your HTML file, then you will be able to apply the fonts . Go to the style-guide.md file , that was given to you by frontend-mentor for this challange , and look for font section, there you will see the font's links , add them to your html file using <link> tag as i have mentioned above and you will be able specific fonts

    Marked as helpful
  • Mohd Gulam Ansari•210
    @gulamansari57181

    You can explicitly import the fonts

    1. Either in your css file with the help of @import

    2)Or inside your html file using <link> which is available on google fonts once you click on the link provided inside the styleguide.md file.

    Hope this help. Happy Coding !

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    👾Ciao Luigi, congratulations for your new solution!

    Answering your question:

    First of all you need to choose the font using Google Fonts https://fonts.google.com/ and import the code to drop on your CSS/HTML:

    font-family: 'Lexend Deca', sans-serif;

    There's two ways to import the font:

    1.Using the html and inserting it to the <head>

    <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=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap" rel="stylesheet">
</head>

    2.Using the CSS and adding to the first line of the CSS sheet:

    @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');

    👋 I hope this helps you and happy coding!

    Marked as helpful

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