- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heading with description, part 2</title>
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="subtle">
<section class="card">
<h1 class="card-title">
<span class="card-title-main">Muffin against flexboxes</span>
<span class="card-title-note">A coming-of-age story</span>
</h1>
<p>Over the course of his long career as a front-end web developer, Muffin has seen a lot of confusing solutions…</p>
</section>
<section class="card">
<h1 class="card-title">
<span class="card-title-main">Muffin loves flexboxes</span>
<span class="card-title-note">A success story</span>
</h1>
<p>It has been hard-going learning all of the ins and outs of flexboxes, but look at the new capabilities that Muffin has access to thanks to this “flexible” layout…</p>
</section>
</body>
</html>
CSS
.card {
margin-bottom: 20px;
line-height: 1.3;
}
.card-title {
display: flex;
align-items: flex-end;
margin-top: 0;
}
.card-title span {
border: 1px solid #999999;
background-color: #c8dcff;
}
.card-title-main {
flex-grow: 1;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Replace the text
Muffin loves flexboxeswithInstructor Muffin and the amazing flexbox, - and then configure flex items to overflow onto a new line for the
.card-titleblock. - Remove the frame and background color from the
.card-titlechild spans.
Comments