Skip to content
Submitted about 2 years ago

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

Luigi•240
@luigi-perone
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Advice are appreciated.

Community feedback

  • Enmanuel Otero Montano•2,155
    @Enmanuel-Otero-MontanoPosted about 2 years ago

    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
    1
    Luigi•240
    @luigi-peronePosted about 2 years ago

    Thanks Enmanuel, now it works fine.

    happy coding 👋

    1
  • kounik•300
    @Valhalla-2Posted about 2 years ago

    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
    1
  • Mohd Gulam Ansari•210
    @gulamansari57181Posted about 2 years ago

    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
    1
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾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
    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