- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test: Mastering factors</title>
<link href="style.css" rel="stylesheet">
<link href="course.css" rel="stylesheet">
<link href="exam-2.css" rel="stylesheet">
<style>
.brick-layout {
display: flex !important;
}
.brick-1,
.brick-2,
.brick-3 {
flex-basis: 25px !important;
}
.brick-4 {
flex-basis: 200px !important;
}
.brick-5 {
flex-basis: 400px !important;
}
.brick-6 {
flex-basis: 200px !important;
}
</style>
</head>
<body class="exam">
<div class="brick-layout">
<div class="brick brick-1 color-aqua"></div>
<div class="brick brick-2 color-olive"></div>
<div class="brick brick-3 color-yellow"></div>
</div>
<div class="brick-layout">
<div class="brick brick-4 color-yellow"></div>
<div class="brick brick-5 color-olive"></div>
<div class="brick brick-6 color-aqua"></div>
</div>
</body>
</html>
CSS
.brick-layout {
display: flex;
box-sizing: content-box;
padding: 5px;
width: 300px;
}
.brick {
min-width: 0;
height: 100px;
}
.brick-1,
.brick-2,
.brick-3 {
flex-basis: 25px;
}
.brick-4 {
flex-basis: 200px;
}
.brick-5 {
flex-basis: 400px;
}
.brick-6 {
flex-basis: 200px;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.