Tell us what’s happening:
I’ve searched online for help adding classes to pre-existing elements. I believe this is how to add classes but could anybody help me to figure out if this is correct or if anybody can help me to figure out what is wrong?
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, no-divider">% Daily Value *</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>
<!-- 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;
}
.indent {
margin-left: 1em;
}
.daily-value p {
border-bottom: 1px solid #888989;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Learn Typography by Building a Nutrition Label - Step 48