I need help in a project

hi, I started a training project and I think it’s easy but it is not, here are my problems:
I want to make this card like it’s in the photo below the code
1-how to make it completely responsive for 375px mobiles.
2-they give me another Raw photo just like the one in the photo and I don’t know how to assign that other one to my code for mobile 375px
3-Has my code worked well so far? Please tell me what the mistakes are
4-those tree numbers below the paragraph how to do that(in designs below)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <link rel="stylesheet" href="https://fonts.google.com/specimen/Lexend+Deca">

  <link rel="stylesheet" href="https://fonts.google.com/specimen/Inter">

 

  <title>Frontend Mentor | Stats preview card component</title>

  <!-- Feel free to remove these styles or customize in your own stylesheet 👍 -->

<style>

  body {

    background: hsl(233, 47%, 7%);

  }

  #container {

    border-radius: 5px 0 0 5px;

    width: 80vw;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    margin: 100px auto;

  }

  .card-content {

    background:hsl(244, 38%, 16%);

    width: 50vw;

    border-radius: 5px 0 0 5px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

   h2 {

    color: hsl(0, 0%, 100%);

    font-family: Inter;

    font-size: 35px;

    text-align: justify;

    margin: -50px 60px 0 0;

    font-weight: 700;

  }

   h2 span {

    color:  hsl(277, 64%, 61%);

  }

 .card-content p {

    margin: 40px 0 0 -120px;

    font-size: 15px;

    color: hsla(0, 0%, 100%, 0.75);

    text-align: justify;

  }

  img {

    width: 500px;

    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-135deg) saturate(600%) contrast(0.8);

    border-radius: 0 5px 5px 0;

  }

  .img-responsive {

    max-width: 100%;

    height: auto;

  }

   strong{

    font-size: 25px;

    color: hsl(0, 0%, 100%);

  }

</style>

</head>

<body>

  <div id="container">

    <div class="card-content">

    <h2>Get <span>insights</span> that help<br> your business grow.</h2>

      <p>Discoverer the benefits of data analytics and make <br>

        better decisions regarding revenue, costumer <br>

        experience, and overall efficiency</p>

      <div class="state">

          <p><strong>10K+</strong>COMPANIES

          <strong>314</strong> TEMPLATES  

          <strong>12M+</strong> QUERIES</p>  

      </div>

      </div>

        <img class="img-responsive"  src="images/image-header-desktop.jpg" alt="people speaking">

  </div>

   

</body>

</html>

these are the designs I have to create :
desktop;


mobile;

I just want to start by saying you requiring help with a practice project is not an emergency. We are not any more likely to help you just because you assign it some arbitrary importance. You should focus on asking for help with specific issues you have and not just finishing the project.


  1. Your first question is way too broad. One option some people find helpful is to work in reverse. Start with the mobile stacked layout and then work on the desktop layout last.

  2. You can use HTML or CSS to switch the image at a given resolution.

  3. Not sure what to say, you are getting there, you just need to keep working on it.

  4. I would start by giving them a container so you can stack the content.

Edit: Also, if you are really stuck, one option is to look at the preview site they provide. Learn to use the dev tools and inspect the page. That is how we often learn IRL by inspecting pages and taking notes. They do also provide source code you can look at but that is not going to give you the same learning experience as using the dev tools.


The project for reference:

1 Like

this is really heartbreaking, I love freecodecamp and I want to help people, and get helped, I’m sorry if I did anything wrong, I just hadn’t enough sleeping in these days.
thank you for your advice and your guides

1 Like

Don’t worry it’s not that bad. :slight_smile: I’m just letting you know that calling it an emergency can make it come off as “needy” which might make people less likely to want to help. Ask for help, but do it as politely as possible. Ask for help with specific issues and do not just say “help me finish this”.


I might suggest you simplify the problem first before focusing on the final look. Start by making a simple 50/50 card and make sure you understand how to switch it to/from a stacked layout. Think about what is needed for the placement of the two sides. If the element on the right has to be on the top of the stacked layout how would you do that?

Start with the main layout and work your way in, adding more complexity to the inner parts only after the outer part (i.e. the main layout) is done.

Also, just to be clear. Struggling is good, that is how we learn. Do not rush to finish it.

1 Like