Skip to content
Submitted about 2 years ago

Stats Preview & Card Component

MIHIR KUMAR•70
@MIHI-bot
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was Stats Preview and Card Component.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @MIHI-bot, congratulations for your new solution!

    You've missed the font , here's two ways to import it:

    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');

    To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

    Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @MIHI-bot,

    I'm not sure if it's just me but I don't see any content I'm only seeing the image.

    1
    MIHIR KUMAR•70
    @MIHI-botPosted about 2 years ago

    @hyrongennike Bruh, try resizing your browser... I am checking my css.

    0
    MIHIR KUMAR•70
    @MIHI-botPosted about 2 years ago

    @hyrongennike Yes, I have made it appear on screens having a width of less than 1500px.

    0
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    @MIHI-bot why? is there a reason your limiting the visibility?

    0
    MIHIR KUMAR•70
    @MIHI-botPosted about 2 years ago

    @hyrongennike well, no. there was no reason to do so! tell me can I still fix it ??

    0
    Hyron•5,870
    @hyrongennikePosted about 2 years ago

    @MIHI-bot you're adding all your CSS in a media see example below.

    @media (max-width: 1500px) {
p.heading {
    color: aliceblue;
    font-size: 1.5em;
    margin: 5px 5px 20px 5px;
}
}

    This means any CSS rules within this media query will not be applied to elements on screen above 1500px. All the code needs to be outside that 1500px media query you can then write a media query for mobile if something is not displaying correctly.

    Marked as helpful
    1

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