Learn Typography by Building a Nutrition Label - Step 44

rimfattimnan · April 22, 2023, 2:48pm

Tell us what’s happening: please where did i get it rong
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span><p>Saturated Fat 1g<span class="bold">5%</span></p><span> 8g</span> 
      <p>Saturated Fat 1g<span class="bold">5%</span></p>
      <span class="bold">10%</span></p>
    </div>

<!-- User Editable Region -->

  </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 OPR/97.0.0.0

Challenge: Learn Typography by Building a Nutrition Label - Step 44

Link to the challenge:

DobarBREND · April 22, 2023, 2:53pm

Delete the first and the third code line
In the second code line add a blank space after the text Saturated Fat 1g

rimfattimnan · April 22, 2023, 9:34pm

i try it but stiil is not working

Cody_Biggs · April 22, 2023, 9:35pm

What does your new code look like? You can reply and select the format button that looks like </>. Please paste your new code between the lines it gives you

rimfattimnan · April 22, 2023, 9:41pm

Total Fat

Saturated Fat 1g5%

Cody_Biggs · April 22, 2023, 9:42pm

We need to see your actual code. Not just the text

rimfattimnan · April 22, 2023, 9:47pm

% Daily Value *

Total Fat

Saturated Fat 1g5%

Cody_Biggs · April 22, 2023, 9:48pm

That is not your code. I just realized that we are talking on two different posts. You dont need two posts…Lets continue this talk on the other post, because that one actually shows the code that works.

rimfattimnan · April 22, 2023, 10:00pm

 <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span>
      <p>Saturated Fat 1g<span class="bold">5%</span></p>
    </div>

Cody_Biggs · April 22, 2023, 10:04pm

In your other post I made the comment to try this challenge on another browser because your code did lass for me. Have you tried that?

rimfattimnan · April 22, 2023, 9:39pm

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span>
      <p>Saturated Fat 1g<span class="bold">5%</span></p>
    </div>

<!-- User Editable Region -->

  </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 OPR/97.0.0.0

Challenge: Learn Typography by Building a Nutrition Label - Step 44

Link to the challenge:

Cody_Biggs · April 22, 2023, 9:41pm

What errors are you getting? I copied and pasted your code and the challenge passes for me

rimfattimnan · April 22, 2023, 9:44pm

Test

Sorry, your code does not pass. Don’t give up.

Hint

You should create a new p element below your element with the Total Fat text.

Cody_Biggs · April 22, 2023, 9:47pm

Can you try this on another browser and see if that works

rimfattimnan · April 23, 2023, 2:03pm

is still not working o…h

DobarBREND · April 23, 2023, 2:29pm

Post your code here again.

rimfattimnan · April 24, 2023, 4:39pm

type or pas<div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <p class="no-divider ">Potassium 236mg <span>6%</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
    </div>te code here

rimfattimnan · April 24, 2023, 5:22pm

please i need help am stalk for 2days here

Cody_Biggs · April 24, 2023, 5:30pm

rimfattimnan:

type or pas<div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <p class="no-divider ">Potassium 236mg <span>6%</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
    </div>te code here

Get rid of the “type or pas” at the top, and the “te code here” at the bottom. After that you need to get rid of the empty div

That doesnt serve any purpose in this challenge

system · October 24, 2023, 5:30am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.