- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Column Markup: The column-gap Property</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<p>Muffin woke on up in his cat bed very early that morning. The day promised to be eventful. Due to this, he decided to work out on his chin-up bar. The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV. Having regained his strength, the cat went about his usual business of making a mess. However, he was caught in the act.</p>
<p>After lunch, which, as usual, consisted of dry food and a piece of chicken that he had hidden away the day before, Muffin got down to working on his Cat Energy website. He had to figure out how to make it adaptable and to solve a strange bug in Chrome, which only manifested itself at a certain screen width. His paws were itching to simply delete the piece of code with the bug, but in the end he was able to fix the problem.</p>
<p>In the late afternoon, there was a great opportunity to snack on some sour cream, but this time the cat was caught at the crime scene. Having decided that he had accomplished enough for today, Muffin curled up in bed with a clear conscience.</p>
</article>
</body>
</html>
CSS
body {
padding: 10px;
background: url("bokeh.jpg") no-repeat 50% 0;
color: #333333;
font-size: 14px;
font-family: "Arial", sans-serif;
}
article {
padding: 20px;
background-color: rgba(240, 240, 240, 0.85);
column-count: 2;
}
p {
margin: 0;
text-align: justify;
text-indent: 22px;
line-height: 22px;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the column spacing to
25pxfor thearticleblock, - then increase it to
50px.
Comments